Deprecated: Assigning the return value of new by reference is deprecated in /customers/7/b/4/mashupstation.com/httpd.www/Wikka/libs/Wakka.class.php on line 130 Deprecated: Assigning the return value of new by reference is deprecated in /customers/7/b/4/mashupstation.com/httpd.www/Wikka/libs/Wakka.class.php on line 261 Deprecated: Function set_magic_quotes_runtime() is deprecated in /customers/7/b/4/mashupstation.com/httpd.www/Wikka/wikka.php on line 90 Deprecated: Function ereg() is deprecated in /customers/7/b/4/mashupstation.com/httpd.www/Wikka/libs/Wakka.class.php on line 441 mashupstation.com: JDA Composer Documentation

mashupstation.com : JDAComposerDocumentation

HomePage :: FAQ :: Examples :: Manage files :: Forum :: Links :: Recently Commented :: Login

JDA Composer Documentation


This document explains briefly how the composer works, and what its default values are, especially in relation to component creation and wiring.

The composer itself can be seen and taken for a very long ride indeed at http://www.mashupstation.com/station/users/admin/jdacomposer.html.

1. What is it?
The JDA Composer is an browser-based IDE for making mashups or actually any web-page with interactive elements. The main area of the application is called the canvas, where you create HTML elements and place them where you want them and resize them properly. An HTML element can then be associated with a strictly modularized javascript component, which then can act upon the element, if it choses to.
One such example is the 'show' component, which upon creation appends a textarea to the HTML element it is attached to, to view various output of other operations on (Handy for qucik debugging).
The javascript components used are actually Infotron Blueprints, complying to the JDA (Javascript Dataflow Architecture) standard. Part of that standard defines that each component, or blueprint definition can have zero or more input and/or output terminals. The terminals accept javascript object from and to other instantiated blueprints. A blueprint is, as the name suggest, just a code template. When you instantiate a blueprint, by creating a new object out of it and attaching it to a DOM node element, ithat object becomes known as an Infotron.
For more information on JDA, please check out out own JDA pages, or the Wiki.

2. You can add an element to the canvas in either of two ways;
  1. If all you want is do add a div element, klick the "New Element" icon in the fisheye menu at the bottom of the canvas,
  2. If you need to create a specific kind of element, drag the element of choice (For instance ther GenericForm blueprint needs to be attached to a form element, and not a div) onto the canvas from the html element list at the right of the canvas.

3. If you want to create a Form. Just drag the 'form' html element on the canvas as described above, and then proceed to drap and drop other html element which you need _inside_ the newly created form. Don't forget to include a submti button. All elements can be repositioned and resized. When running outside of the editor the form will be static and the outlines and resizing elements will not be shown.

4. To add a component to an element, right-click inside the heml element of choice and select "Configure Component". After a while you will get a sortable table with all the blueprints defined in the packend of the composer. Some of the names can be a little cryptic, and many blueprints are probably being cfreated for testing purposes. Anyway, when you choose a row in the table, the composer will take another trip to the backend and get the blueprint. It then notes which - if any - configurable properties the blueprint has, and displays a dialog which lets you change the automatic naming of the soon to be reated infotron as well as any properties. For instance, the Yahoo Map component has properties that you can set to 'true' if you want a resize button, et.c. After the dialog has been closed, the infotron is created from the selected blueprint.

5. To connect two components, you need at least two components (doh!), where at least one of them has at least one output terminal that it is going to produce something on in a certain circumstance, and another component with at least one input terminal that it has a valid function listening on. OK, we could use just one component/infotron and connect it to itself. It's actually quite simple, but left as an exercise for the reader :).

Let's say that you have created two div elements on the canvas, by pressing the "New Element" icon twice. The first one has been configured as a 'buton' infotron, which makes a clickable button named "Foo" to appear inside the elemtn, and the other has been configured to be a 'show' infotron, which creates a resizable textarea inside the element.

It so happens that the 'button' blueprint is a very basic blueprint, which just send the text "Foo!" on its only output terminal when the button is pressed. And the show blueprint only have one input terminal, which takes all it receives and put it slam up inside the textarea element.

Components/Infotrons are connected from the output terminal to the input terminal, so right-click on the button infotron and choose "Connect Component". You will now get a dialog with a list of all output terminals (one) and for each adn every one you have a drop-down menu containing all the current input terminals on all instantiated infotrons on the canvas. Choose the input terminal in the show infotron.

