The script.aculo.us library is the first collection of visual effects developed using javascript. The first 3 functions are:

1. effects - new Effect.effectName() and drag&drop control - new Control.controlname()
2. events - new Event.observe([click,mouseover,mouseon,etc], elements id, callback function)
3. ajax - new Ajax.update()

Other interesting functions of script.aculo.us are "edit in place", "drag&drop" and sliders. In this post we will look to the sliders controll and particulary to how to implement a dual slider in a real application, and select an interval range of value.

To do this we will need two overlapping sliders, and two images as selector. This can be transparent gif or png.

Download the image files

The first image is very close. This will be used as repeated bakgrounds for the div elements used for the sliders.
The others two image are the control: the yellow for the minimum value, and the red for the maximum value.

So let's see how will look the html of the sliders:

<div id="price_track" class="slidername_track">
<img id="price_yellow" class="slidername_yellow" src="images/i_slidername_yellow.png" />
<img id="price_red" class="slidername_red" src="images/i_slidername_red.png" />
</div>

The functions that will be created will need to have a standard name. We need a handler (id of the element) pointing the background div, where will cross the slider, and we will need an handler for every slider. We will use the name "sildername_track", "slidername_yellow",
"slidername_red". Soo if we need onther instance in the same page we must change only the "slidername" part.

Also we need something that will display the range value selected live when the slider moves. I've used a standard paragraf with the respectiv color yellow red.

<p>Prices from $<span class="yellow" id="pricename_yellow_tag">0</span> to $<span class="red" id="pricename_red_tag">200000</span></p>

Here we can observe that we need other two handlers, that i've named like pricename_yellow_tag pattern and pricename_red_tag. Also you can see that i've setted the initial value of minimum and maximum, 0 and 200000.

Here you can see the CSS used for the example:

.slidername_track{
margin:auto;
width:80%;
background:url("images/b_slidername.png") repeat-x;
}

span.yellow{
color:#e48800;
}

Now it's time for the intresting part of this example, the javascript code. When we have the HTML code, we need a function to transform the two triangle images in a slider that will update the price. Using only script.aculo.us, we can create the slider objects calling new Control.Slider two times for every slider.

Also we need to transform the script.aculo.us results, because we have a result from 0 to 1, but we need form 0 to 200000. So we need another function that transform those ugly decimal number.

Another prbolem that we will find is about stepping of the sliders. So i've created another function that with the min, max and step parameters and will return an array with all values that the sliders can use.

function buildsteppervalues(min,max,step){
var vals=[];
y=0;
for(i=min;i<=max;i+=step) {
vals[y]=i;y++;
}
return vals;
}

All Java developers that start developing software in Flex know what garbage collector is and how it works; the Flash developers, who can be not so well-informed about it, should begin to understand what it is, because the new functionalities introduced into Actionscript 3 can lead to memory leaks.
The garbage collector of actionscript 3 works in 2 different ways to know which object should be deleted from memory: the reference counting method and the mark&sweep.
In the first case every object maintains the number of references to it during the application's execution; when an object is created its reference count starts from 1, every time this object is referenced by others its reference count grows, on the contrary the reference count decreasees when another object with a reference to it is deleted.
When the number of references goes down to 0, then the garbage collector can remove the object from memory.
In the mark&sweep method the flash player starts from the application root object and visits al its referenced object, gradually reaching all the leaves of the reference tree; the flash player marks all the objects met. This way all the objects connected directly or indirectly to the root object will be reached and marked.
At the end of the visit all the objects not marked could be deleted from memory.
The first methid is faster and easier but there are problems like round references, that is those objects that have references between themselves.
The second method, introduced with flash player 8, is a lot more effective, but the visit in depth of the reference tree is really expensive speaking about CPU, so it can be used only sometimes.
It has to be clear to developers that the garbage collector doesn't delete an object from memory immediately. An object remains active for some time and it will keep going listening to and launching events until it will be definitely cancelled.
The biggest risk to create memory leaks comes from event listeners; in actionscritp 3.0 has been added the chance to create listeners with weak reference, that is they will not be considered in reference counting.


//the last parameter is the weakReference flag
object.addEventListener("eventName", listenerFunction, false, 0, true);


This way we don't take the risk that an object will never deleted from memory due to listener fault, anyway there is the possibility to remove the event listener, so we can avoid the risk in any case:


object.removeEventListener("eventName", listenerFunction);


Whe we use a ChangeWatcher on a Bindable propery of an object


var watcher:ChangeWatcher = ChangeWatcher.watch(object, "property", listenerFunction);


we should always remeber to call the unwatch method when the watcher is not necessary anymore


watcher.unwatch();


otherwise it will not be possible anymore to delete the object from memory.

With Java it is possible to call clearly the garbage collector using this two simple istructions:




      Runtime r = Runtime.getRuntime();

      r.gc();


in flash there in no way to explicitly invoke the garbage collector, but on the web there is a hack that can be found with a simple search:


private function gcHack():void

{

       // unsupported hack that seems to force a full GC

       try

       {

              var lc1:LocalConnection = new LocalConnection();

              var lc2:LocalConnection = new LocalConnection();



              lc1.connect('name');

              lc2.connect('name');

       }

       catch (e:Error)

       {

       }

}


it seems to work without problems, so we hope to find an official and documented function that does this as soon as possible.

The ROI index is a synthetic yet meaningful parameter used to express the benefit of making a project, as well as the benefit of making a certain choice related to a project, for example the technology to be used.

During my speech at the recent 360Flex Conference in Milan I presented the benefits achieved as a consequence of adopting Flex to re-design an enterprise application.

After an overview concerning the practical methods that can be used to evaluate the benefits and to calculate the Return On Investment (ROI), I presented a real-world case of an application for banking operations.

In that case, the benefit was measured in terms of the time saved to execute an ordinary operation (cashing a check) by using the Flex re-designed application respect the time that was formerly necessary to execute the same operation by using a "common" Oracle form-based application (simple html using the "traditional" logic of 1 click=1 page).

A tipically physical kind of measurement (time saved) was then translated into an economic parameter by valueing the time by the standard hourly wage of the staff involved in the operations of that kind.

The final passage was the calculation of the ROI formula.

The important and evident result was that the use of Flex contributed to leverage the ROI formula numerator (return) and to decrease its denominator (investment), for a double action of increment on the final result.

| View | Upload your own

The slides of that speech can be found on SlideShare