понедельник, 23 апреля 2012 г.

Understanding JSF - Part 4 - Templating

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:

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>

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.

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">

          

<h:outputStylesheet library="css" name="page1.css"></h:outputStylesheet>
</ui:define>
        <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

4 комментария:

  1. I don't really understand what do you want to say by that. Could you explain please

    ОтветитьУдалить
  2. 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!

    ОтветитьУдалить