Print | Unofficial JDA (Javascript Dataflow Architecture) Wiki

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 + missing_page_number_out: (The page number which was missing) ## Properties + allows_text_selection: (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. show_next_page

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

show_prev_page

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 show_next_page or show_prev_page 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");

SlideShowInfotron

Sample Declaration