A Javascript Widget / Gadget IDE with community features. Export to Google gadget done. Soon: Google GData components
Creation date:
Last updated:
Input terminals
Output terminals
Export as:
URL of target server:
System Menu
Add Element

Gadget/Widget Composer

Google Groups Forum

You are:
Not Modified

Contact info: psvensson gmail com

Q: What is JDA Composer?
A: It's a web-based web-page and JavaScript IDE. Kind of.

The basic idea behind the composer is that you should be able to design your page or widget visually, with a moderate amount of styling, and then be able to apply prefabricated functionality to the elements (That would be in JavaScript, yes),

finally exporting the whole shebang as a stand-alone zip-file containing generated HTML page, js-files and a PHP backend. Now, how would *you* defined something like that? Comments welcome. The term JDA comes from Javascript Dataflow Architecture which you completely need to read up on here.

Q: So .. how does this work?
A: You begin by designing you page or gadget visually. Choose elements from the toolbar (The upper left is a generic div container). Maybe you want a picture somewhere. Create a generic div by choosing the correct icon and then click anywhere on the canvas to create it, then right-click on the resulting div to get a context menu where you choose "configure as HTML Element". Define a background image URL and you're set. The create another generic div, right-click and choose instead "Configure Component" Choose "GoogleMap". There. You got yourself a picture you can drag around and a google map you can drag around (and resize, et.c.)

Q: What does it cost?
A: Not a dime. The web-site will be freely available to all. There will be a commercial version available "soon", for people needing to compose fo services on their private networks.

Q: How do I register a user?
A: You don't :) At the moment, you don't even need to logon to use the service. You can authenticate yourself using your google/gmail login. All the pages and JavaScript blueprints you create will then be editable only by you. Coming soon: Authentication by OpenID and Yahoo! Id.

Q: I have created a lot of rectangles. Cute. Where's the functionality?
A: There are two kind of rectangles; 1) generic divs, 2) form elements, which can be created by clicking the left or right uppermost tools in the tool bar respectively. When you have positioned and styled your elements (And dropped sub elements inside them for kicks :) you can either click the "Configure" button on the sidebar menu after selecting the element, or just right -click to get a context menu and select "Connect..."

Then you will get a sortable table of existing JavaScript blueprints to choose from. These are themselves accessible from the System Menu "JS IDE". For a form you might want to select the Blueprint "GenericForm". Many blueprints are kind of filters and do not have visual components, others (like "GoogleMap") automatically creates something nice to look at. Q: OK, I chose a blueprint, now there's a menu with a lot of fields to fill in. What's up with that?
A: Each blueprint can define any number of properties which can be declared when it is created. "GoogleMap" for instance have three different properties which let the user declare if this particular instance is to have zoom controls, map type controls, et.c.

Q: Argh! I've made a form element. How do I add textboxes and stuff?
A: You just select the textbox tool on the toolbar, and then when you click on the canvas, a textbox will appear. Now drag this box (and resize it, etc.) and drop it on the from element. Now it is contained by the form, and will follow when you drag around or resize the form itself.

Q: What is this HTML Config menu? I can't write actual HTML inside it. What is it for?
A: Ah. ehm. OK. Maybe HTML wasn't a very good choice, but it was the best I came up with. I needed to be able to set the name and value of elements. For instance, some blueprints need to be passed name-value pairs from forms. And then it is a good idea to set the DOM name of the input element correctly. Here you can also define background images for any element.

Q: Fine. Now I want to see what it looks like when it is exported. How do I export a page?
A: You click on the system menu choice "Page" and then select (you'll never be able to guess :) "Export". At the moment yo can export to generic HTML+PHP backend (works fairly well, but not for dojo-based blueprints atm), Joomla module (works not really, since it overwrites other modules on the page. Joomla Gurus wanted! Take a look at the output and tell me what's wrong, and remote Google Gadgets (totally works).