HTML and CSS Reference
In-Depth Information
Creating the Composite Component
The implementation of the range component is straightforward. 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 range control. It also includes inline JavaScript
checking if the input range control is supported and if not uses JQuery and JQuery UI to turn a <div> element into
a range control. The inline JavaScript in this component is a bit more complicated than the previous components.
This is because the slider control in JQuery UI is not applied on an <input> element but one a <div> element. That
means that every time the slider is moved we need to update the <input> element and fire a change event to keep the
functionality consistent with the native HTML5 version.
Listing 7-21.
Composite Component for inputRange (resources/projsfhtml5/inputRange.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://java.sun.com/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.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" />
<cc:clientBehavior name="change" targets="range" 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.range) {
jQuery(function() {
var rangeId = '${cc.clientId}:range'.replace(/:/g, "\\:");
var hideId = '${cc.clientId}'.replace(/:/g, "\\:");
jQuery("#" + hideId).hide();
var id = '${cc.clientId}:fallback'.replace(/:/g, "\\:");
jQuery("#" + id).slider({
min: #{cc.attrs.min},
max: #{cc.attrs.max},
step: #{cc.attrs.step},
slide: function(event, ui) {
