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.
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"
"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">
<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)
</ui:define>
</ui:decorate>
</div>
</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">
<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)
</ui:define>
</ui:decorate>
</div>
</html>
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.
