Previous topic

Widget Constructors

Next topic

Model Controls

Declarative Method

You can define the SDK widgets directly in screen’s HTML layout.

In this document:

Usage

In the tag to be substituted by a widget, you need to specify the widget module name as a value of the dojoType or data-dojo-type attribute. The widget properties are specified in the data-dojo-props attribute.

You may define some properties in innerHTML of the tag. This depends on the implementation of a specific widget, (see API documentation).

A hierarchy of widgets is built by a hierarchy of tags. In this case, all widgets specified as children of a widget that cannot have child widgets will be ignored during substitution and their declarations will be destroyed.

To place widgets in accordance with the specified layout, you need to call the parse() method of the dojo/parser module. The method may accept a DOM node that you need to substitute with a widget as an argument. If you do not specify the argument, substitution is performed in the entire body tag of the current screen.

When using the declarative syntax, you do not need to perform additional declaration of the widget modules being used.

Declarative syntax is convenient when there is a complex layout of widgets on the screen. Container widgets of the SDK provide easy implementation for most ways of placing widgets on the screen.

Examples

Simple Call

require(["dojo/parser", "aps/ready!"],
   function(parser){
      parser.parse();
});

<div dojoType="aps/CheckBox" title="decCheckBox" data-dojo-props="value: 'helloHTML'">
</div>

Hierarchy of Widgets

require(["dojo/parser", "aps/ready!"],
   function(parser){
      parser.parse();
});

<fieldset dojoType="aps/FieldSet" title="Declarative example">
   <div dojoType="aps/CheckBox" title="decCheckBox" data-dojo-props="value: 'helloHTML'">
   </div>
</fieldset>

The CheckBox widget will be located inside the FieldSet widget.

Substitution of Single Node

require(["dojo/parser", "aps/ready!"],
   function(parser){
      parser.parse(dojo.byId("targetNode"));
});

<body>
   <div dojoType="aps/CheckBox" title="decCheckBox" data-dojo-props="value: 'helloHTML'">
   </div>
   <div id="targetNode">
      <fieldset dojoType="aps/FieldSet" title="Declarative example">
        <div dojoType="aps/CheckBox" title="decCheckBox" data-dojo-props="value: 'helloHTML'">
        </div>
      </fieldset>
   </div>
</body>

Only the FieldSet widget and the CheckBox widget inside it will be substituted. The stand-alone CheckBox widget will not be substituted.