check it out!

This post is password protected. To view it please enter your password below:

Password:

Here is an example of my modified HSlider.

Compare the way the thumbs interact when they meet. In the first example, the two thumbs cannot meet or both pick the same value when the thumboverlap value is false. When the thumbOverlap value is true, then both thumbs can select a single value, however the upper slider can now move below the lower slider giving an undesirable effect. In this article, I will show how to create a two thumb slider where the two thumbs can meet at a single point, yet not overlap any further.

Look at the SliderEvent Class for Public Properties. This will describe the properties of the SliderEvent class. We will use these docs to determine what values are available when the slider is moved and how to reference them. For Flex 2 here is the link to the SliderEvent Class:
http://livedocs.adobe.com/flex/201/langref/mx/events/SliderEvent.html

The properties that look interesting are ‘thumbIndex’, (0 or 1) indicating which slider is moving, and ‘value’ – the new value of the thumb that is moving. Notice that only one of the values is available here – but that’s ok, only one thumb slider is changing at a time. We’ll be using dollar amounts for values and I’ll show how to format the amounts to include dollar signs and proper formatting with commas and two decimal places. Let’s import the CurrencyFormatter so we can use it, declare variables for the PriceMin and PriceMax, and declare a priceFormatter. We’ll use the default
Settings (currencySymbol=”$”, UseThousandsSeparator=”true”, etc.) of the CurrencyFormatter, so no parameters are needed. It’s a good idea to look at the help documentation to see what options are available for CurrencyFormatter.

import mx.formatters.CurrencyFormatter;
[Bindable] public var PriceMin:uint = 0;
[Bindable] public var PriceMax:uint = 25000;
public var priceFormatter:CurrencyFormatter = new CurrencyFormatter();

Next, let’s create the HSlider and some labels. Setting allowThumbOverlap to true will allow the two thumbs to meet, and we’ll add some code to prevent them from overlapping. Setting the snapInterval to 1000, allows the slider to move in increments of 1000. Setting the allowTrackClick to true allows you to click on the track and the closest slider will move to the value under the mouse. Setting liveDragging to true allows the values to update immediately rather than waiting for the thumbrelease.

<mx:Label fontWeight="bold" text="Price"/>
<mx:HSlider id="hsPrice" allowThumbOverlap="true" thumbCount="2" values="{[PriceMin,PriceMax]}"
labels="{[priceFormatter.format(PriceMin), priceFormatter.format(PriceMax)]}"
snapInterval="1000" tickInterval="1000" allowTrackClick="true" liveDragging="true"
width="250" dataTipFormatFunction="priceDataTip"
minimum="{Number(PriceMin)}" maximum="{Number(PriceMax)}" change="priceSliderUpdate(event)" />
<mx:Label id="hsPriceLabel" text="" />

When the HSlider is updated, the priceSliderUpdate function gets notified with an event. Look at the help file for the Class SliderEvent, Look here for values that we can use. There are a lot of choices here, the only two items that I find usefull are thumbIndex and value. ‘thumbIndex’ is the zero-based index of the thumb whose position has changed and ‘value’ is the new value of the slider.
We’ll use these properties of the event to prevent the thumbs from overlapping.
First lets check to see which slider is moving, if it’s the left slider (thumbindex=0) then we need to check to see if it’s greater than the upper slider. If it is, then push the right slider along with it by setting the value of the upper slider equal to the lower slider. If the right slider is being updated, then check to see if the upper slider (hsPrice.values[1] ) is less than the lower slider (hsPrice.values[0]), and adjust accordingly (hsPrice.values[1] = hsPrice.values[0]).
Next, set the label below the HSlider to display the minimum and maximum values.

hsPriceLabel.text = "Min: " + priceFormatter.format(hsPrice.values[0])+ " Max: " + priceFormatter.format(hsPrice.values[1]);

Here’s the full code for this function:

private function priceSliderUpdate(evt:SliderEvent):void {
if (evt.thumbIndex == 0) { // the left slider is moving
if (hsPrice.values[0] > hsPrice.values[1]){
hsPrice.values[1] = hsPrice.values[0];
}
} else { // right slider is moving
// if the upper slider moves below the lower slider adjust the lower slider down
if (hsPrice.values[1] < hsPrice.values[0]){
hsPrice.values[0] = hsPrice.values[1];
}
}
hsPriceLabel.text = "Min: " + priceFormatter.format(hsPrice.values[0])+ " Max: " + priceFormatter.format(hsPrice.values[1]);
}

