SlideShowInfotron

This is a very good example of a minimalistic infotron. Good starting point if you are new to JDA and want something to copy and tweak a bit.

Sample Declaration

<div id="slideshow"
     impl="~01836BC8EF585F44d2B3C7C4307C885E2A"
     properties="allows_text_selection:'true'"
     script="http://localhost/Slideshow.js">
</div>

Input Terminals

new_slide_in: (expected message type: Either an array of slide references, an image url or text)
next_page_flip_request_in: (expected message type: any - i.e. 1)
prev_page_flip_request_in: (expected message type: any - i.e. 1)

Output Terminals

missingpagenumber_out: (The page number which was missing)

Properties

allowstextselection: (expected value type: boolean')

Demos that use it

slideshow.html

How does it work

Two types of messages are accepted at the input terminal new_slide_in; a dictionary which has all or one of the following keys: name, url, text_content. If the dictionary contains url, it is rendered as the sole image on the slide and text_content is ignored.

shownextpage

when any message arrives at this input terminal, the slide show flips to the nex t page.

showprevpage

when any message arrives at this input terminal, the slide show flips to the pre vious page.

When a user clicks on the slide show to advance to the next page, or a message i s arrived at either the shownextpage or showprevpage input terminals and the slide does not have any content to show for that particular page, the page number is emitted through this output terminal.

Configuration


BLUEPRINT(
"~01836BC8EF585F44d2B3C7C4307C885E2A",
[
   ["%startup", "onStartUp", 1],
   ["new_slide_in", "onContent", 10],
   ["next_page_flip_request_in", "onNextPage", 2],
   ["prev_page_flip_request_in", "onPrevPage", 2]
],
[
 "missing_page_number_out"
],
function(Class) {
  Class.prototype._onInit = function(props)
  {
    var self = this;
    this._page = -1;
    this._pages = [];
    this._class_name = self.dom_node.className;

    if (props["allows_text_selection"] != true) {
    this.dom_node.onselectstart = function(e)
    {
        return false;
    };


    this.dom_node.style.MozUserSelect = "none";
    this.dom_node.style.KhtmlUserSelect = "none";
    }

    if (props["ignores_clicks"] != true) {
    this.dom_node.onclick = function(e) 
    {
        e = e || window.event;
        var t = e.srcElement || e.target;

        if (t.tagName != "A") {
        if (!e.shiftKey) {
            self.onNextPage();
        } else {
            self.onPrevPage();
        }
        }
    };
    }


    };


    Class.prototype.onStartUp = function(msg) {
    this.postMessage("missing_page_number_out", this._page);
    };

    Class.prototype.onContent = function(msg) {
    var slide, o, l;

    if (typeof(msg) == "object") {
        if (msg.constructor == Array) {
            this._pages = msg;
            this._page = 0;
            this.onContent(this._pages[0]);
            _updateNav();

            return;
            /*****************************************************/
        } else {
            if (msg["url"]) {
                img = "< n; i ++) {
        this._pages[i] = null;
    }
    };

    Class.prototype._createSlide = function(title, content)
    {
    var html = " this._page) {
        this.onContent(this._pages[this._page]);
    } else {
        this.postMessage("missing_page_number_out", this._page + 1);
    }
    }

    Class.prototype.onPrevPage = function (msg)
    {
    if (this._page > 0) {
        this._page --;

        if (this._pages[this._page]) {
            this.onContent(this._pages[this._page]);
        } else {
            this.postMessage("missing_page_number_out", this._page + 1);
        }
    }
    }


}, "Slide Show Viewer");

Unofficial JDA (Javascript Dataflow Architecture) Wiki