Apache Myfaces Trinidad with Eclipse

The JSF standard implementations (Mojarra or Apache MyFaces) provide a set of components. Apache MyFaces Trinidad provides extended components via the MyFaces project.

To use Apache MyFaces Trinidad you need:

The standard JSF libraries
Apache MyFaces Trinidad libraries
The right settings in web.xml, faces-config.xml
An additional file "trinidad-config.xml" which contains some Trinidad specific settings.

Tip

You find nice examples in the Trindad example war files which can be downloaded from http://myfaces.apache.org/trinidad/download.html. You can also use these examples to check the necessary settings in web.xml, faces-config.xml and trinidad-config.xml

2. Example JSF application with Apache MyFaces Trinidad

The following is an explanation on how to create a simple JSF application with Apache MyFaces Trinidad. For a general introduction of JSF with Eclipse please see JSF - JavaServer Faces with Eclipse Tutorial .

2.1. Installation

To use the components from Apache MyFaces Trinidad you need in addition to the installed components.

The standard JSF library - See JSF introduction for instruction on how to install and use standard JSF.
The trinidad distribution - from http://myfaces.apache.org/trinidad/download.html

Extract the libraries and add them to your available libraries for JSF. Use the name "Trinidad" The following two jar must be added. The flag "Is JSF implementation" should not be set.

trinidad-api-YOUR_VERSION_NUMBER.jar
trinidad-impl-YOUR_VERSION_NUMBER.jar

See JSF introduction for details on how to add a JSF library to Eclipsed.

2.2. Create Project

Create in Eclipse the dynamic web project with the name "de.vogella.jsf.trinidad.first". Make sure you select the JavaServer Faces v1.2 Project configuration. Add the Trinidad library to the project. Again see JSF introduction for details on how to do this.

2.3. Configuration

You need trinidad-config.xml configured in your WEB-INF directory.

				
<?xml version="1.0"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<!-- Enable debug output -->
  <debug-output>true</debug-output>
  <accessibility-mode>default</accessibility-mode>
  <skin-family>simple</skin-family>   
</trinidad-config>

You need to maintain the renderer kit in your faces-config.xml.

				
<?xml version="1.0" encoding="UTF-8"?>

<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
	version="1.2">

	<application>
		<default-render-kit-id>
			org.apache.myfaces.trinidad.core
		</default-render-kit-id>
	</application>


</faces-config>

