Projection for Opera slideshow.
  1. JavaScript Events

    What can we learn from Desktop Applications?

    warning: code ahead!

    http://liip.to/js

    Yoan Blanc <yoan@dosimple.ch>, 2008, doSimple.ch

  2. DOM level 0

    à la C# (delegate)

    document.getElementById("button").onclick = function() {
        
        document.getElementById("area")
            .style.backgroundColor = "blue";
    
    }; 
  3. DOM level 0: demo


  4. 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"));
  5. Signal/Slot - demo


  6. 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);
  7. DOM level 1: demo


  8. Custom Events!

    The Holy Grail to simple and modular Rich Internet Applications.

    Which one do I pick?

  9. 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"]);
    };
  10. GoF Observer pattern - demo

    Paint them in or

  11. 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);
        });
  12. jQuery - demo


  13. 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.
            
  14. Demo

    Paint them in blue: , or .
    Paint them in green: , or .

  15. 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("");
            
  16. 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);
    });
    
    
            
  17. Observable


    and a span.

  18. The End

    Thank you very much