Widget Name

dijit.Menu

Super Classes

File Location

dijit/Menu.js

Use dojo.require("dijit.Menu");

Usage

This class creates a widget containing a list of items that can be selected to trigger some function.

Display Examples

This figure shows a Menu widget containing MenuItem widgets, MenuSeparator widgets, and a PopupMenuItem widget containing a menu of its own. The widget was activated by right-clicking its parent <div>.

HTML Markup Examples

Create a new Menu widget containing a list of menu items with separators to group related items. Also include a pop-up menu with a submenu containing a couple of items.

<div dojoType="dijit.Menu" id="menu1"
   contextMenuForWindow="true">
   <div dojoType="dijit.MenuItem" >Enabled Item</div>
   <div dojoType="dijit.MenuItem" disabled="true">
      Disabled Item</div>
   <div dojoType="dijit.MenuSeparator"></div>
   <div dojoType="dijit.MenuItem"
      iconClass="dijitEditorIcon dijitEditorIconCut"
      onClick="action1()" label="Cut" disabled="true">
      Cut</div>
   <div dojoType="dijit.MenuItem"
      iconClass="dijitEditorIcon dijitEditorIconCopy"
      onClick="action2()">
      Copy</div>
   <div dojoType="dijit.MenuSeparator"></div>
   <div dojoType="dijit.PopupMenuItem">
      <span>Submenu Label</span>
      <div dojoType="dijit.Menu" id="submenu1">
           <div dojoType="dijit.MenuItem"
         onClick="subAction1">Submenu Item One</div>
<div dojoType="dijit.MenuItem"
     onClick="subAction2()">Submenu Item Two</div>
  </div>
</div>

Notice that some of the items are disabled using the attribute disabled="true".

Also notice the style="display: none;" attribute on the first Menu widget. This hides the menu of the initial view of the page. The user can make the menu appear by right-clicking anywhere on the page because of the contextMenuForWindow="true" attribute.

JavaScript Constructor Examples

The following code will create a Menu widget with two items.

  menu1 = new dijit.Menu(
     {targetNodeIds:["nodeId"], id:"menu1"});

  menu1.addChild(new dijit.MenuItem(
     {label:"Menu Item 1", onClick:menuAction1}));

  menu1.addChild(new dijit.MenuItem(
     {label:"Menu Item 2", onClick:menuAction2}));

Notice that the "nodeId" is the id for the DOM element that the menu will be attached to. This menu will be a context menu requiring the user to right-click the parent DOM node.

The functions menuAction1 and menuAction2 will be called when the user clicks each of the respective menu items.

Key Properties

Key Methods

Key Styles

Key Events

Notes

To close the menu, use the <esc> key.

Widget Name

dijit.Toolbar

Super Classes

File Location

dijit/Toolbar.js

Use dojo.require("dijit.Toolbar");

Usage

This class creates a widget that acts as container for buttons. This widget does not have explicit toolbar items but instead can use any widget as a toolbar item—although the most typical widget used is dijit.form.Button. The buttons can then be associated with actions such as the display of other widgets or the execution of functions. A typical use for this widget is to provide a horizontal display of command buttons that may appear either as text or icons. Toolbars often contain buttons that provide submenus, but the buttons may also execute commands directly.

Like in dijit.Menu, an additional widget, dijit.ToolbarSeparator, is supplied to visually separate groups of toolbar items.

Display Examples

This figure shows two examples of the Toolbar widget. The first contains buttons with text labels. The second contains a mix of buttons, some with icons and others with text. A number of predefined icons are available in the tundra theme in the directory “dojo/dijit/themes/tundra/images.” Notice also the use of the ToolbarSeparator to visually distinguish groups of related items.

HTML Markup Examples

Create a Toolbar widget with two menu items, the first of which uses an icon only and the second of which uses a text label.

<div id="toolbar1" dojoType="dijit.Toolbar">

    <div dojoType="dijit.form.Button" id="toolbar1.cut"
       iconClass="dijitEditorIcon dijitEditorIconCut"
       showLabel="false">Cut</div>
    <div dojoType="dijit.form.Button" id="toolbar1.paste">
       Paste</div>

</div>

Actions would need to be associated with the Button widgets so that some function is performed when the buttons are clicked.

JavaScript Constructor Examples

The following code will create a toolbar with two items.

      menu1 = new dijit.Toolbar({}, dojo.byId("d1"));

     menu1.addChild(new dijit.form.Button(
     {label:"Item1", onClick:menuAction1}));

     menu1.addChild(new dijit.form.Button(
     {label:"Item2", onClick:menuAction2}));

Key Properties

None

Key Methods

Key Styles

None

Key Events

None

Notes

None

Widget Name

dijit.Dialog

Super Classes

File Location

dijit/Dialog.js

