深入 Facelets (三)Facelets 模板技术

For any view technology to succeed, it must have some aspect of templating and re-use that's both easy to use and understand. Facelets technology solves this issue in a way that is ideal for JavaServer Faces while keeping that sense of familiarity to traditional, tag-based user interfaces. This article covers the possible ways to increase re-use and simplify maintenance on your JavaServer Faces project.

When people first start creating web pages, they often find themselves repeating content across multiple files. As a developer, this can be frustrating when your object-oriented tendencies kick in. Wouldn't it be nice to simply maintain that content in one spot?

Getting Started?

The first approach to templating and re-use is creating a template. A web page is often composed of some basic parts: header, body, and footer. With Facelets, you can pull those common elements into a single page, creating a template with editable areas, as shown in the following sample template:

 
  1. <!-- template.xhtml -->  
  2.    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.    <html xmlns="http://www.w3.org/1999/xhtml"    
  5.    xmlns:ui="http://java.sun.com/jsf/facelets">  
  6. <head>  
  7.    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
  8.    <title>Sample Template</title>  
  9. </head>  
  10. <body>  
  11.    <h1>#{title}</h1>  
  12.    <div><ui:insert name="menu"/></div>  
  13.    <p><ui:insert name="body"/></p>  
  14.   
  15. </body>  
  16. </html>  

The ui:insert tag for menu and body mark areas that change on a per-page basis. You can create other pages that will use this template and provide content for both your menu and body.


  
xml 代码
  1. <!-- template-client.xhtml -->  
  2.    <!-- content above will be trimmed -->  
  3.    <ui:composition template="template.xhtml">  
  4.      <ui:param name="title" value="Here's my Title"/>  
  5.      <ui:define name="menu">Here's My Menu</ui:define>  
  6.      <ui:define name="body">Here's My Body</ui:define>  
  7.      </ui:composition>  
  8.    <!-- content below will be trimmed -->  

This example page introduces another tag: <ui:composition/>. This tag provides a couple features. It trims any content around it. This means you can have a normal HTML page and Facelets will only use or render the content within the ui:composition tag. With this tag, you also have the option of providing a template attribute, which will define how and where its content is layed out.

To pair content within this page and the template, the ui:define tags are used with names that match the ui:insert tags from the template above. For simply passing variables or text, you can use the ui:param tag, which exposes the value as a variable within the template.

When Facelets render the page above with the specified template, you will get the following output:

 
  1. <!-- template.xhtml -->  
  2.    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.    <html xmlns="http://www.w3.org/1999/xhtml"    
  5.    xmlns:ui="http://java.sun.com/jsf/facelets">  
  6. <head>  
  7.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
  8.   <title>Sample Template</title>  
  9. </head>  
  10. <body>  
  11.    <h1>Here's my Title</h1>  
  12.    <div>Here's My Menu</div>  
  13.    <p>Here's My Body</p>  
  14.   
  15. </body>  
  16. </html>  
The previous example can be simplified even more if there's only one area that can be changed 
within a template:
 
  1. <!-- simple-template.xhtml -->  
  2.    ...   
  3. <body>  
  4.    <h1>Title</h1>  
  5.    <!-- editable body -->  
  6.    <p><ui:insert/></p>  
  7. </body>  
  8.    ...   

The page that wants to use the above template can now be as simple as this:

 
  1. <!-- simple-template-client.xhtml -->  
  2.    <ui:composition template="simple-template.xhtml">  
  3.    Here's My Simple Body   
  4.    </ui:composition>  

Using Includes

The idea of compositions in pages is pretty powerful for defining re-usable content in your web pages. The examples so far have shown how to use compositions with a template for rendering. But what if you want to include that composition in another page? Maybe there's a series of form controls or a complex menu that you would rather separate out into a different document that can be reused or managed separately without cluttering up your page layout.

Facelets provides two ways of including compositions or other pages in general. The first option is with the ui:include tag. This tag should be pretty familiar to web developers:

  1. <!-- include.xhtml -->  
  2.    ...   
  3.    <span id="leftNav">  
  4.    <ui:include src="/WEB-INF/siteNav.xhtml"/>  
  5.    </span>  
  6.    ...   
  7. <!-- siteNav.xhtml -->  
  8.    ..   
  9.    <ui:composition>  
  10.    <!-- myfaces tomahawk components -->  
  11.    <t:tree2 value="#{backingBean.options}" var="opt">  
  12.    ...   
  13.    </t:tree2>  
  14.    </ui:composition>  
  15.    ...   

When Facelets processes the include.xhtml, siteNav.xhtml will have all of its content within the ui:composition included into include.xhtml:

 
  1. <!-- include.xhtml -->  
  2.    ...   
  3.  <span id="leftNav">  
  4.    <!-- myfaces tomahawk components -->  
  5.    <t:tree2 value="#{backingBean.options}" var="opt">  
  6.    ...   
  7.    </t:tree2>  
  8.  </span>  
  9.  ...  

If you would like to pass variables to siteNav.xhtml, to be used with the tree component, then you can use the ui:param tag:


  
  1. <!-- include.xhtml -->  
  2.    ...   
  3.  <span id="leftNav">  
  4.    <ui:include src="/WEB-INF/siteNav.xhtml">  
  5.    <ui:param name="menuBean" value="#{backingBean.options}"/>  
  6.    </ui:include>  
  7.  </span>  
  8.  ...  

  
  1. <!-- siteNav.xhtml -->  
  2.    ...   
  3.    <ui:composition>  
  4.    <!-- myfaces tomahawk components -->  
  5.    <t:tree2 value="#{menuBean}" var="opt">  
  6.    ...   
  7.    </t:tree2>  
  8.    </ui:composition>  
  9.    ...  

You can see that now the siteNav.xhtml can just reference the variable menuBean and assume that it will be passed within the ui:include tag. This allows for some flexibility with re-using common components and content.

Facelets provides an even cleaner solution to ui:include and  ui:param by supporting custom tags. Don't worry, you don't have to write any Java code. To make siteNav.xhtml a reusable tag, you must create a simple XML taglib file:

 
  1. <facelet-taglib>  
  2.    <namespace>">http://www.mycompany.com/jsf</namespace>  
  3.    <tag>  
  4.    <tag-name>siteNav.xhtml</tag-name>  
  5.    <source>/WEB-INF/tags/siteNav.xhtml</source>  
  6.    </tag>  
  7. </facelet-taglib>  

Aside from pointing Facelets at your new taglib XML file, that's it. You may add as many tags as you want to your new taglib. By specifying the http://www.mycompany.com/jsf namespace within your pages, you can now write:

 
  1. <!-- include-tag.xhtml -->  
  2. ...   
  3.   
  4. <span id="leftNav">  
  5.    <my:siteNav menuBean="#{backingBean.options}"/>  
  6. </span>  
  7. ...  

The include-tag.xhtml example is equivalent to the include.xhtml example above. The attribute menuBean will be made available as an attribute within siteNav.xhtml, just as <ui:param/> provided.

Your project may include a whole library of custom tags that are packaged with your JAR files or simply placed within a folder in your web application. Many more tags are covered in the Facelets Developer Documentation.

你可能感兴趣的:(java,apache,UI,XHTML,JSF)