ui ( <div class="changed_added_2_0"> <p><span class="changed_modified_2_3">The</span> tags in this library add templating — a powerful view composition technique — to JSF. Templating is so useful that there are entire frameworks, such as Tiles and SiteMesh, that are built around the concept of templating. So what is templating, how can you benefit from it, and how does this tag library implement it? </p> <p>If you've used JSP before, you've probably used <code>jsp:include</code>. The prototypical example for <code>jsp:include</code> is a header on each page in a web application. One JSP page, say header.jsp, encapsulates the header content, and the header is included by each page. You <em>encapsulate and reuse content</em>, so that changes to one file, header.jsp, affect the header on every page. </p> <p>This tab library contains a tag —<code>ui:include</code> — that's analagous to <code>jsp:include</code>, but encapsulating and reusing content is only half the templating story, because templating also lets you <em>encapsulate and reuse <b>layout</b></em>. You define a single <em>template</em> (meaning layout), and you reuse that template with multiple <em>compositions</em>. So now you can control the layout of many pages with a single template (layout). Let's take a look at an example. </p> <h3>A Templating Example</h3> <p> First, we define a template: </p> <div class="syntax"><div class="html4strict" style="font-family: monospace;"><ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</div></li> <li class="li2"><div class="de2">              "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span></div></li> <li class="li1"><div class="de1"> </div></li> <li class="li2"><div class="de2"><span class="sc3"><span class="re1"><html</span> <span class="re0">xmlns</span>=<span class="st0">"http://www.w3.org/1999/xhtml"</span></div></li> <li class="li1"><div class="de1">            xmlns:<span class="re0">ui</span>=<span class="st0">"http://xmlns.jcp.org/jsf/facelets"</span></div></li> <li class="li1"><div class="de1">    <span class="sc3"><span class="re1"><head<span class="re2">></span></span></span></div></li> <li class="li2"><div class="de2">      <span class="sc3"><span class="re1"><link</span> <span class="re0">href</span>=<span class="st0">"styles.css"</span> <span class="re0">rel</span>=<span class="st0">"stylesheet"</span> <span class="re0">type</span>=<span class="st0">"text/css"</span><span class="re2">/></span></span></div></li> <li class="li1"><div class="de1">      <span class="sc3"><span class="re1"><title<span class="re2">></span></span></span><span class="sc3"><span class="re1"><ui</span>:insert <span class="re0">name</span>=<span class="st0">"title"</span><span class="re2">></span></span>Default Title<span class="sc3"><span class="re1"></ui</span>:insert<span class="re2">></span></span><span class="sc3"><span class="re1"></title<span class="re2">></span></span></span></div></li> <li class="li2"><div class="de2">    <span class="sc3"><span class="re1"></head<span class="re2">></span></span></span></div></li> <li class="li1"><div class="de1"> </div></li> <li class="li2"><div class="de2">    <span class="sc3"><span class="re1"><body<span class="re2">></span></span></span></div></li> <li class="li1"><div class="de1">      <span class="sc3"><span class="re1"><ui</span>:debug<span class="re2">/></span></span></div></li> <li class="li2"><div class="de2">      <span class="sc3"><span class="re1"><div</span> <span class="re0">class</span>=<span class="st0">"heading"</span><span class="re2">></span></span></div></li> <li class="li1"><div class="de1">        <span class="sc3"><span class="re1"><ui</span>:insert <span class="re0">name</span>=<span class="st0">"heading"</span><span class="re2">/></span></span></div></li> <li class="li2"><div class="de2">      <span class="sc3"><span class="re1"></div<span class="re2">></span></span></span></div></li> <li class="li1"><div class="de1"> </div></li> <li class="li2"><div class="de2">      <span class="sc3"><span class="re1"><div</span> <span class="re0">class</span>=<span class="st0">"content"</span><span class="re2">></span></span></div></li> <li class="li1"><div class="de1">        <span class="sc3"><span class="re1"><ui</span>:insert <span class="re0">name</span>=<span class="st0">"content"</span><span class="re2">/></span></span></div></li> <li class="li2"><div class="de2">      <span class="sc3"><span class="re1"></div<span class="re2">></span></span></span></div></li> <li class="li1"><div class="de1">    <span class="sc3"><span class="re1"></body<span class="re2">></span></span></span></div></li> <li class="li2"><div class="de2"><span class="sc3"><span class="re1"></html<span class="re2">></span></span></span> </div></li></ol></div></div> <p> In the preceeding listing, we've defined a layout, also known as a template. That template uses the <code>ui:insert</code> tag to insert pieces of a page — namely, title, heading, and content — defined in a <em>composition</em>. Notice that on line 8, we define a default title, in case one isn't provided by the composition. Also note that on line 12 we have the <code>ui:debug</code> tag, which lets the user activate a popup window with debugging information by typing CTRL + Shift + d. </p> <p> The title, heading, and content pieces of the page referenced in the template are defined in a separate XHTML file in a composition, like this: </p> <div class="syntax"><div class="html4strict" style="font-family: monospace;"><ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</div></li> <li class="li2"><div class="de2">        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span></div></li> <li class="li1"><div class="de1"> </div></li> <li class="li2"><div class="de2"><span class="sc3"><span class="re1"><html</span> <span class="re0">xmlns</span>=<span class="st0">"http://www.w3.org/1999/xhtml"</span></div></li> <li class="li1"><div class="de1">   xmlns:<span class="re0">ui</span>=<span class="st0">"http://xmlns.jcp.org/jsf/facelets"</span><span class="re2">></span></span></div></li> <li class="li2"><div class="de2"> </div></li> <li class="li1"><div class="de1">  <span class="sc3"><span class="re1"><body<span class="re2">></span></span></span></div></li> <li class="li2"><div class="de2">    <span class="sc3"><span class="re1"><ui</span>:composition <span class="re0">template</span>=<span class="st0">"/layout.xhtml"</span><span class="re2">></span></span></div></li> <li class="li1"><div class="de1"> </div></li> <li class="li2"><div class="de2">      <span class="sc3"><span class="re1"><ui</span>:define <span class="re0">name</span>=<span class="st0">"title"</span><span class="re2">></span></span>A List of Contacts<span class="sc3"><span class="re1"></ui</span>:define<span class="re2">></span></span></div></li> <li class="li1"><div class="de1">      <span class="sc3"><span class="re1"><ui</span>:define <span class="re0">name</span>=<span class="st0">"heading"</span><span class="re2">></span></span>Contacts<span class="sc3"><span class="re1"></ui</span>:define<span class="re2">></span></span></div></li> <li class="li2"><div class="de2"> </div></li> <li class="li1"><div class="de1">      <span class="sc3"><span class="re1"><ui</span>:define <span class="re0">name</span>=<span class="st0">"content"</span><span class="re2">></span></span></div></li> <li class="li2"><div class="de2">        <span class="sc3"><span class="re1"><ui</span>:include <span class="re0">src</span>=<span class="st0">"contactsTable.xhtml"</span> <span class="re2">/></span></span></div></li> <li class="li1"><div class="de1">      <span class="sc3"><span class="re1"></ui</span>:define<span class="re2">></span></span></div></li> <li class="li2"><div class="de2">         </div></li> <li class="li1"><div class="de1">    <span class="sc3"><span class="re1"></ui</span>:composition<span class="re2">></span></span></div></li> <li class="li2"><div class="de2">  <span class="sc3"><span class="re1"></body<span class="re2">></span></span></span></div></li> <li class="li1"><div class="de1"><span class="sc3"><span class="re1"></html<span class="re2">></span></span></span> </div></li></ol></div></div> <p> At runtime, JSF synthesizes the two previous XHTML pages to create a single JSF view by inserting the pieces defined in the composition into the template (that template is layout.xhtml, which is the first listing above). JSF also disregards everything outside of the <code>composition</code> tag so that we don't wind up with two <code>body</code> elements in the view. Also, note that we use the <code>ui:include</code> tag on line 14 to include content (which happens to be a table) from another XHTML page, so that we can reuse that table in other views. </p> <p> So why do we have two XHTML pages to define a single view? Why not simply take the pieces and manually insert them into the layout so that we have only a single XHTML page? The answer is simple: we have separated layout from the content so that we can <em>reuse that layout</em> among multiple compositions. For example, now we can define another composition that uses the same layout: </p> <div class="syntax"><div class="html4strict" style="font-family: monospace;"><ol><li class="li1"><div class="de1"><span class="sc0"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"</div></li> <li class="li2"><div class="de2">        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span></div></li> <li class="li1"><div class="de1"> </div></li> <li class="li2"><div class="de2"><span class="sc3"><span class="re1"><html</span> <span class="re0">xmlns</span>=<span class="st0">"http://www.w3.org/1999/xhtml"</span></div></li> <li class="li1"><div class="de1">      xmlns:<span class="re0">ui</span>=<span class="st0">"http://xmlns.jcp.org/jsf/facelets"</span><span class="re2">></span></span></div></li> <li class="li2"><div class="de2"> </div></li> <li class="li1"><div class="de1">  <span class="sc3"><span class="re1"><body<span class="re2">></span></span></span></div></li> <li class="li2"><div class="de2">    <span class="sc3"><span class="re1"><ui</span>:composition <span class="re0">template</span>=<span class="st0">"/layout.xhtml"</span><span class="re2">></span></span></div></li> <li class="li2"><div class="de2"> </div></li> <li class="li1"><div class="de1">      <span class="sc3"><span class="re1"><ui</span>:define <span class="re0">name</span>=<span class="st0">"title"</span><span class="re2">></span></span>Create a Contact<span class="sc3"><span class="re1"></ui</span>:define<span class="re2">></span></span></div></li> <li class="li1"><div class="de1">      <span class="sc3"><span class="re1"><ui</span>:define <span class="re0">name</span>=<span class="st0">"heading"</span><span class="re2">></span></span>Create Contact</ui</span>:define<span class="re2">></span></span></div></li> <li class="li2"><div class="de2"> </div></li> <li class="li1"><div class="de1">      <span class="sc3"><span class="re1"><ui</span>:define <span class="re0">name</span>=<span class="st0">"content"</span><span class="re2">></span></span></div></li> <li class="li2"><div class="de2">        <span class="sc3"><span class="re1"><ui</span>:include <span class="re0">src</span>=<span class="st0">"createContactForm.xhtml"</span><span class="re2">/></span></span></div></li> <li class="li1"><div class="de1">      <span class="sc3"><span class="re1"></ui</span>:define<span class="re2">></span></span></div></li> <li class="li2"><div class="de2"> </div></li> <li class="li2"><div class="de2">    <span class="sc3"><span class="re1"></ui</span>:composition<span class="re2">></span></span></div></li> <li class="li1"><div class="de1">  <span class="sc3"><span class="re1"></body<span class="re2">></span></span></span></div></li> <li class="li2"><div class="de2"><span class="sc3"><span class="re1"></html<span class="re2">></span></span></span> </div></li></ol></div></div> <p> By encapsulating the layout, we can reuse that layout among multiple compositions. Just like <code>ui:include</code> lets us encapsulate and reuse conent, JSF compositions let us encapsulate and reuse layout, so that changes to a single layout can affect multiple views. Fundamentally, that's what this tag library is all about. </p> </div> <pre> )