Composite Spacer Component for RichFaces 4

I have been working with richfaces 3.X.X and recently did a migration to richfaces 4.X.X. Many changes had to be done. Many tags got renamed, many properties suffered similar fate and some tags were retired.

<rich:spacer> was one among the many tags not supported in RF4. So, I though I would make a composite component to rectify the gap.

Well it’s a simple component which takes in two properties.

  1. Height
  2. Width

The component uses an image, a white plain image with the user defined height and width to build the spacer.

Well, basics in 5 seconds. A composite component has two parts.

  1. Interface – This denotes the component properties.
  2. Implementation – This denotes what the component does with the properties

So, our custom spacer component takes in the width and height as properties.

Without much adieu, here’s the code..


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""
	<composite:attribute name="width" default="0" type="java.lang.Integer"/>
	<composite:attribute name="height" default="0" type="java.lang.Integer"/>

	<h:panelGroup rendered="#{cc.attrs.height > 0}">

	<h:graphicImage library="images" name="spacer.png" width="#{cc.attrs.width}px" height="#{cc.attrs.height}px" />

As we discussed, the height and width parameters are used as properties. Also, an image is used.

This is placed in a folder images withing the resources folder. We use the resources concept of JSF 2.0


The composite component is under the folder custom. So we have to add a namespace to access it.


Once the namespace is registered, the component can be used.

<custom:spacer height="5" width="100" ></arbcustom:spacer>

The component name will be same as that of the xhtml file.

One thought on “Composite Spacer Component for RichFaces 4

  1. Pingback: Richfaces migration diaries | Super Compiler

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s