Saturday Jun 09



User Menu


AddThis Social Bookmark Button

JSF 2.0 Tag Library

PDF Print E-mail
Tuesday, 17 May 2011 17:32
AddThis Social Bookmark Button

Create a composite tag library

The design of JSF 2.0 is influenced by the philosophy of convention over configuration, popularized by Ruby on Rails. To realize composite components, this philosophy is combined with the resource loading feature, described in Ryan Lubke’s blog JSF 2.0 New Feature Preview Series (Part 2.1): Resources.

The namespace short-name that prefixes a composite component tag, ubiteck :, has an entry in the element, that is, xmlns:ubiteck=" ubiteck ". The content after in this case, ubiteck , is the library-name. The library-name and resource-name are used to create a Resource instance.

JSF 2.0 has a method that creates a UIComponent from a Resource. Due to these conventions, any .xhtml file in a resource library can be accessed as a composite component.

There are several ways to create a resource library. Here is one way to do it.

In your webapp directory, you should have a directory named resources . In this directory is a sub-directory named ubiteck . The name of the subdirectory (in this case, ubiteck ) must correspond to the end part of the composite xmlns for the namespace short-name that prefixes the composite component tag.

Convention Value
Namespace for composite A Composite namespace should start with <Name of your library>
Property access

A property defined in the interface section should be accessed using
#{cc.attrs. <name of your property> }

Structure content under
these resources directories

items in [] are optional

associate a resource with a particular locale identifiter

If a developer wishes to
leverage this feature, they must add a key/value pair like:

  • javax.faces.resource.localePrefix=<localePrefix>

The default implementation will look for resources in two locations and in the following order:

  1. /resources this location represents resources in the webapp itself and if present, must be in the root of the web application
  2. /META-INF/resources this location represents resources on the classpath

HTML Spacer composite component example

Let's imagine we want to create a spacer component. We will create a file called spacer.xhtml in the folder . ./webapp/resources/ubiteck/

The spacer take support a width parameter to define  the length of the spacer. The default value if omiited is 10 pixels.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<html xmlns=""

    <title>Spacer Ubiteck component</title>
      Usage  :  
        <md:spacer width="50"/>
            <composite:attribute name="width" defaut="10" />
                width="#{cc.attrs.width}" height="1" />

The graphic image is tag is more described at Tag Graphic Image  (JSF 2.0)

The component will be reachable defining the namespace for ubiteck and calling <ubiteck:spacer width="100"/> and passing the width parameter

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""
    <title>Spacer Composite Components Test</title>
    Before spacer <ubiteck:spacer width="100"/> After Spacer        
<meta charset="utf-8" />

Migrate tag library from 1.x to 2.x

Find below a small table with correponding tags or expressions between JSF 1.x and JSF 2.x

Tags JSF 1.x JSF 2.x
A property attribute myParam cc.attrs.myParam

Any child components or template text within the composite component
tag in the using page will be reparented into the composite component



method param N/A
name="<param name>"
method-signature="java.lang.String action()"/>
Bean + method
JSTL Choose


<c:when test="<condition>">



JSTL If conditional

<c:if test="<condition>">

<f:verbatim rendered="<condition>">

Tags: html , http , create , xmlns , composite , resource , component , namespace , library , ubiteck , spacer

Add comment

Security code