December 20, 2014
Hot Topics:

JSF 2.0 Views: Hello Facelets, Goodbye JSP

  • March 1, 2010
  • By Sangeetha S, Nitin KL, Ananya S
  • Send Email »
  • More Articles »

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="http://www.w3.org/1999/xhtml" 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="http://www.w3.org/1999/xhtml"
      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="http://www.w3.org/1999/xhtml"
      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.


Tags: JavaServer Faces, JSF, JavaServer Pages, Facelets, JSP



Page 2 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel