In JSF 2.0, facelets are created by using templates and composition pages. Lets see how we use templates to create facelets. First create a folder named template under the folder /WebContent/WEB-INF by right clicking on WEB-INF and then click New -> Folder.
Right click on the template folder and click New -> XHTML Page. If XHTML option doesn't show here, click New -> Other, and under GlassFish select XHTML Page as shown in th figure:
Name the file as template and click Next. In the next window select New Facelet Template as in the figure and click Finish.
Right click template folder to create header.xhtml file by selecting New Facelet Header as shown in figure below:
Follow the same steps to create footer.xhtml file in template folder by select New Facelet Footer as shown in the figure:
Open the template.xhtml file, uncomment the comments and make look like following:
<!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">
<head>
<title><ui:insert name="title">Default title</ui:insert></title>
</head>
<body>
<div id="header">
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">
</ui:insert>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="footer.xhtml"/>
</ui:insert>
</div>
</body>
</html>
This template page will be used by our xhtml pages. You can see that we have created header, footer areas by using
<ui> insert tag and included header and footer by using <ui> include tag. Notice that we have created content area by using <ui> insert tag, but we did not include the page. Our composition pages will come here, as we'll soon see. Now we'll create our composition pages by using this template.
Right-click on WebContent folder and create a new composition page named index.xhtml by selecting New Composition Facelet Page as shown in the figure below:
Open your composition page and delete header and footer
<ui:define&ft; tags. As the page will load header and footer from template page. Give the path of your template page in<ui:composition> tag. Add appropriate messages in content area. Your page would look like in figure 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"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/WEB-INF/template/template.xhtml">
<ui:define name="content">
<p>This part is from composition page.</p>
</ui:define>
</ui:composition>
</html>
Open your header and footer pages and add appropriate messages. Run your project. Finally your project explorer and the browser window will look like following:
In the next step we'll create a database using MySql and JPA. So click Next and go to the next step:
No comments:
Post a Comment