Use dojo.require("dijit.Dialog");

Usage

This class creates a widget that displays a ContentPane as a modal dialog on top of the existing page. The page is deactivated; the user can’t click anywhere on the page except the dialog. The dialog can contain any content, including other widgets or forms. When the user completes the dialog, either by clicking the icon to clear the dialog or clicking a control that is provided in the dialog content, the widget vanishes, and the original page becomes active again. When the dialog is activated, it displays in the center of the page.

A really useful feature of this widget is the ability to load dynamic content from the server using the href property.

Display Examples

This figure shows examples of a dialog. Notice that the dialog box is active, but the page behind it has been “grayed out” to show that it is inactive. The icon in the upper right of the dialog can be used to hide it.

Note: There is a button showing on the left of the screen shot with a “Show Dialog” label. Although this is not a part of the dijit.Dialog widget, it is needed to show the widget. When the Dialog widget is created, it is not visible, and some control or process is needed to display it.

HTML Markup Examples

Create a Dialog widget with dynamic content coming from the server. A control will be provided to make the widget visible.

   <button dojoType="dijit.form.Button"
       onclick="dijit.byId('dialog1').show()">
       Show Dialog
   </button>

   <div id="dialog1" dojoType="dijit.Dialog" title="dijit.Dialog">
         <div>
         *** Content of Dialog Box ***
         </div>
         </div>

The following example also creates a Dialog widget, but in this case, the content is dynamically loaded from the server.

   <button dojoType="dijit.form.Button"
       onclick="dijit.byId('dialog2').show()">
       Show Dialog
   </button>

   <div id="dialog2"
        dojoType="dijit.Dialog"
        href="content.html"
        title="Dynamic Content">
   </div>

JavaScript Constructor Examples

The following code will create a Dialog with dynamic content retrieved from the server resource “content.jsp.”

   new dijit.Dialog({
      title: "Dialog",
      href: "content.jsp" });

The Dialog must be connected to the DOM and activated using its show() method.

Key Properties

Key Methods

Key Styles

Key Events

Notes

None

Widget Name

dijit.TooltipDialog

Super Classes

File Location

dijit/Dialog.js

Use dojo.require("dijit.Dialog");

Usage

This class creates a widget that displays a dialog that has the same appearance as a Tooltip. This dialog slightly differs from a dijit.Dialog in two primary ways. First, the dialog is not a model; the user can click on the page behind the dialog, which causes the dialog to be hidden. Secondly, the dialog contains a marker pointing to the widget that it is associated with. Regular dijit.Dialog widgets display in the center of the page, but a TooltipDialog will appear next to the widget it is associated with.

This widget is used to capture additional information for a Toolbar command by providing a form. When used this way, the widget will be hidden when the form is submitted.

Display Examples

This figure shows the widget after it has been activated by clicking the button labeled “Show Tooltip Dialog.” Notice that the widget appears next to the button with an arrow pointing to the button. The Tooltip will be automatically oriented.

HTML Markup Examples

Create a TooltipDialog associated with a button control. When the user clicks the button, the Tooltip will appear.

   <div dojoType="dijit.form.DropDownButton">
          <span>Show Tooltip Dialog</span>
          <div id="dialog1"
             dojoType="dijit.TooltipDialog" title="Tooltip">
             <div>
             *** Content of TooltipDialog box ***
             </div>
          </div>
   </div>

Note: The content could be retrieved dynamically from the server. The content is often a form that requests additional parameters for the command.

JavaScript Constructor Examples

This widget would normally be created through HTML markup.

Key Properties

None

Key Methods

None

Key Styles

None

Key Events

None

Notes

None

Widget Name

dijit.Tooltip

Super Classes

File Location

dijit/Tooltip.js

Use dojo.require("dijit.Tooltip");

Usage

This class creates a widget that displays a pop-up message next to a field. The message appears automatically when the field receives focus and will disappear when focus is gone. The widget displays on top of any underlying page elements. This widget is similar to a TooltipDialog except that this widget is best used for a brief helpful display of text or HTML, while the TooltipDialog can be used to be more interactive, displaying a form for additional data entry or even displaying other widgets.

This widget acts as a more powerful replacement for the title attribute available in HTML.

Display Examples

This figure shows the Tooltip widget appearing as the field receives focus.

HTML Markup Examples

Create a Tooltip widget and associate it with an existing field.

    <span dojoType="dijit.Tooltip" connectId="field1">
    *** Tooltip content ***
    </span>

The preceding code assumes the existence of a form field with an id of “field1”.

JavaScript Constructor Examples

The following code will create a Tooltip.

       new dijit.Tooltip({
          connectId:["id3"],
          label:" *** content ***"});

Key Properties

Key Methods

None

Key Styles

Key Events

None

