Getting started with Primefaces using Eclipse IDE and Maven

Today we are going to show you how to get started with JSF2 and Primefaces quickly. We are using maven 3 and eclipse IDE for this tutorial. If you want to find out how to easily setup your development environment please refer to our earlier posts Maven 3 installation and configuration
and Maven 3 Eclipse plugin setup.
When you finish this tutorial you will end up with an application that displays a simple ;) Primfaces component – the keyboard. It will look like this.

Primefaces Keyboard component

Primefaces Keyboard component

Now let’s get things done.

Creating Maven 3 WebApp project


At first we need to create a simple webapp project with maven. Follow this few simple steps:

  1. Start Eclipse IDE
  2. Right click in the Project Explorer window, select New and Project
  3. Pick Maven Project
  4. Click Next
  5. On the ‘New Maven Project’ screen click Next
  6. Enter ‘webapp’ as a Filter value, pick ‘maven-archetype-webapp’ artifact and click Next
  7. Provide Group Id and Artifact Id values and click Finish

You are now ready to start coding.

pom.xml

Next step is adding JSF2 API and Primefaces artifacts to the project so that you can use them. JSF2 API artifact is available on maven repositories. To use Primefaces artifact you will need to add a primefaces repository. Here is our pom.xml code.

<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.itcuties.examples.webapps.simplejsf</groupId>
 <artifactId>simple-jsf2-with-primefaces</artifactId>
 <packaging>war</packaging>
 <version>0.0.1-SNAPSHOT</version>
 <name>simple-jsf2</name>
 <url>http://maven.apache.org</url>
 <dependencies>
    <!-- Primefaces -->  
     <dependency>
       <groupId>org.primefaces</groupId>
       <artifactId>primefaces</artifactId>
       <version>3.4</version>
   </dependency>
   <!-- JSF 2 API -->
   <dependency>
       <groupId>com.sun.faces</groupId>
       <artifactId>jsf-api</artifactId>
       <version>2.2.0-m07</version>
   </dependency>
 </dependencies>
 <repositories>
     <repository>
         <id>primefaces-repository</id>
         <name>Primefaces repository</name>
         <url>http://repository.primefaces.org</url>
     </repository>
 </repositories>
 <build>
    <finalName>jsf2</finalName>
 </build>
</project>

web.xml

Next, you need to configure JSF2 and Primefaces in your web.xml file. JSF2 is implemented as a Servlet which processes URL in your application, in our case we map every URL that ends with *.xhtml to the Faces Servlet.

<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
     <display-name>Simple JSF2 Application with Primefaces</display-name>

     <!--
         Current project stage. When it is set to 'Development' Primefaces give a lot of debug information on the screen.
      -->
   <context-param>
       <param-name>javax.faces.PROJECT_STAGE</param-name>
       <param-value>Development</param-value>
   </context-param>

   <welcome-file-list>
       <welcome-file>index.xhtml</welcome-file>
   </welcome-file-list>

   <!-- Staring JSF -->
   <servlet>
       <servlet-name>Faces Servlet</servlet-name>
       <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
       <load-on-startup>1</load-on-startup>
   </servlet>

   <!-- JSF URL mapping -->
   <servlet-mapping>
       <servlet-name>Faces Servlet</servlet-name>
       <url-pattern>*.xhtml</url-pattern>
   </servlet-mapping>

</web-app>

index.xhtml

This sample application consists of one page. This page displays an input field which when clicked displays the keyboard that allows you to input text. There is also a keyboardBean connected which stores the fields value. Here is the code.

<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.org/ui">  

    <h:head>  

    </h:head>  
     
    <h:body>  
       <h:form>  
           <p:panel header="Keyboard Demo">    
               <p:keyboard value="#{keyboardBean.value}"/>  
             </p:panel>
             <p:commandButton value="Submit"/>
       </h:form>
    </h:body>  
</html>

KeyboardBean.java

This bean is responsible for storing entered value. Each class that you are going to use as a bean in your view needs to be annotated with @ManagedBean annotation. In our case we used @SessionScoped annotation as well which means that there is only one bean in the user session.

package com.itcuties.jsf2.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class KeyboardBean {

   private String value;

   public String getValue() {
       System.out.println("KeyboardBean::reading value: " + value);
       
       return value;
   }

   public void setValue(String value) {
       System.out.println("KeyboardBean::setting value: " + value);
       
       this.value = value;
   }    
}

Running code

To run this code you need to deploy WAR package which comes out of the build to the JEE application server. In our example we have used JBOSS 7 AS which comes bundled with the JSF2 implementation. You can run this example on every application server which is JEE compliant which means that it has JSF2 implementation bundled like: WebLogic 10, WebSphere 7, JBOSS 7, Glassfish 3. Refer to your application server documentation for more information.

  1. Run mvn package command
  2. deploy target/jsf2.war WAR archive to your application server

Download this sample code here.

This code is available on our GitHub repository as well.

One Response to "Getting started with Primefaces using Eclipse IDE and Maven"

  1. Max says:

    This is really good job! thanks!

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Java by Example App is available at Google Play Store NOW