When developing a web application your pages will usually look a same. In this JSF 2 tutorial you will see how to create templates in JSF. In JSF we do this with a set of Facelet tags:
This is a basic template structure I usually use. In the head we would include a page specific CSS.
Tag ui:insert defines where a content will be inserted. If no ui:define tag have been defined for the ui:insert, the content which lies inside the ui:insert tag will be used as a default. So in this case if in our page we do not define "headerBlock", defaultHeader.xhtml will be used as a default.
1. ui:composition - by adding an attribute "template" your page will use a template you have created.
2. ui:insert - defines the area where the code will be inserted into the template from a specific page.
3. ui:define - defines the area which will be included into the template.
4. ui:include - inserts a code from the separate file.
Basic structure of the template
<!DOCTYPE composition 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:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:pretty="http://ocpsoft.com/prettyfaces">
<h:head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <h:outputStylesheet library="css" name="layout.css"></h:outputStylesheet> <ui:insert name="pageHeader" /></h:head><h:body>
<ui:insert name="headerBlock" />
<ui:include src="/pages/includes/defaultHeader.xhtml" />
</ui:insert>
<div id="content"> <ui:insert name="contentBlock">
<ui:include src="/pages/includes/defaultContent.xhtml" />
</ui:insert>
</div></h:body></html>
Tag ui:insert defines where a content will be inserted. If no ui:define tag have been defined for the ui:insert, the content which lies inside the ui:insert tag will be used as a default. So in this case if in our page we do not define "headerBlock", defaultHeader.xhtml will be used as a default.
Example of page which uses template
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="/layout/template.xhtml">
<ui:define name="pageHeader">
</ui:define>
<h:outputStylesheet library="css" name="page1.css"></h:outputStylesheet>
<ui:define name="headerBlock">This is the content of headerBlock.
</ui:define>
<ui:define name="contentBlock">This is the content of contentBlock.
</ui:define>
</ui:composition>
In order for your page to use a template you have to add a template attribute to your ui:composition tag.
Knowing only this concepts you will be able to effectively use JSF 2 Templating system.
Best regards,
Netlink community member
for works need remove / from this line
ОтветитьУдалитьui:insert name="headerBlock"
ОтветитьУдалитьI don't really understand what do you want to say by that. Could you explain please
ОтветитьУдалитьHe is trying to say that there is a wrong "/" in the tag, in the template definition.
ОтветитьУдалитьAnd thanks for the tutorials my friend. They were very helpful!