JSF Central - Trinidad in Action - Part 1: An introduction
JSF Central

 Articles & Books 
Trinidad in Action
Trinidad in Action - Part 1: An introduction
by Matthias Wessendorf
03 Nov 2008 2:45 EDT

This is the first in a series of articles by Matthias Wessendorf about the Apache MyFaces Trinidad JSF component suite.

The component is similar to a regular <h:inputText> component, but it is specialized for number values. The users can increase or decrease the value by clicking on the arrow icons. JavaScript events like mouseDown are honored as well. This means that the user can keep the mouse button pressed while changing the component value. You specify the range of the number input with the minimum and maximum attributes.

Another interesting component, shown in figure 2, is the <tr:shuttle>component, which allows the creation of an advanced selection. The left side of the component contains values. The links in the middle allow you to select some or all of them, and shuttle them over to the right side. You can also shuttle them back from the right to the left side if you decide you want to deselect them. The values on the right side are submitted back to the server.

  Figure 2. The shuttle component
Figure 2. The shuttle component

Here's the source code for the shuttle component:

<tr:selectManyShuttle value="#{bean.shuttleValue}"> <f:selectItem ... /> <tr:selectItem ... /> </tr:selectManyShuttle>

The available items are composed by using the standard <f:selectItem>>, or the Trinidad <tr:selectItem>> tag.

Ajax for free

All Trinidad components are Ajax-enabled, which means you get Ajax functionality almost for free. The components support Ajax by three different attributes:
  • autoSubmit
  • partialSubmit
  • partialTriggers

The autoSubmit attribute is available on all components that are editable, such as <tr:inputText> or <tr:selectOneRadio>. When you set this attribute to true, the component generates an Ajax postback to the server. For instance, when you edit a <tr:inputText> and tab out, the "change event" triggers the Ajax postback to be submitted back to the server. The partialSubmit works in a similar way, but it is only supported on components that implement the ActionSource interfaces, such as the <tr:commandButton>. This means that when you click a button that has partialSubmit="true", an Ajax postback is submitted. The partialTriggers attribute acts as a listener. For example, if you want to re-render a component after an Ajax postback, you declare it with the partialTriggers attribute. This little example demonstrates the Ajax postback and an update of another component, using partialTriggers: <tr:selectOneRadio value="#{partialBean.selectOne}" autoSubmit="true" id="select1"> <tr:selectItem label="Germany" value="Berlin"/> <tr:selectItem label="USA" value="Washington DC"/> </tr:selectOneRadio> <tr:outputText id="out" value="#{partialBean.selectOne}" partialTriggers="select1"/>

When the user clicks an item of the <tr:selectOneRadio> component, it causes an Ajax postback. The <tr:outputText> component is listening to Ajax postbacks submitted by a component with the id "select1," which is defined by the partialTriggers attribute. After the Ajax postback has been processed, the Trinidad client-side engine will replace the HTML element with the id "out."

As you can see, with Trinidad it is fairly easy to integrate Ajax into your application! If you need more control, Trinidad even has a lower-level API for doing Ajax, but that will be explained in a later article of this series.

Trinidad vs. standard JSF

As you may have noticed, Trinidad offers some components that are very similar to the ones provided by the JSF specification, such as <tr:inputText>. Usually it is better to use the Trinidad components instead of the standard ones, since they offer more functionality. For instance, <tr:inputText> has a label attribute which eliminates the need to use <h:outputLabel>> with <h:inputText>>. <tr:inputText> also has a secret attribute that controls whether the component should render as a password input or not.

In addition, the <tr:form> component does not implement the JSF NamingContainer interface, like <h:form> does. Therefore the Trinidad form component doesn't render IDs like "formId:inputId". Another big improvement is the integrated Ajax facility. The Trinidad website has more information on how Trinidad differs from the JSF specification. However, it is important to note that Trinidad components can be mixed with components offered by the JSF standard.

What's next?

Trinidad not only offers a large set of JSF components, it also has nice framework features. For instance Trinidad has an Ajax API, which contains functions for the client-side (JavaScript utilities) and helpers for the server-side (regular Java) as well. Trinidad also has a nice Dialog framework that contains a scope that is shorter than a session, but larger than a request. And last but not least, it has the CSS Skinning framework to customize the look-and-feel of the Trinidad components. All of these facilities and some more advanced components, like the <tr:tree> component, will be explained in this new series of Trinidad articles, on JSFCentral.com.


Trinidad is a stable and rich component set that offers a lot of goodies to speed up development of your project. If this all sounds interesting and you want to learn more about Trinidad today, check out the Trinidad website. There is also an open source kickstart application out there, "FacesGoodies", that combines Trinidad with a bunch of other technologies, such as Facelets, Dojo, or the Spring Framework.


RSS feed(all feeds)

The Editor's Desk
Inside Facelets
In the Trenches

Site version 1.83  Report web site problems

Copyright (C) 2003-2015 Virtua, Inc. All Rights Reserved. Java, JavaServer Faces, and all Java-based marks are trademarks or registered trademarks of Oracle Corporation. in the United States and other countries. Virtua, Inc. is independent of Oracle Corporation. All other trademarks are the sole property of their respective owners.