Using Dojo and Apache Trinidad

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><!&#91;CDATA&#91;alert('hello Trinidad');&#93;&#93;></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:

dojodialog.png

This way enables an easy integration of nice 3rd party JavaScript. Today I updated FacesGoodies (in SVN only) to reflect this integration.

Have fun!

Howdy!

Posted in ajax, apache, dojo, javascript, jsf, myfaces, trinidad, web²
9 comments on “Using Dojo and Apache Trinidad
  1. steve says:

    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?

  2. matthiaswessendorf says:

    After this

    http://www.ajaxworld.com/general/sessiondetail0308.htm?id=48

    I will post some more *hints*😉

    -Matthias

  3. andreas says:

    Nice feature matthias. How can i use it in richfaces?

  4. matthiaswessendorf says:

    Don’t know if JBoss’ RichFaces has a similar API.

  5. elmar says:

    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 ?

  6. matthiaswessendorf says:

    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

  7. Carlos Rico says:

    Is it possible to use trinidad without PPR? and Which is the difference between jps and jpsx whit trinidad?

  8. Carlos RIco says:

    Pardon me.

    .jsp and .jspx

    Thanks.

  9. elmar says:

    thx for your response Matthias..

    even if my response now is a little late ..😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: