 | 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 Apache MyFaces Trinidad project, donated to the Apache Software Foundation by Oracle in 2006, offers you a pretty large JSF component library. After graduating from the Apache Incubator-the entry point for new projects at Apache-the Trinidad team became part of the large Apache MyFaces community. Since February 2007 the project has been an official Apache MyFaces subproject.
Trinidad - JSF components and more
Trinidad is not only a JSF library that contains over 100 Ajax-based components-it also provides tools and various framework features, which are used by other JSF libraries such as Oracle ADF Faces Rich Client. Some of the additional offerings are:
- CSS Skinning Framework
- Ajax API (client-side and server-side)
- Dialog support
- Maven 2 plugins
- Testing framework
The library offers support for both major JSF standards: JSF 1.1 and JSF 1.2. You can find the latest download of all Trinidad versions (including a demo application) on the Trinidad website. There is also an online demo of all components.
Getting started with Trinidad - A hello world example
Apache MyFaces Trinidad supports multiple view technologies, such as JSP(X) or Facelets. The examples in this article are written with the Facelets syntax. The best way to introduce a new component set is to show a canonical "Hello World" example:
<tr:document xmlns:tr="http://myfaces.apache.org/trinidad" title="Hello World"...>
<:facet name="metaContainer">
<script src="myOwn.js"/>
...
</f:facet>
...
<tr:outputText value="Hello Apache Trinidad!"/>
...
<tr:inputText label="Enter your name" value="#{bean.name}" />
...
</tr:document>
The root component in this example is the <tr:document> component, which abstracts from the HTML markup. Internally the component renders the <html>, <body>, and <head> elements for you. You specify the actual page title using the title attribute of the component. Through a facet, called metaContainer, it is possible to integrate 3rd party JavaScript libraries, such as the Dojo Toolkit, or even custom JavaScript code. The metaContainer facet will be inserted into the <head> section of the rendered page.
It is important to note that the <tr:document> component also sends down the CSS and JavaScript resources, which are needed by the Trinidad library. You can customize the CSS that's used by the components. This will be be discussed when we introduce the CSS Skinning Framework feature in a later article.
Advanced components
Trinidad offers many components that are not part of the regular JSF standard, such as the <> and a pageable table. It also provides richer input components like <tr:inputDate>, <tr:selectManyShuttle> and <tr:inputNumberSpinbox> (shown in figure 1).
Figure 1. The inputNumberSpinbox component
Here's the source code for the spinbox example:
<tr:inputNumberSpinbox
label="Number: "
value="#{bean.numberValue}"
minimum="1000"
maximum="5000" />
Page:
1
2 Resources
Matthias Wessendorf is a software developer at Oracle. He currently works on ADF Faces, which is an Ajax-based JSF component suite. Matthias also contributes to the open source community, mainly Apache MyFaces and Apache Trinidad. Before joining Oracle, he worked as a CMS developer at pironet, where he was building a next-generation CMS using UI technologies like XUL and Ajax. | 
