jsf 2.0 portlets using third party jsf component libraries...• primefaces components ... when the...

JSF 2.0 portlets using Third party JSF component libraries

The sample program is provided to you on an "AS IS" basis, without warranty of any kind.IBM HEREBY EXPRESSLY DISCLAIMS ALL WARRANTIES, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIEDWARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.Some jurisdictions do not allow for the exclusion or limitation of implied warranties, so the above limitations or exclusions may not apply to you. IBM shall not be liablefor any damages you suffer as a result of using, modifying or distributing the sample program or its derivatives.

Table of Contents

1.Executive Summary...........................................................................................................................3

2.JSF Libraries Table.............................................................................................................................3

2.1.Usage with RAD.........................................................................................................................4

2.1.1.PrimeFaces...............................................................................................................................6

2.1.2.RichFaces.................................................................................................................................7

RichFaces configuration for portlet project.................................................................................9

2.1.3.ICEfaces...................................................................................................................................9

ICEfaces configuration for portlet project.................................................................................11

2.1.4.Apache MyFaces Trinidad.....................................................................................................12

Trinidad configuration for portlet project..................................................................................14

3.Comparison Table.............................................................................................................................14

Conclusion...............................................................................................................................................15


1.1.1.1. Executive Summary

This document provides a quick overview of popularly used third party component libraries for JavaServer Faces (JSF). It describe their key features and a simple comparative analysis of their capabilities. It also describes how using IBM® Rational® Application Developer you can import and use third-party JSF components with minimal effort.

2.2.2.2. JSF Libraries Table

Name Definition Library

PrimeFacesA lot of the newer JSF projects prefer to use PrimeFaces as the UI because components are easy to customize through css, js and Ajax behavior callbacks. Themes makes it very simple to change the look and feel.

PrimeFaces library:

• PrimeFaces features a rich set of around 117 components at the time this article was written.

• PrimeFaces uses jQuery as the JavaScript library to generating JavaScript code.

• PrimeFaces provides a rich set of components optimized for mobile devices.

RichFaces RichFaces is a rich component library for Java Server Faces built on an advanced open source framework (Ajax4jsf). It allows easy integration of ajax capabilities. RichFaces provides skinnability feature of the Ajax4jsf framework including a large number of predefined skins. Using skinnability, it is much easier to manage the look-and-feel of an application.

RichFaces library:

• RichFaces contains about 79 components at the time this article was written.

• RichFaces uses jQuery as a JavaScript library to generating JavaScript code.

• RichFaces provides a rich set of components optimized for mobile devices.

ICEfacesICEfaces is an open-source Rich Internet Application (RIA) development framework based on the JavaServer Faces 2 standard. ICEfaces extends JavaServer Faces to simplify development and enhance the standard JSF feature set.

ICEfaces library:

• ICEfaces features a rich set of 118 components at the time this article was written.

• ICEfaces uses jQuery as a JavaScript library to generating JavaScript code.

• ICEfaces provides a rich set of components optimized for mobile devices.

Apache MyFaces Trinidad

Apache MyFaces Trinidad is a JSF framework including a large, enterprise quality component library,

Apache MyFaces Trinidad library:

• Trinidad contains about 106 components at the time this article was


supporting critical features such as accessibility, right-to-left languages, etc.

written.

• Trinidad uses jQuery as a JavaScript library to generating JavaScript code.

• Trinidad provides a rich set of components optimized for mobile devices.

2.1. Usage with RAD

You will create a Faces Library Definition (JLD), which is a configuration file and other resource files that the library needs. These files are all stored in a special type of workspace project called a Faces Definitions Project.

Start by creating a Faces Definition Project to contain the library's configuration metadata.

1. Select File > New > Project > Web2. Choose Library Definitions Project and click Next.


3. Enter as the Project Name and click Finish.

• PrimeFaces Components

• RichFaces Components

• ICEfaces Components

• Trinidad Components

2.1.1. PrimeFaces

To create a library definition for the library:

1. Right-click the new project that you just created and select New > Faces Library Definition. Enter primefaces as the Library name

2. Click the browse button next to the Jar file field. Select the location of the JAR file.

3. Click Finish.

Now, create a JSF 2.0 portlet project target runtime as WebSphere Portal Server v8.0.

When the portlet project is created and facelet page opens in the editor, the new drawers displays in the palette view.


2.1.2. RichFaces

To create a library definition for the RichFaces library:

1. Right-click the new project that you just created and select New > Faces Library Definition. Enter rich as the Library name

2. Click the browse button next to the Jar file field. Select the location of the JAR file(richfaces-components-ui-4.1.0.Final.jar).

3. Select a taglib uri as [META-INF/rich.taglib.xml], as shown. Click OK.


4. Click Finish.

