General Interface (GI) recently joined the Dojo Foundation as part of a transition to a true comprehensive 100-point open source project. TIBCO open sourced GI a number of years ago, but now GI can enjoy the benefits of running under the Dojo Foundation and being integrated with the infrastructure for open SVN, bug tracking, and more. Not only is GI is part of the foundation, but GI now includes significant integration with the Dojo Toolkit. The powerful GI builder, a web-based visual IDE for building client side web applications, now is capable of utilizing Dojo widgets as well as the GI set of widgets.

gi-dojo.png

The GI builder provides support for full drag and drop of Dojo widgets into the application canvas. In addition, the GI builder’s property and event editors can be used with Dojo widgets, allowing for a visual configuration of widgets with full documentation available in tooltips. This requires extensive integration with the builder. This was made possible with a new runtime metadata retrieval module available at dojox.lang.docs. The metadata module provides runtime access to the extensive class description and metadata information that is available through Dojo’s API documentation tool.

Class documentation and metadata information can now be made available at runtime through JSON schema structures on the class. To utilize the metadata module requires access to the API data files. These are included in the source and SVN distributions of Dojo (in the utility directory). Then the metadata module can be started:

dojo.require("dojox.lang.docs");
dojox.lang.docs.init();

The API documentation will be loaded, and Dojo classes will have their metadata available. To get the description of a class, you can access the description property. For example:

dijit.ColorPalette.description -> a description of dijit.ColorPalette

To access information about the properties that are available on the instances of classes, we can access the properties property. For example, to find the description of the defaultTimeout property of ColorPalette instances, we can access:

dijit.ColorPalette.properties.defaultTimeout.description

And likewise, to discover the expected type of the defaultTimeout property:

dijit.ColorPalette.properties.defaultTimeout.type -> "number"

We can also retrieve information about the methods that are available for classes. The method definition follows the JSON Schema Interfaces (JSI) structure. For example, to get a list of expected parameters for the onChange method for ColorPalette:

dijit.ColorPalette.methods.onChange.parameters -> [{type:"string", name:"color"}]

And the definition of the return value would be available:

dijit.ColorPalette.methods.onChange.returns -> info on the return value

We can also look at the class hierarchy, and see what the superclass is for a class:

dijit.ColorPalette["extends"] -> dijit._Widget

The GI builder leverages the metadata module to provide access to the type information and descriptions of properties and methods (events) in the visual interface. The comprehensive and canonical information available in the API docs is fully exposed through the builder, and greatly enhances the integration level of the builder with GI for a comprehensive visual development experience.