HTML and CSS Reference
In-Depth Information
Listing 7-23. Examples of Using HTML5 Number Input
<label for="without-value">Number (without value): </label>
<input id="withouth-value" type="number" />
<label for="min-to-max">Number (-10 to 10): </label>
<input id="min-to-max" type="number" min="-10" max="10" value="0" />
<label for="preselect-list">Range (list): </label>
<input id="preselect-list" type="number" value="0" list="list" />
<datalist id="list">
<option value="-100" />
<option value="-75" />
<option value="-50" />
<option value="-25" />
<option value="0" />
Creating the Composite Component
The implementation of the number component is like the range component. The relevant attributes are added to the
interface along with broadcasting the JavaScript change event. The implementation contains the JavaScript libraries
used for fallback in case the browser doesn't support the HTML5 input number control. It also includes inline
JavaScript checking if the input number control is supported and if not uses JQuery and JQuery UI to turn the input
field into a spinner control. An event was also hooked up to fire a change event whenever the spinner control is used
to ensure that the Ajax call gets broadcast.
Listing 7-24. Composite Component for inputNumber (resources/projsfhtml5/inputNumber.xhtml)
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
xhtml1-transitional.dtd " >
<html xmlns=" "
xmlns:cc=" "
xmlns:jsf=" "
xmlns:h=" "
xmlns:f=" " >
<cc:attribute name="value" type="java.lang.String" />
<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.lang.String" />
<cc:attribute name="max" type="java.lang.String" />
Search WWH ::

Custom Search