That's it.

Now press that button. Foo!

4. Managing and editing blueprints. By pressing the "Blueprint Manager" icon in the fisheye menu at the bottom of the canvas, you open the Blueprint Manager. It is divided into two areas. The first is the same list you saw when you created a component, namely a list of all existing blueprints in the backend. The other area is an edit area for a choose blueprint.

So if you choose a blueprint, the composer will fetch the blueprint details and stock up the edit area. Now it works like this; If you click on any input terminal, output terminal or property, that means delete. You will be given a warning, but keep alert so you don't do anything you don't want to.

If you click on any function, you will get a crude but functioning editor for that function, which will let you save any changes made.

If you want to create a new infotron you right-click anywhere inside the blueprint manager and choose blueprints -> Create new blueprint.

The first thing you want to do with a new blueprint is to create an _onInit function, which takes a props argument. This function gets called whenever an infotron is instantiated and the props argument contains a hash with all the defined props, from the infotron creation dialog.

Another thing related to functions is that when you create a new input terminal, you have to define the name of the function which handles the messages coming in on that terminal, which will be autmatically created for you convenience. All javascript objects which are created in the 'this' object will be available throughout all methods. Check out the button infotron for a simple example.

5. Datasources. A datasource is a blueprint which actsd as a gateway to remote data, or services. At the moment, the composer can generate blueprints of both Dapitt dapps, basic WSDL files, or simple table scraping from a given HTML page.

a) Dappit datasources. Dapps are hosted on http://www.dappit.com and are screen scrapers which are composed visually by choosing regions within one or more HTML pages. These dapps are then produced à la minute by dappit in a variety of formats, uncluding XML, JSON, CSV, RSS, and many more. I only use JSON in the composer (as of now). To create a dapp datasource, click on the Datasource manager icon to the far right in the fisheye menu. Then choose Dapper, and a search dialog comes up. At the moment you can only search on strings in the title of a dapp. When you have posted your search you will get a table with all the dapps that match your result, from the dappit SDK web service. WHen you choose one of the dapps (actually, it might be a good idea to search independently on the reall dappit web page, since many dapps are the product of testing and of pages which might have changed and so on. A result dailog will be shown that shows the name of the created blueprint, and that's it.

If you then enter the Blueprint Manager and sort the blueprints after creation date, you will find your newly created blueprint at the bottom (or the top if you click twice, whatnot). If you choose that blueprint, you will see that it has one input terminal and one output terminal, called dapp_arguments_in and dapp_out respectively.

The input terminal is there to start the dapp scraper to begin with, but if the dapp has what is known as "url variables", then it accepts an associative javascript array as input terminal argument, containing the desired arguments. For instance a dapp which scrapes NASDAQ stock info, might take a stockname as input for the single url variable.

So, to use the dapp blueprint, you can either create a form element and drag the required amount of input text elements inside it, not forgetting to name each input element correctly after each url variable.... or... you could choose the benificial menu choice 'blueprint -> Extract form from datasource blueprint', which does it for you. But only the HTML elements are created, so you still have to configure the form as a 'GenericForm' component.

Having created a form fairly easy for the requisite dapp, you must of course create an infotron instance for the form to connect to, so press the "new component" icon as well.

Position the new element and choose "configure component" and choose to configure it as the newly created dapp blueprint. Then you can connect the form with the dapp. After that, just to test things a bit, cretae another element and configure it as a 'show' component, which just shows what is being passed, and connect the dapp component to it.

Then just fill in the form and press submit, and the result will be shown in the 'show' component. If you find more esoteric compoennt, such as Dapp2Simpletable, you might be tempted to try them out :) Early days warning

b) WSDL data sources. This datasource generator works similarly to the dapp generator, except that it asks for an url to a WSDL file, which must be reachable from the server hosting all the stuff. SO using a private IP or localhost won't cut it, I'm afraid.

At the moment, just, I have only implemented parsing of basic values like string, int, et.c.

There are 84 comments on this page. [Display comments]

Valid XHTML 1.0 Transitional :: Valid CSS :: Powered by Wikka Wakka Wiki 1.1.6.2
Page was generated in 0.1269 seconds