HTML and CSS Reference
In-Depth Information
<projsfhtml5:option value="#00ff00" label="Green"/>
<projsfhtml5:option value="#0000ff" label="Blue"/>
</projsfhtml5:dataList>
<h:commandButton value="Submit" />
<h:outputText id="selected-color" value="Color is: #{componentInputColor.color}" />
</h:form>
</h:body>
</html>
With the
clientBehavior
in the interface for the
inputColor
component, you can nest it with a
<f:ajax />
tag
where you listen for the broadcasted events.
Fallback for Unsupported Browsers
If you've tried the example in the previous chapter in a browser that does not support the HTML5 color input, you will
see a text field on the screen, as shown in Figure
7-3
, instead of a color picker.
Figure 7-3.
Color input rendered on a browser that does not support it
Supporting fallbacks require that it is possible to detect if the browser supports the given feature. If it does not
support the feature provided by the custom component, an alternative display should be provided.
In the fallback example Listing 7-12, we first check if the browser supports the color input. If color input is not
supported we provide a fallback using the jscolor library (freely available at
www.jscolor.com
)
, as shown in Figure
7-4
.
Listing 7-12.
Supports Fallback to a JavaScript Color Picker
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="
http://www.w3.org/1999/xhtml
"
xmlns:cc="
http://xmlns.jcp.org/jsf/composite
"
xmlns:jsf="
http://xmlns.jcp.org/jsf
"
xmlns:h="
http://xmlns.jcp.org/jsf/html
"
>
<!-- INTERFACE -->
<cc:interface>
<cc:attribute name="value" type="java.lang.String" default="#000000" />
<cc:attribute name="list" type="java.lang.String" default="" />
<cc:clientBehavior name="change" targets="#{cc.id}" event="change" />
</cc:interface>
