Friday, December 20, 2013


The term Facelets refers to the view declaration language for JavaServer Faces technology. Facelets is a part of the JavaServer Faces specification and also the preferred presentation technology for building JavaServer Faces technology-based applications.
Facelets is a powerful but lightweight page declaration language that is used to build JavaServer Faces views using HTML style templates and to build component trees. Facelets features include the following:
  • Use of XHTML for creating web pages
  • Support for Facelets tag libraries in addition to JavaServer Faces and JSTL tag libraries
  • Support for the Expression Language (EL)
  • Templating for components and pages
Advantages of Facelets for large-scale development projects include the following:
  • Support for code reuse through templating and composite components
  • Functional extensibility of components and other server-side objects through customization
  • Faster compilation time
  • Compile-time EL validation
  • High-performance rendering
Facelets views are usually created as XHTML pages. JavaServer Faces implementations support XHML pages created in conformance with the XHTML Transitional Document Type Definition (DTD), as listed at By convention, web pages built with XTHML have an .xhtml extension.
JavaServer Faces technology supports various tag libraries to add components to a web page. To support the JavaServer Faces tag library mechanism, Facelets uses XML namespace declarions as shown in the following table:


A typical JavaServer Faces web page includes the following elements:
  • A set of namespace declarations that declare the JavaServer Faces tag libraries
  • Optionally, the HTML head (h:head) and body (h:body) tags
  • A form tag (h:form) that represents the user input components

To add the JavaServer Faces components to your web page, you need to provide the page access to the two standard tag libraries: The JavaServer Faces HTML render kit tag library and the JavaServer Faces core tag library. The JavaServer Faces standard HTML tag library defines tags that represent common HTML user interface components. The JavaServer Faces core tag library defines tags that perform core actions and are independent of a particular render kit.
To use any of the JavaServer Faces tags, you need to include appropriate directives at the top of each page specifying the tag libraries.
In this JavaServer Faces tutorial we will analyze the Guess_A_Number JSF application that you can find in Oracle’s online tutorial ( The application presents you with a page that asks you to guess a number from 0 to 10, validates your input against a random number, and responds with another page that informs you whether you guessed the number correctly or incorrectly.


In a typical JavaServer Faces Application, each page of the application connects to a managed bean that serves as a backing bean. The backing bean defines the methods and properties that are associated with the components. In this example, both pages use the same backing bean.


To create a page or view, you add components to the pages, wire the components to backing bean values and properties, and register converters, validators, or listeners on the components.
For our application, XHTML web pages serve as the front end. The first page of the example application is a page called greeting.xhtml. A closer look at various sections of this web page provides more information.


First we declare the content type for the page and then the XML namespace for the tag libraries that is used in the web page.
For Facelets applications, the XML namespace directives uniquely identify the tag library URI and the tag prefix. For example, when you create a Facelets XHTML page, include namespace directives as follows:


The XML namespace URI identifies the tag library location, and the prefix value is used to distinguish the tags belonging to that specific tag library. You can also use other prefixes instead of the standard h or f. However, when including the tag in the page, you must use the prefix that you have chosen for the tag library.
The h:inputText tag accepts user input and sets the value of the managed bean property userNumber through the EL expression #{userNumberBean.userNumber}. The input value is validated for value range by the JavaServer Faces standard validator tag f:validateLongRange. We will discuss validators in another tutorial. We just accept its functionality for now.

The image file,, is added to the page as a resource; so is the style sheet. Web resources are any software artifacts that the web application requires for proper rendering, including images, script files, and any user-created component libraries. Resources must be collected in a standard location, which can be one of the following:

  • A resource packaged in the web application root must be in a subdirectory of a resources directory at the web application root: resources/resource-identifier.
  • A resource packaged in the web application’s classpath must be in a subdirectory of the META-INF/resources directory within a web application: META-INF/resources/resource-identifier. You can use this file structure to package resources in a JAR file bundle in the web application.
Resources can be considered as a library location. Any artifact, such as a composite component or a template that is stored in the resources directory, becomes accessible to the other application components, which can use it to create a resource instance.

An h:commandButton tag with the ID submit starts validation of the input data when a user clicks the button. Using implicit navigation, the tag redirects the client to another page, response.xhtml, which shows the response to your input. The page specifies only response, which by default causes the server to look for response.xhtml.

The tags defined by the JavaServer Faces standard HTML tag library represent HTML form components and other basic HTML elements. These components display data or accept data from the user. This data is collected as a part of a form and is submitted to the server usually when the user clicks a button. 


Most of the component tags support the following attributes:


Michail Kassapoglou