Templating in Facelets
As we all know, in most of the web applications, some portion of the content in the home pages is going to be repeated in all pages across the application. Here comes the need for templating. Most of the web frameworks support templating, so is Facelets. Facelets does templating in a way which is ideal for JSF. Here we are going to explore possibilities of re-use in JSF- Facelets Projects.
To know how templating works in Facelets, first we need to understand the concepts of 'Template Client' and Template. 'Template Client' is the one which users request. 'Template Client' uses the 'Template' to render the response to the users. The main templating facelets tag used in 'template' file is <ui: insert>. The corresponding tag in 'Template Client' is <ui:define>. During the request processing cycle, <ui:define> is mapped to the corresponding <ui:insert> tag based on the value of 'name' attribute in both the tags. For example:
<ui:define name="main"> in 'Template Client' will be mapped to <ui:insert name="main"> 'Template'. What it means is, the content inside the <ui:insert name="main"> tag in 'Template' will be replaced with content inside <ui:define name="main"> tag in 'Template Client'.
UI Composition Tag
Now we know how the contents in 'template' is replaced with contents in 'template client'. But we didn't figure out how the 'template client' identify the corresponding 'template'. <ui: composition> is one of the tags available in facelets tag library to define the 'template' for a 'template client'. <ui: composition> tag has an optional 'template' attribute. This attribute is set to the path of the template file where the content of this tag will be included. You can include normal html content in your page but Facelet will render only content that is within <ui:composition> tag. Any content outside of the UI Composition tag will be ignored by the Facelets view handler.
Example of Facelets templating
Let's look at a simple example of Facelets templating. In this Facelets example we are going to create a page with four distinct sections, header, footer, side menu and main content. The following screenshot illustrates how our page will be rendered at runtime:
Create Facelets template pages
Create a folder "templates" in WebContent/WEB-INF folder of JSFFaceletsExample application. Now we need to create a template page called, insertTemplate.xhtml in the WebContent/WEB-INF/templates folder of the application. Right-mouse click on the WebContent/WEB-INF/templates folder, select New->HTML Page to launch the HTML Page wizard. Type the file name insertTemplate.xhtml and click 'Next'. In the Select Templates page of the wizard, select the 'New Facelet Template' as shown below. Click 'Finish'. The page will be opened in the Web Page Editor.
We need to edit the insertTemplate.xhtml file following the instructions in the file. Create a header and footer templates file to include it in the template file (insertTemplate.xhtml).
Create header template file
Right-mouse click on the WebContent/WEB-INF/templates folder, select New->HTML Page to launch the HTML Page wizard. Type the file name header.xhtml and click 'Next'. In the Select Templates page of the wizard, select the New Facelet Header. Click Finish. The page will be opened in the Web Page Editor. Make modifications to the page to meet our requirements. The header.xhtml file will look like this.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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">
<body>
<div style="width:100%;line-height:48px;background-color:#336699;color:white; font-size:30px">
JSF Facelets Application</div>
</body>
</html>
<!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">
<body>
<div style="width:100%;line-height:48px;background-color:#336699;color:white; font-size:30px">
JSF Facelets Application</div>
</body>
</html>
Create footer template file
Right-mouse click on the WebContent/WEB-INF/templates folder, select New->HTML Page to launch the HTML Page wizard. Type the file name footer.xhtml and click 'Next'. In the Select Templates page of the wizard, select the New Facelet Footer. Click 'Finish'. The page will be opened in the Web Page Editor. Make modifications to the page to meet our requirements. The footer.xhtml file will look like this.
Note : Because of the bug in the version of the eclipse plugin, '%' inside the style attribute values are replaced with '!'. So we have to change it back to '%' (see the screenshot below)
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</head>
<body>
<div style="background-color: #336699; width: 100%; color: #FFFFFF">@copyright,RISK soft</div>
</body>
</html>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
</head>
<body>
<div style="background-color: #336699; width: 100%; color: #FFFFFF">@copyright,RISK soft</div>
</body>
</html>
Note : Because of the bug in the version of the eclipse plugin, '%' inside the style attribute values are replaced with '!'. So we have to change it back to '%' (see the screenshot below)
Now we need to modify the insertTemplate.xhtml file. Click "Next" to continue.