5. Again right-click the new project that you just created and select New > Faces Library Definition. Enter a4j as the Library name

6. Click the browse button next to the Jar file field. Select the location of the JAR file(richfaces-components-ui-4.1.0.Final.jar).

7. Select a taglib uri as [META-INF/a4j.taglib.xml], as shown. Click OK.


8. Click Finish.


When the portlet project is created and facelet page opens in the editor, the new rich and a4j drawers displays in the palette view.


RichFaces configuration for portlet project

Add following jars manually in WebContent/WEB-INF/lib folder of portlet project as it requires the 2 core library + 2 components library + 3 mandatory dependencies libraries:

• cssparser-0.9.5.jar

• guava-10.0.1.jar

• richfaces-components-api-{version}.Final.jar

• richfaces-core-api-{version}.Final.jar

• richfaces-core-impl-{version}.Final.jar

• sac-1.3.jar

2.1.3. ICEfaces

To create a library definition for the ICEfaces library:

1. Right-click the new project that you just created and select New > Faces Library Definition. Enter ace as the Library name

2. Click the browse button next to the Jar file field. Select the location of the JAR file(icefaces-ace.jar).3. Select a taglib uri as [META-INF/icefaces.taglib.xml], as shown. Click OK.


4. Click Finish.5. Again right-click the new project that you just created and select New > Faces Library Definition. Enter

ice as the Library name6. Click the browse button next to the Jar file field. Select the location of the JAR file(icefaces-compat.jar).7. Select a taglib uri as [META-INF/icefaces.taglib.xml], as shown. Click OK.

8. Click Finish.


When the portlet project is created and facelet page opens in the editor, ice and ace drawers displays in the palette view.


ICEfaces configuration for portlet project

Copy the following ICEfaces libraries into \WebContent\WEB-INF\lib folder. The added libraries are:

• icefaces.jar

• icepush.jar

• krysalis-jCharts-1.0.0-alpha-1.jar

Add following entries in web.xml file:

<context-param>

<description>Stop MyFaces from Serializing the state to the

session</description>

<param-name>org.apache.myfaces.SERIALIZE_STATE_IN_SESSION</param-name>

<param-value>false</param-value>

</context-param>

<servlet-mapping>

<servlet-name>Faces Servlet</servlet-name>

<url-pattern>/icefaces/*</url-pattern></servlet-mapping>


2.1.4. Apache MyFaces Trinidad

To create a library definition for the Apache MyFaces Trinidad library:

1. Right-click the new project that you just created and select New > Faces Library Definition. Enter trh as the Library name

2. Click the browse button next to the Jar file field. Select the location of the JAR file(trinidad-impl-2.0.1.jar).

3. Select a taglib uri as [META-INF/trh.taglib.xml], as shown. Click OK.

4. Click Finish.5. Again right-click the new project that you just created and select New > Faces Library Definition. Enter

tr as the Library name6. Click the browse button next to the Jar file field. Select the location of the JAR file(trinidad-impl-

2.0.1.jar). 7. Select a taglib uri as [META-INF/tr.taglib.xml], as shown. Click OK.


8. Click Finish.


When the portlet project created and facelet page opens in the editor, trh and tr drawers will display in the palette view.


Trinidad configuration for portlet project

Copy the following Trinidad library into \WebContent\WEB-INF\lib folder. The added library is:

• trinidad-api-2.0.1.jar

Register the ResourceServlet that would be used for serving the resources at runtime (images, javascripts and styles) in web.xml file:

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

Enable client-side state saving by adding the following in web.xml file. 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>

</context-param>

Use Apache Trinidad RenderKit by adding the following to your faces-config.xml file:

<application>

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

id></application>

3.3.3.3. Comparison Table

The following table provides the quick comparison of four libraries:

Offered Components

PrimeFaces RichFaces ICEfaces Trinidad

Chart Y N Y Y

OrderingList N Y N N

PickList N Y N Y

Rating Y N N N


Bread Crumbs Y N N Y

Printer Y N Y N

Functionality in Components

Context Menu in DataTable

Y N Y N

Row Expansion Menu in DataTable

Y N Y Y

Single/Multiple row selection Menu in DataTable

Y N Y Y

Editing in SelectOneMenu

Y N Y N

Enable/Disable Ajax in commandButton and commandLink

Y N Y Y

Column Reordering Menu in DataTable

Y N Y N

ConclusionTo conclude, since there are multiple third party JSF component libraries that are available, this document helps you to get not only an overview of their functionality but also describes their key features and provides a simple comparative analysis of their capabilities. After reading this document you will be able to make an effective use of IBM Rational Application Developer to work with these libraries with minimal efforts.


jsf 2.0 portlets using third party jsf component libraries...• primefaces components ... when the...

Documents