This tutorial shows how to get started quickly with Primefaces with a basic Hello World example that will be deployed on WildFly application server.
This tutorial is broken in two parts: the first one is an hello world example of Primefaces developed using Eclipse and downloading the library manually. The second helloworld example is engineered with Maven so you will just need to configure Primefaces dependencies in it.
HelloWorld Primefaces using Eclipse
Start by downloading the latest stable Primefaces release from http://www.primefaces.org/downloads
There you will find both the Commercial version of Primefaces called PrimeFaces Elite and the Community version. We will download the Community version. Once downloaded create a new Eclipse Dynamic web project:
Next add Primefaces libraries to the project classpath:
Although not mandatory, you can include the JSF facet to your eclipse project which will include some basic JSF configuration and will assist you while coding your JSF views:
Then, move to the Deployment Assembly option (available from your Project properties) and include to the deploy path the Primefaces jar library:
Check that your web.xml file contains a path for the Faces servlet and a welcome page:
<web-app version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"> <display-name>HelloPrime</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.xhtml</welcome-file> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <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>*.xhtml</url-pattern> </servlet-mapping> </web-app>
Coding the view
Now we will create a basic view which will just ask as input for a word and return in an output text an anagram for that word. Here is index.xhtml:
<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:form id="jsfexample">
<p:panelGrid columns="2">
<f:facet name="header">Anagram maker</f:facet>
<h:outputLabel for="Word" value="Word" />
<p:inputText id="Word" value="#{bean.word}" label="Word" />
<h:outputLabel for="Anagram" value="Anagram" />
<h:outputText id="Anagram" value="#{bean.anagram}" />
<f:facet name="footer">
<p:commandButton action="#{bean.generateAnagram}" update="Anagram"
value="Generate anagram" icon="ui-icon-check" style="margin:0" />
</f:facet>
</p:panelGrid>
</h:form>
</h:body>
</html>
Coding the Model
And here is the CDI bean that will generate the anagram algorithm:
package com.mastertheboss;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
import javax.enterprise.inject.Model;
@Model
public class Bean {
private String word;
private String anagram;
public void generateAnagram() {
Random rand = new Random();
List<Character> characters = new ArrayList<Character>();
for (char c : word.toCharArray()) {
characters.add(c);
}
StringBuilder output = new StringBuilder(word.length());
while (characters.size() != 0) {
int randPicker = (int) (Math.random() * characters.size());
output.append(characters.remove(randPicker));
}
this.anagram = output.toString();
}
public String getAnagram() {
return anagram;
}
public void setAnagram(String anagram) {
this.anagram = anagram;
}
public String getWord() {
return word;
}
public void setWord(String word) {
this.word = word;
}
}
Finally, check before deploying that you have included a WEB-INF/beans.xml file in your project for activating CDI. Now deploy your Helloworld applications from the Servers panel (You need JBoss Tools installed in order to do that).
And here is your HelloWorld application in action:
HelloWorld Primefaces using Maven
Following here are the steps for deploying the HelloWorld primefaces application using Maven. Start by creating a project skeleton using the webapp-javaee7 archetype:
mvn -DarchetypeGroupId=org.codehaus.mojo.archetypes -DarchetypeArtifactId=webapp-javaee7 -DgroupId=com.mastertheboss -DartifactId=primefaces -Dversion=1.0 -Dpackage=com.mastertheboss -Darchetype.interactive=false –batch-mode –update-snapshots archetype:generate
This will generate a project named HelloPrime that can be opened and edited through Eclipse or NetBeans. Now, include in the src/main/java of your project the only Bean contained in the project and in the src/main/webapp the index.xhtml file along with the web.xml file contained in the first part of this tutorial.
Now, what’s left to do is configuring the dependencies required to build our project:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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.mastertheboss</groupId>
<artifactId>primefaces</artifactId>
<version>10.0.0-SNAPSHOT</version>
<packaging>war</packaging>
<name>WildFly Quickstart: helloworld</name>
<description>WildFly Quickstarts: Helloworld</description>
<url>http://wildfly.org</url>
<licenses>
<license>
<name>Apache License, Version 2.0</name>
<distribution>repo</distribution>
<url>http://www.apache.org/licenses/LICENSE-2.0.html</url>
</license>
</licenses>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<!-- JBoss dependency versions -->
<version.wildfly.maven.plugin>1.0.2.Final</version.wildfly.maven.plugin>
<version.jboss.spec.javaee.7.0>1.0.3.Final</version.jboss.spec.javaee.7.0>
<!-- other plug-in versions -->
<version.war.plugin>2.1.1</version.war.plugin>
<!-- maven-compiler-plugin -->
<maven.compiler.target>1.8</maven.compiler.target>
<maven.compiler.source>1.8</maven.compiler.source>
<primefaces.version>6.0</primefaces.version>
</properties>
<dependencyManagement>
<dependencies>
<dependency>
<groupId>org.jboss.spec</groupId>
<artifactId>jboss-javaee-7.0</artifactId>
<version>${version.jboss.spec.javaee.7.0}</version>
<type>pom</type>
<scope>import</scope>
</dependency>
</dependencies>
</dependencyManagement>
<dependencies>
<!-- Import the CDI API, we use provided scope as the API is included in WildFly -->
<dependency>
<groupId>javax.enterprise</groupId>
<artifactId>cdi-api</artifactId>
<scope>provided</scope>
</dependency>
<!-- Import the Common Annotations API (JSR-250), we use provided scope
as the API is included in WildFly -->
<dependency>
<groupId>org.jboss.spec.javax.annotation</groupId>
<artifactId>jboss-annotations-api_1.2_spec</artifactId>
<scope>provided</scope>
</dependency>
<!-- Import the JSF API, we use provided scope as the API is included in
WildFly -->
<dependency>
<groupId>org.jboss.spec.javax.faces</groupId>
<artifactId>jboss-jsf-api_2.2_spec</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>${primefaces.version}</version>
</dependency>
</dependencies>
<build>
<!-- Set the name of the WAR, used as the context root when the app
is deployed -->
<finalName>${project.artifactId}</finalName>
<plugins>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>${version.war.plugin}</version>
<configuration>
<!-- Java EE doesn't require web.xml, Maven needs to catch up! -->
<failOnMissingWebXml>false</failOnMissingWebXml>
</configuration>
</plugin>
<!-- WildFly plug-in to deploy the WAR -->
<plugin>
<groupId>org.wildfly.plugins</groupId>
<artifactId>wildfly-maven-plugin</artifactId>
<version>${version.wildfly.maven.plugin}</version>
</plugin>
</plugins>
</build>
</project>
As you can see, in terms of dependencies we have included the CDI, JSF and PrimeFaces dependencies. At the bottom of the pom.xml file you can find the WildFly Maven plugin that can be used to manage deployments on WildFly from the Maven shell.
Just deploy your project with:
mvn clean install wildfly:deploy
You can find the source code for this project at: https://github.com/fmarchioni/mastertheboss/tree/master/web/primefaces/helloworld-primefaces
Do you want to right-size your PrimeFaces application into a JAR file without any WildFly installation ? Then check out this tutorial: Package your Primefaces application in a JAR with Thorntail
