HelloWorld Primefaces

This tutorial shows how to get started quickly with Primefaces 5 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 Primafaces 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:
HelloWorld primefaces example Hello world

Next add Primefaces libraries to the project classpath:
HelloWorld primefaces example Hello world

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:

HelloWorld primefaces example Hello world

Then,  move to the Deployment Assembly option (available from your Project properties) and include to the deploy path the Primefaces jar library:

HelloWorld primefaces example Hello world

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>

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>

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).

HelloWorld primefaces example Hello world
And here is your HelloWorld application in action:

HelloWorld primefaces example Hello world

Follow us on Twitter