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 and Primefaces, 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

amresh@ubuntu:~/development$ mvn archetype:generate -DgroupId=com.xamry.jsfapp -DartifactId=jsf-webapp -DarchetypeArtifactId=maven-archetype-webapp
amresh@ubuntu:~/development$ cd jsf-webapp/
amresh@ubuntu:~/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
amresh@ubuntu:~/development/jsf-webapp$ cd src/main/
amresh@ubuntu:~/development/jsf-webapp/src/main$ ls
resources webapp
amresh@ubuntu:~/development/jsf-webapp/src/main$ mkdir java
amresh@ubuntu:~/development/jsf-webapp/src/main$ cd ../..

2. Generate Eclipse settings

amresh@ubuntu:~/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

amresh@ubuntu:~/development/jsf-webapp$ mvn clean install
amresh@ubuntu:~/development/jsf-webapp$ cp target/jsf-webapp.war /usr/local/apache-tomcat-6.0.32/webapps/

2. Start Tomcat

amresh@ubuntu:~/development/jsf-webapp$ cd /usr/local/apache-tomcat-6.0.32/bin
amresh@ubuntu:/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:

About these ads