JavaWeb-based JavaJSF 2.0 Views: Hello Facelets, Goodbye JSP

JSF 2.0 Views: Hello Facelets, Goodbye JSP

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

JavaServer Faces (JSF) is a Java component UI framework for building dynamic pages for a web application. JSF technology provides an API for creating, managing, and handling UI components and a tag library for using components within a web page. The new release of JavaServer Faces, JSF 2.0, is a major release for the specification, and it will be part of the Java Enterprise Edition 6 platform. This latest release has several interesting features that make the development and deployment of JSF applications simple and easy.


Unlike JSF 1.x versions, which use JavaServer Pages (JSP) for views, JSF 2.0 mandates support for Facelets as the view technology for JSF pages. Like JSP, Facelets are an implementation of View Declaration Language (VDL), which allows developers to declare UI components in different presentation technologies using HTML templates. However, because the Facelets view technology has been designed specifically to leverage the features of JSF, Facelets provide JSF developers with a simpler, more powerful programming model than JSP. That is why beginning with JSF 2.0 Facelets will replace JSP (JSF 2.0 has retained JSP support only for backward compatibility).


In this article, we explore what makes Facelets superior to JSP for JSF applications, as well as how JSF 2.0 supports them. We use a demo application and provide some code samples to highlight the power of this new technology.


Facelets Features

In Facelets, the pages are compiled to an abstract syntax component tree, which gets built to a UIComponent hierarchy during runtime. The Facelets tags don’t need declaration in a tag library descriptor (TLD) file. The attributes in the tag are dynamic; they automatically get mapped to the properties. One of the main Facelets features not available in JSP is page templating. In addition, Facelets are faster in execution than JSPs.


Facelets pages are authored using XHTML, and they provide good expression language (EL) support. Facelets also leverage the concept of XML namespaces to support these tag libraries:


  • JSF HTML Tag Library
  • JSF Core Tag Library
  • JSTL Core Tag Library
  • JSTL Functions Tag Library
  • JSF Facelets Tag Library
The idea behind authoring Facelets using XHTML is to make them portable across diverse development platforms. Because JSF is authored using XHTML pages, which conform to DTD, Facelets have the .xhtml extension. To use Facelets in a JSF application, you must set the following context parameters in web.xml:

<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
<context-param>
<param-name>javax.faces.FACELETS_SKIP_COMMENTS</param-name>
<param-value>true</param-value>
</context-param>



The first parameter defines .xhtml as the default suffix for all view pages containing JSF content. The true value of the second parameter causes the JSF implementation to ignore XML comments in the Facelets page.

Facelets Demo Application


Now, you are ready to use Facelets in a web application. For the rest of this tutorial, we will use a simple online quiz application as the demo example. The application allows a registered user to answer five simple questions that test his or her general knowledge, and it displays the score towards the end of the quiz. The user can take the quiz only after a successful login.


Consider the Facelets page simplelogin.xhtml, a XHTML page that contains certain JSF tags as well as the following simple login form:

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html
xmlns_h=”http://java.sun.com/jsf/html”
xmlns_f=”http://java.sun.com/jsf/core”>

<head>
<title>
Test your knowledge!!
</title>
<link rel=”stylesheet” type=”text/css” href=”./css/default.css”/>

</head>
<body>
<div class=”header”>Online Examination Application</div>
<form>
<table>
<tr>
<td>e-Mail ID</td>
<td>
<h:inputText label=”eMail ID” id=”emailId”
value=”#{userBean.email}” size=”20″ required=”true”/>
<h:message for=”emailId” styleClass=”error”/>
</td>
</tr>

<tr>
<td>Password:</td>
<td>
<h:inputSecret label=”Password” id=”password”
value=”#{userBean.password}” size=”20″ required=”true” />
<h:outputLink value=”forgotPassword.jsf”>
<h:outputText value=”Forgot Password”/> </h:outputLink>
<h:message for=”password” errorClass=”error” />
</td>
</tr>

<tr>
<td>
<h:commandButton value=”Login” action=”#{userBean.checkUser}”/>
</td>
<td><h:commandButton type=”reset” value=”Reset”/> </td>
</tr>
</table>
Want to <h:outputLink value=”regform.jsf”>
<h:outputText value=” Register”/> </h:outputLink> ??

