JSF Facelets

A quick Recap

In the previous tutorial, we have seen the concept of JSF in much more detail. We have seen that default view handler for  JSF is JSP We have seen many features of JSF like page navigation, inputValidatons, Type Conversions and error handling in JSF. In this tutorial, we will discuss JSF Facelets. We will try to learn what are the Facelets, why to use JSF Facelets, tags in Facelets, and a sample application.

Introduction to the Facelets:

Jacob Hookom is the creator of Facelets. It replaces the default JSP with the XHTML for JSF. Facelets uses XHTML or XML to build component trees. We use Facelets to create HTML pages and to create component trees called views. Facelets are the page declaration language; with Facelets, we can create reusable views. Facelets use UI component trees to create views. It is a templating framework which is based on a few simple principles.

  • Many UI component objects together create a tree
  • It’s JSF-centric
  • Developers can Build reusable templates
  • Facelets provide many reusable components in its library we don’t have to reinvent the wheel.
  • With JSFC we can code JSF components
  • Many marker tags are also present like f:view and f:subview
  • Facelets use JSF life-cycle for composing and rendering components.

What are the core ideas behind Facelets?

There are three core ideas of Facelets

  • JSF integration: View Handler is used to implement JSF
  • Composition: Compile view files into single component tree
  • Templates: Layout files define the View layout.

Why Use JSF Facelets?

When we use Facelets with JSF, we feel the difference. Facelets are designed to best fit with JSF component model. There are some limitation in JSP and JSF faces overcomes them. Facelets completes its life-cycle in six phases. Facelets are reusable; it means that we can create templates with it and re-use them again and again as needed. There is no extra line of code needed to make it a template. We know that there are also other frameworks like tiles (https://tiles.apache.org/), for them who know JSF it is easy for them to learn Facelets with no efforts. Facelets view handlers are more versatile then JSP view handlers. Facelets are also completely integrate-able with JSF.

JSF and JSP conflicts

 We know that JSP is the default view technology in Java for JSF, so if we use JSP with JSF, we have to consider all the requirements for JSPs in JSF, like providing tag libraries with the custom action. Developers of the JSF also have to provide View Handler Implementation by JSPs.

JSP process the request in just one phase, in which it gets the request process it and write out response. JSP is used to translate view part (UI tags) and source part (Java code) into the form of servlets.  JSP results into the servlet so that the Java code could execute doGet and doPost methods.

JSF process the request in six phases, which we have discussed earlier. JSf has totally different design goals than  JSPs. It is more recent creation. JSF runs on top of Servlet architecture. JSP and JSF were built at two different times for two different purposes and developers somehow manages to integrate them with each other, that is the core reason of conflicts between both the technologies.

Advantages of Facelets

  • Composite components provide reusability
  • Customizable components
  • Compiles faster
  • EL validations can be performed at runtime
  • Rendering is also faster

Features of Facelets

  • A View Handler for JSF
  • Eliminates JSP no more .jsp file used
  • .xhtml file is used to define JSF
  • Faster than JSP and JSF.

Tag libraries in JSF

There are several tag libraries present in JSF

  • JSF Facelets tag library
  • JSF HTML tag library
  • JSF core tag library
  • JSTL core tag library
  • JSTL Functions tag library

Starting with Facelets Tags

Fist use this namespace in .xhtml file to use Facelets

Now we can use following tags in the file

  • <ui:component> tag to create new component
  • <ui:decorate> tag include content of another Facelet
  • <ui:define> tag: characterizes the component to be embedded into the page by a layout.
  • <ui:fragment> tag: incorporate the new UI component instance into the JSF Component Tree
  • <ui:composition> tag
  • <ui:include> tag: incorporates the UI component in the src attribute as a piece of the existing JSF page
  • <ui:insert> tag: introduces the contents into a template
  • <ui:param> tag: pass the parameters to an included file
  • <ui:remove> tag: eliminate the content from a page
  • <ui:repeat> tag: iterates over a group of objects

An example of the Component tag is shown below, to demonstrate the use of tags.


Using Facelets we can define templates, these templates are reusable and flexible. Due to its reusability and flexibility we use Facelets with JSF. Facelets are designed to work effectively with JSF. It completely uses JSF lifecycle. Default view technology for JSF is JSP. JSP has its limitations due to the gap of design goals between JSF and JSP. By using Facelets, we could eliminate JSP completely. Facelets uses XHTML file for its template creation, which is also a familiar technology. We have different libraries that can be used with JSF. Facelets Tag Library provide different tags for the developers. By using these Tags developer or designers can create their custom views.

In this tutorial, we have accomplished following things.

  • Introduction to the Facelets
  • The core ideas behind Facelets
  • Reason of using JSF Facelets
  • JSF and JSP conflicts
  • Advantages of Facelets
  • Features of Facelets
  • Some Tag libraries in JSF
  • Starting with Facelets Tags

In the next post, you will see the detailed Example on The JSF in more detail.

Hope that you like this tutorial. Stay tuned for more upcoming tutorials. Stay Blessed!

About Author: Uzair Ahmed Khan is Technical Content Writer, Computer Software Blogger and Software Engineer Enthusiast with a keen eye on Java Technologies other Related Developments.