JSF 2 UI Decorate Example

Unlike the ui:compositionthe ui:decorate is more content-centric approach, in that you write your pages as usual, but you surround the contents with ui:decorate tag that has a template attribute. The decorator in its turn uses the provided template for decorating the contents that written as you’ve determined in the template. Using of ui:decorate is vary differ from the ui:composition, being the ui:decorate does consider those tags that are surrounding it, meanwhile the ui:composition trims them.

The ui:insert is used in conjunction of using ui:decorate like it was used by the ui:composition in addition to another minimal change that could happen on it for providing another use, in that the <ui:insert/> tag without name attribute. By that, it inserts all children of the ui:decorate tag. With decorators, with compositions, you can override defaults with ui:define tags.

The difference between ui:composition and ui:decorate is mostly conceptual. You can achieve the same effects with either tag. Facelets simply considers them complementary constructs.

Also Read:

1. The Decorator Template


<html xmlns="http://www.w3.org/1999/xhtml"
		<title>JavaBeat Decorator Example</title>
		<h1><h:outputText value="JavaBeat JSF 2.2 Examples" /></h1>
		<h2><h:outputText value="JSF2 Decorate Example" /></h2>
		<h:panelGrid columns="3" border="1">
			<f:facet name="caption">
				<ui:insert name="caption"/>
			<ui:insert name="text"/>

2. The View


<html xmlns="http://www.w3.org/1999/xhtml"
	<title><h:outputText value="JavaBeat Decorate"/></title>
	<h2><h:outputText value="Decorate Doesn't Trim the Surrounding Tags" /></h2>
	<ui:decorate template="/template/Decorator.xhtml">
		<ui:define name="caption">
			<h:outputText value="Caption !"/>
		<ui:define name="text">
			<h:outputText value="Column1 !"/>
		<h:outputText value="I will be inserted into insert that does not provide name"/>
	<h2><h:outputText value="Decorate Doesn't Trim the Surrounding Tags" /></h2>

3. The Deployment Descriptor (web.xml)


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5" metadata-complete="true">
		<description>State saving method: 'client' or 'server'
						(=default). See JSF Specification 2.5.2
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-name>Faces Servlet</servlet-name>

4. The Directory Structure

JSF 2 Decorate Example 1

5. JSF 2 UI Decorate Example

The below snapshot shows you the using of ui:decorate in conjunction with ui:insert and ui:define.

JSF 2 Decorate Example 2

You can note the following points:

  • Unlike the ui:composition tag, the decorator doesn’t trim the surrounding tags.
  • If you’ve provided a ui:define without name, it will be placed into that ui:insert that doesn’t also provide an name.
  • If you’ve provided a ui:define without name, and inside the decorator you’ve not provided a ui:insert that contains no name attribute, your tags won’t be shown.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share this post with your friends!