JSF Central - Inside Facelets Part 2: Using Facelets
JSF Central

 Articles & Books 
Inside Facelets
Inside Facelets Part 2: Using Facelets
by Jacob Hookom
22 Sep 2005 02:45 EDT

This is the second of a series of articles about Facelets, an alternative view technology for building JSF applications. The first article provided an introduction to Facelets. In this article, Jacob explains how you can begin using Facelets in your JSF applications today.

Getting Started

Facelets is implemented as a JSF ViewHandler, which can be easily configured in your application. Simply make sure the Facelets JAR (jsf-facelets.jar) is in your project's classpath and add a single modification to your faces-config.xml:

    <!-- tell JSF to use Facelets -->

JavaServer Faces defaults to JSP files for defining views (*.jsp). You will want to change this to some other type in your WEB-INF/web.xml.


According to the context-param defined above, you can start writing Facelets and saving them with .xhtml extensions. You are now ready to start using Facelets.

Built-in Libraries

Facelets comes ready to use all of the UIComponents in the JavaServer Faces API under the same rules as you would with JSP. This means you may reference the online documentation for JSF's JSP tag libraries.

There is also a simple version of JSTL's core library available which gives you <c:forEach/> and <c:if/>.

Finally, there is a UI tag library built into Facelets which gives you all of the templating and re-use capabilities. More on this in another article.

Creating a Facelet

Facelets only needs to be proper XML. They aren't dependent on XHTML syntax and could be used along side WML, SVG, or even SOAP. With JSP, you often times import tag libraries, but Facelets just looks for namespaces at compilation, similar to JSPX. Here is the start of a XHTML Facelet document:

<html xmlns="http://www.w3.org/1999/xhtml"
<meta http-equiv="Content-Type" 
        content="text/html; charset=iso-8859-1" />
<title>My First Facelet</title>
	  <!-- body content goes here -->
	  Hello #{param.name}!

You should be able to save this code as test.xhtml and then immediately request test.jsf?name=Jacob (if your FacesServlet was mapped to *.jsf). This should be a good test to guarantee that you are setup correctly for Facelets.

Using EL

Facelets uses the new EL-API specification with JSF. This means that you can use either ${ } or #{ } interchangeably unlike JSP. As the example above shows, expressions can be inlined with regular text.

If you are using JSF 1.2, you can add your own custom ELResolvers for integrating Spring, EJB, JNDI, etc.-- all at once if you choose. You can even have ELResolvers of your own that work with objects specific to your application.

The EL-API is part of the JSP 2.1 specification, but doesn't have any dependencies on JSP or JSF. This means that it can be used with Facelets in any kind of deployment.

Using Components

In the example test.xhtml above, you will notice that there are extra namespaces declared. These are the same namespaces included in the JavaServer Faces API for the built-in JSP tag libraries. Again, Facelets wants to build off of familiar territory and documentation.

When you start using the built-in JSF components with Facelets, it's a good idea to have the tag library documentation available.

Since we already have our test.xhtml open, lets create a very simple form. Add the following code to the body of your page:

    <h:inputText value="#{person.name}"/>
    <h:commandButton action="#{person.action}"/>

The next step would be creating your person bean and modifying your faces-config.xml to back this simple example.

Aliasing Components (jsfc)

The previous example makes use of special tags that probably won't look so hot inside of an HTML designer tool like Dreamweaver. Facelets offers a different way to specify components within your page with the jsfc attribute within a standard HTML element (much like Tapestry and Struts Shale's Clay plugin. )

The Facelets compiler looks for the jsfc attribute for every element in the document. The value of the jsfc attribute is an alternate element name or "qname" to replace the one the designer used in the page.

<input type="text" jsfc="h:inputText" value="#{foo.bar}"/>

Facelets, at compile time, will instead create an h:inputText component in the document while automatically wiring all of the available attributes.

Aliasing components allows the desinger's tool to see a normal HTML input tag, but the programmer can treat it as a JSF component as specified by the jsfc attribute.

RSS feed(all feeds)

The Editor's Desk
Inside Facelets
In the Trenches

Site version 1.83  Report web site problems

Copyright (C) 2003-2015 Virtua, Inc. All Rights Reserved. Java, JavaServer Faces, and all Java-based marks are trademarks or registered trademarks of Oracle Corporation. in the United States and other countries. Virtua, Inc. is independent of Oracle Corporation. All other trademarks are the sole property of their respective owners.