Table of Contents
The web community is eagerly seeking a light-weight, templating framework backed by JavaServer Faces as the industry standard. While JavaServer Faces and JavaServer Pages technology (JSP) are meant to be aligned, Facelets steps outside of the JSP specification and provides a highly performant, JSF-centric view technology. Anyone who has created a JSP page will be able to do the same with Facelets and familiar XML-tag use. The difference is under the hood where all the burden of the JSP vendor API is removed to greatly enhance JSF as a platform and provide easy plug-and-go development without requiring JSP tag development.
JavaServer Faces UIComponents
are first class citizens within Facelets; there's no need to develop extra objects to integrate. There's also no need to learn yet another XML schema to define your views.
Facelets includes many features such as:
UIComponent
trees in separate files (UICompositions
)
jsfc
' attribute which acts the same as Tapestry's jwcid (Example: <input id="bar" type="text" jsfc="h:inputText" value="#{foo.bar}"/>
)
<input type="text"/>
to <h:inputText/>
at compile time)
RenderKit
Everyone wants to be more designer friendly, and Tapestry seems to be the only choice developers are pursuing. On the other hand, JSF is the standard everyone would like to have happen, but JSF needs a more "pluggable" ViewHandler
framework that is both designer and developer friendly.
Out of the box, Facelets provides full support for all components specified in the JavaServer Faces specification, including limited support for JSTL tags such as <c:forEach>
and <c:if>
. Where developers really gain an advantage with using Facelets is its ability to auto-wire additional artifacts to your XML documents such as UIComponents
, Validators
, and Converters
.
Facelets is a clean slate for correcting concerns with JSF. Templating, re-use, and ease of development are top priorities that will help bring developers on board with JSF as a suitable platform for large scale projects.
To get a jump start on development, this guide covers varying degrees of depth. Please follow these steps:
Chapter 1, Getting Started with Facelets as an entry-level tutorial on using JavaServer Faces and Facelets together. All of the content in this section is generic to Faces with the exception of Section 1.6, “Creating Web Pages”. This section describes the simplest Facelets templating scenario that could possibly work.
Chapter 2, Configuration for details on setting up your web application for use with Facelets.
Chapter 3, Tag Libraries for incorporating JSF objects into Facelet documents as tags.
Chapter 5, Templating and Re-Use to learn about how Facelets encourages templating and re-use in your documents.
Chapter 6, Facelets Architecture as an overview to the Facelets API and compiler.
Chapter 7, Extending Facelets as a starting point for extending Facelets functionality with custom tag handlers.
Additional documentation and resources such as: mailing lists, forums, and announcements, are available on Facelets' home page at:
http://facelets.dev.java.net
This section will walk you through creating a simple Number Guess web application. Familiarity with Java Web Applications is required along with some knowledge of JavaServer Faces. For those who are new to those technologies, you can browse:
Java Web Applications - http://www.onjava.com/pub/a/onjava/2001/03/15/tomcat.html
JavaServer Faces - http://java.sun.com/j2ee/javaserverfaces/
The steps in this tutorial are as follows:
Section 1.1, “Downloading Facelets” for downloading Facelets binaries or for accessing Facelets source code from CVS.
Section 1.2, “Dependencies” will provide an overview of libraries needed to use JavaServer Faces with Facelets
Section 1.3, “Directory Structure” shows the familiar directory structure you should use for this tutorial
Section 1.4, “Project Setup” has initial configuration settings you need to get up and running
Section 1.5, “The NumberBean” details the one JavaBean our tutorial requires and how to use it in JavaServer Faces
Section 1.6, “Creating Web Pages” shows how to create and use a template within JavaServer Faces components
Section 1.7, “Handling Navigation” includes how to tie your views together
Section 1.8, “Deployment” finishes off the tutorial with deploying your application
While this tutorial is a little basic for some, you may want to jump back to Documentation Guide for direction.
Facelets is currently available as a sub-project of the JavaServer Faces Reference Implementation on Java.net (http://facelets.dev.java.net/). You have a couple options for downloading Facelets:
If you are a member of Java.net, you may checkout Facelets from CVS. Make sure you are located in the appropriate directory and use the following CVS commands (Replace USER_NAME
with your Java.net Member Login Name):
cvs -d :pserver:USER_NAME@cvs.dev.java.net:/cvs login
cvs -d :pserver:USER_NAME@cvs.dev.java.net:/cvs checkout facelets
More information on accessing Java.net's CVS repository is located at http://facelets.dev.java.net/servlets/ProjectSource.
See Chapter 8, Building Facelets for more information on building Facelets from source (specifically if you used CVS).
Facelets will work with both version 1.1 and 1.2 of JavaServer Faces and makes no bearing on the implementation used. Facelets also uses the new EL-API and again can be used with any implementation of that API. Please reference the table below to make sure your dependencies are available to Facelets:
Table 1.1. Facelets Dependencies
Project | Build Req? | Included? | Description | Link |
---|---|---|---|---|
JavaServer Faces RI | No | No | The reference implementation of JSF 1.1 and JSF 1.2 are available for use with your application. | http://javaserverfaces.dev.java.net/ |
Apache MyFaces | No | No | The alternative to the JSF reference implementation. MyFaces currently implements the JSF 1.1 specification. | http://myfaces.apache.org/ |
JavaServer Faces 1.2 API | Yes | No | JSF 1.2 API that works with the new EL Specification. This API is packaged with the JavaServer Faces RI and available on Java.net. | http://javaserverfaces.dev.java.net/ |
EL API | Yes | Yes | The standardized EL specification that is standalone from JSP or JSF, but used by both frameworks. | http://glassfish.dev.java.net/ |
EL RI | No | Yes | The reference implementation that is used by Facelets for handling EL. | http://glassfish.dev.java.net/ |
XML SAX | Yes | No | This dependency should not be an issue for most deployments as it's a standard part of web containers and JREs. | http://java.sun.com/xml/ |
For more information on using these projects:
Those projects that are required to build Facelets, please see Chapter 8, Building Facelets.
If you would like to use Apache MyFaces with Facelets, see Section 2.1.2, “Apache MyFaces”.
To use Facelets with the JavaServer Faces Reference Implementation, see Section 2.1.1, “JavaServer Faces RI”.
Since we are putting together a sample web application, your project should have the following directory structure (presumes JSF RI use):
$DEPLOY_DIR +- /WEB-INF +- /classes +- /lib +- /jsf-facelets.jar +- /el-api.jar +- /el-ri.jar [jsf implementation dependencies] +- /jsf-api.jar +- /jsf-impl.jar +- /commons-digester.jar +- /commons-logging.jar +- /commons-collections.jar +- /commons-beanutils.jar +- /web.xml +- /faces-config.xml +- /[xhtml documents]
For more information on web application deployments in general, there is additional documentation at http://java.sun.com/j2ee and at http://jakarta.apache.org/tomcat.
First configure your application's web.xml
. Make sure that the FacesServlet
is mapped and JSF's javax.faces.DEFAULT_SUFFIX
initialization parameter is specified. This standard initialization parameter lets JSF know what documents to use for specifying your views.
<web-app> <!-- Use Documents Saved as *.xhtml --> <context-param> <param-name>javax.faces.DEFAULT_SUFFIX</param-name> <param-value>.xhtml</param-value> </context-param> <!-- Special Debug Output for Development --> <context-param> <param-name>facelets.DEVELOPMENT</param-name> <param-value>true</param-value> </context-param> <!-- Optional JSF-RI Parameters to Help Debug --> <context-param> <param-name>com.sun.faces.validateXml</param-name> <param-value>true</param-value> </context-param> <context-param> <param-name>com.sun.faces.verifyObjects</param-name> <param-value>true</param-value> </context-param> <!-- Faces Servlet --> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <!-- Faces Servlet Mapping --> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>*.jsf</url-pattern> </servlet-mapping> </web-app>
JavaServer Faces is extremely interoperable with other frameworks. Most of this flexibility lies in JSF's Application
composite which includes: a default ActionListener
, ELResolver
, StateManager
, NavigationHandler
, and ViewHandler
. Facelets is used as the application's ViewHandler
, represented by the class com.sun.facelets.FaceletViewHandler
.
To configure JavaServer Faces to use Facelets as the ViewHandler
, modify your project's faces-config.xml
to specify the <view-handler>
element:
<faces-config> <application> <view-handler> com.sun.facelets.FaceletViewHandler </view-handler> </application> </faces-config>
Even though there are other parts to the faces-config.xml
needed for this tutorial, only the <view-handler>
element is required for Facelets use.
We will have a simple, straight-forward JavaBean that will act as our 'controller' for our NumberGuess tutorial. Note that the desired class name will be tutorial.NumberBean
.
package tutorial; import java.io.Serializable; import java.util.Random; import javax.faces.application.FacesMessage; import javax.faces.component.UIComponent; import javax.faces.context.FacesContext; import javax.faces.validator.ValidatorException; public class NumberBean implements Serializable { protected final static Random rand = new Random(); protected int min; protected int max; protected int guess; protected int actual; // Default Constructor public NumberBean() { this.min = 1; this.max = 10; } // called by JSF to validate user input public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException { // coerce the value to an int try { int param = Integer.parseInt(value.toString()); // validate param if (param > this.max || param < this.min) { FacesMessage msg = new FacesMessage("Guess must be between "+this.min+" and "+this.max); throw new ValidatorException(msg); } } catch (NumberFormatException e) { FacesMessage msg = new FacesMessage("Must be a number"); throw new ValidatorException(msg); } } // lazy generate our actual value public synchronized int getActual() { if (this.actual == 0) { this.actual = rand.nextInt(this.max-this.min); this.actual += this.min; } return this.actual; } // our message for the response public String getMessage() { if (this.guess == this.getActual()) { return "Sweet, you got it right!"; } else if (this.guess < this.getActual()) { return "Sorry, try something higher"; } else { return "Too bad, go lower"; } } // other bean properties public int getMin() { return this.min; } public int getMax() { return this.max; } public int getGuess() { return this.guess; } public void setMin(int min) { this.min = min; } public void setMax(int max) { this.max = max; } public void setGuess(int guess) { this.guess = guess; } }
The above class should be compiled with Java and located at $DEPLOY_DIR/WEB-INF/classes/tutorial/NumberBean.class
. If you do not know how to compile Java classes, please stop this tutorial and go to http://java.sun.com for introductory help.
You can map JavaBeans into your JavaServer Faces application via the faces-config.xml
. JavaBeans used in your application can be wired together by bean properties and can be provided scope: a single request
, a whole session
visit, for everyone in the application
, or none
if you don't want it stored directly.
<faces-config> <!-- from project setup --> <application> <view-handler> com.sun.facelets.FaceletViewHandler </view-handler> </application> <!-- our NumberBean we just created --> <managed-bean> <managed-bean-name>NumberBean</managed-bean-name> <managed-bean-class>tutorial.NumberBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> <managed-property> <property-name>min</property-name> <value>1</value> </managed-property> <managed-property> <property-name>max</property-name> <value>10</value> </managed-property> </managed-bean> </faces-config>
The <managed-bean>
element above tells JSF to guarantee a tutorial.NumberBean
is available under the attribute name NumberBean
in the user's session
. In addition, we've allowed our NumberBean
to be configured by setting the min
and max
values a user can guess. It should be noted that JavaServer Faces will lazy load our NumberBean
when it's first accessed by our application.
This section contains the only content the "Getting Started" chapter that is entirely specific to Facelets.
Facelets emphasizes its ability to template content in your application. Templating promotes re-use and eases long term maintenance of your application, allowing content to be changed in one spot, but used in multiple pages. While using templating features wouldn't be necessary for this simple application, it does serve as a tutorial. For more information on this topic, see Chapter 5, Templating and Re-Use.
We will create three documents: a template page, a page for user input, and finally a page to display a response:
$DEPLOY_DIR +- /WEB-INF [newly added pages below] +- /template.xhtml +- /guess.xhtml +- /response.xhtml
Facelets comes with a library of UI (user interface) tags to use in writing your application. We will only focus on using a couple of them in creating a page called template.xhtml
.
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Facelets: Number Guess Tutorial</title> <style type="text/css"> <!-- body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: small; } --> </style> </head> <body> <h1> <ui:insert name="title">Default Title</ui:insert> </h1> <p> <ui:insert name="body">Default Body</ui:insert> </p> </body> </html>
Facelets requires valid XML markup. Our sample application is using valid XHTML since these documents will be used on the web. You can even view this document within your favorite visual tool. A couple things to take notice of:
Use of proper namespaces such as xmlns:ui="http://java.sun.com/jsf/facelet"
to specify tag libraries loaded by Facelets. In this example, we are declaring that Facelet's own UI library of tags will be prefixed with a ui
. Namespace definitions need to be specified before you use a tag from that library, otherwise Facelets will properly error when it compiles your document.
<ui:insert>
is used to declare parts of the document that can be inserted or overwritten. If a document doesn't override the insertion point with the specified name (title
or body
), then the default text from the original template is used.
In this example page, we will incorporate components from the JavaServer Faces standard component libraries.
<!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"> <body> This text above will not be displayed. <ui:composition template="/template.xhtml"> This text will not be displayed. <ui:define name="title"> I'm thinking of a number from #{NumberBean.min} to #{NumberBean.max}. Can you guess it? </ui:define> This text will also not be displayed. <ui:define name="body"> <h:form id="helloForm"> <h:inputText type="text" id="userNo" value="#{NumberBean.guess}" validator="#{NumberBean.validate}"/> <br/> <h:commandButton type="submit" id="submit" action="success" value="Submit" /> <br/> <h:message showSummary="true" showDetail="false" style="color: red; font-weight: bold;" id="errors1" for="userNo"/> </h:form> </ui:define> This text will not be displayed. </ui:composition> This text below will also not be displayed. </body> </html>
Using a <ui:composition>
tag will trim everything outside of it. This means that you can create/edit your documents with a visual editor, but Facelets will only use what's between the <ui:composition>
tags.
The <ui:composition>
uses the template
attribute to reference the template or look and feel of this page.
Two
<ui:define>
tags are specified with names that match
the ones used in the template we had
created. This means that when Facelets
builds your page, those blocks of
content will be placed appropriately in
the template. Any text that happens to
reside inside the
<ui:composition>
tag, but outside of the
<ui:define>
tags is not displayed in the rendered
output.
Facelets also can use 'inlined' EL
Expressions to make outputting dynamic
content extremely easy. In the example
above,
#{NumberBean.max}
will display the max
property of the
NumberBean
in your
session. EL expressions may also reside
outside tag attributes, in the space
between tags, but you must keep in mind
that the result of evaluating the
expression will only appear in the
rendered output if template text in that
same position would appear.
If you have questions or do not understand the attributes used for <h:inputText>
, <h:commandButton>
, or <h:message>
; documentation on those components are available at http://java.sun.com/j2ee/javaserverfaces. Keep in mind that Facelets uses the same attributes, behavior, and naming conventions as the tags specified for JavaServer Faces' JSP TLD documents.
Finally, if a user entered valid input as specified by the NumberBean.validate
method, then we need a page to give them feedback on their guess.
<!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"> <body> <ui:composition template="/template.xhtml"> <ui:define name="title"> #{NumberBean.message} </ui:define> <ui:define name="body"> <form jsfc="h:form"> <input jsfc="h:commandButton" type="submit" id="back" value="Back" action="success"/> </form> </ui:define> </ui:composition> </body> </html>
Again we use an <ui:composition>
to trim unecessary content from our page and use the template.xhtml
.
We also introduced the jsfc
attribute which allows the XHTML tags to be compiled into <h:form>
and <h:commandButton>
when the page is compiled. This means that a designer's visual editor will render a normal form and button, but it will be transformed into a dynamic UIComponent
when compiled by Facelets.
That's it for the pages. Again, if you have questions about JavaServer Faces components or would like some additional background, visit http://java.sun.com/j2ee/javaserverfaces
We would like to tie our two pages together from guess.xhtml
to response.xhtml
and back again. To do this, we need to go back into the faces-config.xml
to specify navigation cases.
<faces-config> <!-- from project setup --> <application> <view-handler> com.sun.facelets.FaceletViewHandler </view-handler> </application> <!-- our NumberBean we created before --> <managed-bean> <managed-bean-name>NumberBean</managed-bean-name> <managed-bean-class>tutorial.NumberBean</managed-bean-class> <managed-bean-scope>session</managed-bean-scope> <managed-property> <property-name>min</property-name> <value>1</value> </managed-property> <managed-property> <property-name>max</property-name> <value>10</value> </managed-property> </managed-bean> <!-- going from guess.xhtml to response.xhtml --> <navigation-rule> <from-view-id>/guess.xhtml</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/response.xhtml</to-view-id> </navigation-case> </navigation-rule> <!-- going from response.xhtml to guess.xhtml --> <navigation-rule> <from-view-id>/response.xhtml</from-view-id> <navigation-case> <from-outcome>success</from-outcome> <to-view-id>/guess.xhtml</to-view-id> </navigation-case> </navigation-rule> </faces-config>
In both pages, we included commandButtons
in some form with action
attributes specified. The action
attribute is mapped to the <from-outcome>
element in your faces-config.xml
. This method of handling navigation is extremely flexible and more information on this aspect of JavaServer Faces is included at http://java.sun.com/j2ee/javaserverfaces.
Finally, you should be able to deploy all of these artifacts now to your web application. Your application should generate a random number and allow you to flip between your guess
page and response
page. To access your application, remember that the javax.faces.web.FacesServlet
in your web.xml
was mapped to *.jsf
. To start your guessing fun, point your browser to http://localhost:8080/numberguess/guess.jsf
(presuming you used the application name numberguess
).
If you have additional problems or questions, going to Facelet's home page at http://facelets.dev.java.net will provide you with additional resources such as forums, mailing lists, and additional documentation.
Facelets comes with an extensible ViewHandler
. This is the only necessary integration point within your faces-config.xml
.
<faces-config> <application> <view-handler> com.sun.facelets.FaceletViewHandler </view-handler> </application> </faces-config>
The FaceletViewHandler
utilizes several <context-param>
declarations in your web.xml
which are detailed in Section 2.2.1, “Initialization Parameters”.
See Chapter 1, Getting Started with Facelets for a tutorial that uses JavaServer Faces RI as an example. More information on the JSF RI is available at:
http://javaserverfaces.dev.java.net
These parameters help with development and increase the flexibility of Facelet use.
Table 2.1. Web.xml Parameter List
Parameter Name | Default Value | Description | Example |
---|---|---|---|
facelets.LIBRARIES | A semicolon (; ) delimitted list of paths to Facelet tag libraries, relative to your application's root. These libraries will be loaded when the first request hits the FaceletViewHandler for page compilation. | /WEB-INF/facelets/foo.taglib.xml; /WEB-INF/facelets/bar.taglib.xml | |
facelets.DECORATORS | A semicolon (; ) delimitted list of class names of type com.sun.facelets.tag.TagDecorator , with a no-argument constructor. These decorators will be loaded when the first request hits the FaceletViewHandler for page compilation. | com.sun.facelets.tag.jsf.html.HtmlDecorator | |
facelets.DEVELOPMENT | false | Setting this to true will cause the FaceletViewHandler to print out debug information in an easy to use screen when an error occurs during the rendering process. | true |
facelets.BUFFER_SIZE | -1 | The buffer size to set on the response when the ResponseWriter is generated. By default the value is -1, which will not assign a buffer size on the response. This should be increased if you are using development mode in order to guarantee that the response isn't partially rendered when an error is generated. | 8192 |
facelets.REFRESH_PERIOD | 2 | When a page is requested, what interval in seconds should the compiler check for changes. If you don't want the compiler to check for changes once the page is compiled, then use a value of -1 . Setting a low refresh period helps during development to be able to edit pages in a running application. | -1 |
facelets.RESOURCE_RESOLVER | com.sun.facelets.impl.DefaultResourceResolver | Optionally provide an alternate ResourceResolver that will replace the default logic of allowing the FacesContext resolve the resource URL. | my.company.IDEResourceResolver |
facelets.VIEW_MAPPINGS | A semicolon (; ) delimitted list of resources that Facelets should use. If no resource paths are specified, Facelets will handle all requests (DEFAULT). If one or more paths are specified, Facelets will only use the ones specified, otherwise fall back on the parent or default ViewHandler (JSP). Note, this requires the FacesServlet in your web.xml to be mapped with a prefix for capturing multiple file types ex: /faces/* . | /demos/*; *.xhtml | |
facelets.SKIP_COMMENTS | true | A boolean value that tells the compiler to skip comments (default is true). Even if you comment out code in your page, the tags will not be compiled but expressions (EL) will be treated as if they were inlined-- still compiled and evaluated for output in the document. Skipping comments will remove all comments completely from the document. | false |
Java applications can restrict access to resources or pages by outside users. This feature is common to all application servers and part of the Servlet specification.
Lets presume that you want to take advantage of developing simple Facelet XHTML documents that are viewable in your browser during development. When your application is deployed to production, you don't want anyone from the outside to access your XHTML documents unless they are served through the JavaServer Faces Servlet.
<web-app> <!-- servlets and such would be above --> <security-constraint> <display-name>Restrict XHTML Documents</display-name> <web-resource-collection> <web-resource-name>XHTML</web-resource-name> <url-pattern>*.xhtml</url-pattern> </web-resource-collection> <auth-constraint> <description>Only Let 'developer's access XHTML pages</description> <role-name>developer</role-name> </auth-constraint> </security-constraint> </web-app>
You can read more about Security in the Web Tier at http://java.sun.com/webservices/docs/1.3/tutorial/doc/Security2.html
Facelets uses java.util.Logger
for handling logging. This was done to reduce library dependencies while taking advantage of many Servlet container's ability to modify logging levels on the fly.
For many, using the JDK 1.4 java.util.Logger
will be new to them. You can read more on it at http://java.sun.com/j2se/1.4.2/docs/guide/util/logging/index.html
Table 2.2. Facelet Logger Names
Name | Description |
---|---|
facelets.compiler | For outputting debug information about the compilation process. This would include namespace resolution for TagLibraries and XML events. Most of the output will be FINE . |
facelets.factory | Information about the inner workings of the FaceletFactory . |
facelets.tag.component | Debug information that helps with component lifecycles in relation to Facelets. |
facelets.viewhandler | Will output view-id mapping/resolution and the states of your views. |
For those who are currently developing a Facelets project and would like to have all the debug information available on both your application server and in your IDE; modify the logging.properties
in your JRE/lib
directory and add the following lines to the end of that file:
facelets.level = FINEST # uncomment any of the below #facelets.compiler.level = SEVERE #facelets.tag.component.level = INFO #facelets.viewhandler.level = SEVERE
Facelets uses valid XML with namespace support for compilation. If you are new to XML, there are great resources online, such as http://www.w3schools.com. To use a library of tags, you would 'include' the library by declaring a namespace. Declaring a namespace involves using the library's URI (or URL) and mapping it to a prefix.
<!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:h="http://java.sun.com/jsf/html"> <body> <h:inputText value="#{hello.world}"/> </body> </html>
In the example above, we've declared 2 namespaces:
xmlns="http://www.w3.org/1999/xhtml"
Says every tag without a prefix, such as <body>
, are part of XHTML.
xmlns:h="http://java.sun.com/jsf/html"
Maps the prefix h:
to the JSF HTML library.
Facelets provides you the ability to have one XML element in the page be converted to another at compile time by specifying the jsfc
attribute.
<!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:h="http://java.sun.com/jsf/html"> <body> <input type="text" jsfc="h:inputText" value="#{hello.world}" /> </body> </html>
The <input>
tag above is readable/displayable in browsers and visual tools as a normal text field. It would be nice to use that same text field in JavaServer Faces, so we provide the jsfc="h:inputText"
. This declaration tells the compiler to resolve the <input>
tag as an <h:inputText>
(the same as above). Note, the same rules for namespaces and naming apply to the value of the jsfc
attribute.
If there is a tag in your document under a namespace (such as XHTML) that isn't specified in a Tag Library, then Facelets will treat that tag as a simple text fragment and optimize it for tree creation. If the namespace is known, but the element's name isn't included in the tag library, then an exception will be thrown which will tell you what file and line caused the problem.
If your tag or component isn't showing up in your rendered page, check the source of page and see if the tag was simply ignored. This usually means you are using the wrong namespace for your library.
Facelets comes with support for all tags (components) included in the JavaServer Faces Specification. Great care was taken to mimic the specification's JSP tag counterparts to leverage existing knowledge and available documentation. For development, you may reference the 'Tag Library Documentation' at:
Table 3.1. Specification Tag Libraries
Namespace | Description |
---|---|
http://java.sun.com/jsf/core | The core JavaServer Faces custom actions that are independent of any RenderKit used. |
http://java.sun.com/jsf/html | This tag library contains JavaServer Faces component tags for all UIComponent + HTML RenderKit Renderer combinations defined in the JavaServer Faces Specification. |
You can read all about the cool templating features in Facelets in Chapter 5, Templating and Re-Use.
Facelets includes limited support for JSTL 'tags' within the Core and Function library only. Here is the link to Function and Core documentation from JSTL:
The Function library is implemented, according to the spec in its entirety. The Core library has the following implementations:
Table 3.2. <c:if/>
Attribute | Required? | Description | Example |
---|---|---|---|
var | false | An optional expression variable to store the result of evaluating the 'test' attribute. | result |
test | true | A required expression that evaluates to a boolean for deciding if the body of this tag is included in tree creation. Note, an expression evaluating to null is also false. | #{user.roles['admin']} |
Table 3.3. <c:forEach/>
Attribute | Required? | Description | Example |
---|---|---|---|
var | false | An optional expression variable to store the actual currently indexed value. | employee |
items | false | An expression that evaluates to an indexable Collection, Array, or Map. | #{empDao.employees} |
varStatus | false | Variable to bind an Object that describes the current indexed state. The Object has the following properties: first[boolean], last[boolean], begin[int], end[int], index[int], step[int]. | idx |
begin | false | Index the forEach should start at. | #{param.offset} |
end | false | Index the forEach should end at | #{param.offset + param.pageSize} |
step | false | The step size to skip entries in the collection | 2 |
Table 3.4. <c:catch/>
Attribute | Required? | Description | Example |
---|---|---|---|
var | false | An optional value to store the Exception Object | exp |
Table 3.5. <c:set/> (Avoid if Possible)
Attribute | Required? | Description | Example |
---|---|---|---|
var | true | A variable to store the 'value' expression | aList |
value | true | An expression that will be bound under the specified 'var' attribute. Anytime this 'var' shows up in other expression, this 'value' will be embeded in the succeeding expression. The example here would bind 'aList' as "the list within the map under the key 'listA'", NOT as a List Object. Every time 'aList' is used, it will evaluate the example expression to generate the instance. | #{listMap['listA']} |
A note about EL within this JSTL implementation. Since all set variables from these tags are backed by the new EL API, the only scope they can bind to is within the current FaceletContext
, no others. This means that variables only can exist for the benefit of creating the component tree for JSF and do not work to assign variables in other scopes. The reason for this is that the Expressions are actually bound to the FaceletContext, not the evaluted Object. This is to better serve JSF tree creation.
As part of the EL Specification, you can incorporate static
Java methods into your documents. The JSTL library already has some of these functions available, see Section 3.2.3, “JSTL Support”.
Functions are declared within EL in the following format: #{fn:sizeOf(myCollection)}
. What that line says is to reference the tag library using the prefix fn
for a function named sizeOf
. This syntax should feel similar to what's required for using tags from imported libraries.
Any tag library can offer any amount of functions. Please reference the particular library's documentation for function names and parameters information.
Tag libraries can be loaded multiple ways. First Facelets will load all libraries from your classpath (including packaged Jars) and then any libraries you have specified in your web.xml
.
When Facelets searches the classpath, it will attempt to load any file with the extension *.taglib.xml
from the /meta-inf
folder of your Jars. For example, /meta-inf/mycompany.taglib.xml
would be found by Facelets while /mycompany.taglib.xml
and /meta-inf/mycompany.xml
would not. See Section 2.3, “Logging” for information on recieving debug information on the libraries loaded.
Facelets will check for an initialization parameter from your web.xml
and load all libraries specified there relative to your application's root. See Section 2.2.1, “Initialization Parameters” for details on the parameter. This is an ideal way to declare specialized tags for a particular application; tags that aren't necessarily distributed with code in Jars.
Facelets allows you to configure custom tag libraries in a short amount of time. This section will focus on defining tag libraries in XML which can be automatically loaded by Facelets compiler as described in Section 3.4, “Loading Libraries”.
The schema (or DTD) for Facelets is extremely simple. Future releases of Facelets will actually just use your faces-config.xml
files the same way a visual tool would for determining required attributes and namespaces.
Facelets currently uses the following doc type:
<!DOCTYPE facelet-taglib PUBLIC "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN" "http://java.sun.com/dtd/facelet-taglib_1_0.dtd">
This is the (simple) DTD that Facelets uses:
<!ELEMENT facelet-taglib (library-class|(namespace,(tag|function)+))> <!ATTLIST facelet-taglib xmlns CDATA #FIXED "http://java.sun.com/JSF/Facelet"> <!ELEMENT namespace (#PCDATA)> <!ELEMENT library-class (#PCDATA)> <!ELEMENT tag (tag-name,(handler-class|component|converter|validator|source))> <!ELEMENT tag-name (#PCDATA)> <!ELEMENT handler-class (#PCDATA)> <!ELEMENT component (component-type,renderer-type?,handler-class?)> <!ELEMENT component-type (#PCDATA)> <!ELEMENT renderer-type (#PCDATA)> <!ELEMENT converter (converter-id, handler-class?)> <!ELEMENT converter-id (#PCDATA)> <!ELEMENT validator (validator-id, handler-class?)> <!ELEMENT validator-id (#PCDATA)> <!ELEMENT source (#PCDATA)> <!ELEMENT function (function-name,function-class,function-signature)> <!ELEMENT function-name (#PCDATA)> <!ELEMENT function-class (#PCDATA)> <!ELEMENT function-signature (#PCDATA)>
As you can see, JSF entities are treated as first class citizens in Facelets' tag libraries. A couple things to observe from the schema above:
The definition of a tag library (including namespace) can be delegated to the class specified in the library-class
element. The class specified must implement com.sun.facelets.tag.TagLibrary
. This is useful if you would like to maintain your tag library in Java, but would like to have it automatically picked up by the compiler by placing an XML file in your Jar's meta-inf
folder.
Each document (not specified by library-class
) requires a namespace
element which will match the namespace used in your document, see Section 3.1.1, “Tag Namespaces”.
The rest of the document is made up of tag
and function
elements. Tag elements require a tag-name
and can take on different behavior depending on what you would like Facelets to handle for you. Functions can also be specified under the library's namespaces and follow the same signature as in JSP TLD files.
The following sections describe how to integrate your objects within the XML tag library.
UIComponents
can be auto-wired by using the component
element in your tag library.
<tag> <tag-name>bar</tag-name> <component> <component-type>com.mycompany.Data</component-type> <renderer-type>com.mycompany.Bar</renderer-type> </component> </tag>
In the above example, we are binding a component of type (not Class) com.mycompany.Data
to the tag name bar
. A renderer-type
is also provided, but not required since UIComponents
can easily render themselves.
Based on if your component implements
ActionSource[2]
,
ValueHolder
, or
EditableValueHolder
,
Facelets will take care of auto-wiring
those standard attributes according to
the specification. Facelets differs
greatly from JSP in this important
regard, and this difference is a feature
of Facelets that takes advantage of the
dynamism in JavaServer Faces that is
wasted on JSP. Specifically, any tag
attribute in a Facelets page is
tolerated. If the value of the
attribute is a ValueExpression, and tag
is associated with a UIComponent, the
expression is stored in the components's
ValueExpression Map. Otherwise,
Facelets looks for a JavaBeans property
on the component whose name is equal to
the tag attribute name. If it exists,
its setter is called with the value of
the tag attribute. If it doesn't exist,
an entry is created in the generic
attribute set for the component, the
value of which is the value of the tag
attribute. The upshot of all this is
that turnaround time is greatly reduced
because you can modify the component
and/or renderer without having to change
a TLD. Of course, the downside is that
any attribute is legal, but errors in
that regard are logged in the logging
system.
This approach exemplifies a general philosophy of Facelets, sensible default behavior from the perspective of the page developer.
The attribute wiring behavior also
applies to validators, EL expressions,
converters, etc. Any additional
properties on your component will also
be wired for you too, just as JSP sets
the properties on a
JspTag
. If you think
that Facelets can't handle the special
wiring your component needs, then skip
to Section 7.3.1, “Custom ComponentHandlers”.
If you've just created a UIComponent
from scratch and you are not sure how to integrate it into JavaServer Faces, here's all the code you need:
<faces-config> <component> <component-type>com.mycompany.Data</component-type> <component-class>com.mycompany.jsf.components.UIDataComponent</component-class> </component> </faces-config>
Notice that the component-type
matches the one used in the Facelets tag library XML. This degree of indirection by referencing components by type increases the maintainability and portability of JavaServer Faces components.
Validators
can also be added to Facelets with the validator
element.
<tag> <tag-name>validateEmail</tag-name> <validator> <validator-id>faces.validator.Email</validator-id> </validator> </tag>
Again, we reference JSF entities by type or id. Facelets will also take care of wiring attributes directly to your Validator
by matching attribute name to property name. If you would like to provide special behavior or wire odd properties, you can jump ahead to Section 7.3.2, “Custom ValidateHandlers”.
If you've just written your own Validator
, you can add it to your JSF Application with the following snippet in your faces-config.xml
:
<faces-config> <validator> <validator-id>faces.validator.Email</validator-id> <handler-class>com.mycompany.jsf.validate.EmailValidator</handler-class> </validator> </faces-config>
Converters
can be registered with Facelets by adding a converter
element.
<tag> <tag-name>convertMoney</tag-name> <converter> <converter-id>faces.convert.Money</converter-id> </converter> </tag>
Converters are referenced by id. Facelets will take care of wiring attributes directly to your Converter
by matching attribute name to property name. If you would like to provide special behavior or wire odd properties, you can jump ahead to Section 7.3.3, “Custom ConvertHandlers”.
If you've just written your own Converter
, you can add it to your JSF Application with the following snippet in your faces-config.xml
:
<faces-config> <converter> <converter-id>faces.convert.Money</converter-id> <handler-class>com.mycompany.jsf.convert.ConvertMoney</handler-class> </converter> </faces-config>
Facelets has a feature similar to JSP's Tag Files. Within your tag library definition, you can provide a source
element that points to a another file, that will be compiled into another Facelet. Since this file can be referenced by tag-name
, you can easily include that Facelets into another and pass variable data to it.
<tag> <tag-name>echo</tag-name> <source>tags/echo.xhtml</source> </tag>
The echo.xhtml
will be included anytime a developer uses the echo
tag. The following is an example tag file:
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"> <span class="message">#{msg}</span> </ui:composition>
This tag file can be included and any variable used within the tag file can be passed as an attribute:
<my:echo msg="#{bean.warningMessage}"/>
In this example, the msg
attribute is assigned to #{bean.warningMessage}
and then referenceable within echo.xhtml
under the variable msg
.
This was a simple example, but you can do some fairly cool things with building reusable components in your pages. Going one step further, you may provide a body to your custom tag, by placing a <ui:insert/>
as a place for body inclusion. See Chapter 5, Templating and Re-Use for more information.
Facelets allows you to write stateless tags that can be used in dictating component tree creation. This includes JSTL-like functionality that may be tied to business logic. Including your custom tag into your library requires using the handler-class
element.
<tag> <tag-name>if</tag-name> <handler-class>com.mycompany.IfHandler</handler-class> </tag>
All tags in a Facelets extend com.sun.facelets.tag.TagHandler
which provides some base functionality for tying XML data to your Java code. To read more about creating custom tags, jump to Section 7.2, “Custom TagHandlers”.
You may reference functions within your tag library. Functions are represented by static methods in Java.
<function> <function-name>reverse</function-name> <function-class>com.mycompany.Functions</function-class> <function-signature>java.lang.String reverse(java.lang.String)</function-signature> </function>
The function
element is a top level entity like the tag
element. You need to specify both the class type and the method signature that Facelets should use. All class names in the signature must be fully qualified, with the exception of primitives such as int
or boolean
.
In this example, you would be able to reference this function with a namespace prefix in your document, such as #{my:reverse{employee.name}}
. See Section 3.3, “Functions” for more information on function use in your pages.
Facelets utilizes the new EL Specification and will continue to support it in future revisions. This may include extra language extensions such as method invocation and inlined sets, for example.
With the new EL Specification, the use of #{...}
and ${...}
are both supported and Facelets makes no distinction between the two. The short of it is that you can freely interchange the two with whatever is most familiar to what you're working on. Both syntaxes will be handled the same way and share the same lifecycles and features.
Text and expressions can exist anywhere in the document. This means you can have an example like below, and have Facelets correctly evaluate it at render time.
<span>Your Basket has ${basket.lineCount} Items</span>
Facelets provides a unique lifecycle to EL. When building a UIComponent
tree, all EL expressions are re-built based on the state of the current FaceletContext
. These expressions are either stored on things like UIComponents
or stored in the component tree as text. When it's time to render, then these expressions are evaluated as the second phase. This offers the truest form of variable/state management in relation to tree building within JavaServer Faces. This is also a feature that is not supported within JSP for inlined text.
When I set out to design the Facelets framework, my main emphasis was ease of integration with JavaServer Faces. A ways into the the notebook of ideas, I saw that templating and re-use would have to be just as important within your documents, if not more important than the JSF integration features. Thusly, the Facelet compiler makes special accomodations to the built-in UI tag library for high-perforance templating in your pages. This section acts as both an introduction and a whiteboard for ideas you may pursue with Facelets and JavaServer Faces.
When describing templating within Facelets, we have two roles: the template and the template client.
Any document can act as a template; but what makes a document a template? It just simply uses one or more <ui:insert/>
tags to inject content from another source.
The other half of the equation is the template client. This includes documents that use the <ui:component/>
, <ui:composition/>
, <ui:fragment/>
, or <ui:decorate/>
. Each of those tags is detailed in the sections below.
A template client can refrain from using <ui:define>
tags in their body; then the target template only uses a single <ui:insert/>
(without the name
attribute). This will cause the body of the template client to be injected into the template wherever the 'nameless' <ui:insert/>
is located.
<!-- template document --> ... <span class="repeatingBox"> <c:forEach begin="1" end="10"> <ui:insert/><br/> </c:forEach> </span> ...
<!-- template client document --> ... <ui:composition template="template.xhtml"> I'm in the spin cycle <h:outputText value="#{random.name}"/>! </ui:composition> ...
A template client can break up its body within multiple, named <ui:define>
tags. These tags may specify what goes in the menu, in the header, and within the content area all at once. See Section 1.6, “Creating Web Pages” for a good example of this type of templating.
Template use may go multiple levels deep. This means that a template client may use a template which in turn may use a template, which may also use a template, and then it may use yet another template... you get the picture.
Templating is backed by the a TemplateManager
that has a stack of TemplateClient
instances. Tags like <ui:composition>
implement TemplateClient
. When a template is being evaluated and comes upon a <ui:insert/>
tag, it will ask the TemplateManager
for a TemplateClient
that either has a match for the tag's name attribute, or the top-most TemplateClient
on the stack.
An example would be having a <ui:insert name="title"/>
tag in the template. The TemplateManager
will walk through its internal stack of TemplateClients
, asking each one for a content under the name title
. It will continue through the stack until one is found. If none are found, then the original template is free to include the default content. See Section 5.9, “<ui:insert/>” for more information on default content.
Table 5.1. Component Tag Attributes
Attribute | Required? | Description | Example |
---|---|---|---|
id | false | A unique id may be provided, otherwise Facelets will automatically assign one under the same logic it uses for all UIComponents . | mainMenu |
binding | false | This binding attribute is used the same as with any other UIComponent such that it allows you to reference them as a property of a JavaBean. If that target property did not have a UIComponent instance assigned already, JavaServer Faces will lazily create an instance for you and set it on your JavaBean before continuing with building the tree. | #{page.menu} |
The component
tag and the composition
tag (below) behave exactly the same, except the component
tag will insert a new UIComponent
instance into the tree as the root of all the child components/fragments it has.
Text before will be removed. <ui:component binding="#{backingBean.menu}"> <ul id="mainMenu"> <c:forEach var="link" items="#{menuOptions[role]}"> <c:choose> <c:when test="#{link.id == page}"> <li class="current"><a href="#{link.uri}">#{link.text}</a></li> </c:when> <c:otherwise> <li><a href="#{link.uri}">#{link.text}</a></li> </c:otherwise> </c:choose> </c:forEach> </ul> </ui:component> Text after will be removed.
Using the ability to use Tag files in your tag libraries, see Section 3.5.5, “Tag (Source) Files”, you could include the above component
into your pages while having the attributes automatically made available as variables within the document above:
... <span id="header"> <my:mainMenu page="home" role="#{user.role}"/> </span> ...
Pretty cool eh?
Table 5.2. Composition Tag Attributes
Attribute | Required? | Description | Example |
---|---|---|---|
template | false | The resolvable URI of the template to use. The content within the composition tag will be used in populating the template specified. | /WEB-INF/templates/detal-template.xhtml |
Facelets is founded on the idea of compositions. This means that a UIComponent
tree can be defined in multiple Facelet pages and executed in part or whole. Some other frameworks, like Tapestry (http://jakarta.apache.org/tapestry), may define a single component within a page, Facelets instead marks the start of a branch of child UIComponents
-- a composition if you will.
Text before will be removed. <ui:composition> #{dynamic.text} <h:inputText id="myText" value="#{foo.bar}"/> </ui:composition> Text after will be removed.
This means you can start a full XHTML document in your favorite visual tool with CSS definitions, but have Facelets trim everything outside of the <ui:composition/>
tag. Here's a simple example of using a composition in separate document:
... <h:column> <ui:include src="/composition.xhtml"/> </h:column> ...
Lets say this composition was included inside of a <h:column/>
tag/component; it would gain two children based on the above example: #{dynamic.text}
and the <h:inputText/>
.
The composition tag has templating abilities, to read more about how templating is coordinated, jump over to Section 5.6, “<ui:define/>” and Section 5.9, “<ui:insert/>”.
Table 5.3. Debug Tag Attributes
Attribute | Required? | Description | Example |
---|---|---|---|
hotkey | false | The hot key to use in combination with 'CTRL' + 'SHIFT' to launch the debug window. By default, when the debug tag is used, you may launch the debug window with 'CTRL' + 'SHIFT' + 'D'. This value cannot be an EL expression. | d |
The debug
tag will capture the component tree and variables when it is encoded, storing the data for retrieval later. You may launch the debug window at any time from your browser by pressing 'CTRL' + 'SHIFT' + 'D' (by default).
... <ui:debug hotkey="d" rendered="#{initParam.debugMode}"/> </body> </html> ...
In the above example, we use the hot key 'd' to launch the debug window. Creating debug output on every request adds some overhead, so you can use the UIComponent
rendered
property to turn debugging on or off based on some expression. In this example, debugging is backed by an entry in the web.xml
.
The debug
tag doesn't need to be used with the facelet.DEVELOPMENT
parameter. The best place to put this tag is in your site's main template where it can be enabled/disabled across your whole application. If your application uses multiple windows, you might want to assign different hot keys to each one.
Table 5.4. Decorate Tag Attributes
Attribute | Required? | Description | Example |
---|---|---|---|
template | true | The resolvable URI of the template to use. The content within the decorate tag will be used in populating the template specified. | /WEB-INF/templates/sideBox.xhtml |
The decorate
tag acts the same as a composition
tag, but it will not trim everything outside of it. This is useful in cases where you have a list of items in a document, which you would like to be decorated or framed. The sum of it all is that you can take any element in the document and decorate it with some external logic as provided by the template
.
Text before will stay. <ui:decorate template="/WEB-INF/templates/sideBox.xhtml"> <ui:define name="title">Product Search</ui:define> <ui:define name="body"> ... </ui:define> </ui:decorate> Text after will stay.
In some cases, it would make sense to externalize your "Product Search" box into a separate file, in other cases it doesn't and the decorate
tag allows you to inline as such.
For more information on how templating works in relation to the <ui:define/>
tags, see Section 5.6, “<ui:define/>”.
Table 5.5. Define Tag Attributes
Attribute | Required? | Description | Example |
---|---|---|---|
name | true | The literal name for this definition. This name will match up with a <ui:insert/> tag in a target template. | header |
The define
tag can be used within tags that allow templating. This includes composition
and decorate
tags.
Text before will stay. <ui:decorate template="/WEB-INF/templates/sideBox.xhtml"> <ui:define name="title">Product Search</ui:define> <ui:define name="body"> ... </ui:define> </ui:decorate> Text after will stay.
The use of this tag will be familiar to those that have used Struts Tiles, for example. The define
tag is used in conjuction with the target template's insert
tag, which you can read more about in Section 5.9, “<ui:insert/>”.
Table 5.6. Fragment Tag Attributes
Attribute | Required? | Description | Example |
---|---|---|---|
id | false | A unique id may be provided, otherwise Facelets will automatically assign one under the same logic it uses for all UIComponents . | mainMenu |
binding | false | This binding attribute is used the same as with any other UIComponent such that it allows you to reference them as a property of a JavaBean. If that target property did not have a UIComponent instance assigned already, JavaServer Faces will lazily create an instance for you and set it on your JavaBean before continuing with building the tree. | #{uiCache['searchResults']} |
Just like composition
has decorate
as a non-trimming version of the same behavior, component
has fragment
. This allows you to logically insert a UIComponent
into the tree and possibly bind this fragment to a JavaBean property or Map for management.
The Text above will be used. <ui:fragment binding="#{uiCache['searchResult']}"> <div id="searchResults"> ... </div> </ui:fragment> The Text below will be used.
The fragment
tag was also added to Facelets to get around some of the optimizations used in handling text within your document. If you are using components such as <f:panelGrid/>
, which renders its children, you may want more control over the building process that Facelets does and using a fragment
tag will help guarantee parent/child relationships for you.
Table 5.7. Include Tag Attributes
Attribute | Required? | Description | Example |
---|---|---|---|
src | true | A literal or EL expression that specifies the target Facelet that you would like to include into your document. | anotherPage.xhtml |
This tag should be familiar to most. The include
tag can point at any Facelet which might use the composition
tag, component
tag, or simply be straight XHTML/XML.
It should be noted that the src
path does allow relative path names, but they will always be resolved against the original Facelet requested.
<span id="header"> <ui:include src="#{backingBean.headerSource}"/> </span>
The include
tag can be used in conjunction with multiple <ui:param/>
tags to pass EL expressions/values to the target page. See Section 5.10, “<ui:param/>”, for more on passing variables to other pages.
Table 5.8. Insert Tag Attributes
Attribute | Required? | Description | Example |
---|---|---|---|
name | false | The optional name attribute matches the associated <ui:define/> tag in this template's client. If no name is specified, it's expected that the whole template client will be inserted. | header |
The insert
tag is used within your templates to declare spots of replaceable data.
<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title><ui:insert name="title">Default Title</ui:insert></title> </head> <body> <h1>Here is the Page Header</h1> <ui:insert name="body"> Default Body </ui:insert> </body> </html>
As you can see, these insert
tags indicate to the Facelets compiler where to insert content from the template client. If the template client doesn't specify content for the specified name, then the body of the ui:insert tag in the template is used.
Table 5.9. Param Tag Attributes
Attribute | Required? | Description | Example |
---|---|---|---|
name | true | The name of the variable to pass to the included Facelet. | user |
value | true | The literal or EL expression value to assign to the named variable. | #{sessionScope.user} |
From reading about Facelets templating, you've probably become familiar with passing fragments of content between pages. With the param
tag, you can pass objects as variables instead of just fragments of content. You can use the param
tag wherever a define
tag is used within composition
or decorate
tags, in addition to passing objects to an include
tag.
<span id="leftNav"> <ui:include src="/WEB-INF/siteNav.xhtml"> <ui:param name="user" value="#{currentUser}"/> <ui:param name="page" value="home"/> </ui:include> </span>
In the above example, when siteNav.xhtml
is used, it will have user
and page
variables available for use which will reference the the currentUser
object and the home
string literal.
The remove
tag does not have any attributes and is used to remove chunks of XML content from a Facelet at compilation time. The remove
tag is often used in conjunction with the jsfc
feature, see Section 3.1.2, “Using 'jsfc'”.
... <ui:remove> This will be removed. </ui:remove> ... <span jsfc="ui:remove"> This won't be compiled either <h:outputText value="#{foo.bar}"/> </span> ...
There are times in development when you need to quickly remove parts of the document just for testing purposes, or you would like to leave a 'template-model' in your document, but don't want it to be part of the final Facelet.
Table 5.10. Repeat Tag Attributes
Attribute | Required? | Description | Example |
---|---|---|---|
value | true | Expression for the List of items to iterate over | #{blog.currentEntries} |
var | true | The literal name of the variable to use while iterating | entry |
The repeat
tag should be used in almost all cases instead of the c:forEach
to iterate over content with JSF. The repeat
tag is often used in conjunction with the jsfc
feature, see Section 3.1.2, “Using 'jsfc'”.
... <dl> <ui:repeat value="#{company.departments}" var="dept"> <dt>#{dept.name}</dt> <ui:repeat value="#{dept.employees}" var="emp"> <dd>#{emp.lastName}, #{emp.firstName}</dd> </ui:repeat> </ui:repeat> </dl> ...
While this is a great step for JSF compositions, we can do better with the jsfc
attribute where the repeat
tag will provide some special behavior inclusive of the declared tag.
... <table> <tr jsfc="ui:repeat" value="#{dept.employees}" var="emp" class="#{emp.manager ? 'mngr' : 'peon'}"> <td>#{emp.lastName}</td><td>#{emp.firstName}</td> </tr> </table> ...
Under the JavaServer Faces specification, there are some preliminary steps that must be covered when building views. This section will cover that process and its lifecycle in relation to Facelets.
A request comes in to JavaServer Faces for a new view (or page). The FaceletViewHandler
simply creates a new UIViewRoot
for this new view.
Since this is a new view being requested, we immediately render our view. Before rendering, Facelets needs to populate the view with components. At this time, the FaceletFactory
is used to build a Facelet
that will act as build instructions for the desired view. The UIViewRoot
is applied to the Facelet
and the view is populated for rendering.
The UIViewRoot
(view) is then asked to render itself back to the response.
The user sees a completed web page and the state of the view is automatically stored for the next request. Note, all the inlined text and other transient components will not be stored, only 'crucial' component information such as input components and form data.
The user clicks a button, causing a second request to come back to JavaServer Faces. This time, the view is restored from the previously stored state. Keep in mind, the view at this point only has the 'crucial' components available from the previous request.
This restored view is passed through the JavaServer Faces lifecycle and eventually we will either generate a new view for another page, or re-render your current view if there were validation problems or no action was fired.
In the case of re-rendering the view, the partial view that was restored is now rendered again. Before it's rendered, the same Facelet
is used to re-populate the full view with inlined text and transient components.
The UIViewRoot
(view) is then asked to render itself back to the response.
Repeat this process until another (new) view is requested.
The first take-away from those steps is that the same Facelet
can be used multiple times with the same view. Basically, the process of building the view (a.k.a component tree) can go through many cycles of populating, rendering, trimming for state saving, then restored again-- repeat.
Facelets is founded on simple principles and the API is a solid reflection of it. The framework is focused on one specific task, and that's tree creation and content interweaving-- taking an XHTML or XML document and using it as instructions to populate a tree of UIComponents
. That's it.
The JavaServer Faces platform is extremely extensible on many levels and Facelets only provides one part of that equation. Different render kits, controllers, components, validators, converters, frameworks-- all usable with Facelets. That's the beauty of JavaServer Faces as a platform that Facelets only seeks to enhance.
The FaceletFactory
is an interface to the Facelet compiler while offering features such as caching and modification monitoring.
FaceletFactory factory = FaceletFactory.getInstance(); Facelet facelet = factory.getFacelet("/example.xml");
The Facelet
class is similar to a lot of the Servlet API, such that it's stateless and can handle multiple threads accessing it at once. The Facelet's soul responsibility is to populate a tree of UIComponents
for manipulation and, of course, rendering. A single instance is representative of physical XML resource, compiled into memory once and shared for all requests.
FacesContext faces = FacesContext.getCurrentInstance(); Facelet facelet = factory.getFacelet("/example.xml"); facelet.apply(faces, faces.getViewRoot());
After 'applying' this Facelet
to the UIViewRoot
, it will be fully populated according to your various XHTML or XML pages used with the Facelets framework.
Facelets
delegate tree creation logic to an internal tree of FaceletHandlers
constructed by the compiler. The action of passing UIComponents
through the tree of FaceletHandlers
causes the view to be populated in a UIComponent
tree, reflective of the logic included in the FaceletHandlers
.
The FaceletHandler
is a part of a parent Facelet
in a many to one association. FaceletHandlers
work off of the visitor pattern where state is passed to them for modification and tree creation, then possibly passed along to the next FaceletHandler
in the chain.
public class LoggingHandler implements FaceletHandler public void apply(FaceletContext ctx, UIComponent parent) throws IOException, FacesException, FaceletException, ELException { Logger.getLogger("example").info("Hello Logger"); } }
That example, while silly, shows the simple API that the FaceletHandler uses. If you would like to construct your own FaceletHandlers for use in UIComponent
tree creation, jump over to Section 7.2, “Custom TagHandlers”.
Facelets use stateless TagHandlers
to coordinate tree creation. TagHandlers
are not like JSP tags in that Facelets builds a static/stateless tree of TagHandlers
shared by all requests. For more information on how Facelets coordinates view creation, see Section 6.1, “View Creation”.
Foundation classes, such as those included in Section 7.3, “Meta Tags”, will take care of the knowing when to apply state and build up the component tree for a given request. If you are writing your own TagHandler
, you can use the ComponentSupport.isNew(UIComponent)
to determine if it's okay for you to modify the newly created UIComponent
.
public void apply(FaceletContext ctx, UIComponent parent) { if (ComponentSupport.isNew(parent)) { // okay to apply new state information to component } }
For JSTL-like functionality, it's up to you if you want to use the ComponentSupport.isNew(UIComponent)
method to determine behavior. But again, if you use the foundation handlers in Section 7.3, “Meta Tags”, these checks will be take care of for you.
Facelets are composed of many different kinds of TagHandler
instances. Just like a Facelet
, all of the TagHandlers
are stateless for offering a higher degree of performance. This section goes over customizing your tag library with your own tags, beyond what the default features of Facelets can offer you within the tag library XML configs.
Facelets allows you to write stateless tags that can be used in dictating component tree creation. This includes JSTL-like functionality that may be tied to business logic. Including your custom tag into your library requires using the handler-class
element.
<tag> <tag-name>if</tag-name> <handler-class>com.mycompany.IfHandler</handler-class> </tag>
All tags in a Facelets extend com.sun.facelets.tag.TagHandler
which provides some base functionality for tying XML data to your Java code. Here is an example of JSTL's <c:if/>
tag:
public final class IfHandler extends TagHandler { // possible attributes private final TagAttribute test; private final TagAttribute var; /** * @param config */ public IfHandler(TagConfig config) { super(config); // helper method for getting a required attribute this.test = this.getRequiredAttribute("test"); // helper method this.var = this.getAttribute("var"); } /** * Threadsafe Method for controlling evaluation of * its child tags, represented by "nextHandler" */ public void apply(FaceletContext ctx, UIComponent parent) throws IOException, FacesException, ELException { boolean b = this.test.getBoolean(ctx); if (this.var != null) { ctx.setAttribute(var.getValue(ctx), new Boolean(b)); } if (b) { this.nextHandler.apply(ctx, parent); } } }
Now if that isn't easy, I don't know what is. Facelets uses the concept of a TagAttribute
which encapsulates EL operations for you and also produces informative exceptions if an error did occur. Another really great example is catching exceptions with JSTL's CatchHandler
:
public final class CatchHandler extends TagHandler { private final TagAttribute var; public CatchHandler(TagConfig config) { super(config); this.var = this.getAttribute("var"); } public void apply(FaceletContext ctx, UIComponent parent) throws IOException, FacesException, FaceletException, ELException { try { this.nextHandler.apply(ctx, parent); } catch (Exception e) { if (this.var != null) { ctx.setAttribute(this.var.getValue(ctx), e); } } } }
Isn't that awesome? The TagHandler
provides some member variables, much like a JSP tag, to help you:
Table 7.1. TagHandler Member Variables
Variable Name | Class Type | Description |
---|---|---|
tagId | java.lang.String | A unique id, assigned at compilation time for this stateless element. This can be used in combination with the FaceletContext.generateUniqueId(String) to generate consistently unique ids for a given page evaluation. |
tag | com.sun.facelets.tag.Tag | A Tag instance which is Facelet's representation of the element declared in a page. The Tag includes namespace/name information, along with accessors to the TagAttributes specified on the element declared in the page. |
nextHandler | com.sun.facelets.FaceletHandler | A generic interface representing zero or more child tags and their associated handlers. Since Facelets uses stateless TagHandlers , the parent handler can evaluate the nextHandler any number of times or not at all to dictate component tree creation. |
For more information on the inner workings of Facelets, please hop over to Chapter 6, Facelets Architecture.
The Facelets API understands that developers will run into cases where they need 'special' logic for setting attributes. The API provides a few foundation TagHandlers
that you can extend to handle unique cases. These foundation classes take care of the dirty work of tree creation in JavaServer Faces.
com.sun.facelets.tag.MetaTagHandler
acts as the foundation for auto-wiring abilities in Facelets. The MetaTagHandler
uses a few objects: MetaRuleset
, MetaRule
, and Metadata
to coordinate auto-wiring. The following sub sections provide examples of this coordination to customize specialized components.
The MetaTagHandler
provides a couple methods for extension: setAttributes(FaceletContext,Object)
and createMetaRuleset(Class)
. The method setAttributes(FaceletContext,Object)
will be invoked for you by the classes described below which will take care of wiring all attributes according to the MetaRuleset
created by createMetaRuleset(Class)
.
Anytime you do provide custom tags (handlers), you would use the handler-class
element in your tag
just as described in Section 3.5.6, “Custom Tags”.
Component wiring can be customized by extending the com.sun.facelets.tag.jsf.ComponentHandler
class.
public class HtmlComponentHandler extends ComponentHandler { /** * @param config */ public HtmlComponentHandler(ComponentConfig config) { super(config); } protected MetaRuleset createMetaRuleset(Class type) { return super.createMetaRuleset(type).alias("class", "styleClass"); } }
In this example, we override the createMetaRuleset(Class)
to alias wiring class
attributes to the styleClass
JavaBean property. To add your custom component to your tag library, do the following:
... <tag> <tag-name>custom</tag-name> <component> <component-type>com.company.Component</component-type> <renderer-type>com.company.OptionalRenderer</renderer-type> <handler-class>com.company.HtmlComponentHandler</handler-class> </component> </tag> ...
In the previous example, Facelets will automatically wire UIComponent
JavaBean properties and expressions to a given instance. The bonus is that MetaTagHandler
will set attributes on any instance of Object
. This opens the doors for working with things like Validators
by extending com.sun.facelets.tag.jsf.ValidateHandler
:
public final class ValidateDelegateHandler extends ValidateHandler { private final TagAttribute validatorId; public ValidateDelegateHandler(TagConfig config) { super(config); this.validatorId = this.getRequiredAttribute("validatorId"); } /** * Uses the specified "validatorId" to get a new Validator instance from the * Application. * * @see javax.faces.application.Application#createValidator(java.lang.String) * @see com.sun.facelets.tag.jsf.ValidateHandler#createValidator(com.sun.facelets.FaceletContext) */ protected Validator createValidator(FaceletContext ctx) { return ctx.getFacesContext().getApplication().createValidator( this.validatorId.getValue(ctx)); } protected MetaRuleset createMetaRuleset(Class type) { return super.createMetaRuleset(type).ignoreAll(); } }
In the above example, we've decided to do all of the attribute mapping ourselves, so we tell the MetaRuleset
to ignoreAll()
.
Continuing on the capabilities in customizing Validators
within Facelets, you may do the same with Converters
by extending com.sun.facelets.tag.jsf.ConvertHandler
.
public final class ConvertNumberHandler extends ConvertHandler { private final TagAttribute locale; public ConvertNumberHandler(TagConfig config) { super(config); this.locale = this.getAttribute("locale"); } /** * Returns a new NumberConverter * * @see NumberConverter * @see com.sun.facelets.tag.jsf.ConverterHandler#createConverter(com.sun.facelets.FaceletContext) */ protected Converter createConverter(FaceletContext ctx) throws FacesException, ELException, FaceletException { return ctx.getFacesContext().getApplication().createConverter(NumberConverter.CONVERTER_ID); } /* (non-Javadoc) * @see com.sun.facelets.tag.ObjectHandler#setAttributes(com.sun.facelets.FaceletContext, java.lang.Object) */ protected void setAttributes(FaceletContext ctx, Object obj) { super.setAttributes(ctx, obj); NumberConverter c = (NumberConverter) obj; if (this.locale != null) { c.setLocale(ComponentSupport.getLocale(ctx, this.locale)); } } protected MetaRuleset createMetaRuleset(Class type) { return super.createMetaRuleset(type).ignore("locale"); } }
This is probably the best example of customization so far. The ConvertHandler
allows you to override the method createConverter(FaceletContext)
to return any Converter
instance. Also, the setAttributes(FaceletContext,Object)
was overridden to do special wiring for the Locale
on the NumberConverter
.
The NumberConverter
has many properties, but we only wanted to make a special case for locale
, so we only tell the MetaRuleset
to ignore that one attribute because we will take care of it ourselves.
Facelets comes with a ViewHandler
that you may extend. Some extension points include initializing the compiler and setting up alternate response writers for JavaServer Faces to use.
To learn more, look at the Facelets JavaDocs for the com.sun.facelets.FaceletViewHandler
.
The compiler within Facelets allows you to specify multiple TagDecorator
instances. These implementations can do things like transforming all HTML elements to their JSF equivalents automatically.
To add your custom TagDecorator
to your Facelets project, you may extend the FaceletViewHandler
and override the compiler initialization methods to add your TagDecorator
to the passed Compiler
instance.
Facelets uses new features in 1.6.5, such as macros.