JSF2

PrimeFaces hello world with step by step guidance


Are you new to Primefaces? Are you wondering how it works and how to getting started? You’re at the right place. We’re launching a series of Primefaces guides for beginners. Welcome to the Java Tutorial Spot! So let’s start with Hello World program.

Primefaces Hello World program

PrimeFaces is user interface (UI) component library for JavaServer Faces (JSF) based applications. Now days widely used in enterprise application world. So now back to the point below, I mention which tool I use during make this Primefaces Hello World program.

Tool which I use

  1. JSF 2.1 jar (apache myfaces 2.1.5 OR Mojarra 2.1.6)
  2. Primeface jar (I use Primefaces 6.0)
  3. Eclipse Mars
  4. Apache tomcat 7
Note :
PrimeFaces only requires a JDK 5 or above version runtime and a JSF 2.x implementation as mandatory dependencie.

Step 1 : Create Dynamic Project

First, you need to create a dynamic web project in eclipse then select your runtime in my case I choose apache tomcat. Then select configuration as JavaServer Faces v2.1 project.

Step 1 - Primefaces Hello World Program

Step 2 : Generate web.xml

Now we go for next step here you see Configure web module settings select generate web.xml deployment descriptor now move to the next step.

 Step 2 - Primefaces-Hello-World-Program

Step 3: Download and Select JSF library

Remember in the previous step you select JSF version here is JSF jar you need to download or select which library you want to use.

Step 3 - Primefaces Hello world Program

If you already downloaded JSF library then it show above screen otherwise you need to download library like this

 Step-3.1-Primefaces-Hello-World-Program

Step 4: add URL mapping

Then we go add URL mapping pattern because we write primefaces code in XHTML file if you do not add this in your pattern then it will not consider xhtml code during an application run. you also add this manually if you don’t wanna here.

Step 4 - Primefaces Hello world Program

If you not follow above step 4 then you need to add mutually entry in web.xml like

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

Now Project structure look like this

 project structure - Primefaces Hello World Program

HelloWorld.java

package com.javatutorialspot;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

@ManagedBean(name = "pc_helloWorld", eager = true)
@ViewScoped
public class HelloWorld implements Serializable {

	private static final long serialVersionUID = 1L;
	private String bio;
	
	public String getBio() {
		return bio;
	}
	
	public void setBio(String bio) {
		this.bio = bio;
	}
}

Using  @ManagedBean  you can specify this bean along with name attribute you can specify bean name. If the name attribute is not specified, then the managed bean name will default to fully qualified class name. In our case, it would be pc_helloWorld.

Another attribute is eager if it’s true then bean will be created before it is requested for the first time otherwise it has “Iazy”  initialization it means bean will be created only when a request is initiated.

Using  @ViewScoped  we tell bean which scope we used during the web application run.

HelloWorld.xhtml

<!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:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Primefaces Hello World Example</title>
</h:head>
<h:body>
    <h:form id="frm">
        <p:outputLabel value="Enter your text:" for="myTxt"></p:outputLabel>
        <p:watermark value="Enter value.." for="myTxt"></p:watermark>

        <p:editor value="#{pc_helloWorld.bio}" id="myTxt"></p:editor>
        <p:spacer width="20"></p:spacer>
        <div style="text-align: center;">
            <p:commandButton value="Submit" update=":frm:output" style=""></p:commandButton>
        </div>
        <p:spacer width="20"></p:spacer>
        <p:outputLabel value="Output :"></p:outputLabel>
        <p:outputLabel value="#{pc_helloWorld.bio}" id="output"></p:outputLabel>
    </h:form>
</h:body>
</html>

In above code you see we add xmlns:p=”http://primefaces.org/ui” for primefaces UI. we use primefaces editor component for this example.

OutputOutput - primeface hello world

Download Source Code

Download Hello World Example

References

  1. PrimeFaces Official Website

 

There are currently no comments.