JSF AjaxSlider Component

This is the first release of my AjaxSlider component. This version works with JSP and Facelets and also extends FacesEvent to provide it's own event/listener. Many thanks to Jonas Jacobi and John Fallows for putting together a great book (Pro JSF and Ajax).

I'm also using the slider functions from the Script.aculo.us library


This component in hardly complete and bug free, so any help in debugging is appreciated

Download the component source, examples, and all necessary resources here(I also included my Idea project file in the download). I will be adding this code to JSF-Comp repository hopefully within the next day or two.

Usage Option 1

You can use AjaxSlider with the following options. This will only use listeners or submit the SliderEvent to a backing bean. It will give you more control in case you do not want to store the list, used in your datatable, in the session (described in option 2). Both listeners are not required, I just added them here to show examples on usage.

 
 
 xmlns:hc="http://www.halesconsulting.com/jsf" 
 xmlns:ac="http://ac"> 
 
 <style> 
 .range{ 
 width: 200px; 
 background: transparent url("/facelet-sandbox/images/demo_bg.gif") no-repeat center; 
 height: 20px; 
 } 
 
 .Mytest{ 
 background-color:transparent; 
 } 
 
 .trailer{ 
 background: transparent url("/facelet-sandbox/images/demo_bg_over.gif") no-repeat 0 7px; 
 height: 20px; 
 width: 114px; 
 } 
 
 .track{ 
 width: 200px; 
 height: 20px; 
 position: absolute; 
 } 
 
 .handle{ 
 position: absolute; 
 width: 10px; 
 height: 25px; 
 background:url("/facelet-sandbox/images/demo_arrow.gif") no-repeat center; 
 cursor: col-resize; 
 left: 114px; 
 } 
 
 </style> 
 
 <a4j:form id="form1" > 
 
 <hc:ajaxSlider sliderListener="#{sliderBean.doShow}" 
 onSlide="true" 
 onChange="true" 
 storeResults="false" 
 trackStyleClass="track" 
 styleClass="Mytest" 
 startRange="0" 
 endRange="50000" 
 increment="10000" 
 rangeStyleClass="range" 
 trailer="true" 
 trailerStyleClass="trailer" 
 handleStyleClass="handle" 
 handleValue="1" 
 id="slider_1" ><hc:sliderListener type="com.halesconsulting.web.action.MySliderListener" /></hc:ajaxSlider> 
 
 </a4j:form> 
 
 

Usage Option 2

Here we store the list from the UIData object in the session by setting storeResults="true". Obviously, using this option will depend on your situation. But to get the best user experience out of the slider interaction, this was the only way.

 
 xmlns:hc="http://www.halesconsulting.com/jsf" 
 xmlns:ac="http://ac"> 
 
 <style> 
 .range{ 
 width: 200px; 
 background: transparent url("/facelet-sandbox/images/demo_bg.gif") no-repeat center; 
 height: 20px; 
 } 
 
 .Mytest{ 
 background-color:transparent; 
 } 
 
 .trailer{ 
 background: transparent url("/facelet-sandbox/images/demo_bg_over.gif") no-repeat 0 7px; 
 height: 20px; 
 width: 114px; 
 } 
 
 .track{ 
 width: 200px; 
 height: 20px; 
 position: absolute; 
 } 
 
 .handle{ 
 position: absolute; 
 width: 10px; 
 height: 25px; 
 background:url("/facelet-sandbox/images/demo_arrow.gif") no-repeat center; 
 cursor: col-resize; 
 left: 114px; 
 } 
 
 </style> 
 
 
 <a4j:form id="form1" reRender="list-body" ajaxSubmit="true"> 
 
 <a4j:region id="stat1"> 
 
 <a4j:outputPanel id="slider-body"> 
 
 <hc:ajaxSlider sliderListener="#{sliderBean.doShow}" 
 for="carList" 
 forValRef="inventoryList.carInventory" 
 filterBy="getMileage" 
 onSlide="true" 
 onChange="true" 
 storeResults="true" 
 trackStyleClass="track" 
 styleClass="Mytest" 
 startRange="0" 
 endRange="50000" 
 increment="10000" 
 rangeStyleClass="range" 
 trailer="true" 
 trailerStyleClass="trailer" 
 handleStyleClass="handle" 
 handleValue="1" 
 id="slider_1" ><hc:sliderListener type="com.halesconsulting.web.action.MySliderListener" /></hc:ajaxSlider> 
 
 </a4j:outputPanel> 
 
 <a4j:outputPanel id="list-body"> 
 
 <t:dataTable id="carIndex" 
 
 </t:dataTable> 
 
 <t:dataTable id="carList" value=#{inventoryList.carInventory} 
 
 <ac:ajaxDataScroller id="scroll_1" 
 
 </a4j:outputPanel> 
 
 <a4j:status for="stat1" forceId="true" id="ajaxStatus"> 
 <f:facet name="start"> 
 <div id="loading-modal"></div> 
 </f:facet> 
 </a4j:status> 
 
 </a4j:region> 
 
 </a4j:form> 
 

All of the attribute descriptions are available in the faces-config.xml file if you have any questions. Feedback is more than welcomed and appreciated.