Apache MyFaces Trinidad 2.0 with Eclipse Indigo and Tomcat 7

 

Setup Trinidad Project in Eclipse Indigo

Download and Install Eclipse Indigo

* Download Eclipse Indigo from Eclipse download site. Make sure to download Eclipse IDE for Java EE Developers.
* Unzip.

Download and unzip Apache MyFaces 2.0

* This is needed for Tomcat and JEE5 app servers. You should not need this for JEE6 app servers.
* Download Apache MyFaces Core 2.0 from Apache MyFaces Core download site. For this post, I downloaded myfaces-core-assembly-2.0.11-bin.zip.
* Unzip into a local directory, e.g. c:\prog.

Download and unzip MyFaces Trinidad 2.0

* Download Trinidad 2.0 from Apache MyFaces Trinidad download site. I downloaded trinidad-2.0.0-dist.zip.
* Unzip into a local directory, e.g. c:\prog.

Setup User Libraries

* Open Window > Preferences > Java > Build Path > User Libraries
* Click New and enter user library name, i.e., MyFaces Trinidad 2.0.0. Click OK.
* Highlight the newly created user library, e.g. MyFaces Trinidad 2.0.0, and click ADD JARs button.
* Browse to Trinidad 2.0 lib directory, e.g. C:\prog\trinidad-assembly-2.0.0\lib, and add both trinidad-api-2.0.0.jar and trinidad-impl-2.0.0.jar files.
* Similarly create a new user library named MyFaces Core 2.0.11 and add all jar files except myfaces-bundle-2.0.11.jar from MyFaces 2.0 lib directory, e.g. C:\prog\myfaces-core-2.0.11-bin\lib

Create JSF 2.0 Project

* Select File > New > Dynamic Web Project
* Enter or select:
– Project name: jsf2.myfaces2.trinidad2.one
– Target runtime: Apache Tomcat v7.0
– Dynamic web module version: 3.0
– Configuration: JavaServer Faces v2.0 Project

* Click Next three times
* Enter or select
– Type: User Library and check
MyFaces Core 2.0.11
MyFaces Trinidad 2.0.0
* Click Add… button to the right hand side of URL Mapping Patterns and enter *.jsf
* Click OK and Finish

Configuration

WEB-INF/trinidad-config.xml

* Create a new file named trinidad-config.xml in WEB-INF directory with the content:

<?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>

WEB-INF/faces-config.xml

* Replace the content of faces-config.xml with content:

<?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_2_0.xsd"
    version="2.0">
 
  <application>
    <!-- Use the Trinidad RenderKit -->
    <default-render-kit-id>
      org.apache.myfaces.trinidad.core
    </default-render-kit-id>
  </application>
 
</faces-config>

WEB-INF/web.xml

* Replace web.xml with following content:

