One of the components in the ADF Faces library you may not make use of on a daily base is the . In this article, I will give you an example of how to apply this component – as it is slightly more complex than you may expect at first glance (or at least than I expected at first).
This extremely simple sample demonstrates what the ColorChooser allows you to do: the end user can select a color from a color palette (and you can specify what color palette to present, which colors are available for selection) and the selected color can be applied to a backing bean and used in any way you see fit. In this example, we use the color to update the Background Color for the heading as well as the Panelbox. Let’s take a look at the code behind it:
The source for our SampleColorChooser.jspx:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:afh="http://xmlns.oracle.com/adf/faces/html"
xmlns:af="http://xmlns.oracle.com/adf/faces">
<jsp:output omit-xml-declaration="true" doctype-root-element="HTML"
doctype-system="http://www.w3.org/TR/html4/loose.dtd"
doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Sample ADF Faces ColorChooser</title>
</head>
<body><h:form>
<af:outputLabel value="Here is a demonstration of the ADF Faces Color Chooser"
inlineStyle="font-size:larger;#{ColorCache.style};font-family:Arial;"/>
<af:objectSpacer height="25"/>
<af:panelBox inlineStyle="#{ColorCache.style}">
<af:outputLabel value="Choose the color of your dreams:"/>
<af:selectInputColor id="sic1" value="#{ColorCache.awtColor}"
compact="true" chooseId="cc2"/>
<af:chooseColor id="cc2"/>
<af:commandButton text="Apply New Color"/>
</af:panelBox>
</h:form></body>
</html>
</f:view>
</jsp:root>
It is quite straightfoward. The ChooseColor component (id=cc2) is included somewhere in the page. It displays a palette that the user can choose from. However, it does not have a value attribute: if you do nothing else but embed the ChooseColor in your page, the selected color goes nowhere.
The companion component for the ColorChooser is a SelectInputColor component. This component is used to receive a selected color from a ColorChooser. The link between the two is established through the chooseId attribute on the selectInputColor component: the value of this attribute should refer to (be equal to) the id of a ChooseColor component.
The value attribute of the SelectInputColor component is bound in an EL Expression (#{ColorCache.awtColor}) to a managed bean property. The name of the property reveals a little about the mechanics; the value held in the selectInputColor is a java.awt.Color and hence the property it gets bound to should also be of that type. Note: using a convertColor converter, we should be able to bind the value attribute to for example a String that contains a #RRGGBB pattern. However, I could not get this converter to work.
The managed bean ColorCache has two external properties: awtColor, set by the SelectInputColor, and style, derived from the awtColor inside the ColorCache bean:
package nl.amis.jsf.beans;
import java.awt.Color;
import oracle.adfinternal.view.faces.share.text.RGBColorFormat;
public class ColorCache {
Color awtColor;
String rgbColor;
String style;
public ColorCache() {
}
public void setAwtColor(Color awtColor) {
this.awtColor = awtColor;
rgbColor= new RGBColorFormat("r,g,b").format(awtColor);
}
public Color getAwtColor() {
return awtColor;
}
public void setStyle(String style) {
this.style = style;
}
public String getStyle() {
return "background-color:rgb("+rgbColor+");";
}
}
Note that when the awtColor property is set, the internal rgbColor is set with the r,g,b pattern of the selected awtColor.
In the JSF page, we have to components referring to the style property on the ColorCache bean: the inlineStyle attribute on the panelBox is defined as #{ColorCache.style}. That means that the background color of the panelbox is set to whatever color we select in the SelectInputColor component. The inlineStyle of the outputLabel on top is slightly more interesting: "font-size:larger;#{ColorCache.style};font-family:Arial;". It picks the background color from the ColorCache bean and adds its own font-size and font-family.
Choosing another color and pressing the Apply Color button will redisplay the page with fresh colors:
Resources
OTN Documentation on ChooseColor component and the ConvertColor component
Frank Nimphius: ADF Faces: How-to set the field background color with css
Hello,
Please, i have a colorPalette.web216, but it isn´t ordered by color, and i need organize it. how can i do it?
sorry for my english, i didn´t practice for a long time
thanks.
perico.terrades@gmail.com
Please send the code for this example.
Thanks,
Cynthia