JavaServer Faces 2.0 provides the tools to implement user interfaces that are easy to extend and reuse. Templating is a useful feature available with Facelets that allows you to create a page that will act as the base or template for the other pages in a application. By using templates, you can reuse code and avoid recreating similarly constructed pages. Templating also helps in maintaining a standard look and feel in an application with a large number of pages.
The following table lists Facelets tags that are used for templating and their respective functionality:
Table 5–2 Facelets Templating Tags
Tag |
Function |
---|---|
ui:component |
Defines a component that is created and added to the component tree. |
ui:composition |
Defines a page composition that optionally uses a template. Content outside of this tag is ignored. |
ui:debug |
Defines a debug component that is created and added to the component tree. |
ui:define |
Defines content that is inserted into a page by a template |
ui:decorate |
Similar to composition tag but does not disregard content outside this tag. |
ui:fragment |
Similar to component tag but does not disregard content outside this tag. |
ui:include |
Encapsulate and reuse content for multiple pages. |
ui:insert |
Inserts content into a template. |
ui:param |
Used to pass parameters to an included file. |
ui:repeat |
Used as an alternative for loop tags such as c:forEach or h:dataTable. |
ui:remove |
Removes content from a page. |
For more information on Facelets templating tags, see the PDL athttp://java.sun.com/javaee/javaserverfaces/2.0/docs/pdldocs/facelets/index.html.
The Facelets tag library includes the main templating tag <ui:insert>. Atemplate page is created with this tag, it allows defining a default structure for a page. A template page can be reused as a template for other pages, usually referred to as a client pages.
Here is an example of a template saved as template.xhtml:
<!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"> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="./resources/css/default.css" rel="stylesheet" type="text/css" /> <link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" /> <title>Facelets Template</title> </h:head> <h:body> <div id="top" class="top"> <ui:insert name="top">Top Section</ui:insert> </div> <div> <div id="left"> <ui:insert name="left">Left Section</ui:insert> </div> <div id="content" class="left_content"> <ui:insert name="content">Main Content</ui:insert> </div> </div> </h:body> </html>
The example page defines a HTML page that is divided into 3 sections, a top section, a left section and a main section. The sections have stylesheets associated with them. The same structure can be reused for the other pages of the application.
The client page invokes the template by using <ui:composition> tag. In the following example, a client page named templateclient.xhtml, invokes the template page from the preceding example named template.xhtml. A client page allows content to be inserted with the help of the <ui:define> tag.
<!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"> <h:body> <ui:composition template="./template.xhtml"> <ui:define name="top"> Welcome to Template Client Page </ui:define> <ui:define name="left"> <h:outputLabel value="You are in the Left Section"/> </ui:define> <ui:define name="content"> <h:graphicImage value="#{resource['images:wave.med.gif']}"/> <h:outputText value="You are in the Main Content Section"/> </ui:define> </ui:composition> </h:body> </html>
You can use the NetBeans IDE to create Facelets template and client pages. For more information on creating these pages, see http://netbeans.org/kb/docs/web/jsf20-intro.html.