HowJdaWorks
Obviously, this page is being worked on... BIG TIME
Whatever this JDA thing is... How does it work?
It's a 5 step process
- Give your Web page a UUID
- Get
aJS-Starmicro-kernel(JDA micro-kernel) running inside your Web page - Add some
componentsinfotrons (JDA components) - Wire the
componentsinfotrons up - Repeat 3 - 4
Give your Web page a UUID
<meta name="uuid" content="YOUR_UUID_GOES_HERE" />
Click here to generate a new one
Get aJS-Star (JDA micro-kernel ) running inside your Web page
<script type="text/css" href="http://constructbl.es/_ukernel/js/api_key=YOUR_API_KEY_HERE"></script>
If you don't have an API key, go here to get one
Add some infotrons
infotrons can be found by viewing other Web pages and locating <div> tags with the impl attribute.
Here's an example infotroninfotron:
<div id="YOUR_ID_HERE"
impl="UUID\_OF\_INFOTRON\_HERE"
script="URL\_OF\_SCRIPT\_HERE">
</div>
You can copy+paste that into your own Web page. If you travel to this page, you'll find a list of infotrons included as part of the standard distro that you can use.
Wire the components up
infotrons, unlike other Web widgets, aren't discrete components. They are meant to take part in a larger composition. You can wire one or more infotrons together by using the connections attribute. The following is an example:
If you travel to this page, you'll find how some of the demo HTML blueprints are spec'ed to take advantage of the compositional aspect of JDA.
Repeat 3 - 4
Get an API key from http://constructabl.es/ (coming soon)Get a UUID from http://constructabl.es/api/uuid_generator/ (coming soon)Inside the <head> tag of your HTML file add the following lines of HTML
<meta name="uuid" content="UUID_GOES_HERE" />
<script language="javascript"
src="http://constructabl.es/_js/star.debug/api_key=YOUR_API_KEY_GOES_HERE"></script>
Your Web page is now officially a JDA Blueprint!
Adding infotrons
Type in a <div> tag for each of the infotron you want to add to your Web page.<div id="mybutton" impl="~011C8D2C7B8A574a0e9F1B957E4A172D07" script="../extras.beta/Button.js" properties="'click_value':{'name': 'New Note', 'text_content':'Hello World'}" connections="'click_value_out':[['stickies', 'dispense_request_in']]"> <button>Click to dispense a sticky note</button> </div>
Connecting infotrons
Here we have two infotrons, defined from one blueprint each, which are wired together by defining the connections attribute on the first infotron.
In the connecitons attribute, the first time is one of the current infotrons output terminals and the second item is a combination of destinaton infotron id/DOM node and input terminal.
A more complex example is shown in the illustration below;
Additional text that need to be cleaned up and incorporated
Includes an asynchronous message-passing microkernel called "JS-Star" (pronounced Jay-Es Star)An HTML file that contains one or more infotrons is called a BlueprintA Javascript file that speficies the implementation of an infotron is also called a BlueprintEach JDA component is called an Infotron.Infotrons can be connected to one another via channelsInfotrons can pass messages through the channelsThe Javascript file which defines the behavior of an infotron is called a BlueprintAn infotron is defined in an ordinary html element, by adding the 'impl' attribute. Js-Star will then find and create the infotron after the page has loaded (by loading the js blueprint class).Each Infotron has lists of input and output terminals.
Each input terminal (which is just a string defining its name) has a handler function specificed which must be defined inside the Infotron (Or rather its blueprint class).Each output terminal can be connected to another Infotrons input terminal in the Infotron definition (by adding a 'connections' attribute to the html element).Each Infotron definition can specify properties to initialize the Infotron with, when started, by adding a 'properties' attribute.