The only thing left is to code the dataTip for the sliders. A dataTip is a little bubble that appears above a slider when it is active. For the dataTip function, the parameter passed in is the value for the slider that moved. How do we know which slider this datatip is for?? If the value passed in is greater than the minimum value, then it must be for the slider of the maximum value. Let’s return a label with a formatted value. If it’s the maximum slider return (“Maximum: ” + priceFormatter.format(item) ), if it’s the minimum slider return: (“Minimum: ” + priceFormatter.format(item) ), if the two sliders are equal, just return the formatted number without a minimum or maximum label: priceFormatter.format(item).
Here is the full code for the DataTip function:
private function priceDataTip(item:Number):String {
if ( item > hsPrice.values[0]){
return ("Maximum: " + priceFormatter.format(item) ); // Maximum:
} else {
if ( hsPrice.values[0] == hsPrice.values[1]){
return (String(priceFormatter.format(item))); // min = max
}else {
return ("Minimum: " + priceFormatter.format(item)); // Minimum
}
}
}

Here is the complete code for everything:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
import mx.controls.sliderClasses.Slider;
import mx.formatters.CurrencyFormatter;
[Bindable] public var PriceMin:uint = 0;
[Bindable] public var PriceMax:uint = 25000;
public var priceFormatter:CurrencyFormatter = new CurrencyFormatter();
private function priceSliderUpdate(evt:SliderEvent):void {
// if using allowTrackClick="true" then thumbdown or thumbdrag doesn't catch changes
// allowThumbOverlap doesn't allow both sliders to be on the same value
// if the lower slider moves past the upper slider, adjust upper slider
// so that the lower slider doesn't overlap the upper slider
if (evt.thumbIndex == 0) { // the left slider is moving
if (hsPrice.values[0] > hsPrice.values[1]){
hsPrice.values[1] = hsPrice.values[0];
}
} else { // right slider is moving
// if the upper slider moves below the lower slider adjust the lower slider down
if (hsPrice.values[1] < hsPrice.values[0]){
hsPrice.values[0] = hsPrice.values[1];
}
}
hsPriceLabel.text = "Min: " + priceFormatter.format(hsPrice.values[0])+ " Max: " + priceFormatter.format(hsPrice.values[1]);
}
private function priceDataTip(item:Number):String {
// item is the value for the slider that moved
// Set the data tip based on the value of the
// selected thumb - if greater than the minimum value,
// then it's the maximum datatip
if ( item > hsPrice.values[0]){
return ("Maximum: " + priceFormatter.format(item) ); // Maximum:
} else {
if ( hsPrice.values[0] == hsPrice.values[1]){
return (String(priceFormatter.format(item))); // min = max
}else {
return ("Minimum: " + priceFormatter.format(item)); // Minimum
}
}
}
]]>
</mx:Script>
<mx:Label fontWeight="bold" text="Price"/>
<mx:HSlider id="hsPrice" allowThumbOverlap="true" thumbCount="2" values="{[PriceMin,PriceMax]}"
labels="{[priceFormatter.format(PriceMin), priceFormatter.format(PriceMax)]}"
snapInterval="1000" tickInterval="1000" allowTrackClick="true" liveDragging="true"
width="250" dataTipFormatFunction="priceDataTip"
minimum="{Number(PriceMin)}" maximum="{Number(PriceMax)}" change="priceSliderUpdate(event)" />
<mx:Label id="hsPriceLabel" text="" />
</mx:Application>

A two thumb slider lets you choose a range of values. If you have a slider with a range of years from 2000 to 2007, I want the user to pick a range of dates. The range can be all dates (2000 – 2007) or some (2002-2005) or just one year (2004). Choosing specific years is not possible (2001, 2004, 2005). The problem with the basic HSlider is that you can not pick just a single year. With the thumbOverlap property disabled, the two thumbs could not be on the same value. With the thumbOverlap property enabled, then the lower slider could overlap and go past the upper slider. For example, if the upper slider was at 2005, then the lower slider could choose any value, including 2005, 2006, and 2007 – a feature that doesn’t look right. The proper behavior that I wanted was for the lower slider to meet the upper slider and push it further up if needed, but never go past the upper slider. The same behavior is true for the upper slider – never go below the lower slider.

