Adding Dojo widgets to web pages

You can populate your pages with Dojo widgets by dragging and dropping Dojo elements from the palette view onto the web page or by using content help on the web page Source pane.

Procedure

  1. In Enterprise Explorer, double-click the web page to open the file in the editor.
  2. Open the Palette (Window > Show View > Palette).
  3. Drag components from the different Dojo drawers in the Palette. As an example, form or layout objects.
  4. When you are finished adding Dojo widgets to your web page, press CTRL+S to save your changes.
  5. The Dojo widget is displayed in the Design pane. Some Dojo widgets are represented by a Dojo icon.
    Dojo icon
    Restriction: When a Dojo widget is dragged and dropped onto the Design pane, it is positioned at the side of the page because the margins are set to zero for the body element in dojo.css. The handle is not visible, which makes absolute positioning difficult. To work around this problem, press Alt and then drag the widget initially to move it. Pressing the Alt key while you are dragging the widget makes the absolute positioning handle visible.
    Note: If Dojo is accessed from a remote URL, some Dojo widgets do not visualize properly in the Design pane, but they display in the Preview pane.

Results

In the Source view, you can see that within the <head> tag, script tags are added to include the Dojo bootstrap and a dojo.requires statement for the element, and CSS styles for the widget. The Source view supports the auto-completion of Dojo tags.

Attributes for the Dojo components can be configured in the Properties view (Window > Show View > Properties).

Detailed information on each type of widget is available at http://docs.dojocampus.org.

Icon that indicates the type of topic Task topic
Timestamp icon Last updated: July 17, 2017 21:58

File name: tdojopalette.html