Adjust the web.xml to the following

				
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>de.vogella.jsf.trinidad.first</display-name>
	<welcome-file-list>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.htm</welcome-file>
		<welcome-file>default.jsp</welcome-file>
	</welcome-file-list>


	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>/faces/*</url-pattern>
		<url-pattern>*.jsf</url-pattern>
	</servlet-mapping>
 <context-param>
    <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
    <param-value>client</param-value>
  </context-param>
  

  <!-- Trinidad also supports an optimized strategy for caching some
   view state at an application level, which significantly improves
   scalability.  However, it makes it harder to develop (updates to
   pages will not be noticed until the server is restarted), and in
   some rare cases cannot be used for some pages (see Trinidad
   documentation for more information) -->
  <context-param>
    <param-name>org.apache.myfaces.trinidad.USE_APPLICATION_VIEW_CACHE</param-name>
    <param-value>false</param-value>
  </context-param>

  <!-- If this parameter is enabled, Trinidad will automatically
       check the modification date of your JSPs, and discard saved
       state when they change;  this makes development easier,
       but adds overhead that should be avoided when your application
       is deployed -->
  <context-param>
    <param-name>org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION</param-name>
    <param-value>true</param-value>
  </context-param>

  <!-- Enables Change Persistence at a session scope.  By default,
       Change Persistence is entirely disabled. The ChangeManager is
       an API, which can persist component modifications (like,
       is a showDetail or tree expanded or collapsed). For providing
       a custom Change Persistence implementation inherit from the 
       Trinidad API's ChangeManager class. As the value you have 
       to use the fullqualified class name. -->
  <context-param>
    <param-name>org.apache.myfaces.trinidad.CHANGE_PERSISTENCE</param-name>
    <param-value>session</param-value>
  </context-param>

  <filter>
    <filter-name>trinidad</filter-name>
    <filter-class>org.apache.myfaces.trinidad.webapp.TrinidadFilter</filter-class>
  </filter>

  <filter-mapping>
    <filter-name>trinidad</filter-name>
    <servlet-name>faces</servlet-name>
  </filter-mapping>

  <!-- Faces Servlet -->
  <servlet>
    <servlet-name>faces</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
  </servlet>
  
  <!-- resource loader servlet -->
  <servlet>
    <servlet-name>resources</servlet-name>
    <servlet-class>org.apache.myfaces.trinidad.webapp.ResourceServlet</servlet-class>
  </servlet>
  
  <servlet-mapping>
    <servlet-name>resources</servlet-name>
    <url-pattern>/adf/*</url-pattern>
  </servlet-mapping>
  


</web-app>

2.4. Domain Model

Create the package de.vogella.jsf.trinidad.first and the two following classes. We will later use these classes for an example to show the Trinidad table component.

				
package de.vogella.jsf.trinidad.first;

public class Person {
	private String firstName;
	private String lastName;
	
	public Person(String firstName, String lastName){
		this.firstName= firstName;
		this.lastName = lastName; 
	}
	
	public String getFirstName() {
		return firstName;
	}
	public void setFirstName(String firstName) {
		this.firstName = firstName;
	}
	public String getLastName() {
		return lastName;
	}
	public void setLastName(String lastName) {
		this.lastName = lastName;
	}
	
}

				
package de.vogella.jsf.trinidad.first;

import java.util.ArrayList;
import java.util.List;

public class TableValues {
	private List<Person> persons;

	public TableValues() {
		// Imagine a very complex DB access here
		persons = new ArrayList<Person>();
		Person p = new Person("Lars", "Vogel");
		persons.add(p);
		p = new Person("Jim", "Knopf");
		persons.add(p);
		p = new Person("Tim", "Tester");
		persons.add(p);
		p = new Person("Tim2", "Tester");
		persons.add(p);
		p = new Person("Tim3", "Tester");
		persons.add(p);
		p = new Person("Tim4", "Tester");
		persons.add(p);
		p = new Person("Tim5", "Tester");
		persons.add(p);
	}

	public List<Person> getPersons() {
		return persons;
	}
}

2.5. Managed Beans

Configure TableValues to be a session scope managed bean. Again see JSF introduction for details on how to do this.

2.6. Create TestJsp

Create the following JSP "TestPage.jsp".

				

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://myfaces.apache.org/trinidad" prefix="tr"%>
<%@ taglib uri="http://myfaces.apache.org/trinidad/html" prefix="trh"%>
<html>
<f:view>
	<body>
	<tr:document>
		<tr:form>
			<tr:panelFormLayout>
				<tr:inputText labelAndAccessKey="&Firstame" required="true"></tr:inputText>
				<tr:inputText labelAndAccessKey="&Lastname"></tr:inputText>
			</tr:panelFormLayout>
			<tr:selectManyShuttle leadingHeader="Important Selection">
				<tr:selectItem label="Java" value="java"></tr:selectItem>
				<tr:selectItem label=".NET" value=".net"></tr:selectItem>
				<tr:selectItem label="Groovy" value="groovy"></tr:selectItem>
			</tr:selectManyShuttle>
		</tr:form>
		<tr:form>
			<tr:panelHeader text="Friends of Carlotta">
				<tr:table value="#{tableValues.persons}" var="person"
					rowBandingInterval="1">

					<tr:column sortProperty="firstName" sortable="true"
						headerText="Firstname">
						<h:outputText value="#{person.firstName}">
						</h:outputText>
					</tr:column>
					<tr:column sortProperty="lastName" sortable="true"
						headerText="Lastname">
						<h:outputText value="#{person.lastName}">
						</h:outputText>
					</tr:column>
				</tr:table>

			</tr:panelHeader>
			<tr:inputNumberSpinbox label="Number: " value="1000"
				minimum="1000" maximum="5000" />
		</tr:form>

	</tr:document>
	</body>
</f:view>
</html>

This page demonstrates a few of the features of Trinidad.

inputText has a attribute for a label and a hotkey (alt+hotkey) - labelAndAccessKey
required fields are marked with "*"
panelFormLayout - used to line up elements
selectManyShuttle - Cool selection box
panelHeader - Panel which allows to place a header text inside it
table - Cool table which allows sorting and configuration of the number of displayed rows.
inputNumberSpinbox - Spinbox to select a number

2.7. Run your application

The result should look like the following.

3. Using the graphs from Trinidad

The following shows how to use the graphs provided by Trinidad. It is based on the previous example.

3.1. Domain Model

Create in the package de.vogella.jsf.trinidad.first the class "MyChartModel".

				
package de.vogella.jsf.trinidad.first;

import java.util.ArrayList;
import java.util.List;

import org.apache.myfaces.trinidad.model.ChartModel;

public class MyChartModel extends ChartModel {

	// How many charts are you going to have
	@Override
	public List<String> getGroupLabels() {
		List<String> groupLabels = new ArrayList<String>();
		groupLabels.add("Java");
		groupLabels.add("Linux");
		groupLabels.add(".NET");
		return groupLabels;
	}

	// How many parts (data areas) per chart
	@Override
	public List<String> getSeriesLabels() {
		List<String> seriesLabels = new ArrayList<String>();
		seriesLabels.add("Love it");
		seriesLabels.add("Hate it");
		return seriesLabels;
	}

	@Override
	public List<List<Double>> getYValues() {
		List<List<Double>> chartValues = new ArrayList<List<Double>>();
		// Fill the groups
		for (int i = 0; i < getGroupLabels().size(); i++) {
			List<Double> numbers = new ArrayList<Double>();

			// fill the series per group
			for (int j = 0; j < getSeriesLabels().size(); j++) {
				numbers.add(100* Math.random());
			}
			chartValues.add(numbers);
		}
		return chartValues;

	}

}

3.2. Managed Beans

Configure MyChartModel to be a session scope managed bean.

3.3. Create JSP

Create the following JSP "GraphicPage.jsp".

				
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://myfaces.apache.org/trinidad" prefix="tr"%>
<%@ taglib uri="http://myfaces.apache.org/trinidad/html" prefix="trh"%>
<html>
<f:view>
	<body>
	<tr:document>
		<tr:form>
			<h:panelGrid columns="3">

				<tr:chart value="#{myChartModel}" type="pie" />
				<tr:chart value="#{myChartModel}" type="bar" />
				<tr:chart value="#{myChartModel}" type="radar" />
				<tr:chart value="#{myChartModel}" type="radarArea" />
				<tr:chart value="#{myChartModel}" type="funnel" />
				<tr:chart value="#{myChartModel}" type="circularGauge" />
				<tr:chart value="#{myChartModel}" type="semiCircularGauge"
					YMinorGridLineCount="1" />
			</h:panelGrid>
		</tr:form>
	</tr:document>
	</body>
</f:view>
</html>

3.4. Run your application

The result should look like the following.

Tip

Please note that this example does not always run within the standard Eclipse browser. After you deployed it, open the URL in your standard browser to see the correct result.

4. Thank you

Thank you for practicing with this tutorial.

I maintain this tutorial in my private time. If you like the information please help me by using flattr or donating or by recommending this tutorial to other people.

5. Questions and Discussion

Before posting questions, please see the vogella FAQ . If you have questions or find an error in this article please use the www.vogella.de Google Group . I have created a short list how to create good questions which might also help you. .

6. Links and Literature

6.1. Tutorials and Websites

http://www.jsfcentral.com/ Information about JavaServer Faces

http://www.irian.at/trinidad-demo/faces/index.jspx Trinidad Demo

www.ibm.com/developerworks/edu/j-dw-java-jsf1-i.html Getting started with JavaServer Faces 1.2, Part 1: Building basic applications

http://www.ibm.com/developerworks/edu/j-dw-java-jsf2-i.html Getting started with JavaServer Faces 1.2, Part 2: JSF life cycle, conversion, validation, and phase listeners

http://java.sun.com/products/jsp/reference/techart/unifiedEL.html Unified Expression Language

6.2. JSF component libraries

The following lists JSF implementations or JSF extension implementations.

http://myfaces.apache.org Apache MyFaces

http://www.jboss.org/jbossrichfaces/ JBoss Rich Faces

http://www.oracle.com/technology/products/adf/adffaces/index.html Oracle ADF Faces Rich Client Components (JSF implementation of Oracle)

http://www.eclipse.org/webtools/jsf/dev_resource/JSFTutorial-RC3/JSFTools_tutorial.html Introduction to building JSF with Eclipse