and here is the code

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
import mx.controls.sliderClasses.Slider;
private function sliderChange(event:SliderEvent):void {
var slid:Slider=Slider(event.currentTarget);
thumbLeft.text="Thumb Left: " + String(slid.values[0]);
thumbRight.text="Thumb Right: " + String(slid.values[1]);
thumbIndex.text="Thumb index: " + String(event.thumbIndex);
}
]]>
</mx:Script>
<mx:HSlider thumbCount="2" change="sliderChange(event);" id="slider1" labels="['0'],['5'],['10']"/>
<mx:CheckBox label="allowThumbOverlap" id="thumbOverlap" selected="false" click="slider1.allowThumbOverlap=thumbOverlap.selected"/>
<mx:CheckBox label="allowTrackClick" id="trackClick" selected="true" click="slider1.allowTrackClick=trackClick.selected"/>
<mx:CheckBox label="liveDragging" id="dragging" selected="false" click="slider1.liveDragging=dragging.selected"/>
<mx:Label text="TickInterval:"/>
<mx:NumericStepper minimum="0" maximum="10" stepSize="1" id="tickinterval" value="0" change="slider1.tickInterval=tickinterval.value"/>
<mx:Label text="SnapInterval:"/>
<mx:NumericStepper id="snapinterval" value="0" minimum="0" maximum="10" stepSize="1" change="slider1.snapInterval=snapinterval.value"/>
<mx:Text id="thumbLeft"/>
<mx:Text id="thumbRight"/>
<mx:Text id="thumbIndex"/>
</mx:Application>

Let’s start out with the data that we’ll use.  I’ll start with an array called mydata, each item with a name and an age:

public var mydata:Array=[
              {name:"A",age:16},
              {name:"B",age:17},
              {name:"C",age:18},
              {name:"D",age:19},
              {name:"E",age:20},
              {name:"F",age:21},
              {name:"G",age:22},
              {name:"H",age:23},
              {name:"I",age:24},
              {name:"J",age:25},
              {name:"K",age:26}];

Then create an ArrayCollection called myAC initialized with mydata.

   public var myAC:ArrayCollection = new ArrayCollection(mydata);

As we remove items from the TileList we’ll need someplace to keep them in case we need to display them again later, so declare another ArrayCollection for this task.

      private var hidden:ArrayCollection = new ArrayCollection;

We’ll have two ArrayCollections one for the display and one for the non-display items.  All items will be on one of these lists.  As we delete one item, we’ll remove it from the display list and put it on the hidden list.  As we add an item to the display list, we’ll remove it from the hidden list. An item will either be on the display list or the hidden list.

Let’s build the TileList to display the data, give it an id of ‘tlist’, height and width of 400, make it a 4×4 grid with the Data direction of horizontal.   New with Flex 3 are parameters: offscreenExtraColumns, offscreenExtraRows, and dataChangeEffect. The manual says to use 2 or a multiple of 2 for both offscreenExtraColumns and offScreenExtraRows, however when I tried that, Then some of the display items disappeared, zero appears to work fine, but you may want to try out the values 2 or 4 with your setup. The new ListBase property offscreenExtraRows and offscreenExtraColumns helps to eliminate visual glitches in data effects. Setting this property to a small even number such as 2 or 4, or possibly larger if many items may be deleted at once, is recommended.

    <mx:TileList id="tlist"
        height="400" width="400"
        fontSize="30" fontStyle="bold"
        columnCount="4" rowCount="4"
        direction="horizontal"
        dataProvider="{myDP}"
        itemRenderer="Thumbnail"
        offscreenExtraColumns="0"
        offscreenExtraRows="0"   
        dataChangeEffect="{dataChangeEffect1}"/>

The TileList uses a custom itemRenderer so let’s create the itemRenderer: create a new MXML component called ‘Thumbnail.mxml’ with
Two labels inside a VBox with size 100×100:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="100">
<mx:Label text="{data.name}" />
<mx:Label text="{data.age}" />
</mx:VBox>

