Basic JSF2 HTML5 Components - JSF and HTML5 - page 168

<h:body>
<h1>Input Color Custom Component</h1>
<h:form id="frm">
<projsfhtml5:inputColor id="ic-favcolor" value="#{componentInputColor.color}" />
<h:commandButton value="Submit" />
<h:outputText id="selected-color" value="Color is: #{componentInputColor.color}" />
</h:form>
</h:body>
</html>
The composite component is referencing a plain String property on the managed bean in Listing 7-4 called
ComponentInputColor#color . When clicking the submit button the selected color is stored in the property for
processing as shown in Figure 7-2 .
Listing 7-4. ComponentInputColor.java Representing the Backing Bean Where the Selected Color Is Stored
package projsfandhtml5.chapter7;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
@ManagedBean
@ViewScoped
public class ComponentInputColor {
private String color = "";
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
}
Figure 7-2. The color input composite component in action. The user selects a color by clicking the color control and
then clicks Submit. The code of the selected color is displayed next to the Submit button