JSF 2.0: Creating Composite Components
The new release of JavaServer Faces, JSF 2.0, is a major release for the specification. This newest version of the Java component UI framework for building dynamic web pages, which will be part of the Java Enterprise Edition 6 platform, has several interesting new features that make development and deployment of JSF applications simple and easy.
At the highest level, JSF technology provides an API for creating, managing, and handling UI components and a tag library for using components within a web page. The JSF 2.0 release simplifies the web developer's life by providing the following:
- Reusable UI components for easy authoring of web pages
- Well defined and simple transfer of application data to and from the UI
- Easy state management across server requests
- Simplified event handling model
- Easy creation of custom UI components
A particularly interesting new feature introduced in JSF 2.0 is customized UI components called composite components. A UI component is a reusable piece of a user interface created for specific functionality with a pre-defined set of validators, converters, and listeners. A composite component can be used as a single component in the view.
With JSF 1.x releases, the creation of custom UI components is a complex activity requiring the developer to work extensively with Java code and XML configuration files. JSF 2.0 introduces the notion of composite components with the goal of enabling developers to create really simple, reusable JSF UI components without touching any Java code or XML configuration files.
In this article, we explore the new composite components feature in JSF 2.0 with some code samples and a simple demo application. You will learn how to create a composite component of your own.
Composite UI Components
The creation of custom components in JSF 2.0 has been simplified with two new features, Facelets and Resources (more on these in the next section). A composite component is a Facelet that resides in a resource library. For a better understanding, let's review the sequence of steps that you would follow to create custom components in JSF 1.x releases:
- Create a component class that extends UIInput or UIOutput or any subclass of UIComponent that most appropriately fits the requirement.
- Create a Renderer class that can generate the appropriate markup.
- Register the component and the renderer in
- Create a JSP tag implementation to use the component in the JSP page.
- Create a Tag Library Descriptor (
.tld) to use the JSP tag.
Compare that with the sequence of steps for creating a composite component in JSF 2.0:
- Create a resource library.
- Create a Facelets markup file in the resource library.
- Use a composite component in a Facelets page:
- Use the following namespace: http://java.sun.com/jsf/composite/resLib, where resLib is the name of the resource library.
- Refer to the component as
pre:comp, where pre is the prefix that identifies the above namespace and comp is the name of the Facelets file in the resource library.
The new resources feature is achieved through a packaging mechanism. Resources are generally packaged in the web application root or in the classpath. The default implementation looks for resources in the following locations:
- Resources in the web application root:
resources/<resourceIdentifer> A folder named
resourcesthat contains all the resources is created in the root folder.
- Resources in the classpath:
META-INF/resources/<resourceIdentifer> Resources that are packaged in the classpath must be placed under the
META-INFfolder in the JAR file.
The resource identifier specified in both the above options has several parts as defined below, where the parts mentioned inside the brackets (
[...]) are optional:
[localePrefix/] [libraryName/][libraryVersion/] resourceName [/resourceVersion]
Here are a few example resource identifiers: