Facelets
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:
<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 layoutfor our application:
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.
Finally the faces-config.xml:
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 favourite templating engine. Not sure if it will work with JSF though.
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:
<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 layoutfor our application:
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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" 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.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <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 tagis used to identify the template to be used for this page.
- <ui:define name="title"> : The ui:define tag is used here toinsert the page title
- <ui:define name="body"> : The ui:define tag is used here toinsert the page contents.
| <?xml version="1.0"encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee ">java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <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> </web-app> |
Finally the faces-config.xml:
| <?xml version="1.0"encoding="UTF-8"?> <faces-config version="1.2"xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaeejava.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd" style="color:teal;">> <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> </faces-config> |
- com.sun.facelets.FaceletViewHandler is the what does the templating magic.
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 favourite templating engine. Not sure if it will work with JSF though.
Comments