Skip to main content

TOTD #46: Facelets with Java Server Faces 1.2

Posted by arungupta on September 22, 2008 at 6:05 AM PDT



This blog updates href="http://blogs.sun.com/arungupta/entry/totd_45_ajaxifying_java_server">TOTD
#45 to use Facelets
as view technology.



Powerful templating system, re-use and ease-of-development,
designer-friendly are the key benefits of
Facelets. Facelets are already an integral part of Java Server Faces
2.0. But this blog shows how to use them with JSF 1.2.

  1. Download Facelets from href="https://facelets.dev.java.net/servlets/ProjectDocumentList?folderID=3635&expandFolder=3635&folderID=0">here
    (or specifically href="https://facelets.dev.java.net/files/documents/3448/84208/facelets-1.1.14.zip">1.1.14).  href="https://facelets.dev.java.net/nonav/docs/dev/docbook.html">Facelets
    Developer Documentation is a comprehensive source of
    information.
  2. Add "jsf-facelets.jar" from the expanded directory to
    Project/Libraries as shown:



    src="http://blogs.sun.com/arungupta/resource/images/facelets-nb61-cities-add-libs.png">
  3. Change the JSF view documents to ".xhtml" by adding the a
    new
    context parameter in "web.xml" as:


    style="text-align: left; background-color: rgb(204, 204, 255); width: 100%;"
    cellpadding="2" cellspacing="2">
    <context-param>

       
    <param-name>javax.faces.DEFAULT_SUFFIX</param-name>

       
    <param-value>.xhtml</param-value>

      </context-param>



    The updated "web.xml" looks like:



    src="http://blogs.sun.com/arungupta/resource/images/facelets-nb61-cities-webxml-xhtml.png">

  4. Specify Facelets as the style="font-family: monospace;">ViewHandler of
    JSF application by adding the following fragment to "faces-config.xml":


    style="text-align: left; background-color: rgb(204, 204, 255); width: 100%;"
    cellpadding="2" cellspacing="2">
      <application>

       
    <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>   


      </application>



    The updated document looks like:



    src="http://blogs.sun.com/arungupta/resource/images/facelets-nb61-cities-facesconfig-viewhandler.png">

  5. Create three new XHTML pages by right-clicking on the
    project, selecting "New", "XHTML" and name them as "template",
    "welcome" and "result". This creates "template.xhtml", "welcome.xhtml"
    and "result.xhtml" in "Web Pages" folder. 
    1. Replace the generated code in "template.xtml" with the
      code given href="https://facelets.dev.java.net/nonav/docs/dev/docbook.html#gettingstarted-view-template">here.
      Change the <title> text "Facelets: What's your favorite
      City ?".
    2. Replace the generated code in "welcome.xhtml" with the
      code given href="https://facelets.dev.java.net/nonav/docs/dev/docbook.html#gettingstarted-view-guess">here. Refactor
      "welcomeJSF.jsp" such that H1 tag and the associated text goes in
      <ui:define name="title"> and rest of the content goes in
      <ui:define name="body">. Also change the value of
      "template" attribute of <ui:composition> by removing "/".
      The updated page looks like:



      src="http://blogs.sun.com/arungupta/resource/images/facelets-nb61-cities-welcome-xhtml.png">
    3. Replace the generated code in "result.xhtml" with the
      code given href="https://facelets.dev.java.net/nonav/docs/dev/docbook.html#gettingstarted-view-guess">here. Refactor
      "result.jsp" such that H1 tag and the associated text goes in
      <ui:define name="title"> and rest of the content goes in
      <ui:define name="body">. Also add a namespace declaration
      for "http://java.sun.com/jsf/core".



      Optionally change the
      <h:form> associated with the command button to:


      style="text-align: left; background-color: rgb(204, 204, 255); width: 100%;"
      cellpadding="2" cellspacing="2">
             
              <form
      jsfc="h:form">

                         
      <input jsfc="h:commandButton" action="back" value="Back"/>

                     
      </form> 



      The updated page looks like:



      src="http://blogs.sun.com/arungupta/resource/images/facelets-nb61-cities-result-xhtml.png">

  6. Add couple of more navigation rules to "faces-config.xml":


    cellpadding="2" cellspacing="2">
       
    <navigation-rule>

           
    <from-view-id>/welcome.xhtml</from-view-id>

           
    <navigation-case>

               
    <from-outcome>submit</from-outcome>

               
    <to-view-id>/result.xhtml</to-view-id>

           
    </navigation-case>

        </navigation-rule>

        <navigation-rule>

           
    <from-view-id>/result.xhtml</from-view-id>

           
    <navigation-case>

               
    <from-outcome>back</from-outcome>

               
    <to-view-id>/welcome.xhtml</to-view-id>

           
    </navigation-case>

        </navigation-rule>

And that's it, Facelets-based application is now available at
"http://localhost:8080/Cities/faces/welcome.xhtml". The interaction is
exactly similar to as shown in href="http://blogs.sun.com/arungupta/entry/totd_45_ajaxifying_java_server">TOTD
#45 and some of the sample images (borrowed from href="http://blogs.sun.com/arungupta/entry/totd_45_ajaxifying_java_server">TOTD
#45) are:


cellspacing="5">
style="border: 1px solid ; width: 300px; height: 181px;" alt=""
src="http://blogs.sun.com/arungupta/resource/images/jsfext-nb61-cities-s.png">
style="border: 1px solid ; width: 300px; height: 197px;" alt=""
src="http://blogs.sun.com/arungupta/resource/images/jsfext-nb61-cities-san.png">
style="border: 1px solid ; width: 300px; height: 196px;" alt=""
src="http://blogs.sun.com/arungupta/resource/images/jsfex-nb61-cities-de.png">
style="border: 1px solid ; width: 300px; height: 195px;" alt=""
src="http://blogs.sun.com/arungupta/resource/images/jsfext-nb61-cities-ber.png">



Now this application is using Facelets as the view technology instead
of the in-built view definition framework.

Please leave suggestions on other TOTD (Tip Of The Day) that
you'd like to see.
A complete archive of all tips is available href="http://blogs.sun.com/arungupta/tags/totd">here.




Technorati: totd
javaserverfaces
facelets
netbeans
glassfish

Related Topics >>

Comments

Very much :) It's now integral part of JSF 2.0 specification and implementation. Read more at: http://weblogs.java.net/blog/edburns/archive/2008/08/facelets_jsf_20.html and http://blogs.sun.com/arungupta/entry/totd_47_getting_started_with

Is the facelets project still alive?