JSF Quickstart with Richfaces/ Primefaces

When it comes to building rich UI web-application in Java, I always count on JSF. I know there are many who hate JSF, but this article is not about getting into those fights :-)

As a starter, I always spent hours in resolving Jar dependencies and configuration issues. Many times they are tough to crack as error messages are not very helpful. Problem is aggravated when you use popular component libraries like Richfaces andPrimefaces, as you are often not sure where that annoying error message is coming from.

This article  doesn’t help you learn JSF. I assume you may already have read a few Hello World kind of JSF examples somewhere on internet and you know basics. My intent is to help you with making a simple JSF webpage quickly and with ease, without worrying about those Jar dependencies.

I am fond of both Richfaces and Primefaces component libraries, and hence have included both of them into my example. You can use their combination, any one or none of them…your pick.

Prerequisite

We are using maven tool for specifying jar dependencies and building our project.Eclipse will be used as IDE and Tomcat 6 as web container.

We’ll be using JSF version 2.1.10.

Build Maven Project

Download and configure maven on your machine, if not done already.

1. Create a maven project

[email protected]:~/development$ mvn archetype:generate -DgroupId=com.xamry.jsfapp -DartifactId=jsf-webapp -DarchetypeArtifactId=maven-archetype-webapp
[email protected]:~/development$ cd jsf-webapp/
[email protected]:~/development/jsf-webapp$ ls -ltr
total 8
-rw-rw-r-- 1 amresh amresh 712 Aug 28 22:46 pom.xml
drwxrwxr-x 3 amresh amresh 4096 Aug 28 22:46 src
[email protected]:~/development/jsf-webapp$ cd src/main/
[email protected]:~/development/jsf-webapp/src/main$ ls
resources webapp
[email protected]:~/development/jsf-webapp/src/main$ mkdir java
[email protected]:~/development/jsf-webapp/src/main$ cd ../..

2. Generate Eclipse settings

[email protected]:~/development/jsf-webapp$ mvn eclipse:clean eclipse:eclipse

 

3. Import Project into Eclipse

Eclipse ->File ->Imprt -> Existing Project into Workspace -> (Select root directory and then jsf-webapp) -> OK

4. Edit pom.xml

Copy and paste, below code into pom.xml under your project root folder:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>com.xamry.jsfapp</groupId>
 <artifactId>jsf-webapp</artifactId>
 <packaging>war</packaging>
 <version>1.0-SNAPSHOT</version>
 <name>JSF Web Application</name>
 <url>http://maven.apache.org</url>

<properties>
 <org.richfaces.bom.version>4.1.0.Final</org.richfaces.bom.version>
</properties>

<repositories>
   <!-- Primeface repository -->
   <repository>
   <id>prime-repo</id>
   <name>PrimeFaces Maven Repository</name>
   <url>http://repository.primefaces.org</url>
   <layout>default</layout>
   </repository>
</repositories>

<dependencyManagement>
 <dependencies>
 <dependency>
 <groupId>org.richfaces</groupId>
 <artifactId>richfaces-bom</artifactId>
 <version>${org.richfaces.bom.version}</version>
 <scope>import</scope>
 <type>pom</type>
 </dependency>
 </dependencies>
 </dependencyManagement>
 <dependencies>

 <!-- JSF Dependencies -->
 <dependency>
 <groupId>com.sun.faces</groupId>
 <artifactId>jsf-api</artifactId>
 <version>2.1.10</version>
 </dependency>
 <dependency>
 <groupId>com.sun.faces</groupId>
 <artifactId>jsf-impl</artifactId>
 <version>2.1.10</version>
 </dependency>
 <dependency>
 <groupId>jstl</groupId>
 <artifactId>jstl</artifactId>
 <version>1.2</version>
 </dependency>

<!-- Richfaces dependencies -->
 <dependency>
 <groupId>org.richfaces.ui</groupId>
 <artifactId>richfaces-components-ui</artifactId>
 </dependency>
 <dependency>
 <groupId>org.richfaces.core</groupId>
 <artifactId>richfaces-core-impl</artifactId>
 </dependency>

<!-- Primefaces dependencies -->
 <dependency>
 <groupId>org.primefaces</groupId>
 <artifactId>primefaces</artifactId>
 <version>3.3.1</version>
 </dependency>

<!-- Common Dependencies -->
 <dependency>
 <groupId>junit</groupId>
 <artifactId>junit</artifactId>
 <version>3.8.1</version>
 <scope>test</scope>
 </dependency>
 </dependencies>

 <build>
 <finalName>jsf-webapp</finalName>
 <plugins>
 <plugin>
 <groupId>org.apache.maven.plugins</groupId>
 <artifactId>maven-compiler-plugin</artifactId>
 <version>2.5.1</version>
 <configuration>
 <source>1.6</source>
 <target>1.6</target>
 </configuration>
 </plugin>
 <plugin>
 <groupId>org.apache.maven.plugins</groupId>
 <artifactId>maven-war-plugin</artifactId>
 <configuration>
 <archive>
 <manifestEntries>
 <Dependencies>org.slf4j</Dependencies>
 </manifestEntries>
 </archive>
 </configuration>
 </plugin>
 </plugins>
 </build>
</project>

 

Configuration Files

WEB-INF/web.xml

<?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>JSF Webapp</display-name>
<context-param>
 <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
 <param-value>server</param-value>
 </context-param>
 <context-param>
 <param-name>javax.faces.CONFIG_FILES</param-name>
 <param-value>/WEB-INF/faces-config.xml</param-value>
 </context-param>
 <context-param>
 <param-name>org.richfaces.SKIN</param-name>
 <param-value>blueSky</param-value>
 </context-param>
 <context-param>
 <param-name>org.richfaces.CONTROL_SKINNING</param-name>
 <param-value>enable</param-value>
 </context-param>

<listener>
 <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
 </listener>

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

<servlet-mapping>
 <servlet-name>Faces Servlet</servlet-name>
 <url-pattern>*.jsf</url-pattern>
 </servlet-mapping>
</web-app>

 

WEB-INF/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_2_1.xsd"
 version="2.1">

</faces-config>

 

XHTMLs

I know I am jumping a bit far, but I prefer creating JSF pages with templates. I am going to create two XHTML pages, one showing Richfaces panel and another showing Primefaces panel. You are free to use component of your choice. Each page will have a template file and a content file. Here it goes:

Richfaces XHTML Example:

xhtml/richfacesPageTemplate.xhtml

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
 <title><ui:insert name="title">Default title</ui:insert>
 </title>
</h:head>
<h:body>
 <table width="100%">
 <tr>
 <td align="center"><ui:insert name="content">Default content</ui:insert>
 </td>
 </tr>
 </table>
</h:body>
</html>

 

xhtml/richfacesPage.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 template="richfacesPageTemplate.xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
 <ui:define name="title">
 Richfaces - Page Example
 </ui:define>

<ui:define name="content">
 <table>
 <tr>
 <td><rich:messages styleClass="errorMessage" />
 </td>
 </tr>
 </table>
 <br />
 <rich:panel header="Richfaces - Panel">
 Hi, This is an example richfaces panel
 </rich:panel>
 </ui:define>
</ui:composition>

 

Primefaces XHTML Example:

xhtml/primefacesPageTemplate.xhtml

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
 <h:head>
 <title><ui:insert name="title">Default title</ui:insert>
 </title>
 </h:head>
 <h:body>
 <table width="100%">
 <tr>
 <td align="center"><ui:insert name="content">Default content</ui:insert>
 </td>
 </tr>
 </table>
 </h:body>
</f:view>
</html>

 

xhtml/primefacesPage.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
 template="primefacesPageTemplate.xhtml"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:p="http://primefaces.org/ui">
 <ui:define name="title">
 Primefaces - Page Example
 </ui:define>

<ui:define name="content">
 <table>
 <tr>
 <td><p:growl id="growl" sticky="false" showDetail="false" /></td>
 </tr>
 </table>
 <br />
 <p:panel header="Primefaces - Panel">
 This is a Primefaces panel
 </p:panel>
 </ui:define>
</ui:composition>

 

Test your work

At the end, your folder structure should look like this in Eclipse:

 

1. Create War file and copy to Tomcat

[email protected]:~/development/jsf-webapp$ mvn clean install
[email protected]:~/development/jsf-webapp$ cp target/jsf-webapp.war /usr/local/apache-tomcat-6.0.32/webapps/

 

2. Start Tomcat

[email protected]:~/development/jsf-webapp$ cd /usr/local/apache-tomcat-6.0.32/bin
[email protected]:/usr/local/apache-tomcat-6.0.32/bin$ ./catalina.sh run

 

3. Hit web-pages

http://localhost:8080/jsf-webapp/xhtml/primefacesPage.jsf

http://localhost:8080/jsf-webapp/xhtml/richfacesPage.jsf

They should look similar to below screenshots:

 

[author]

[author_image timthumb=’on’] http://en.gravatar.com/xamry#photo-0[/author_image]

Hi, I am Amresh. I work for R&D lab of Software Product Engineering firm Impetus Technologies.

I am technology enthusiast and love reading…mostly news and magazine articles. I am a fitness freak and love watching movies and listening to music. My Blog

[/author]

Leave A Comment

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.