Toolbar

Submitted by simonjb on Tue, 05/29/2007 - 00:13.

Just as dijit.Menu is a container for dijit.MenuItem's, so dijit.Toolbar is a container for buttons. Any button-based Dijit component can be placed on the toolbar, including ComboButtons and DropdownButtons.

Example

In this example, we borrow some of the toolbar buttons from the Editor

Cut

Copy

Paste

Bold

<html>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<head>

    <style type="text/css">

        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";

        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"

    </style>

    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js" 

        djConfig="parseOnLoad: true"></script>

    <script type="text/javascript">

       dojo.require("dojo.parser");

       dojo.require("dijit.form.Button");

       dojo.require("dijit.Toolbar");

       function bold() { console.debug("Bold!"); }

       function cut() { console.debug("Cut!"); }

       function copy() { console.debug("Copy!"); }

       function paste() { console.debug("Paste!"); }

       dojo.addOnLoad(function() {

           dojo.connect(dojo.byId("toolbar1.bold"),"onclick",bold);

           dojo.connect(dojo.byId("toolbar1.cut"),"onclick",cut);

           dojo.connect(dojo.byId("toolbar1.copy"),"onclick",copy);

           dojo.connect(dojo.byId("toolbar1.paste"),"onclick",paste);

       });

     </script>

</head>

<body class="tundra">

    <!-- Tags end on line afterwards to eliminate any whitespace -->

    <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.copy" iconClass="dijitEditorIcon dijitEditorIconCopy" 

            showLabel="false">Copy</div

        ><div dojoType="dijit.form.Button" id="toolbar1.paste" iconClass="dijitEditorIcon dijitEditorIconPaste" 

            showLabel="false">Paste</div

        ><!-- The following adds a line between toolbar sections

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

         ><div dojoType="dijit.form.ToggleButton" id="toolbar1.bold" 

            iconClass="dijitEditorIcon dijitEditorIconBold" showLabel="false">Bold</div>

   </div>

</body></html>

Where do the icons come from? The theme defines one large image with all the buttons. Tundra's editor button image looks like the following:

The particular icon is selected using the attribute "iconClass". The Cut button with class "dijitEditorIconCut" has the following definition in Tundra.css:

.tundra .dijitEditorIcon

/* All of the selectors for the icons go here */

{

        background-image: url('images/editor.gif'); /* mega-image */

        background-repeat: no-repeat; 

        width: 18px;

        height: 18px;

        text-align: center;

}

.tundra .dijitEditorIconCut { background-position: -108px; }

The Cut icon starts 108 px from the right edge, and measures 18px by 18px. 108 equals 6 * 18, so it's the 6th image from the right. You can define your own buttons by setting up CSS selectors using code similar to the follwing, and wire up the iconClass.

dijit.Toolbar Toolbar, which can be filled with ComboButton and DropDownButton instances
Methods
Methods
addChild(/Widget/ child, /Integer?/ insertIndex)	Process the given child widget, inserting its dom node as a child of our dom node
Widget[] getChildren()	returns array of children widgets
removeChild(/Widget/ page)	removes the passed widget instance from this widget but does not destroy it

Accessibility (applies to version 1.0 of Toolbar)

Keyboard

Action	Key
Move focus between widgets in the toolbar	Left and right arrow keys

Known Issues (updatd for 1.0 - toggle buttons did not display in high contrst mode in 0.9)

In hign contrast mode when a toggle button is checked an html entity charcter (✓) is displayed since the CSS background image icon for the checked state is no longer visible. When the toggle button is part of a toolbar the checkmark character does not display properly in IE6. In IE6 with high contrast mode turned on, a checked toggle button in a toolbar displays as two vertical bars rather than the checkmark character.

Programmatic Toolbar creation/

Submitted by sjs on Mon, 11/12/2007 - 22:45.

Can someone provide code on how to create a toolbar in javascript?
With 0.9.0 I've been able to create a toolbar object that firefox will accept (IE bombs) however it doesn't work in 1.0.0
In 0.9.0 this works with firefox
parentNode = dojo.byId('barParent');
var barDiv = document.createElement ("div");
var attachedBarDiv = parentNode.appendChild(barDiv);
var adBar = dijit.Toolbar ({},attachedBarDiv);

Shouldn't this be as simple as? (It evidentially isn't so don't try this in your code)
var adBar = dijit.Toolbar();
if (parentNode.addChild){parentNode.addChild(adBar);}
else{parentNode.appendChild(adBar);};

Is it CDN?

Submitted by criecke on Fri, 11/16/2007 - 02:54.

If you're using AOL CDN, you need to pop it in a dojo.addOnload() like this:

dojo.addOnLoad(function() {
   parentNode = dojo.byId('barParent');
   var barDiv = document.createElement ("div");
   var attachedBarDiv = parentNode.appendChild(barDiv);
   var adBar = new dijit.Toolbar ({},attachedBarDiv);
});

Or the slimmer:

dojo.addOnLoad(function() {
   adBar = new dijit.Toolbar ({});
   dojo.place(adBar.domNode, dojo.byId('barParent'), "first");

});

A Dijit component is not a DOM node, which is why your second example won't work. But a Dijit contains a DOM node, which you get with sdBar.domNode.

Search

The Book of Dojo