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..

spacer.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:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite">
<pre><composite:interface>
<composite:attribute name="width" default="0" type="java.lang.Integer"/>
<composite:attribute name="height" default="0" type="java.lang.Integer"/>
</composite:interface>
<composite:implementation>

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

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

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

1

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

xmlns:arbcustom="http://java.sun.com/jsf/composite/custom"

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

Comments are closed.