Skip to content

JSF Quickstart with Richfaces/ Primefaces

August 29, 2012

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

From → Java, Technology

6 Comments
  1. Mike permalink

    Nice article. It has been linked at the JavaServer Faces Reddit.
    http://www.reddit.com/r/JavaServerFaces/

  2. Thanks Mike!

  3. me-kell permalink

    In Eclipse Indigo with JBoss Tools I had a problem with
    xmlns:p=”http://primefaces.prime.com.tr/ui”
    I replaced it with the following and it worked fine:
    xmlns:p=”http://primefaces.org/ui”
    I read this hint from
    http://forum.primefaces.org/viewtopic.php?f=3&t=18275#p56636

  4. Thanks me-kell, Blog has been updated!

  5. Volodia permalink

    If you are using JSF together with JSTL you will inevitably run into troubles. For more about this
    read this discussion
    http://www.coderanch.com/t/594112/JSF/java/At-same-request-property-instantiated

  6. That’s true Volodia…and many times these troubles are difficult to fix…a better way is to make a practice of using tags that are tried and tested.

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

Follow

Get every new post delivered to your Inbox.

Join 65 other followers

%d bloggers like this: