Using PrimeFaces with Codenvy

PrimeFaces is an open source component library for JavaServer Faces, developed by Prime Teknoloji. It provides a collection of mostly visual components (widgets). These can be used by JSF programmers in addition to the small set of basic components that ship with the core JSF platform to compose the UI for a web application. Here we demonstrate CommandButton functionality of PrimeFaces.

Create a Project

Login to your Codenvy workspace and create a New WAR Project say “CommandButtonPrimeFaces”. Project file structure is shown below :
project_structure

Pom.xml and dependencies

Specify the below dependencies in pom.xml which are prerequisite for the HTTPClient implementation. Make sure these jars are included under Maven Dependencies.

  • primefaces.jar
  • jsf-api.jar
  • jsf-impl.jar
  • jstl.jar
  • servlet-api.jar
  • jsp-api.jar
  • el-impl.jar

Dependencies in pom.xml:

  <dependencies>

<!-- PrimeFaces -->
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>3.5</version>
</dependency>

<!-- JSF 2 -->
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.1.11</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.1.11</version>
</dependency>

<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>

<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
</dependency>

<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.1</version>
</dependency>

<!-- EL -->
<dependency>
<groupId>org.glassfish.web</groupId>
<artifactId>el-impl</artifactId>
<version>2.2</version>
</dependency>

</dependencies>
 

Create NameBean Class

This will be our ManagedBean for our form when user submits the form, this bean is populated and respective function is executed.

@ManagedBean(name = "pprBean")
public class NameBean {
        private String inputname;
       public String getInputname() {
                return inputname;
        }
        public void setInputname(String inpName) {
                this.inputname = inpName;
        }
        public void saveName(ActionEvent actionEvent) {
                FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Welcome " + inputname + " !"));
        }
}

Create commandButton.xhtml

commandButton.xhtml shows us the form and when user submits the form, respective ManagedBean is populated and function is invoked.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<h:body>
	<h2>PrimeFaces Codenvy</h2>
         <h:form id="form">
            <p:panel id="panel" header="Name" style="margin-bottom:10px;">
                <p:messages id="messages" />
                <h:panelGrid columns="3">
                    <h:outputLabel for="inputname" value="Name: *" />
                    <p:inputText id="inputname"
                        value="#{pprBean.inputname}" required="true" label="Name">
                        <f:validateLength minimum="2" />
                    </p:inputText>
                    <p:message for="inputname" />
                </h:panelGrid>
            </p:panel>
            <p:commandButton value="Submit" update="panel,display" id="ajax"
 actionListener="#{pprBean.saveName}" styleClass="ui-priority-primary"/>
            <p:panel id="display" header="Information" style="margin-top:10px;">
                <h:panelGrid columns="2">
                    <h:outputText value="Name: " />
                    <h:outputText value="#{pprBean.inputname}" />
                </h:panelGrid>
            </p:panel>
        </h:form>
</h:body>
</html>

Create web.xml

We are mapping the all requests for resources .jsf,.faces,.xhtml(url pattern) to be handled by 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>PrimeFaces Web Application</display-name>

<context-param>
<param-name>javax.faces.Production</param-name>
<param-value>Development</param-value>
</context-param>

<!-- Welcome page -->
<welcome-file-list>
<welcome-file>commandButton.xhtml</welcome-file>
</welcome-file-list>

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

<!-- Map these files with JSF -->
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<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>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
</web-app>

Build and Run the Application

Upon successful building the application and executing, it loads commandButton.xhtml where we input a NAME, then it will be successfully submit and shows what has been submitted back to user without page refresh.
app