HTML and CSS Reference
In-Depth Information
Listing 7-7. Using the Datalist and Option Composite Components. Options Are Nested Inside the Datalist
<projsfhtml5:dataList id="available-colors">
<projsfhtml5:option value="#ff0000" label="Red"/>
<projsfhtml5:option value="#00ff00" label="Green"/>
<projsfhtml5:option value="#0000ff" label="Blue"/>
</projsfhtml5:dataList>
Listing 7-8. HTML Output from the Composite Components in Listing 7-7
<datalist id="available-colors">
<option value="#ff0000" label="Red"></option>
<option value="#00ff00" label="Green"></option>
<option value="#0000ff" label="Blue"></option>
</datalist>
The only thing remaining is to support the lists in the inputColor component. This is done by introducing a new
attribute in the interface, called list and reference the attribute in the implementation of the color element.
Listing 7-9. Implement Support for Lists in the inputColor Component (resources/projsfhtml5/inputColor.xhtml)
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
<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"
event="change"
targets="#{cc.id}" />
</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>
Ajax-enabling the Component
JSF 2 introduced native Ajax requests with the <f:ajax/> tag. You can use the Ajax tag in your composite components
by announcing which event you want to broadcast and where the event is coming from inside the composite
component. The announcement is done in the interface of the composite component using the clientBehavior tag.
 
Search WWH ::




Custom Search