HTML and CSS Reference
In-Depth Information
<section>
<label for="with-list">Date (with list of dates): </label>
<input id="with-list" type="date" value="" list="available-dates" />
</section>
<datalist id="available-dates">
<option value="2013-01-01" label="1st Option" />
<option value="2013-03-10" label="2nd Option" />
<option value="2013-06-19" label="3rd Option" />
<option value="2013-10-10" label="4th Option" />
</datalist>
</section>
Creating the Composite Component
Based on the HTML5 examples in Listing 7-13, we can reuse our implementation of the
datalist
and
option
components from the color input component. Note that the value for the date input in HTML5 is a string formatted as
year-month-day (e.g. 2013-04-20). To avoid unnecessary data conversion we will use a date/time converter so that the
value
of the component can be set as a
java.util.Date
.
Listing 7-14 shows a basic implementation supporting the attributes specified in HTML5. The value of the
component is a
java.util.Date
and automatically converted using the
<f:convertDateTime />
converter nested
inside the input element. The
required
and
readonly
attribute have JSF equivalents, so they are mapped directly to
JSF by prefixing the attributes with
jsf
(i.e.,
jsf:readonly="#{cc.attrs.readonly}"
). You have probably noticed
that that min and max attributes are not mapped directly from the interface to the implementation. It is not possible
to apply converters to attribute values. That means that we cannot simply assign the
java.util.Date
value from
the
min
attribute in the interface to the
min
attribute in the implementation. If we mapped the attributes directly the
value in the
min
attribute in the implementation would be rendered as the “
toString()
” representation of the
java.
util.Date
value which is of the form: day of week + month name + day of month + hour : minute : second + time
zone + year, e.g., Sat Jun 15 11:24:21 CET 2013. This format is not aligned with the format specified by HTML5 (i.e.,
year-month-day). Since we cannot apply a converter on attribute values, we must implement a backing bean for the
component that takes care of the data conversation.
Listing 7-14.
Composite Component for the inputDate Component (resources/projsfhtml5/inputDate.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
"
xmlns:jsf="
http://xmlns.jcp.org/jsf
"
xmlns:h="
http://xmlns.jcp.org/jsf/html
"
xmlns:f="
http://xmlns.jcp.org/jsf/core
"
>
<cc:interface>
<cc:attribute name="value" type="java.util.Date" required="true" />
<cc:attribute name="list" type="java.lang.String" default="" />
<cc:attribute name="step" type="java.lang.String" default="1" />
<cc:attribute name="min" type="java.util.Date" />
<cc:attribute name="max" type="java.util.Date" />
<cc:attribute name="readonly" type="java.lang.String" default="false" />