Next let’s add two numeric steppers that will allow us to interact with the data in the TileList, the two steppers will define a range of values that are viewable.  Shrinking the range of numbers will delete those data items in the TileList, while expanding the range will bring the data back into view.  Create a HBox, add a label and then create a NumericStepper with a range of 14-26, and a current value of ‘24’, set the stepSize to 1, and when this value changes, make a call to lowchange().

    <mx:HBox >
        <mx:Label text="Lowest Value:" />
        <mx:NumericStepper id="low" value="24" minimum="14" maximum="26" stepSize="1" change="lowchange()" />
    </mx:HBox>

Create another NumericStepper to act as the higher range, setting the value to 26, and call highchange() when the user changes this value.

    <mx:HBox >
      <mx:Label text="Highest Value:" />
      <mx:NumericStepper id="high" value="26" minimum="17" maximum="26" stepSize="1" change="highchange()"/>
    </mx:HBox>

Now for the real code – what is required is the index value of the items that will be deleted and calling removeItemAt() for the effect to play.  In the lowchange function we search for values that are outside the range specified by the two numeric steppers.  Loop thru all the values of the ArrayCollection (myAC), when a value is found less than the lower limit, add the index (removelist.push(j)) to a list of  items to remove. As we look for items to remove, copy the items that we remove to another list (hidden) so that we can add these items back later when the lower limit changes again.  i.e. there will be two lists – one containing the items outside the range, and another containing all the items within the range which will be displayed.

      private function lowchange():void {
            var removelist:Array = []; // an array of indexes of items to remove
        for (var j:int = 0; j < myAC.length; j++){
                      if (myAC[j].age < low.value) {
                             hidden.addItem(myAC[j]);  // copy item to remove to hidden list              
                              removelist.push(j);       // keep index of item to remove, so that we can remove in next step
                       }
            }

At this point we have a list of indices to the items that we need to remove, next the list is sorted in descending order and then step thru the list removing items one by one from the end of the array.  If  the remove list is not sorted descending is to prevent us from stepping on ourselves.   For example if the remove list contains indices 2 and 4, and you remove item at index #2, then the item at index #4 moves up one to become index #3, then if you remove the item at index #4, this is really the item at index #5.  Removing them from the end solves this problem. 

            removelist.sort(Array.DESCENDING);  // sort list so that we can start deleting from end of the list              
for (var i:int = 0; i < removelist.length; i++) {
                   myAC.removeItemAt(removelist[i]);    // remove item
                 }
Next, let’s look thru the hidden list and see if any items need to be moved back to the display.  Loop thru the hidden list checking values that are inside the range, if found then user the random function to insert them back in at a random place.  Keep a list of the items added so that they can be removed from the hidden list.  Here is the code:

                 /*  look thru hidden list and see if we need to add any items back */
                 var addlist:Array = []; // an array of indexes of items to remove
                  for ( j = 0; j < hidden.length; j++){
                     if ((hidden[j].age >= low.value) && (hidden[j].age <=high.value) ) {
                          myAC.addItemAt(hidden[j], Math.floor(Math.random() * myAC.length ));  // copy item to a random spot (and later remove from hidden list)              
                          addlist.push(j);       // keep index of item to add, so that we can remove in next step
                     }
                }
              addlist = addlist.sort(Array.DESCENDING);  // sort list so that we can start deleting from end of the list
              for (i = 0; i < addlist.length; i++) {
                   hidden.removeItemAt(addlist[i]);    // remove item from hidden list
                 }
            }     

Next. Let’s add the effect that gets played when an item is added or removed:

<mx:DefaultListEffect id="myDLE"
        fadeOutDuration="1000"
        fadeInDuration="350"
        color="0x0044ff"/>

That’s it!  Here is the complete code for the main component, (following is the code for the itemrenderer):

<?xml version="1.0"?>
<!-- dataEffects\CustomTileListEffect.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comp="*" >
  <mx:Script>
      <![CDATA[
          import mx.effects.easing.Elastic;
          import mx.collections.ArrayCollection;
          public var mydata:Array=[
              {name:"A",age:14},
              {name:"B",age:15},
              {name:"C",age:16},
              {name:"D",age:17},
              {name:"E",age:18},
              {name:"F",age:19},
              {name:"G",age:20},
              {name:"H",age:21},
              {name:"I",age:22},
              {name:"J",age:23},
              {name:"J",age:24},
              {name:"J",age:25},
              {name:"K",age:26}];
          [Bindable]
          public var myAC:ArrayCollection = new ArrayCollection(mydata);
          private var hidden:ArrayCollection = new ArrayCollection;
          private function lowchange():void {
                 var removelist:Array = []; // an array of indexes of items to remove
                  for (var j:int = 0; j < myAC.length; j++){
                     if (myAC[j].age < low.value) {
                           hidden.addItem(myAC[j]);  // copy item to remove to hidden list              
                          removelist.push(j);       // keep index of item to remove, so that we can remove in next step
                     }
                }
                 removelist.sort(Array.DESCENDING);  // sort list so that we can start deleting from end of the list              
                  for (var i:int = 0; i < removelist.length; i++) {
                       myAC.removeItemAt(removelist[i]);    // remove item
                    }
                /*  look thru hidden list and see if we need to add any items back */
                     var addlist:Array = []; // an array of indexes of items to remove
                  for ( j = 0; j < hidden.length; j++){
                     if ((hidden[j].age >= low.value) && (hidden[j].age <=high.value) ) {
                          myAC.addItemAt(hidden[j], Math.floor(Math.random() * myAC.length ));  // copy item to a random spot (and later remove from hidden list)              
                          addlist.push(j);       // keep index of item to add, so that we can remove in next step
                     }
                }
                  addlist = addlist.sort(Array.DESCENDING);  // sort list so that we can start deleting from end of the list
                  for (i = 0; i < addlist.length; i++) {
                       hidden.removeItemAt(addlist[i]);    // remove item from hidden list
                         }
            }     
            private function highchange():void {
               var s:int = 0;
               var randm:int = 0;
               for ( s = 0; s< 100; s++) {
                   randm = (Math.floor(Math.random() * myAC.length)  );
                   trace ( "random is " + randm + " leng is " + myAC.length);
               }
                   var removelist:Array = []; // an array of indexes of items to remove
                  for (var j:int = 0; j < myAC.length; j++){
                     if (myAC[j].age > high.value) {
                          hidden.addItem(myAC[j]);  // copy item to remove to hidden list              
                          removelist.push(j);       // keep index of item to remove, so that we can remove in next step
                     }
                }
                  removelist.sort(Array.DESCENDING);  // sort list so that we can start deleting from end of the list              
                  for (var i:int = 0; i < removelist.length; i++) {
                       myAC.removeItemAt(removelist[i]);    // remove item
                     }
                     /*  look thru hidden list and see if we need to add any items back */
                     var addlist:Array = []; // an array of indexes of items to remove
                for ( j = 0; j < hidden.length; j++){
                     if ((hidden[j].age >= low.value) && (hidden[j].age <=high.value) ) {
                          myAC.addItemAt(hidden[j], Math.floor(Math.random() * myAC.length) );  // copy item to myAC list  (and later remove from hidden list)              
                          addlist.push(j);       // keep index of item to add, so that we can remove in next step
                     }
                }
                  addlist = addlist.sort(Array.DESCENDING);  // sort list so that we can start deleting from end of the list
                  for (i = 0; i < addlist.length; i++) {
                       hidden.removeItemAt(addlist[i]);    // remove item from hidden list
                     }
          }                   
        ]]>
    </mx:Script>
<mx:DefaultListEffect id="myDLE"
        fadeOutDuration="1000"
        fadeInDuration="350"
        color="0x0044ff"/>
    <!-- This TileList uses a custom data change effect -->
    <!-- offscreenExtraColumns and ..Rows should be 2, but '2' causes items to disappear -->
    <mx:TileList id="tlist"
        height="400" width="400"
        fontSize="30" fontStyle="bold"
        columnCount="4" rowCount="4"
        direction="horizontal"
        dataProvider="{myAC}"
        itemRenderer="Thumbnail"
        offscreenExtraColumns="0"
        offscreenExtraRows="0"   
        dataChangeEffect="{myDLE}"/>
    <mx:HBox >
        <mx:Label text="Lowest Value:" />
        <mx:NumericStepper id="low" value="16" minimum="14" maximum="26" stepSize="1" change="lowchange()" />
    </mx:HBox>
    <mx:HBox >
      <mx:Label text="Highest Value:" />
      <mx:NumericStepper id="high" value="26" minimum="17" maximum="26" stepSize="1" change="highchange()"/>
    </mx:HBox>
</mx:Application>

Here is Thumbnail.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="100">
<mx:Label text="{data.name}" />
<mx:Label text="{data.age}" />
</mx:VBox>

Next article will show how to add a few more effects.