Notes

None

Widget Name

dijit.ProgressBar

Super Classes

File Location

dijit/ProgressBar.js

Use dojo.require("dijit.ProgressBar");

Usage

This class creates a widget that displays the completion state a process using a horizontal bar. This widget only displays the status unlike the Slider, which can be used as a control to change the status measurement. Also this widget can be displayed only horizontally. The progress is updated programmatically by this widget’s update() function.

Display Examples

This figure shows a progress bar. Notice that there is a darker area within the progress bar representing the completion status. It takes up 10% of the space on the progress bar, which is equal to the number displayed in the center of the bar.

HTML Markup Examples

Create a ProgressBar widget.

   <div
      dojoType="dijit.ProgressBar"
      maximum="100"
      progress="10"
      id="bar1">
   </div>

JavaScript Constructor Examples

The following code will create a ProgressBar widget.

   new dijit.ProgressBar({
       annotate:"true",
       maximum:"50",
       progress:"35"},
       dojo.byId("d1"))

Key Properties

Key Methods

Key Styles

None

Key Events

None

Notes

None

Widget Name

dijit.ColorPalette

Super Classes

File Location

dijit/ColorPalette.js

Use dojo.require("dijit.ColorPalette");

Usage

This class creates a widget that displays a grid containing a selection of colors, one of which may be selected by the user. There are two built-in palettes available, the 7 × 10 and the 3 × 4. The specific colors are also built into the palette. After the user selects a color, the value of the widget is set to the RGB value of the selected color.

Display Examples

This figure shows the 7 × 10 version of the widget.

HTML Markup Examples

Create a ColorPalette widget.

   <div dojoType="dijit.ColorPalette"
          palette="3x4" />

JavaScript Constructor Examples

The following code will create a ColorPalette.

   new dijit.ColorPalette({palette:"7x10"}, dojo.byId("d1"))

Key Properties

Key Methods

None

Key Styles

None

Key Events

Notes

None

Widget Name

dijit.Tree

Super Classes

File Location

dijit/Tree.js

Use dojo.require("dijit.Tree");

Usage

This class creates a widget that displays a collapsible and expandable outline structure. Nodes in the tree can be clicked to trigger some action. Also when nodes are expanded, their content can be dynamically loaded from the server.

It is possible to build trees programmatically or through HTML, but the simplest technique is to use a Dojo data store, which can be directly associated with the widget and populates the widget automatically.

It is also possible to enable a drag and drop mode so that tree items can be moved from one parent item to another.

Display Examples

This figure shows fully expanded Tree widget with a number of levels. Although this example shows text for each tree node, it is also possible to add an icon.

HTML Markup Examples

Create a Tree widget from a Dojo data store.

       <div dojoType="dojo.data.ItemFileReadStore"
          jsId="treeStore"
          url="tree.json"></div>

       <div dojoType="dijit.Tree"
            store="treeStore"
            query="{type:'category'}"
            label="Rocks">

Note: Following is an example of the original JSON content of the data store corresponding to the Display Example.

{ label: 'name',
  identifier: 'name',
  items: [
    { name:'Igneous', type:'category'},
    { name:'Metamorphic',
      type: 'category',
      children: [
         { name:'Slate', type:'subtype' },
         { name:'Gneiss', type:'subtype' },
         { name:'Quartzite', type:'subtype' }
      ]
    },
    { name:'Sedimentary', type: 'category'}
  ]
}

JavaScript Constructor Examples

The programmatic construction of this widget is beyond the scope of this book. See the Dojo documentation on the web site for more details.

Key Properties

The following table describes properties for tree nodes themselves which are of class dijit._TreeNode, which is an internal Dojo function.

Key Methods

None

Key Styles

Key Events

Notes

Tree is a collection of _TreeNodes with the Tree itself being a sub class of tree node.

Widget Name

dijit.form.Slider

Super Classes

File Location

dijit/form/Slider.js

Use dojo.require("dijit.form.Slider");

Usage

This class creates a horizontal or vertical bar with a slider that can be moved by the user to select a specific value. The slider bar can have hash marks on either side that are labeled.

Display Examples

This slider has hash marks and labels both above and below the bar.

HTML Markup Examples

Create a Slider widget.

   <div dojoType="dijit.form.HorizontalSlider" name="horizontal1"
          value="10"
          maximum="100"
          minimum="0"
          pageIncrement="100"
          showButtons="false"
          intermediateChanges="true"
          id="slider1"
   >

      <ol dojoType="dijit.form.HorizontalRuleLabels"
            container="topDecoration"
            style="height:1.2em;font-size:75%;color:gray;"
            count="6" numericMargin="1">
        </ol>

        <div dojoType="dijit.form.HorizontalRule"
           container="topDecoration" count=6 style="height:5px;">
        </div>

   </div>

