HTML and CSS Reference
In-Depth Information
<section>
<label for="with-list">Number (with List): </label>
<projsfhtml5:inputNumber value="#{componentInputNumber.number2}" min="-100" max="10"
list="number-options">
<f:ajax event="change" execute="@this" render=":frm:selectedValue2" />
</projsfhtml5:inputNumber>
<h:outputText id="selectedValue2" value="Selected value: #{componentInputNumber.number2}"/>
<projsfhtml5:dataList id="number-options">
<projsfhtml5:option value="-100" />
<projsfhtml5:option value="-75" />
<projsfhtml5:option value="-50" />
<projsfhtml5:option value="-25" />
<projsfhtml5:option value="0" />
<projsfhtml5:option value="10" />
</projsfhtml5:dataList>
</section>
<h:commandButton value="Submit" />
Figure 7-9.
Native HTML5 support
Figure 7-10.
Fallback to JQueryUI slider
Summary
In this chapter, we have looked at turning some of the new HTML5 input types into JSF composite components.
Throughout the chapter we looked at implementing basic composite components, nested components, and
Ajax-enabled components. Composite components hide away unnecessary logic for the page authors. We looked
at how to detect whether the browser supports the input elements we are outputting and if not, provide an
alternative view. Without composite components you would probably have to write additional JavaScript on each
page to check for compatibility. With composite components all the logic is contained in one place and it is easy
to make a single change that cascades through all the pages using the composite component.