</form>

<div class=”footer”> © E-commerce Research Labs, E & R, Infy</div>

</body>




In JSF 2.0, you use the tag libraries by declaring the appropriate namespaces within the <HTML> tag (denoted by the prefix h and f). The page defines a header, a login form, links to the registration form, and a footer. As is evident from the code, knowledge of HTML and JSF tags are sufficient to build views using Facelets.


Facelets Page-Templating


As mentioned earlier, the main advantage of Facelets technology is the page-templating feature. The header and footer information is common to all pages. Including those in all the individual pages would quickly become a maintenance nightmare. To avoid this, you define a Facelets template that defines a generic layout to all the view pages with the scope for customization.


A Facelets template is again a simple XHTML file that uses Facelets tags to define various logical divisions of the view such as header, footer, and content. You will create a template file named layout.xhtml and place it in a templates folder to differentiate between templates and other Facelets files. Here is the layout.xhtml file:

<!– XHTML DOCTYPE Declaration –>
<html
xmlns_h=”http://java.sun.com/jsf/html”
xmlns:ui=”http://java.sun.com/jsf/facelets“>
<h:head>
<title>
Test your knowledge!!
</title>
<link rel=”stylesheet” type=”text/css”
href=”./css/default.css”/>
<ui:insert name=”script”></ui:insert>
</h:head>

<h:body>
<div class=”header”>Online Examination Application</div>
<ui:insert name=”content”>Default Content</ui:insert>

<div class=”footer”> © E-commerce Research Labs, E & R, Infy</div>

</h:body>
</html>




The first thing to notice is the use of the Facelets namespace identified by the prefix ui. You define the header and footer content that will be common across all views in the application. In addition, you also define a logical division named “content” using a <ui:insert> tag.


A <ui:insert> tag is a Facelets tag used to define a logical division in a template that is associated with a unique name. The client of the template will provide the content of these divisions. If a client fails to do so, then the content present in the body of the <ui:insert> tag will be used. Let us rewrite the login form shown earlier using this template in login.xhtml:

<!– XHTML DOCTYPE Declaration –>
<html
xmlns:ui=”http://java.sun.com/jsf/facelets”
xmlns_h=”http://java.sun.com/jsf/html”
xmlns_f=”http://java.sun.com/jsf/core”>
<ui:composition template=”/templates/layout.xhtml”>
<ui:define name=”content”>

<h:form>
<!– Rebuild the form as before –>
</h:form>
</ui:define>
</ui:composition>
</html>



A Facelets page can use a template by using the <ui:composition> tag available in the Facelets namespace. The template attribute of this tag represents the location of the template file. Anything outside the <ui:composition> tag will be ignored. The html tag is also used mainly to declare different namespaces. The <ui:define> tag is used to provide the content for the logical divisions as defined in the template. The name attribute identifies a logical division, and the content is defined as the body of the tag. Note that the <ui:define> tag has to be defined within the <ui:composition> tag.


Facelets Replace JSP


Facelets are one of most interesting features in the JSF 2.0 specification. Facelets are considered simpler and more powerful than JavaServer Pages because they support the features discussed in this article, namely page templating, faster execution, and dynamic tag attributes. In fact, Facelets are recommended as the default view for JavaServer Faces from this release onward.


Stay tuned as we will explore more notable new features in JSF 2.0 in upcoming articles.


Acknowledgements

The authors would like to sincerely thank Mr. Subrahmanya (SV, VP, ECOM Research Group, E&R) for his ideas, guidance, support and constant encouragement and Ms. Yuvarani Meiyappan (Lead, E&R) for kindly reviewing this article and for her valuable comments.


About the Authors


Sangeetha S. works as a Senior Technical Architect at the E-Commerce Research Labs at Infosys Technologies. She has over 10 years of experience in design and development of Java and Java EE applications. She has co-authored a book on ‘J2EE Architecture’ and also has written articles for online Java publications.


Nitin KL works at the E-Commerce Research Labs at Infosys Technologies. He is involved in design and development of Java EE applications using Hibernate, iBATIS, and JPA.


Ananya S. works at the E-Commerce Research Labs at Infosys Technologies. She is involved in design and development of Java EE applications using Hibernate, iBATIS, and JPA.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories