Facelets is a JSF framework to implement UI templating (like tiles, sitemesh). You can use Tiles to implement the templating portion but Facelets is built for JSF.
In addition to the templating feature you can also create reusable components using Facelets and if you like Tapestry then you can make use of a similar feature with Facelets wherein rather than using jsf tags in the JSP you can use jsfc to indicate the component you plan to use. Example:
|
1 2 |
<input type="text" jsfc="h:outputText" value="Printed using Using jsfc .. like Tapestry" /> |
Note: I put this example together quite some time back but forgot to publish this earlier. Now straight to an example. I assume a certain knowledge of JSF as required. If not sure you can download the complete working zip file and get an idea for yourself regarding JSF and Facelets.
First of all you create the template.xhtml which will define the layout for our application:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:h=”http://java.sun.com/jsf/html” xmlns:f=”http://java.sun.com/jsf/core” xmlns:ui=”http://java.sun.com/jsf/facelets”> <head> <meta http-equiv=”Content-Type” content=”text/html;charset=iso-8859-1″ /> <title>Test Faceletswebapp</title> </head> <body> <h3> <ui:insert name=”title”>DefaultTitle</ui:insert> </h3> <hr /> <p> <ui:insert name=”body”>Default Body</ui:insert> </p> <br /> <br /> <hr /> </body> </html> |
The above illustrates a very basic example. In the zip file I do no use the above template, instead the zip file has more elaborate layout.
- <ui:insert name=”title”> : Creates a placeholder to drop page titles.
- <ui:insert name=”body”> : Creates a placeholder to drop page content.
Now here is my content page index..xhtml:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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:t=”http://myfaces.apache.org/tomahawk”> <head> <title>Notes</title> </head> <body> <ui:composition template=”/template.xhtml”> <ui:define name=”title”>Facelet works</ui:define> This text will also not be displayed. <ui:define name=”body”> <h:form> <h:commandLink value=”Display All Notes ” action=”toNotes” /> </h:form> </ui:define> </ui:composition> </body> </html> |
- <ui:composition template=”/template.xhtml”> : The composition tag is used to identify the template to be used for this page.
- <ui:define name=”title”> : The ui:define tag is used here to insert the page title
- <ui:define name=”body”> : The ui:define tag is used here to insert the page contents.
The web.xml is:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<context-param> <param-name>javax.faces.DEFAULT_SUFFIX</param-name> <param-value>.xhtml</param-value> </context-param> <context-param> <param-name>facelets.DEVELOPMENT</param-name> <param-value>true</param-value> </context-param> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.faces</url-pattern> </servlet-mapping> |
Finally the faces-config.xml:
|
1 2 3 4 5 6 7 8 9 10 11 |
<application> <view-handler>com.sun.facelets.FaceletViewHandler</view-handler> </application> <navigation-rule> <from-view-id>/index.xhtml</from-view-id> <navigation-case> <from-outcome>toNotes</from-outcome> <to-view-id>/notes.xhtml</to-view-id> </navigation-case> </navigation-rule> |
- com.sun.facelets.FaceletViewHandler is the what does the templating magic.
Here is the screenshot of the home page:
Clicking on Display All Notes will take you to the notes.xhtml page which is another static page with different content.
You can download the complete example by clicking here – faceletss.zip. Having done all of this I must say though that SiteMesh still remains my favorite templating engine. Not sure if it will work with JSF though.