In this recipe, we will develop and use a custom converter in RichFaces. This will convert an RGB color, extracted from a colorPicker, into an integer similar to the result of the java.awt.Color.getRGB method and vice versa. The result is rendered with an outputText component.
Notice that an RGB color from a colorPicker is a String formatted as rgb(red, green, blue).
We developed this recipe with NetBeans 6.8, JSF 2.0, and GlassFish v3. The JSF 2.0 classes were obtained from the NetBeans JSF 2.0 bundled library. In addition, we have used RichFaces 3.3.3.BETA1, which provides support for JSF 2.0. You can download this distribution from http://www.jboss.org/richfaces. The RichFaces libraries (including necessary dependencies) are in the book code bundle, under the |JSF_libs|RichFaces - JSF 2.0 folder.
A RichFaces custom converter follows the same principles as a JSF custom converter. We can implement the Converter interface or extend an existing converter class. For example, in this case we will implement the Converter interface and we will implement the getAsString and getAsObject methods. As the code is self-explanatory there is no need for more details:
package colorpicker;
import java.awt.Color;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import java.util.StringTokenizer;
public class RGBConverter implements Converter {
public static final String CONVERTER_ID = "rgbConverter";
public Object getAsObject(FacesContext context, UIComponent component, String value) {
if (context == null) {
throw new NullPointerException("context");
}
if (component == null) {
throw new NullPointerException("component");
}
String getRGBfromString = value.substring(4, value.length() - 1);
StringTokenizer rgbComponents = new StringTokenizer(getRGBfromString,",");
int r = Integer.valueOf(rgbComponents.nextToken().trim());
int g = Integer.valueOf(rgbComponents.nextToken().trim());
int b = Integer.valueOf(rgbComponents.nextToken().trim());
Color rgbColor = new Color(r, g, b);
int rgbValue = rgbColor.getRGB();
Integer rgbValueInt = new Integer(rgbValue);
return rgbValueInt;
}
public String getAsString(FacesContext context, UIComponent component, Object value) {
if (context == null) {
throw new NullPointerException("context");
}
if (component == null) {
throw new NullPointerException("component");
}
Color rgbColor = new Color((Integer) value);
String stringRGB = "rgb(" + rgbColor.getRed() + ","
+ rgbColor.getGreen() + "," + rgbColor.getBlue() + ")";
return stringRGB;
}
}
Calling this converter is a simple task that we have accomplished as shown next:
<a4j:form>
<h:outputText value="The integer version of the
selected color:"/>
<h:outputText id="RGBvalue" value="#{colorPickerBean.color}"/>
<rich:panel header="RichFaces Color Picker" style="width: 315px">
<rich:colorPicker value="#{colorPickerBean.color}"
colorMode="rgb" converter="rgbConverter">
<a4j:support event="onchange" reRender="RGBvalue"/>
</rich:colorPicker>
</rich:panel>
</a4j:form>
The ColorPickerBean can be written in the following way:
package colorpicker;
public class ColorPickerBean {
private Integer color;
/**
* @return ColorPickerBean color
*/
public Integer getColor() {
return color;
}
/**
* @param ColorPickerBean color
*/
public void setColor(Integer color) {
this.color = color;
}
}