HTML and CSS Reference
In-Depth Information
Supporting Lists
Many of the new HTML5 input elements support the use of lists. The purpose of lists is to limit the user choices in a
given control. In this section we will create a generic component that can be reused by any input element supporting
the list attribute.
The implementation needs two composite components: one that represents the
<datalist>
element and one
that represents the nested
<option>
elements.
Listing 7-5.
Composite Component Representing the Nested <option> Tags (resources/projsfhtml5/option.xhtml)
<?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
">
<cc:interface>
<cc:attribute name="value" type="java.lang.String" default="" />
<cc:attribute name="label" type="java.lang.String" default="" />
</cc:interface>
<cc:implementation>
<option value="#{cc.attrs.value}" label="#{cc.attrs.label}" />
</cc:implementation>
</html>
The option composite component defines two attributes in its interface: one attribute for the
label
and one
attribute for the
value
. The purpose of
label
is to provide a user-friendly representation of the value and the
value
is
the machine-friendly value used in the behind the scenes.
Listing 7-6.
Composite Component Representing the Outer Datalist That the Color Input Will Reference for Options
(resources/projsfhtml5/datalist.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/
<html xmlns="
http://www.w3.org/1999/xhtml
"
xmlns:cc="
http://xmlns.jcp.org/jsf/composite
">
<cc:interface>
</cc:interface>
<cc:implementation>
<datalist id="#{cc.id}">
<cc:insertChildren />
</datalist>
</cc:implementation>
</html>
The interesting thing to note about the datalist component is that it uses the ID of the composite component as
its own ID. That means that input components can refer to the datalist using the ID of the datalist without thinking
about namespaces. Another thing to note is that it inserts everything that is nested inside the composite component
inside the datalist element.
