I recently presented the topic of JS Libraries focusing on the Prototype.js and script.aculo.us libraries at our local CFUG (ColdFusion User Group) meeting.  The presentation introduced the following ideas:

Prototype.js

  • Ajax interface
  • Utility methods
  • Helper methods
    • Arrays
    • Hashes
    • Ranges
  • Element.Methods
  • Event
  • Class
  • Object

Script.aculo.us

  • Visual Effects
  • Queuing your effects
  • Drag and Drop
  • Sortables

    Here is a quick overview of some of the examples presented:

AJAX callbacks example:

    In this example we are creating a class object with a myAjaxCall method that makes a simple Ajax.Request call and utilizes the onSuccess callback.  Also, note that we are using prototype’s binding to lock the execution scope within the object to maintain the this scope within myObject:

[-]View Code COLDFUSION
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript" src="lib/prototype.js"></script>
<script language="javascript" type="text/javascript">
     var myObject = Class.create();
     Object.extend(myObject.prototype, {
        initialize: function(options){
            this.setoptions(options)
        },
 
        setoptions: function(options) {
            this.options = {
                ajaxurl: 'ajaxcalls.cfm',
                mydivid: 'mydiv'
            }
            Object.extend(this.options, options || {});
        },
 
        myAjaxCall: function(){
            var pars = 'action=returntrue';
            var myAjax = new Ajax.Request(this.options.ajaxurl, {method: 'post', parameters: pars, onComplete: this.processMyAjax.bindAsEventListener(this)});
        },
 
        processMyAjax: function(t){
            if (t.responseText.strip() == 1)
                $(this.options.mydivid).innerHTML = 'Hello, world!';
            else
                window.alert('There was an error');
        }
    });
    Event.observe(window,'load',function(){myobj = new myObject();});
</script>
<title>Ajax Callback Example</title>
</head>
 
<div id="mydiv"></div>
 
<a href="javascript:void(0)" onClick="myobj.myAjaxCall();">Set Div value</a>
 
<body>
</body>
</html>

$() example:

    In this example, we are showing how we can pass in multiple element id’s into the $() method to return an array of element objects.  Then we alert the innerHTML of each element:

[-]View Code COLDFUSION
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript" src="lib/prototype.js"></script>
<script language="javascript" type="text/javascript">
    function alertDivs(){
        var divNodes = $('div1','div2');
        divNodes.each(function(node){
            window.alert(node.innerHTML);
        });
    }
</script>
<title>Dollar Method</title>
</head>
 
<div id="div1">Hello,</div>
<div id="div2">World!</div>
 
<a href="javascript:void(0)" onclick="alertDivs();">Alert Divs</a>
 
<body>
</body>
</html>

$$() example:

    In this example we are showing the power of the $$() method that allows us to obtain all elements in the DOM that match the CSS rule specified.  Remember to use Prototype’s document.getElementsByClassName when you want to obtain all elements with a specific class name, and Element.getElementsByClassName() to obtain elements within a contain.

[-]View Code COLDFUSION
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript" src="lib/prototype.js"></script>
<script language="javascript" type="text/javascript">
    function alertDivs(){
        var divNodes = $$('div.helloworld');
        divNodes.each(function(node){
            window.alert(node.innerHTML);
        });
    }
</script>
<title>Dollar Method</title>
</head>
 
<div id="div1" class="helloworld">Hello, World!</div>
<div id="div2">Not me?</div>
 
<a href="javascript:void(0)" onclick="alertDivs();">Alert Divs</a>
 
<body>
</body>
</html>

$A() example:

    In this example we are showing how to easily turn an HTML collection object into an Array that we can iterate over and alert the element’s innerHTML:

[-]View Code COLDFUSION
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript" src="lib/prototype.js"></script>
<script language="javascript" type="text/javascript">
    function alertDivs(){
        var divs = document.getElementsByTagName('div');
        var divNodes = $A(divs);
        divNodes.each(function(node){
            window.alert(node.innerHTML);
        });
    }
</script>
<title>Dollar Method</title>
</head>
 
<div>Hello, World!</div>
<div>Here we go again!</div>
 
<a href="javascript:void(0)" onclick="alertDivs();">Alert Divs</a>
 
<body>
</body>
</html>

Class Example:

    In this example we are showing the power that Prototype gives the object, providing constructor functionality via the initialize method as well as the ability to extend current objects and override methods:

[-]View Code COLDFUSION
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Class Example</title>
<script language="javascript" type="text/javascript" src="lib/prototype.js"></script>
<script language="javascript" type="text/javascript">
    var Sports = Class.create();
    Sports.prototype = {
        initialize: function(name,action,point){
            this.name = name;
            this.action = action;
            this.point = point;
        },
 
        score: function(){
            window.alert('The '+this.name+' player '+this.action+' a '+this.point);
        }
    }
 
    var rball = new Sports('racquetball','served','ace');
    rball.score();
    // -> alerts 'The racquetball player served a ace'
 
    var bball = new Sports('baseball','hit','homerun');
    bball.score();
    // -> alerts 'The baseball player hit a homerun'
 
    //lets extend the Sports class to create a Swimming class
    var Swimming = Class.create();
    Swimming.prototype = Object.extend(new Sports(), {
        score: function(){
            window.alert('The '+this.name+'\'s time was '+this.point);
        }
    });
 
    var swimmer = new Swimming('swimmer','','1 minute and 2 seconds');
    swimmer.score();
    // -> alerts 'The swimmer's time was 1 minute and 2 seconds'
</script>
</head>
 
<body>
</body>
</html>

Sortable.create() example:

    This quick example shows the basic syntax to create a sortable list using script.aculo.us and sending an Ajax call to our server to update a record(s) with the new order:

[-]View Code COLDFUSION
1
2
3
4
5
6
7
8
9
10
11

<script language="javascript" type="text/javascript">
Sortable.create('sortable_list',{onUpdate:function(){
    var listsequence = Sortable.sequence('sortable_list');
    var list = listsequence.map(function(item,i) {
        var id = $('eventitem_'+item).id;
        return  i + "=" + id;
    }).join('&');
    var pars = 'action=edit_event_items_order&count='+listsequence.length+'&'+list;
    new Ajax.Request('<cfoutput>#CGI.SCRIPT_NAME#</cfoutput>',{method:'post',parameters:pars});
}
</script>

More info?

This entry was posted on Tuesday, February 13th, 2007 at 7:24 pm.
Categories: Uncategorized.

No Comments, Comment or Ping

Reply to “JavaScript Libraries: prototype and scriptaculous”