Note: This example places hash marks only on top of the slider bar. It is also possible to place labeled hash marks below the bar using the same technique.

JavaScript Constructor Examples

Because of the number of components of this widget, it is more typical to create it using HTML than to create it programmatically.

Key Properties

The following table contains properties for either the HorizontalRule or the VerticalRule. These are the hash marks that appear to either side of the slider bar.

The following table contains properties for either the HorizontalRuleLabels or the VerticalRuleLabels. These are the labels that appear on the hash marks on either side of the slider bar.

Key Methods

Key Styles

None

Key Events

None

Notes

None

Widget Name

dijit.form.NumberSpinner

Super Classes

File Location

dijit/form/NumberSpinner.js

Use dojo.require("dijit.form.NumberSpinner");

Usage

This class creates a text box for numbers that contains a control that allows the user to change the value by clicking the control. The control consists of an up arrow and down arrow icon. Clicking the up arrow increases the value, and clicking the down arrow decreases the value.

This is superior to a regular NumberTextBox because it is easier for the user to make small changes to the value. Also when the controls are held down, the speed of the change in the value increases.

Display Examples

The user can increment or decrement the value by clicking the up or down arrow icons.

HTML Markup Examples

Create a NumberSpinner widget.

<input
   dojoType="dijit.form.NumberSpinner"
   value="900"
   constraints="{max:1550,places:0}"
   name="integerspinner1"
   id="integerspinner1">

Note: This widget is inherits the constraints property.

JavaScript Constructor Examples

The following code will create a Tooltip.

Key Properties

Key Methods

None

Key Styles

None

Key Events

None

Notes

This widget is a subclass dijit.form.NumberTextBox, so it inherits all the validation properties of that type. For simplicity, most of those properties have not been shown in this example.

Widget Name

dijit.InlineEditBox

Super Classes

File Location

dijit/InlineEditBox.js

Use dojo.require("dijit.InlineEditBox");

Usage

This class creates a widget that allows displayed text to be converted into a text box so that it can be edited by the user.

Display Examples

This screen shot shows the widget in operation. The first line, “My hobby is running,” appears as normal displayed text. The second line shows the text as highlighted when the mouse passes over it. The third line shows the text box that appears when the editable text is clicked.

HTML Markup Examples

Create a InlineEditBox widget.

   <span
      dojoType="dijit.InlineEditBox"
      editor="dijit.form.TextBox"
      width="100px" title="hobby"
      style="border-bottom: 1px dashed blue;"
  >
      running
  </span>

Note: In this widget, the editable text is underlined with a blue dashed line to indicate that it is editable.

JavaScript Constructor Examples

This widget is normally created using HTML.

Key Properties

Key Methods

Key Styles

None

Key Events

Notes

Use a style attribute to emphasize the editable word.

Widget Name

dijit.form.Textarea

Super Classes

File Location

dijit/form/Textarea.js

Use dojo.require("dijit.form.TextArea");

Usage

This class creates a widget that replaces the standard HTML <textarea> tag, which allows multi-line input. One of its primary advantages is that it automatically resizes itself when the amount of text changes rather than displaying scroll bars as the standard <textarea> tag does.

Display Examples

This figure shows the widget with some lines of content. If the content extended beyond the boundaries of the widget, the size of the widget would change automatically.

HTML Markup Examples

Create a Textarea widget.

    <textarea dojoType="dijit.form.Textarea" name="textArea1">
       This is the content of the text area.
    </textarea>

JavaScript Constructor Examples

This widget is normally created with HTML.

Key Properties

None

Key Methods

None

Key Styles

None

Key Events

None

Notes

Use the <textarea> tag for this widget.

The standard attributes for specifying the size of the text area in HTML are “cols” and “rows” corresponding to the number of columns and rows. Do not use these attributes when using dijit.form.Textarea. Instead, specify the size of the widget using the style properties “width” and “height.”

Widget Name

dijit.Editor

Super Classes

File Location

dijit/Editor.js

Use dojo.require("dijit.Editor");

Usage

This class creates a widget that acts as a rich text editor allowing multi-line text with sophisticated editing options. This is a replacement for the standard HTML <textarea> tag when additional formatting options are required. Formatting commands and options are available in a customizable toolbar.

Display Examples

This figure shows the Editor widget. Notice the editing commands in the toolbar.

HTML Markup Examples

Create an Editor widget.

   <textarea dojoType="dijit.Editor"
      id="edit1"
      height="110px"
   >
   Content for the text area.
   </textarea>

JavaScript Constructor Examples

The programmatic construction of this widget is beyond the scope of this book. See the Dojo documentation on the web site for more details.

Key Properties

Key Methods

None

Key Styles

None

Key Events

None

Notes

None