Dojo Widgets in General Interface

General Interface Builder includes prototypes for a variety of Dojo widgets. These prototypes are available in the Dojo folder in the Component Libraries palette. Dojo widgets operate in the same way as other General Interface widgets and can be dragged and dropped onto the Builder canvas during application development. You can also configure Dojo widgets using the Properties Editor and Events Editor.

Dojo widget prototypes are not included in every binary distribution of General Interface. To use Dojo widgets in your application make sure you are using the source distribution of General Interface or a build that includes Dojo.

The following Dojo widgets are included with Builder and have been tested with General Interface.

• Button
• Check Box
• Color Palette
• Currency Text Box
• Date Text Box
• Editor
• Horizontal Slider
• Vertical Slider
• Number Spinner
• Progress Bar
• Rating
• Time Text Box

The General Interface class jsx3.gui.DojoWidget wraps native Dojo widget objects and provides a compatible API. The following example shows the vertical slider Dojo widget within a component file. Note how the object type is jsx3.gui.DojoWidget and the dijitClassName property is equal to the Dojo type.

<object type="jsx3.gui.DojoWidget">
 <variants jsxheight="200" jsxwidth="100"/>
 <strings dijitClassName="dijit.form.VerticalSlider" dijitvalue="17"/>
</object>

Dojo Widget Properties

The jsx3.gui.DojoWidget class acts as an adaptor between General Interface and the Dojo widget system. Each instance of DojoWidget introspects the properties of the Dojo class that it wraps and injects itself with accessor and mutator methods for each property.

For example, the Dojo class dijit.form.Button defines a label property, which is visible in Builder in the Properties Editor under the Dojo category when you select a Dojo button in the Component Hierarchy. The DojoWidget instance therefore defines the methods getLabel() and setLabel(). Note that these methods are not class method of DojoWidget but rather dynamic methods that are created and injected only into instances of DojoWidget that define a label property.

btnWidget.setLabel("My Button");

The attr() method is a generic getter and setter method for all Dojo properties so the previous example is equivalent to

btnWidget.attr("label", "My Button");

The dijit property of DojoWidget grants access to the native wrapped Dojo object. The following example is equivalent to the pervious example as well.

btnWidget.dijit.attr("label", "My Button");