February 27, 2021
Hot Topics:

JSF 2.0: Creating Composite Components

  • By Sangeetha S, Nitin KL, Ananya S
  • Send Email »
  • More Articles »

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:

  1. Create a component class that extends UIInput or UIOutput or any subclass of UIComponent that most appropriately fits the requirement.
  2. Create a Renderer class that can generate the appropriate markup.
  3. Register the component and the renderer in faces-config.xml.
  4. Create a JSP tag implementation to use the component in the JSP page.
  5. 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:

  1. Create a resource library.
  2. Create a Facelets markup file in the resource library.
  3. 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.

Resources Feature

A resource in web terms means anything that contains or can render information to the user. Apart from the usual web pages, resources can be images, style sheets, or even JavaScript files. Previous releases of JSF had no particular facility to specify resources, and web page authors followed their own mechanisms for specifying all these resources. JSF 2.0 provides a new feature for resource handling, which greatly simplifies how developers create custom components.

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:

  1. Resources in the web application root:
    • resources/<resourceIdentifer> – A folder named resources that contains all the resources is created in the root folder.
  2. Resources in the classpath:
    • META-INF/resources/<resourceIdentifer> – Resources that are packaged in the classpath must be placed under the META-INF folder 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:

  1. loginHand.gif – Only resourceName
  2. login/loginHand.giflibraryName/resourceName
  3. login/1_2/loginHand.giflibraryName/libraryVersion/resourceName

An important benefit of this feature is it provides an option for resources to be localized, versioned, and collected into libraries. All the resources, including images, style sheets, and JavaScript files, can be packaged using the same packaging mechanism.

Page 1 of 2

This article was originally published on March 8, 2010

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date