Creating Facelets Views and Mapping Faces Servlet

Facelets views are XHTML pages. You can create a web page or view, by adding components to the page, wire the components to backing bean values and properties, and register converters, validators, or listeners on the components.

The XHTML web pages serve as the front end. The first page of your application is index.xhtml by default.

The first section of the web page declares the content type for the page, which is XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The next section specifies the language of the XHTML page and then declares the XML namespace for the tag libraries that are used in the web page.

<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">

// index.xhtml

<?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://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Jsf Form</title>
</h:head>
<h:body>
<h:form id="form">
<h:outputLabel for="username">User Name</h:outputLabel>
<h:inputText id="name" value="#{user.name}" required="true">
<f:validateRequired for="name" />
</h:inputText><br/>
<h:commandButton value="OK" action="response.xhtml"></h:commandButton>
</h:form>
</h:body>
</html>

The Facelets HTML tag begin with h: are used to add components on the web page and core tag f:validateRequired is used to validate user input.

An h:inputText tag accepts user input and sets the value of the managed bean property name through the EL expression #{user.name}.

After running index.xhtml file, a HTML index page is rendered by JSF. The output is given below.

// Output: index page

This is the process to create Facelets view. Now, you can create second xhtml page as response.xhtml as giving the below.

// response.xhtml

<?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://xmlns.jcp.org/jsf/html">
<h:head>
<title>Response Page</title>
</h:head>
<h:body>
<h1>
Hello #{user.name}
</h1>
</h:body>
</html>

After running the index file, following output will be displayed.

Output:

// index page

// response page

Mapping The Faces Servlet

Configure of a JavaServer Faces application is done by mapping the Faces Servlet in the web deployment descriptor file a web.xml.

In NetBeans IDE, a web deployment descriptor file is automatically created for you. A autogenerated web.xml file is given below.

// web.xml

<?xml version="1.0" encoding="UTF-8"?>
<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">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<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>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>
</web-app>

Next TopicFacelets Templates

← prev next →