Getting Started with RichFaces 4

Description

In this article we will show, the step to install and configure the RichFace framework.

We will set up our working environment so that you can try all the examples. As JSF 2 now has Ajax functionality built-in, we will cover that first and then move on to RichFaces and start showing you how RichFaces extends that functionality.

Setting Up

RichFaces can be used in any container that is JSF 2 compatible. This means all servers compliant with the Java EE 6 specification (JBoss AS6/7, Glassfish 3) and all major servlet containers (Tomcat, Jetty essentially).

Not to tie you to any specific IDE (integrated development environment), but we will use Apache Maven to set up a project. Since RichFaces is built on top of JSF 2, its installation is as easy as adding a few JARs to your project.

In this article, we will use a simple Maven archetype which generate a simple Richfaces project.

Launch the followong command to generate the project structure of a RichFace 4 Web  application:


mvn archetype:generate \
 -DarchetypeGroupId=org.richfaces.archetypes \
 -DarchetypeArtifactId=richfaces-archetype-simpleapp \
 -DarchetypeVersion=4.0.0.Final \
 -DgroupId=com.jasmineconseil.samples.richfaces4  \
 -DartifactId=richfaces4-start

The resulting maven structure is showed here:

richfaces4-start
/src
/target
pom.xml
readme.txt

The project comes with a simple one-page application.

Let’s deploy and run the project to make sure everything works. If you open the readme.txt file, you will see the commands to build the application for either a Tomcat or a JBoss 6 server, here we choose Tomcat 7 target:

SelectDeploymentServer

As you can see, creating a new RichFaces 4 project is very simple and you can easily open it in any IDE that supports importing a Maven-based project.

There are two ways to import the Maven project into Eclipse. One method is to execute the following command inside the project root folder:

mvn eclipse:eclipse -Dwtpversion=2.0

This command makes it possible to import the project into Eclipse by adding Eclipse project configuration files such as .project and .classpath.

Once you run this command in NetBeans, select File/Open Project into Workspace and point to the project root directory.

Click on the Run button and you will see into your favourite browser at the URL http://localhost:8084/richfaces4-start/ the deployed application in action:

RichFaces

Configuring RichFaces

There is nothing you actually need to do to configure RichFaces ! If you look inside the web.xml file in the generated project, you will see no mention of a RichFaces filter. Starting with RichFaces 4, you don’t need to register a filter in the web.xml file. If RichFaces JARs are present in the project, RichFaces will be used !

here the extract of the pom dependency of the generated project:

<?xml version="1.0" encoding="UTF-8"?>
<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/xsd/maven-4.0.0.xsd">

<modelVersion>4.0.0</modelVersion>

<groupId>org.richfaces.book</groupId>
<artifactId>richfaces4-start</artifactId>
<name>RichFaces 4 Application - Starting</name>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
<url>http://jboss.org/richfaces</url>

<repositories>
<repository>
<id>jboss-public-repository-group</id>
<name>Jboss Repository for Maven</name>
<url>https://repository.jboss.org/nexus/content/groups/public/</url>
</repository>
<repository>
<id>java-net</id>
<name>Java.net Maven Repository</name>
<url>http://download.java.net/maven/2</url>
</repository>
</repositories>

<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<!-- Setting this property using archetype-metadata.xml requiredPorperty
so that generated project uses correct version of richfaces.
-->
<org.richfaces.bom.version>4.0.0.Final</org.richfaces.bom.version>
<netbeans.hint.deploy.server>Tomcat</netbeans.hint.deploy.server>
</properties>

<build>
<finalName>richfaces4-start-${project.version}</finalName>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>1.5</source>
<target>1.5</target>
</configuration>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<configuration>
<webResources>
<resource>
<directory>${basedir}/src/main/java</directory>
<targetPath>/WEB-INF/src</targetPath>
</resource>
</webResources>
</configuration>
</plugin>
</plugins>
</build>

<profiles>
<profile>
<id>jee6</id>
<build>
<plugins>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<configuration>
<webappDirectory>${project.build.directory}/${project.build.finalName}-jee6</webappDirectory>
</configuration>
</plugin>
</plugins>
</build>

<dependencies>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.transaction</groupId>
<artifactId>jta</artifactId>
<version>1.1</version>
<scope>provided</scope>
</dependency>
</dependencies>
</profile>
<profile>
<id>release</id>
<build>
<plugins>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<executions>
<execution>
<id>jee6</id>
<phase>package</phase>
<goals>
<goal>war</goal>
</goals>
<configuration>
<webappDirectory>${project.build.directory}/${project.build.finalName}-jee6</webappDirectory>
<classifier>jee6</classifier>
<packagingExcludes>WEB-INF/lib/jsf-api*,WEB-INF/lib/jsf-impl*</packagingExcludes>
<warSourceExcludes>WEB-INF/lib/jsf-api*,WEB-INF/lib/jsf-impl*</warSourceExcludes>
</configuration>
</execution>
</executions>
<configuration>
<webResources>
<resource>
<directory>${basedir}/src/main/java</directory>
<targetPath>/WEB-INF/src</targetPath>
</resource>
</webResources>
</configuration>
</plugin>
</plugins>
</build>
</profile>
</profiles>

<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>
<dependency>
<groupId>org.richfaces.ui</groupId>
<artifactId>richfaces-components-ui</artifactId>
</dependency>
<dependency>
<groupId>org.richfaces.core</groupId>
<artifactId>richfaces-core-impl</artifactId>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.el</groupId>
<artifactId>el-api</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
</dependency>

<dependency>
<groupId>net.sf.ehcache</groupId>
<artifactId>ehcache</artifactId>
</dependency>

<!-- Tests -->
<dependency>
<groupId>org.testng</groupId>
<artifactId>testng</artifactId>
<version>5.10</version>
<classifier>jdk15</classifier>
<scope>test</scope>
</dependency>
</dependencies>
</project>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 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-app_2_5.xsd">
<display-name>Sample RichFaces 4 Application</display-name>
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<context-param>
<param-name>javax.faces.SKIP_COMMENTS</param-name>
<param-value>true</param-value>
</context-param>
<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>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>30</session-timeout>
</session-config>
<mime-mapping>
<extension>ecss</extension>
<mime-type>text/css</mime-type>
</mime-mapping>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
<login-config>
<auth-method>BASIC</auth-method>
</login-config>
</web-app>

Configuring a Skin

The only feature you might want to configure is a RichFaces skin.

</pre>
<context-param>
<param-name>org.richfaces.skin</param-name>
<param-value>japanCherry</param-value>
</context-param>
<pre>

Now that we have seen the fundamental of a Richfaces application, let’s delve into the detail of the development of Ajax features in the next article, AJAX in JSF 2.0

Advertisements

2 Comments on “Getting Started with RichFaces 4

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

%d bloggers like this: