In Trinidad there is an ExtendedRenderKitService interface, which allows you to add JavaScript to be rendered during the following request, like:
ExtendedRenderKitService service =
Service.getRenderKitService(facesContext,
ExtendedRenderKitService.class);
service.addScript(facesContext, "alert('hello Trinidad');");
Once the rendering is complete, you will notice a simple alert() in your browser window.Having this feature in mind, you can “call” your custom JavaScript from the server. Well, the reality is that the implementation of the interfaces (the Trinidad renderkit) adds your JavaScript call to the (ajax) response. When processing a PPR request, the XHR response will look like:
<?xml version="1.0" ?>
<?Tr-XHR-Response-Type ?>
<content action="/app/faces/ajax.xhtml">
...
<script><![CDATA[alert('hello Trinidad');]]></script>
</content>
As you see the JS is added to the very end of the response and the browser simple evaluates the added JavaScript. This ExtendedRenderKitService feature offers you the possibility to easily integrate 3rd party JavaScript libraries, such as Dojo Toolkit.Imagine that your application needs to give feedback, when you created/deleted something (like a user). Using the JavaScript alert() function is fine, but well, that really doesn’t look nice! Dojo has a great Dialog component to display a notification like “User ABC has been created!”.
On the server you need to do something like:
...
extendedRenderKitService.addScript(context,
"showDialog('" +
newUser.getSecondname() + ", "+
newUser.getFirstname() +
"');");
...
The required showDialog(…) JavaScript function could look like:
function showDialog(user)
{
var dialog = new dijit.Dialog(
{id:"dialog1", title: "New User created!"});
var dialogContent =
"Successfully created the user: \"" + user + "\"";
dialog.setContent(dialogContent);
dialog.show();
}
Once the response is rendered completely, you’ll notice something like:

This way enables an easy integration of nice 3rd party JavaScript. Today I updated FacesGoodies (in SVN only) to reflect this integration.
Have fun!
8 responses so far ↓
steve // February 16, 2008 at 4:38 pm |
Great article, Matthias. I struggle with creating facelet components that have some javascript parts. In particular, the binding between the script and the elements it controls. Can you suggest a starting point to learn how this is accomplished in Trinidad?
matthiaswessendorf // February 16, 2008 at 4:59 pm |
After this
http://www.ajaxworld.com/general/sessiondetail0308.htm?id=48
I will post some more *hints*
-Matthias
andreas // February 20, 2008 at 8:41 am |
Nice feature matthias. How can i use it in richfaces?
matthiaswessendorf // February 20, 2008 at 8:45 am |
Don’t know if JBoss’ RichFaces has a similar API.
elmar // May 5, 2008 at 2:22 pm |
the “addScript” method is indeed a really useful feature! can`t imagine how to live without it…
is there also a api to do this the other way round – to submit a ppr via javascript ? is this the TrPage._autoSubmit function ?
matthiaswessendorf // July 2, 2008 at 7:02 am |
Elmar,
we have APIs for that:
-http://myfaces.apache.org/trinidad/devguide/ppr.html
(see Javascript APIs for PPR)
or see my presentation:
-http://www.slideshare.net/mwessendorf/ajax-world-east-2008
-Matthias
Carlos Rico // October 7, 2008 at 11:32 am |
Is it possible to use trinidad without PPR? and Which is the difference between jps and jpsx whit trinidad?
Carlos RIco // October 7, 2008 at 10:16 pm |
Pardon me.
.jsp and .jspx
Thanks.