Digerati: Facelets in JSF

JSF is component oriented and event driven web framework to build up web applications.
It is mocking existing technologies like ASP .NET , Apache Tapestry , Java swing etc.
It need some framework to make re-use of XHMTL code and easy way to build pages , composite custom component some what like that of "Apache Tiles" and answer for that is Facelets .
Facelet tag are added in JSF 2.0 as powerful tool to use templates(hence code re-use ) .In jsf 1.2 you have to give facelet handler class but that is not needed in JSF 2.0 .
In JSP we can use page include (static include) and jsp include (dynamic include) for templates .But you have to write all this include tag in all JSPs example header , footer , right , left part of page includes .
As JSF 2.0 has abandoned JSP servlet display technology because it contradicts some phases of JSF life cycle (for more details - improving jsf by dumping jsp ).They have adapted for cleaner appeoch with XHTML and Facelets .
JSP is not true MVC as inexperienced developed may put business logic in java snippets in jsp tags .So there is no imposition of rule .Further more JSP are servlets and they have their phases like translation , compilation and other phases .
JSF facelets with more efficient than JSP because there is no such compilation thing .
With facelets you can create new reusable templates and composite component if you want .

main facelet tags are

I am giving a simple example how to use them -

example template

PageTemplate.xhtml

 <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"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<ui:composition>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</meta>
<title>SALPE CORP - INDIA </title>
<LINK rel="shortcut icon" href="icon.ico" />
</head>
<body class="pagebody">
<f:view locale="#{LanguageBean.locale}">
     <f:loadBundle basename="Label" var="bundle" /> 
          <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0" ID="Table2">
                         <tr>
                              <td>
                                   <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" ID="Table3">
                                        <tr>
                                             <td valign="top">
                                                  <h:panelGrid width="100%" id="menuBottomZone1" cellpadding="0" cellspacing="0">
                                                       <ui:include id="header" src="/template/HeaderTemplate.xhtml" />
                                                  </h:panelGrid>
                                             </td>
                                        </tr>
                                   </table>
                              </td>
                         </tr>
                    </table>
               </td>
          </tr>
          <tr>
               <td width="13" colspan="3" align="center">
                    <table width="1003px" border="0" align="center" cellpadding="0" cellspacing="0" ID="Table5">
                         <tr>
                              <td align="center">
                              <ui:insert name="bodyContent">Body Content Area</ui:insert>
                              </td>
                         </tr>
                    </table>
               </td>
          </tr>
          <tr>
               <td colspan="3">
                    <h:graphicImage value="../../newimages/general/spacer.gif" width="5" />
               </td>
          </tr>
          <tr>
               <td colspan="3" valign="middle">
               <ui:include id="footer" src="/template/FooterTemplate.xhtml"></ui:include>                
               </td>
          </tr>
     </table>
</f:view>
</body>
</ui:composition>
</html>

Any other pages - like welcomePage.xhtml

 <?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">
<ui:composition
template="/template/PageTemplate.xhtml"
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"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<ui:define name="content">
<script language="javascript">
doSomeThingOnLoad();
</script>
<f:view locale="#{LanguageBean.locale}" >
 <f:loadBundle basename="CATCmaLabel" var="bundle" />
 <h:form id="loginForm">
 <table>
           <tr>
           <td>
            Hello JSF - I am showing bodyContent Area :)
            Insert here XHTML code you like !
           </td>
           </tr>
 </table>
 </h:form>                                                                                            
</f:view>
</ui:define>
</ui:composition>

Look like this when you view
welcomePage.xhtml

HEADER FOM HEADER TEMPLATE XHTML

Hello JSF - I am showing bodyContent Area :)

Insert here XHTML code you like !

Digerati

Friday, July 8, 2011

Facelets in JSF

No comments:

Nilesh Salpe