<?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"
         version="2.5">
  <display-name>jsf2.myfaces2.trinidad2.one</display-name>
 
  <!--
      =================
      JSF Settings
      =================
   -->
  <!-- Faces Servlet -->
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
 
  <!-- Faces Servlet Mappings -->
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
    <url-pattern>*.jsf</url-pattern>
  </servlet-mapping>
 
  <!-- resource loader servlet -->
  <servlet>
    <servlet-name>resources</servlet-name>
    <servlet-class>org.apache.myfaces.trinidad.webapp.ResourceServlet</servlet-class>
  </servlet>
 
  <!-- 
     Important: 
         You must include this adf mapping even though you are not using ADF features.
         Without this mapping, JSF navigation will fail!
  -->
  <servlet-mapping>
    <servlet-name>resources</servlet-name>
    <url-pattern>/adf/*</url-pattern>
  </servlet-mapping>
 
  <!-- setting the project stage to be DEVELOPMENT -->
  <context-param>
    <param-name>javax.faces.PROJECT_STAGE</param-name>   
    <param-value>Development</param-value>
  </context-param>
 
  <!-- Use client-side state saving.  In Trinidad, it is an
       optimized, token-based mechanism that is almost always a
       better choice than the standard JSF server-side state saving. -->
  <context-param>
    <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
    <param-value>client</param-value>
    <!--param-value>server</param-value-->
  </context-param>
 
  <!-- Trinidad by default uses an optimized client-side state saving
       mechanism. To disable that, uncomment the following -->
  <!--context-param>
    <param-name>org.apache.myfaces.trinidad.CLIENT_STATE_METHOD</param-name>
    <param-value>all</param-value>
  </context-param-->
 
  <!--
      =================
      Trinidad Settings
      =================
   -->
  <!-- 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>
 
</web-app>

Setup Web Content Folder Structure

Create the following folder structure under WebContent:
* resources: for static resources such as style sheets, images, JavaScript files
css: for style sheet files. Use

<h:outputStylesheet name="style1.css" library="css"/>

to access them.
images: for image files
js: for JavaScript files.
* snippets: for facelet ui:composition files to be included in actual pages
* templates: for page templates

Example

Template File

* WebContent/templates/template1.xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<title><ui:insert name="title">Place Page Title Here</ui:insert></title>
	<h:outputStylesheet name="style1.css" library="css"/>
</h:head>
 
<h:body>
 
	<ui:insert name="menu">Place Menu Here</ui:insert>
 
	<hr/>
	<p/>
 
	<ui:insert name="body">Place Body Content Here</ui:insert>
 
	<hr/>
	<p/>
 
	<ui:insert name="footer">
 
	<hr/>
 
	<table width="100%" class="linkTable">
		<tr>
		  <th>Privacy Statement</th><th>Legal Disclaimer</th><th>Related Companies</th>
		</tr>
	</table>
	</ui:insert>
 
</h:body>
</html>

Snippet Files

* WebContent/snippets/menu1.xhtml:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets">
	<table width="100%" class="linkTable">
		<tr>
		  <th>Menu1</th><th>Menu2</th><th>Menu3</th>
		</tr>
	</table>
</ui:composition>

CSS File

* WebContent/resources/css/style1.css:

body {
	background-color: #FDF5E6;
	text-align: center;
}
 
a:hover {
	color: red
}
 
h2 {
	color: #440000;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif
}
 
th.title {
	background-color: #EF8429;
	font-size: 28px;
	font-family: Arial, Helvetica, sans-serif;
}
 
.linkTable {
	background-color: black;
	color: white;
}

Image File

* WebContent/resources/images/image1.jpg
* WebContent/resources/images/image2.jpg

First Page

* WebContent/page1.xhtml:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	template="/templates/template1.xhtml"
	xmlns:tr="http://myfaces.apache.org/trinidad"
	xmlns:h="http://java.sun.com/jsf/html">
 
	<ui:define name="title">
    	Page Title for Page 1
	</ui:define>
 
	<ui:define name="menu">
		<ui:include src="/snippets/menu1.xhtml" />
	</ui:define>
 
	<ui:define name="body">
		<h2>Page One</h2>
		<p>
			This is a Trinidad picture:<br />
			<tr:image source="/resources/images/image1.jpg"/>
 
			<br /><br />
			This is another Trinidad image:<br />
			<h:graphicImage name="image2.jpg" library="images"/>
		</p>
 
	</ui:define>
 
	<!-- We could override default footer as defined by template here:
	<ui:define name="footer">
		<ui:include src="/snippets/footer1.xhtml"/>
	</ui:define>	  
	-->
</ui:composition>

User Web Page Editor

* Right click page1.xhtml and select Open With > Web Page Editor
* Select Window > Show View > Others > General > Palette to see Trinidad tags

Deploy to Tomcat 7

Setup Tomcat 7 in Eclipse

* Click Window > Show View > Servers to open the Servers window
* Right click within the Servers window and select New > Server
* Select or enter:
– Server type: Tomcat v7.0 Server
– Server’s host name: localhost
– Server name: Tomcat v7.0 Server at localhost
– Server runtime environment: Apache Tomcat v7.0

Add Project to Tomcat 7

* Open Servers window and right click Tomcat 7 server
* Select Add and Remove…
* Move the project from Available to Configured

Deploy to Tomcat 7

* Right click the Tomcat server and select Start or Restart. The project will be deployed.
* Once the server is started, saving project resources such as pages will cause the project to be automatically redeployed.

Test

* Point browser to: http://localhost:8080/jsf2.myfaces2.trinidad2.one/page1.jsf

Issues

JSF commandButton Does not Work

Cause:
* Managed bean method never gets called.
Reason:
* In our case, this is caused because the resource servlet and mapping are missing from the web.xml file. You can repeat the issue just by changing the /adf/* mapping to /adf2/*
Fix:
* The fix is to add the mapping to web.xml file.

  <!-- resource loader servlet -->
  <servlet>
    <servlet-name>resources</servlet-name>
    <servlet-class>org.apache.myfaces.trinidad.webapp.ResourceServlet</servlet-class>
  </servlet>
 
  <!-- 
     Important: 
         You must include this adf mapping even though you are not using ADF features.
         Without this mapping, JSF navigation will fail!
  -->
  <servlet-mapping>
    <servlet-name>resources</servlet-name>
    <url-pattern>/adf/*</url-pattern>
  </servlet-mapping>

The server does not support version 3.0 of the J2EE Web module specification

* When you try to add a dynamic web project to a server instance, e.g. Tomcat 6, if you get this error message, you can edit the jsf2.myfaces2.trinidad2.one\.settings\org.eclipse.wst.common.project.facet.core.xml file and change

  <installed facet="jst.web" version="3.0"/>

to

  <installed facet="jst.web" version="2.5"/>

* Refresh the Eclipse project for the change to take effect

Example source code

* jsf2.myfaces2.trinidad2.one

References

* Example JSF application with Apache MyFaces Trinidad

This entry was posted in eclipse, jsf. Bookmark the permalink.

2 Responses to Apache MyFaces Trinidad 2.0 with Eclipse Indigo and Tomcat 7

Leave a Reply

Your email address will not be published. Required fields are marked *


*

This site uses Akismet to reduce spam. Learn how your comment data is processed.