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:

Folder structure

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:

Richfaces Page

Primefaces Page

About these ads

6 thoughts on “JSF Quickstart with Richfaces/ Primefaces

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s