Setting up Facelets Development Environment - Part 3
The web.xml created for this Facelets project will be different from the JSF- JSP project discussed in the previous example. Facelets default extention is .xhtml. So in web.xml, the default suffix for a JSF page has been set to XHTML as shown below.
The web.xml created for this Facelets project will be different from the JSF- JSP project discussed in the previous example. Facelets default extention is .xhtml. So in web.xml, the default suffix for a JSF page has been set to XHTML as shown below.
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
The web.xml file has been updated with the Faces Servlet and servlet-mapping. Include the below shown <servlet-mapping> also in the web.xml.
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
The complete web.xml looks as follows:
<?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>JSFFaceletsExample</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>
</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>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</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>
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
</web-app>
<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>JSFFaceletsExample</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>
</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>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</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>
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
</web-app>
As mentioned before Facelets is implemented as a JSF View Handler. A JSF ViewHandler is a plug-in that handles the Render Response and Restore View phases of the JSF request-processing life cycle. The faces-config.xml has been updated with FaceletViewHandler as shown below.
<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
To make sure that the project is set up correctly we will create a simple Facelets Program. It simply renders current date within an HTML <h> element.
Create a JSF Facelets Page
Right-mouse click on the WebContent folder of JSFFaceletsExample project, select New->HTML Page to launch the HTML Page wizard. In the HTML Page wizard enter the File Name as inlineText.xhtml and click Finish. Note that the extension of Facelets page is .xhtml.
Include the following code in the inlineText.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">
<h> Welcome to the world of Facelets</h>
<br></br>
<h>Current date : #{simpleBackingBean.currentDate}</h>
<br></br>
<h>Current date : ${simpleBackingBean.currentDate}</h>
</html>
"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">
<h> Welcome to the world of Facelets</h>
<br></br>
<h>Current date : #{simpleBackingBean.currentDate}</h>
<br></br>
<h>Current date : ${simpleBackingBean.currentDate}</h>
</html>
Facelets uses the new EL-API specification with JSF. Unlike JSP we can either use #{ } or ${ } interchangably as shown in the example above. Expressions can be inlined with regular text.
Create a new Java Class
Now, we will create a backing bean SimpleBackingBean.java file. It's a simple Java bean with one attribute currentDate and setter/getter methods for the attribute.Right-mouse click on the JavaResources:src folder of JSFFaceletsExample project,select New-> Class to launch the Java Class wizard. In the wizard enter the package name as, com.jsflessons.facelets.example and the Name of the class as SimpleBackingBean. Click the Finish button. Detailed steps with screen shots are described here.
package com.jsflessons.facelets.example;
import java.util.Date;
public class SimpleBackingBean {
private Date currentDate= new Date();
public Date getCurrentDate() {
return currentDate;
}
public void setCurrentDate(Date currentDate) {
this.currentDate = currentDate;
}
}
import java.util.Date;
public class SimpleBackingBean {
private Date currentDate= new Date();
public Date getCurrentDate() {
return currentDate;
}
public void setCurrentDate(Date currentDate) {
this.currentDate = currentDate;
}
}
Configure the managed bean in faces-config.xml.
In the Project Explorer, expand the node, JSFFaceletsExample->WebContent. Double-click on faces-config.xml. This will launch the Faces Configuration editor. Select the ManagedBean tab. Click on the Add button. This will launch the New Managed Bean wizard. Select the option, "Using an existing Java class". In the next wizard panel, search for the class we created SimpleBackingBean.java. Click Ok button. Select the scope as request and click Finish. Detailed steps with screen shots are described here.
You have registered SimpleBackingBean.java class as a managed bean. JSF-managed beans are standard JavaBeans that are used to hold user-entered data in JSF applications. Save the Faces Configuration editor. Select source tab. Your final faces-config.xml file should look like this:
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2">
<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
<managed-bean>
<managed-bean-name>simpleBackingBean</managed-bean-name>
<managed-bean-class>com.jsflessons.facelets.example.SimpleBackingBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
</faces-config>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2">
<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
<managed-bean>
<managed-bean-name>simpleBackingBean</managed-bean-name>
<managed-bean-class>com.jsflessons.facelets.example.SimpleBackingBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
</faces-config>
Run your webapplication
To run your web application, right click on inlineText.xhtml, click- >run as -> run on server.
Select the server type ,Apache Tomacat v6.0 Server.Click Fininsh.
Open a web browser and type the url : http://localhost:8080/JSFFaceletsExample/inlineText.xhtml