Rss Feeds

Article Topics

All Articles

General AJAX

ASP.NET AJAX

Google Web Toolkit

AJAX Using Java

AJAX Using PHP

Dojo

articles >> general ajax >> The JDA Revolution

The JDA Revolution

By : Peter Svensson
Nov 18, 2007

Printer friendly

Page 3 / 3

For small demos, it is sometimes convenient to just define the blueprints inside script statements in the page itself, and skimp on the script property in the infotron definitions.

A sample page with the above blueprints, and debugging enable would then look like this;

<!DOCTYPE html PUBLIC
          "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta name="uuid" content="~019FF0001E0DDE94099163F8FEFA8802643" />

<script language="javascript" src="JsStar.debug.js"></script>
<script language="javascript" src="init_jsstar.js"></script>

<script>
BLUEPRINT(
"~027F54CD51114410dB7A77CB8A523E340",
{
"iterms" : [],
"oterms" : ["click_value_out"],
"properties" : ["bname", "message"],
"name" : "Simple Button"
},
function (Class)
{
Class.prototype._onInit = function(props)
{
     var self = this;

     function _onClick(e)
     {
        self.postMessage("click_value_out", props["message"]); // postMessage is also provided to 'this' by JDA
     }

    this.button = document.createElement("button");
    this.button.onclick = _onClick;
    this.button.innerHTML = props["bname"]; // This is a named property which can be passed to us upon initialization
    this.dom_node.appendChild(this.button); // this.dom_node is set by JDA to the element we are attached to
};
});

BLUEPRINT(
"~197AA00D51114410d0A078238A52EF5F0",
{
"iterms" :
[
     ["message_in", "onMessage", 10]
],
"oterms" : [],
"properties" : [],
"name" : "Simple Show"
},
function (Class)
{
Class.prototype._onInit = function(props)
{

    this.area = document.createElement("textarea");
    this.dom_node.appendChild(this.area);
};

Class.prototype.onMessage = function(msg)
{
     this.debug("Simple Show received message '"+msg+"'");
     this.area.innerHTML = msg; // Ta-daa! :)
}
});

window.onload = function(e)
{
     __star.boot();
}

</script>
</head>
<body>

    <div id="buttonexample"
        impl="~027F54CD51114410dB7A77CB8A523E340"
        properties = "'bname':'My Button','message':'Foo!'"
        connections="'click_value_out' : [['showexample', 'message_in']]">
    </div>

    <div id="showexample"
        impl="~197AA00D51114410d0A078238A52EF5F0">
    </div>

<script language="javascript" src="debug.js"></script>
<div id="debug" style="position:absolute;bottom:20px;background-color:black;height:120px;width:100%;overflow:auto;"></div>
</body>
</html>

Here we see for the first time how JDA "boots", by adding the __star.boot() call to window.onload. You framework of choice probably has a more generic onload handler for this event, but for our discussion, we stick to the basics.

If you want to see the demo in action, you can try it out here. If you want to download a zipped file with the demo, do so here.

Links to more information about JDA:

<< Prev Page