HTML and CSS Reference
In-Depth Information
Listing 7-10.
Broadcast an Event for Ajax Processing When the Value of the Color Input Changes
<?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
"
>
<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>
<cc:implementation>
<div id="#{cc.clientId}">
<input jsf:id="#{cc.id}" name="#{cc.id}" jsf:value="#{cc.attrs.value}" type="color"
list="#{cc.attrs.list}"/>
</div>
</cc:implementation>
</html>
clientBehavior
takes three attributes:
name
, containing the name of the event that can be listened for outside of
the component;
targets
, containing a list of the components that are being monitored; and
event
, the name of the
JavaScript event (without the
on
-bit, e.g., the
onchange
event should be
change
) to be caught and forwarded to anyone
listening for that type of event.
Listing 7-11.
Listening for the
change
Event and Executing and Rendering the Component and the Output Text
<?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:h="
http://xmlns.jcp.org/jsf/html
"
xmlns:jsf="
http://xmlns.jcp.org/jsf
"
xmlns:projsfhtml5="
http://xmlns.jcp.org/jsf/composite/projsfhtml5
"
xmlns:f="
http://xmlns.jcp.org/jsf/core
"
>
<h:head>
<title>Input Color Custom Component with DataList and Ajax support</title>
</h:head>
<h:body>
<h1>Input Color Custom Component with DataList and Ajax support</h1>
<h:form id="frm">
<projsfhtml5:inputColor id="ic-favcolor" value="#{componentInputColor.color}"
list="available-colors">
<f:ajax event="change" render=":frm:selected-color" execute="@this " />
</projsfhtml5:inputColor>
<projsfhtml5:dataList id="available-colors">
<projsfhtml5:option value="#ff0000" label="Red"/>
