Introduction to JSF Framework

What is JSF?

JSF or Java Server Faces is a Java Framework  predominantly used for it UI/front-end capabilities.

What are the Benefits of JSF?

1. With JSF, you can build applications with rich user interfaces with complex functionality with minimal time and effort.

2. Its an open source framework, so you don’t have to pay a penny for using it. And we love free stuff’s , isn’t it !

3. Lot of UI libraries in the market in the form of Primefaces, RichFaces, IceFaces, MyFaces etc

4. Comparatively easy to learn.

Steps to Build a Simple ‘HelloWorld’ Application’ in JSF

Tools Required

Java, Eclipse, Apache Tomcat Server

Steps

1. Create a new Dynamic Web Project in Eclipse: File>New>Dynamic Web Project

DynamicWebProjectPress Next

 

2. Click on the checkbox: ‘Generate web.xml deployment descriptor’

2_deploymentdescriptor

 

Press Finish

3. Right Click on the Project ‘HelloWorld’ just created and go to Properties> Project Facets. Check the ‘JavaServer Faces’ check box.

Project Facets4. Click on ‘Further configuration available’ link on bottom. And check the Mojarra User library. Set others as in the picture below. And press OK.

Further Configuration

 

5. Check your web.xml file in WEB-INF, it should be automatically created with following contents.

 <?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_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>HelloWorld</display-name>
 <welcome-file-list>
 <welcome-file>index.html</welcome-file>
 <welcome-file>index.htm</welcome-file>
 <welcome-file>index.jsp</welcome-file>
 <welcome-file>default.html</welcome-file>
 <welcome-file>default.htm</welcome-file>
 <welcome-file>default.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>/faces/*</url-pattern>
 <url-pattern>*.xhtml</url-pattern>
 </servlet-mapping>
 <context-param>
 <description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
 <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
 <param-value>client</param-value>
</context-param>
 <context-param>
 <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
 <param-value>resources.application</param-value>
 </context-param>
 <listener>
 <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
 </listener>
 </web-app>
 

6. Create a new xhtml file under the Web Content directory with name as helloworld.xhtml.

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:h = "http://java.sun.com/jsf/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</head>
<h:body>

<h:outputLabel value="Hello World"></h:outputLabel>

</h:body>
</html>

7. Cross check the project Structure.

Project Structure

8. Create a server from the ‘new server wizard’ of Server view and select the appropriate Server. Press Finish.Click new Server

Select the Server

 

 

9. Right Click on the server thus created in the ‘ Server view’ and click on ‘add and remove’. Add the ‘HelloWorld’ JSF project to it. Press Finish.

Add HelloWorld to Server

10. Right Click on the Server and click ‘Start’. If everything goes fine, the server will start successfully.

start server

 

11. Go to browser and test the ouput. I have used the port number as 8081 since i changes it from 8080 to 8081. If you have not changed, you need to keep it 8080.

Output

 

Resolving Errors if any

1. Change the server ports if required.

Changing server ports

 

2. Set the server to use while running the project.

Server Properties

 

3. If you get a context initialization error, try to remove the below listener registration from dd.

  <listener>
 <listener-class>com.sun.faces.config.ConfigureListener</listener-class>
 </listener>