HTML and CSS Reference
In-Depth Information
<cc:attribute name="readonly" type="java.lang.String" default="false" />
<cc:attribute name="required" type="java.lang.String" default="false" />
<cc:clientBehavior name="change" targets="number" event="change" />
</cc:interface>
<cc:implementation>
<h:outputStylesheet library="css" name="jquery-ui.css" />
<h:outputScript target="head" library="js" name="modernizr.js" />
<h:outputScript target="head" library="js" name="jquery-1.9.1.js" />
<h:outputScript target="head" library="js" name="jquery-ui.js" />
<script type="text/javascript">
if (!Modernizr.inputtypes.number) {
jQuery(function() {
var id = '${cc.clientId}:number'.replace(/:/g, "\\:");
jQuery("#" + id).spinner();
jQuery('.ui-spinner-button').click(function() {
jQuery(this).siblings('input').change();
});
});
}
</script>
<div id="#{cc.clientId}">
<input jsf:id="number" type="number" jsf:value="#{cc.attrs.value}"
step="#{cc.attrs.step}" min="#{cc.attrs.min}" max="#{cc.attrs.max}"
list="#{cc.attrs.list}"
jsf:readonly="#{cc.attrs.readonly != 'false' ? 'true' : 'false'}"
jsf:required="#{cc.attrs.required != 'false' ? 'true' : 'false'}"/>
</div>
</cc:implementation>
</html>
Using the Composite Component
Listing 7-25 shows some examples of the composite control with accompanying screenshots in Figure 7-9 (native
HTML5 support) and Figure 7-10 (fallback).
Listing 7-25. Examples of Using the inputNumber Composite Component
<section>
<label for="min-to-max">Number (-10 to 10): </label>
<projsfhtml5:inputNumber value="#{componentInputNumber.number1}" min="-10" max="10">
<f:ajax event="change" execute="@this" render=":frm:selectedValue" />
</projsfhtml5:inputNumber>
<h:outputText id="selectedValue" value="Selected value: #{componentInputNumber.number1}"/>
</section>
 
Search WWH ::




Custom Search