Thursday, April 16, 2009

Facelets Tutorial : UI Decorate Tag

<< Previous        Next >>

Templating using UI Decorate Tag

The <ui: decorate> tag is a templating tag. This tag has a required template attribute and behaves like the <ui:composition> tag. This attribute is set to the path of the template file where the content of this tag will be included. Unlike <ui:composition>, any content outside of the < ui: decorate> tag will be displayed by the Facelets view handler. Any content within the < ui: decorate> tag will be passed to the associated template as parameters or simply ignored.

We will modify the previous example and see how the decorate tag works:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns=""
<div style=" background-color: #ddeeff; border: 2px solid red">
<ui:decorate 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)
          This section appears from templateClient.(home.xhtml)

The following screenshot displays the result of the Facelets <ui:decorate> tag. The result is that our content is surrounded or "decorated" by the <div> element which gives a background color and a red border to the page. Any text before or after the <ui:decorate> tag is still rendered on the page.