Saturday, September 25, 2010

Getting started with Prime faces 2

Prime faces is an amazing JSF framework from Cagatay Civici (http://cagataycivici.wordpress.com/). Its wonderful because it is easy to use, minimal dependencies, has probably the widest set of controls among all JSF frameworks, easy to integrate with Spring (including Spring Security) , Java EE EJBs, and last but not the least mobile UI support. So I decided to give Prime faces a try, before selecting it to use in my projects.

Step 1 – Create Maven 2 project

As a first step to integrating Prime faces, create a Maven 2 project in Eclipse. You will need to select ‘maven-archetype-webapp’.

Step 2 – Add repositories and dependencies in pom.xml

I will be using Prime faces 2 with JSF 2 on Tomcat 6. Since the dependencies for Prime Faces and JSF 2 (JSF 2.0.3 is required) are available on different repositories, I will add them to my pom file first. The listing below shows my pom.xml

<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>net.breezeware</groupId>
<artifactId>hermesconsole</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>hermesconsole Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>2.2.M1</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.0.3</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.0.3</version>
</dependency>
</dependencies>


<repositories>
<repository>
<id>prime-repo</id>
<name>Prime Technology Maven Repository</name>
<url>http://repository.prime.com.tr/</url>
</repository>
<repository>
<id>maven2-repository.dev.java.net</id>
<name>Java.net Repository for Maven</name>
<url>http://download.java.net/maven/2/</url>
</repository>

</repositories>


<build>
<finalName>hermesconsole</finalName>
</build>
</project>



Step 3 – Change web.xml


Add the JSF faces servlet in the web.xml file.

<?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" >


<context-param>
<param-name>primefaces.skin</param-name>
<param-value>none</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>


</web-app>



Step 4 – Add a simple xhtml file – home.xhtml


Now let us see Prime faces in action, by adding a simple JSF snippet with 1 control from this library.

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">

<f:view contentType="text/html">

<h:head>
<title>Hermes Console - Trying PrimeFaces</title>



</h:head>

<h:body>
<h:form>
<p:commandButton value="Ajax Submit" />
</h:form>



</h:body>



</f:view>
</html>

Step 5 – Build and deloy


Now that we are done, the next step is to build and create the war file and deploy it in Tomcat 6. Then point your browser to - http://localhost:8080/hermesconsole/home.jsf


You will see the following command button on your browser:


Blog - 1

2 comments:

  1. I am using the setup as you, JSF2.0 + Tomcat 6.0.18, but the funny thing is, I just create a test web app with using Component "spinner", on the webpage,
    However, the two Arrow buttons they are not displayed. Why?
    Server logs has shown no any error/warning message.

    could you please contact with me on email
    zhaoyichun@hotmail.com thanks.

    ReplyDelete
  2. java.lang.ClassNotFoundException: javax.faces.webapp.FacesServlet

    ReplyDelete