Templating in Facelets - Part 2
The insertTemplate.xhtml page that we created already has three <ui: insert> tags for 'header', 'footer' and 'content'. We have to modify this file to include the header.xhtml and footer.xhtml, using the <ui:include> tag as follows:
The insertTemplate.xhtml page that we created already has three <ui: insert> tags for 'header', 'footer' and 'content'. We have to modify this file to include the header.xhtml and footer.xhtml, using the <ui:include> tag as follows:
<ui: insert name="header">
<ui: include src="header.xhtml" />
</ui: insert>
<ui: include src="header.xhtml" />
</ui: insert>
Note : The <ui: include> tag in facelets is similar to the 'JSP include' tag. It's 'src' attribute holds the path of the xhtml file to be included.
We also need to modify the insertTemplate.xhtml to accomodate the side menu. Here we are going to include the entire side menu content directly inside the <ui: insert> tag so that we don't have to define the menu in all the template client pages in the application. The modified insertTemplate.xhtml is given below.
<!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">
<head>
<title>Facelets example</title>
</head>
<body >
<div style="border-bottom: grey 2px solid; border-left: grey 2px solid; border-right: grey 2px solid; border-top: grey 2px solid; height: 100%; margin: 4px auto; text-align: center; width: 100%;">
<ui:insert name="header">
<ui:include src="header.xhtml" />
</ui:insert></div>
<table width="100%" >
<tr>
<td width="20%">
<div style="height: 250px; width: 100%; background-color: #e0e0e0; text-align: center;">
<br></br>
<ui:insert name="sidemenu">
<h:form>
<h:commandLink value="Home"></h:commandLink>
<br />
<br />
<h:commandLink value="News"></h:commandLink>
<br />
<br />
<h:commandLink value="Articles"></h:commandLink>
<br />
<br />
<h:commandLink value="About Us"></h:commandLink>
<br />
<br />
</h:form>
</ui:insert></div>
</td>
<td width="85%">
<ui:insert name="content">Content displayed from Template </ui:insert>
</td>
</tr>
</table>
<div style="border-bottom: grey 2px solid; border-left: grey 2px solid; border-right: grey 2px solid; border-top: grey 2px solid; height: 100%; margin: 4px auto; text-align: center; width: 100%;">
<ui:insert name="footer">
<ui:include src="footer.xhtml" />
</ui:insert></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<head>
<title>Facelets example</title>
</head>
<body >
<div style="border-bottom: grey 2px solid; border-left: grey 2px solid; border-right: grey 2px solid; border-top: grey 2px solid; height: 100%; margin: 4px auto; text-align: center; width: 100%;">
<ui:insert name="header">
<ui:include src="header.xhtml" />
</ui:insert></div>
<table width="100%" >
<tr>
<td width="20%">
<div style="height: 250px; width: 100%; background-color: #e0e0e0; text-align: center;">
<br></br>
<ui:insert name="sidemenu">
<h:form>
<h:commandLink value="Home"></h:commandLink>
<br />
<br />
<h:commandLink value="News"></h:commandLink>
<br />
<br />
<h:commandLink value="Articles"></h:commandLink>
<br />
<br />
<h:commandLink value="About Us"></h:commandLink>
<br />
<br />
</h:form>
</ui:insert></div>
</td>
<td width="85%">
<ui:insert name="content">Content displayed from Template </ui:insert>
</td>
</tr>
</table>
<div style="border-bottom: grey 2px solid; border-left: grey 2px solid; border-right: grey 2px solid; border-top: grey 2px solid; height: 100%; margin: 4px auto; text-align: center; width: 100%;">
<ui:insert name="footer">
<ui:include src="footer.xhtml" />
</ui:insert></div>
</body>
</html>
Create Facelets Template Client Page
Right-mouse click on the WebContent folder of JSFFaceletsExample application, select New->HTML Page to launch the HTML Page wizard. Type the file name home.xhtml and click 'Next'. In the Select Templates page of the wizard, select the 'New Facelet Composition Page'. Click 'Finish'. The page will be opened in the Web Page Editor.
As discussed earlier, the <ui:composition> tag in the template client page has a template attribute. We can include the insertTemplate.xhtml in the home.xhtml page using the template attribute as shown below:
<ui:composition template="WEB-INF/templates/insertTemplate.xhtml">
The template client page, home.xhtml contains one <ui:define> tag that has the name attribute "content".
<ui:define name="content">. The Facelets template page, insertTemplate.xhtml contains <ui:insert> tag that have the same name "content". When the browser requests the template client page, home.xhtml, the content inside the <ui:insert name="content"> tag in insertTemplate.xhtml will be replaced with content inside <ui:define name="content"> tag in home.xhtml. In our template client page, we are not including the <ui:define> tags for the other three <ui:insert> tags header, footer and sidemenu declared in the template page, insertTemplate.xhtml. In that case, the content specified in the <ui:insert> tag of the insertTemplate.xhtml will be displayed.The template client page, home.xhtml looks like this:
<!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">
<ui:composition template="WEB-INF/templates/insertTemplate.xhtml">
<ui:define name="content">
This is an example of a simple Facelets template.<br/>
Here Header, Footer and Side Menu bar appears from template.(insertTemplate.xhtml)<br/>
This section appears from templateClient.(home.xhtml)
</ui:define>
</ui:composition>
</html>
"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">
<ui:composition template="WEB-INF/templates/insertTemplate.xhtml">
<ui:define name="content">
This is an example of a simple Facelets template.<br/>
Here Header, Footer and Side Menu bar appears from template.(insertTemplate.xhtml)<br/>
This section appears from templateClient.(home.xhtml)
</ui:define>
</ui:composition>
</html>
Run your webapplication
To run your web application, right click on home.xhtml, click- >run as -> run on server.
Select the server type ,Apache Tomacat v6.0 Server.Click Fininsh.
Open a web browser and type the url : http://localhost:8080/JSFFaceletsExample/home.xhtml
Your page will be rendered like this:
