One tech blog per day

Using the Flex slider component (to dynamically change values)

Customizing the slider appearence
=========================

First of all, when you start using the vSlider or hSlider , you would be totally befuddled because
the neat little ruler does not appear by itself and you need to specify the labels for the upper and lower limit. Here is how to make it look like a proper slider as shown in the picture below:

change="sliderChange(event)" allowTrackClick="true" showDataTip="true"
minimum="0" maximum="8" snapInterval="1" liveDragging="false" tabEnabled="true"
tickInterval="1" labels="[0,8]"
fillAlphas="[1.0, 1.0]" fillColors="[#009DFF, #D4E7FD]"/>


snapInterval - the slider starts snapping to the ruler markings and does not stay in between. Useful if you do not want the user to change the value over a continuous range.

tickInterval - shows the ruler lines at the this interval

minimum - the minimum value maximum - the max value.
Note: Setting these will not show the labels for the maximum and minimum values.

labels= "[min,max]". This actually shows the max and min values. So if you wanted to show "BOTTOM" at the bottom and "SUMMIT" on top, you should say:
labels="[BOTTOM,SUMMIT]".

Using the slider
===========
Here, we discuss how to change the values of some components dynamically in accordance with the current value of the slider. For example, we have the slider at 1 and the number of "Classes" is 1 and the Average is "17" below:

Now, when the user drags the slider to 2, the number of classes change to ? and the average now changes to ?. Let us see how this is done.


The mxml code snippet for the slider is:

change="sliderChange(event)" allowTrackClick="true" showDataTip="true" minimum="0" maximum="8" snapInterval="1" liveDragging="false" tabEnabled="true" tickInterval="1" labels="[0,8]" fillAlphas="[1.0, 1.0]" fillColors="[#009DFF, #D4E7FD]"/>

We are interested in the change attribute (shown in bold) handled by the sliderChange() function. Here is the code for the sliderChange() function:

var threshold:int;
...
..
private function sliderChange(event:SliderEvent):void {
threshold =event.value;
calculateClasses(currentArray);
}

The calculateClasses() function does some real complex math in my case and then updates the labels. Simple isn't it? So thats it. Now you have learnt to change values on other components when the slider changes or rather, "slides".

Changing the slider itself dynamically!
============================

Suppose you wanted to change the values on the slider itself when soemthing else changes? Say, when you choose one button among a set of radio buttons, the slider moves form 0-8, and for another radio button, the slider has to go from 1 to 100. How do we do this?

Suppose your slider component is called mySlider, and you want to change the maximum and minimum and the labels also in accordance with those. Here is how to do it in actionscript:

mySlider.maximum=findMaximumThreshold(currentArray);
mySlider.labels=[0,mySlider.maximum];

That rounds up the vSlider componet. For any queries please email me at arunsudhir@gmail.com.

Current time with perl

Q. How do I know the current time with perl?

A. The 'time' variable holds the current time.
print time; would print the current time but not in a language that you would understand.
To get the current time as something like Jan 20, 2008 12:30:00 use the time variable wrapped in the localtime function. So, try

perl -e 'print localtime(time);' on the UNIX command prompt.