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.

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 = "<img class=\"Full\" src=\"" + msg["url"] + "\" />";
				slide = this._createSlide(msg.name, img);
			} else {
				slide = this._createSlide(msg.name, msg.text_content);
			}
		}
	} else {
		slide = this._createSlide("", msg);
	}

	this.dom_node.innerHTML = slide.innerHTML;

    };

    Class.prototype._onDestruct = function() {
	var i, n = this._pages.length;

	for (i = 0; i < n; i ++) {
	    this._pages[i] = null;
	}
    };

    Class.prototype._createSlide = function(title, content)
    {
	var html = "<span style=\"display:block;\"><h1 class=\"" + this._class_name + 
	"\">" + title + "</h1>" +
	"<span class=\"" + this._class_name + "\">" + 	
	content + "</span></span>";

	var span = __d.createElement("DIV");
	span.innerHTML = html;

	return span.firstChild;
    }


    Class.prototype.onNextPage = function(msg)
    {
	this._page ++;

	if (this._pages.length > 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");