Toolbar

The Toolbar is another familiar control that abbreviates the common task of providing a collection of common commands to the user. In short, the Toolbar does nothing more than house a collection of Button dijits, which when styled appropriately, can be very aesthetically pleasing. The various prepackaged themes that come with Dijit contain classes for many of the common operations such as cut/paste, bold/italic, etc., which you can provide through Button 's iconClass attribute.

The following listing illustrates placing a Toolbar on the page and then systematically wires up each of its buttons to a custom event handler.

Tip

This particular example attempts to automate the methodology for hooking up buttons and custom handlers. Note that the peculiarity of connecting to x.parentNode inside of the forEach block instead of just connecting to x is related to the way that Button is implemented. As it turns out, the icon overlay is what contains an icon node that actually receives the click; you could have debugged this by inspecting with Firebug.

<html>
    <head>
        <title>Fun with Toolbar!</title>

        <link rel="stylesheet" type="text/css"
          href="http://o.aolcdn.com/dojo/1.1/dojo/resources/dojo.css" />
        <link rel="stylesheet" type="text/css"
          href="http://o.aolcdn.com/dojo/1.1/dijit/themes/tundra/tundra.css" />

        <script
            type="text/javascript"
            src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"
            djConfig="parseOnLoad:true,isDebug:true">
        </script>

        <script type="text/javascript">
            dojo.require("dojo.parser");
            dojo.require("dijit.Toolbar");
            dojo.require("dijit.form.Button");

            dojo.addOnLoad(function(  ) {
                var bold = function(  ) {console.log("bold");}
                var italic= function(  ) {console.log("italic");}
                var underline = function(  ) {console.log("underline");}
                var superscript = function(  ) {console.log("superscript");}
                var subscript = function(  ) {console.log("subscript");}

                dojo.query(".dijitEditorIcon").forEach(function(x) {
                        if (dojo.hasClass(x, "dijitEditorIconBold"))
                            dojo.connect(x.parentNode, "onclick", bold);
                        else if (dojo.hasClass(x, "dijitEditorIconItalic"))
                            dojo.connect(x.parentNode, "onclick", italic);
                        else if (dojo.hasClass(x, "dijitEditorIconUnderline"))
                            dojo.connect(x.parentNode, "onclick", underline);
                        else if (dojo.hasClass(x, "dijitEditorIconSubscript"))
                            dojo.connect(x.parentNode, "onclick", superscript);
                        else if (dojo.hasClass(x, "dijitEditorIconSuperscript"))
                            dojo.connect(x.parentNode, "onclick", subscript);
                });
            });
        </script>
    </head>
    <body style="padding:100px" class="tundra">
        <div dojoType="dijit.Toolbar" style="width:175px">
            <button dojoType="dijit.form.Button"
               iconClass="dijitEditorIcon dijitEditorIconBold" ></button>
            <button dojoType="dijit.form.Button"
               iconClass="dijitEditorIcon dijitEditorIconItalic" ></button>
            <button dojoType="dijit.form.Button"
               iconClass="dijitEditorIcon dijitEditorIconUnderline" ></button>

            <span dojoType="dijit.ToolbarSeparator"></span>

            <button dojoType="dijit.form.Button"
               iconClass="dijitEditorIcon dijitEditorIconSubscript"></button>
            <button dojoType="dijit.form.Button"
               iconClass="dijitEditorIcon dijitEditorIconSuperscript"></button>
        </div>
    </body>
</html>

As a point of interest, Dijit themes currently define the following self-descriptive Editor-related icons (defined in the theme's stylesheet) that may be contained in Toolbar. (Editor is discussed at length in an upcoming section.)

Toolbar has a simple API, shown in Table 15-5, which is representative of a descendant of _Container.

Table 15-5. Toolbar API

Name

Type

Comment

addChild(/*Object*/ child, /*Integer?*/ insertIndex)

Function

Used to insert a dijit into the Toolbar.

getChildren( )

Function

Returns an array of the contained dijits in the Toolbar.

removeChild(/*Object*/ child)

Function

Used to remove a child from the Toolbar (removes its domNode, but does not destroy the dijit; you must call destroyRecursive() manually).

Get Dojo: The Definitive Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial