DOM level 0

à la C# (delegate)

document.getElementById("button").onclick = function() {
    
    document.getElementById("area")
        .style.backgroundColor = "blue";

}; 

DOM level 0: demo

Paint it blue

Signal/Slot

Yes, Trolltech's Qt® (dojo.connect)

function helloWorld() {
    alert("Hello World!");
}
function onButtonClicked(label) {
    return function() {
        document.getElementById(label)
            .style.backgroundColor = "blue";
    };
}
var button = document.getElementById("button");
connect(button, "onclick", "helloWorld");
connect(button, "onclick", onButtonClicked("area0"));
connect(button, "onclick", onButtonClicked("area1"));

Signal/Slot - demo

Paint them blue

DOM level 1

like Java AWT/Swing (java.util.EventListener)

var button = document.getElementById("button");
// the W3C way (not the MSIE one)
button.addEventListener("click", function(event) {
    document.getElementById("area0")
        .style.backgroundColor = "blue";
}, false);
button.addEventListener("click", function(event) {   
    document.getElementById("area1")
        .style.backgroundColor = "blue";
}, false);

DOM level 1: demo

Paint them blue

Custom Events!

The Holy Grail to simple and modular Rich Internet Applications.

Which one do I pick?

• your own!
• jQuery
• YUI

GoF Observer pattern

like YUI! (CustomEvent)

function colorIt(color) {
    document.getElementById(this.id).
        style.backgroundColor = color;
};
var evt = new Event().
    register(colorIt, {id: "event_area_0"}).
    register(colorIt, {id: "event_area_1"});

// You're not forced to do DOM level 0 (of course)
document.getElementById("event_button_0").onclick = function() {
    evt.notify(["blue"]);
};
document.getElementById("event_button_1").onclick = function() {
    evt.notify(["green"]);
};

GoF Observer pattern - demo

Paint them in blue or green

jQuery

with names, like GTK (GObject)

$("#button").
    bind(("click", function(event) {
        var self = this;
        $.getJSON("http://feeds.delicious.com"+
            "/feeds/json/lejoe/?callback=?",
            function(data) {
                $(self).triggerHandler("data", [data]);
            });
    }). // no necessary chained
    bind("data", function(event, data) {
        $("#label").html(data[0].u);
    });

jQuery - demo

What's most recent Joël's bookmark?

PubSub

XMPP/Bayeux inspired

Publisher -> channel "data"
Blue (odd) -> /buttons/odd "blue"
Blue (event) -> /buttons/even "blue"
Blue (both) -> /buttons/both "blue"

Green (odd) -> /buttons/odd "green"
Green (event) -> /buttons/even "green"
Green (both) -> /buttons/both "green"

channel -> action (Subscriber)
/buttons/odd -> paint the odd buttons in "color"
/buttons/even -> paint the even buttons in "color"
/buttons/both -> fire the /buttons/odd and /buttons/even events
/buttons/* -> log the current color.
        

Demo

Paint them in blue: odd, even or both.
Paint them in green: odd, even or both.

Observable

The Objective-C KVO

// Label is Observable
var Label = function(value) {
    this.value = value;
}
Label.prototype = new Observable();
Label.constructor = Label;

var myLabel = new Label("");
        

Observable (cont.)

// Actors
document.getElementById("input_1").onkeyup = function() {
    myLabel.set("value", this.value.toLowerCase());
}
document.getElementById("input_2").onkeyup = function() {
    myLabel.set("value", this.value.toUpperCase());
}

// Observers
myLabel.observe("value", function(value) {
    document.getElementById("input_1").value = value;
});
myLabel.observe("value", function(value) {
    document.getElementById("input_2").value = value;
});
myLabel.observe("value", function(value) {
    document.getElementById("label").innerHTML = encodeURIComponent(value);
});


        

Observable

and a span.

The End

Thank you very much