JSF2 hello world example

Java Server Faces 2 (JSF) is server side MVC web framework to implement web applications using reusable UI components which already available as different vender's. JSF applications are event driven. Main content of JSP can be described as set of API's which use to represent and manage the state of components which helps to validate, data conversion, event handling, page navigation etc.

Main idea behind using JSF is to develop web applications with in less time period with out any hassles. Lets create simple hello world example using JSF 2.

Prerequisites 

1. You should have install java in your PC and set path variable correctly (JAVA_HOME, JRE_HOME)
2. You should have install Eclipse Java EE LUNA 4.4 IDE or any IDE you preferred (In this post I'm Using Eclipse )

Step 1 Create Dynamic web project

As first step lets create simple Dynamic Web Project using Eclipse. Go to File->New->New Dynamic Web Project. Give preferred name to the project (Here I will user project name as JSF4Biginner as below Figure). Make sure you have selected Apache Tomcat 7 as target run time. If it's not available click on New Runtime button Then provide tomcat installation directory. Here you should provide installed JDK in JRE selection. This is really important otherwise it will give run-time errors when project deployed in to server.

Then select Configuration as Default Configuration For Apache Tomcat v7.0 as show in figure.

Step 2 Convert to Maven Project

Then convert project in to maven project my right click on project and go to Configure -> Convert to Maven Project(Figure 3)

Figure 3: Convert to Maven Project

Then you will see popup interface do not change any parameter on it click Finish.

Then go to Java Build Path and the JRE System Library and you have to set installed JDK version.  Do not user J2SE default selected one you will get run time errors if you keep default one .

Then we have to change our project structure to commence with Maven standards there for lets delete the WebContent folder on project and added new webapps,java,resource folder on src->main folder as show in below. (This main folder also newly added folder)

Since we have change our source default location we have to change that to do that right click on peoject and go proprties theyn select Java Build Path. Then go to source tab. Then select the JSF4Biggeners/src node and remove it. Then click on add Folder and select our newly added src.main.java folder location. Final source tab will be similar to below image.

 
Then we have to remove previous WebContent folder and below items show in image from deploying structure and add new webapp folder in to deployment. Go to project properties -> Deployment Assembly then remove the WebContent folder.

Then click on add -> Folder then select webapp folder and java folder in your project. Final interface will be similar to below image.

Step 3 Update POM.xml file

Then lets add dependencies to this project. First change following properties on Project properties under Maven. Then check on  Download repository index on Startup. As below image. Then click Ok and restart the Eclipse.



Double click on pom.xml file and click on dependencies tab as show in below screen shot. then click on add button on dependencies section.

Then type "jsf-api" and select "JSF-API 2.0" as show in below image.Then click OK.

Then again click on Add and type "jsf-impl". Then select com.sun.faces JSF-impl. Then click OK.

Step 4 Lets add bean class 

Lets add bean class inside src.main.java folder by right click on folder and New -> Class and provide class name as "JSFBean.java" then add interface "Serializable" clcik finish. Then add following content in to that.

package main.java;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;

import javax.faces.bean.SessionScoped;

@ManagedBean(name="beenObj")

@SessionScoped

public class JSFBean implements Serializable {

private String greeting="Hello World JSF :D";

public String getGreeting() {

return greeting;

}

public void setGreeting(String greeting) {

this.greeting = greeting;

}

}

Step 5 Lets add default faces 

Then lets add our default JSF page call default.xhtml inside the webapp folder. Right click on webapp folder and go to New-> Other then select file. type file name as default.xhtml then click finished.

add following content in to that file.

<?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">

<h:head>

<title>Hello World JSF Tutorial</title>

</h:head>

<h:body>

This is our first JSF page

<br />

       #{beenObj.greeting}

<br />

</h:body>

</html>

Step 6 Update web.xml file

Since we have delete the WebContent folder in our previous steps we need to add deployment descripter file in to our new project structure. To do that right click on project then go to Java EE tools -> Generate Deployment Descriptor Stub. Then you can see new web.xml file has created on WEB-INF folder in webapp folder. Then need to update web.xml file with following content.

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

id="WebApp_ID" version="2.5">

  <display-name>JSF4Beginner</display-name>

  <!-- Change to "Production" when you are ready to deploy -->

<context-param>

<param-name>javax.faces.PROJECT_STAGE</param-name>

<param-value>Development</param-value>

</context-param>

  

  <welcome-file-list>

    <welcome-file>faces/default.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>

Now we are ready to run our first JSF example. To the run the project right click on project and go to Run As -> Run on Server then select the installed Tomcat 7 and click finished. 
 

Then using follwoing link http://localhost:8080/JSF4Bigginer/ You will see similar result to below image.

You can download the project on following GitHub location https://github.com/NirmalBalasooriya/JSF4Biginner. This is simple hello world programe using JSF 2 and In future posts I will add some advance features of JSF.