Navigating the Dojo API Tool

There are several different methods of navigating through the object structure of the Dojo Toolkit:

  • Use the namespace list (to the left). The simplest method would be to use the list of namespaces defined by the Dojo Toolkit, on the left side of every page.
  • Drill-down from where you are. The API Tool was designed to give you as much information via drill-down as possible. Everything defined in an object can be clicked on, for more information.
  • Use the search. At the top of the namespace list to the left is a search box; type in the terms you are looking for, and you will be taken to a result page that spans the entire toolkit.
Move to different sections

In addition, objects with large numbers of contained types have a simple way of jumping to sections on a page; simply look at the right side of any heading, and you will see a set of quick navigation icons. Clicking a type icon will take you to that section; clicking the up arrow icon will return you to the top of the page.

Inherited and private members

Show or hide variable types

The Dojo API Tool will show the full ancestry of an object's members (including how that member was defined and whether or not it overrides an original). By default, all members of an object that are inherited are shown with the object's API listing, and all private members are hidden.

To toggle either inherited or private members, look just beneath the breadcrumb bar (above the name of the object you are viewing) and click the appropriate link.

Switching styles

Choose a style

The Dojo API Tool was designed with several themes in mind; we know that some people prefer light on dark, while others might prefer dark on light. With this in mind, two themes (Noir and Blanc) are currently available, with more on the way.

To switch visual styles, click on the theme you want to use, near the top right corner of the page. The API Tool will remember which style you prefer and automatically load that theme on subsequent visits.

Key/Legend

Namespace Namespaces
A namespace in Dojo parlance is an object/property bag that can contain almost anything: constructors, methods, properties, etc. Usually is expressly defined to serve a particular purpose; for example, dojo.date.locale is a namespace defined to deal with locale-specific date handling.
Constructor Constructors
A constructor is a function designed to create instances of objects. With the Dojo Toolkit, there are two ways of creating constructors: the "old school" way (i.e. defining a function with the this keyword in the body) or using dojo.declare.
Singleton Singletons
A singleton is a constructor that is defined and then immediately executed so that only one instance may ever exist during an application's lifetime. Usually this is done to capture some information in the environment, or to ensure a set of private variables that cannot be accessed from outside of the declaration. Examples include dojox.encoding.crypto.Blowfish.

Data Types

Array Array
Arrays are ordered lists, native to Javascript.
Boolean Boolean
Native data type representing a simple "true/false" value.
Date Date
Native Javascript data type to handle common date and time representations.
DOMNode Node
An object that represents any kind of element being referenced/used by Javascript code. Note that the type of element is not dictated by this data type; only that it is a node of some sort.
Error Error
A special, native Javascript object used to indicate an error in code. Can be subclassed and used in conjunction with the throw statement, i.e. throw new MySubError(...);
Function Function
Functions/methods are pieces of invocable code; in JavaScript, they are also considered data and can be passed around like any other object.
Number Number
A Number object is used to represent any kind of numeric value; note that Javascript does not guarentee the actual underlying datatype (though the most common is a 64-bit float).
Object Object
Objects are the base data type of Javascript. With the Dojo API Tool, a type that cannot be determined is usually marked with this icon, in addition to straight objects.
Regular Expression RegExp (Regular Expression)
A regular expression is an object used for fast string search and parsing.
String String
A string is any sequence of characters.

Input formats

  • Filtered HTML:
    • Web page addresses and e-mail addresses turn into links automatically.
    • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>

      This site allows HTML content. While learning all of HTML may feel intimidating, learning how to use a very small number of the most basic HTML "tags" is very easy.

      For more information see W3C's HTML Specifications or use your favorite search engine to find other sites that explain HTML.

      Most unusual characters can be directly entered without any problems.

      If you do encounter problems, try using HTML character entities. A common example looks like &amp; for an ampersand & character. For a full list of entities see HTML's entities page.

    • Lines and paragraphs are automatically recognized. The <br /> line break, <p> paragraph and </p> close paragraph tags are inserted automatically. If paragraphs are not recognized simply add a couple blank lines.
  • PHP code:
    • Using custom PHP code

      If you know how to script in PHP, Drupal gives you the power to embed any script you like. It will be executed when the page is viewed and dynamically embedded into the page. This gives you amazing flexibility and power, but of course with that comes danger and insecurity if you do not write good code. If you are not familiar with PHP, SQL or with the site engine, avoid experimenting with PHP because you can corrupt your database or render your site insecure or even unusable! If you do not plan to do fancy stuff with your content then you are probably better off with straight HTML.

      Remember that the code within each PHP item must be valid PHP code - including things like correctly terminating statements with a semicolon. It is highly recommended that you develop your code separately using a simple test script on top of a test database before migrating to your production environment.

      Notes:

      • You can use global variables, such as configuration parameters, within the scope of your PHP code but remember that global variables which have been given values in your code will retain these values in the engine afterwards.
      • register_globals is now set to off by default. If you need form information you need to get it from the "superglobals" $_POST, $_GET, etc.
      • You can either use the print or return statement to output the actual content for your item.

      A basic example:

      You want to have a box with the title "Welcome" that you use to greet your visitors. The content for this box could be created by going:

      print t("Welcome visitor, ... welcome message goes here ...");
      								

      If we are however dealing with a registered user, we can customize the message by using:

      global $user;
      if ($user->uid) {
      	print t("Welcome $user->name, ... welcome message goes here ...");
      }
      else {
      	print t("Welcome visitor, ... welcome message goes here ...");
      }
      								

      For more in-depth examples, we recommend that you check the existing Drupal code and use it as a starting point, especially for sidebar boxes.

  • Full HTML:
    • Web page addresses and e-mail addresses turn into links automatically.
    • Lines and paragraphs are automatically recognized. The <br /> line break, <p> paragraph and </p> close paragraph tags are inserted automatically. If paragraphs are not recognized simply add a couple blank lines.
  • Markdown:
    • Quick Tips:
      • Two or more spaces at a line's end = Line break
      • Double returns = Paragraph
      • *Single asterisks* or _single underscores_ = Emphasis
      • **Double** or __double__ = Strong
      • This is [a link](http://the.link.com "The optional title text")
      For complete details on the Markdown syntax, see the Markdown documentation.
  Login Register Help
API Documentation
Choose a stylesheet:

Namespacedijit

Jump to PropertiesJump to FunctionsJump to ConstructorsNamespacesBack to top

Home of the official dijit demo code
Form and input related widgets
Layout related widgets
This class is used to show/hide widgets as popups.
These functions are used to repetitively call a user specified callback method when a specific key or mouse click over a specific DOM node is held down for a specific amount of time. Only 1 such event is allowed to occur on the browser page at 1 time.
cache of iframes

Jump to PropertiesJump to FunctionsJump to NamespacesConstructorsBack to top

For IE z-index schenanigans. id attribute is required.
Constructordijit.ColorPalette(params: Object?, srcNodeRef: DomNode|String)
A keyboard accessible color-picking widget
Constructordijit.Declaration(params: Object?, srcNodeRef: DomNode|String)
The Declaration widget allows a user to declare new widget classes directly from a snippet of markup.
Constructordijit.Dialog(params: Object?, srcNodeRef: DomNode|String)
A modal dialog Widget
Constructordijit.DialogUnderlay(params: Object?, srcNodeRef: DomNode|String)
The component that grays out the screen behind the dialog Template has two divs; outer div is used for fade-in/fade-out, and also to hold background iframe. Inner div has opacity specified in CSS file.
A rich-text Editing widget
Constructordijit.InlineEditBox(params: Object?, srcNodeRef: DomNode|String)
An element with in-line edit capabilitites
A context menu you can assign to multiple elements
Constructordijit.MenuItem(params: Object?, srcNodeRef: DomNode|String)
A line item in a Menu Widget
Constructordijit.MenuSeparator(params: Object?, srcNodeRef: DomNode|String)
A line between two menu items
Constructordijit.PopupMenuItem(params: Object?, srcNodeRef: DomNode|String)
Constructordijit.ProgressBar(params: Object?, srcNodeRef: DomNode|String)
A progress indication widget
Constructordijit.TitlePane(params: Object?, srcNodeRef: DomNode|String)
A pane with a title on top, that can be opened or collapsed.
Constructordijit.Toolbar(params: Object?, srcNodeRef: DomNode|String)
A Toolbar widget, used to hold things like dijit.Editor buttons
A spacer between two Toolbar items
Constructordijit.Tooltip(params: Object?, srcNodeRef: DomNode|String)
Pops up a tooltip (a help message) when you hover over a node.
Constructordijit.TooltipDialog(params: Object?, srcNodeRef: DomNode|String)
Pops up a dialog that appears like a Tooltip
Constructordijit.Tree(params: Object?, srcNodeRef: DomNode|String)
This widget displays hierarchical data from a store. A query is specified to get the "top level children" from a data store, and then those items are queried for their children and so on (but lazily, as the user clicks the expand node). Thus in the default mode of operation this widget is technically a forest, not a tree, in that there can be multiple "top level children". However, if you specify label, then a special top level node (not corresponding to any item in the datastore) is created, to father all the top level children.
A set of widgets indexed by id
Constructordijit._Calendar(params: Object?, srcNodeRef: DomNode|String)
A simple GUI for choosing a date in the context of a monthly calendar.
Mixin for widgets that are children of a container widget
Mixin for widgets that contain a list of children.
Constructordijit._InlineEditor(params: Object?, srcNodeRef: DomNode|String)
internal widget used by InlineEditBox, displayed when in editing mode to display the editor and maybe save/cancel buttons. Calling code should connect to save/cancel methods to detect when editing is finished Has mainly the same parameters as InlineEditBox, plus these values: style: Object Set of CSS attributes of display node, to replicate in editor value: String Value as an HTML string or plain text string, depending on renderAsHTML flag
Constructordijit._MasterTooltip(params: Object?, srcNodeRef: DomNode|String)
Internal widget that holds the actual tooltip markup, which occurs once per page. Called by Tooltip widgets which are just containers to hold the markup
Mixin for widgets that are instantiated from a template
Constructordijit._TimePicker(params: Object?, srcNodeRef: DomNode|String)
A graphical time picker. This widget is used internally by other widgets and is not accessible as a standalone widget.
Constructordijit._TreeNode(params: Object?, srcNodeRef: DomNode|String)
Single node within a tree
Constructordijit._Widget(params: Object?, srcNodeRef: DomNode|String)
The foundation of dijit widgets.

Jump to PropertiesJump to ConstructorsJump to NamespacesFunctionsBack to top

Returns a widget by its id, or if passed a widget, no-op (like dojo.byId())
Returns the widget as referenced by node
Sets the focused node and the selection according to argument. To set focus to an iframe’s content, pass in the iframe itself.
Retrieves a bookmark that can be used with moveToBookmark to return to the same range
Get window object associated with document doc
Returns the widget whose dom tree contains node or null if the node is not contained within the dom tree of any widget
Finds the descendant of the specified root node that is first in the tabbing order
Functiondijit.getFocus(menu, openedForWindow: Window?)
Returns the current focus and selection. Called when a popup appears (either a top level menu or a dialog), or when a toolbar/menubar receives focus
Finds the descendant of the specified root node that is last in the tabbing order
Generates a unique id for a given widgetType
Returns the dimensions and scroll position of the viewable area of a browser window
Gets the role for an element.
Functiondijit.getWaiState(elem, state: String)
Gets the value of a state on an element.
Determines if an element has a role.
Functiondijit.hasWaiState(elem, state: String)
Determines if an element has a given state.
Functiondijit.hideTooltip(aroundNode)
hide the tooltip
tests whether the current selection is empty
Tests if an element is tab-navigable
Moves current selection to a bookmark
Functiondijit.placeOnScreen(node: DomNode, pos: Object, corners: Object, tryOnly: Boolean?)
Keeps ‘node’ in the visible area of the screen while trying to place closest to pos.x, pos.y. The input coordinates are expected to be the desired document position. Set which corner(s) you want to bind to, such as placeOnScreen(node, {x: 10, y: 20}, ["TR", "BL"]) The desired x/y will be treated as the topleft(TL)/topright(TR) or BottomLeft(BL)/BottomRight(BR) corner of the node. Each corner is tested and if a perfect match is found, it will be used. Otherwise, it goes through all of the specified corners, and choose the most appropriate one. NOTE: node is assumed to be absolutely or relatively positioned.
Functiondijit.placeOnScreenAroundElement(node: DomNode, aroundNode: DomNode, aroundCorners: Object, layoutNode: Function)
Functiondijit.registerWin(targetWindow: Window?)
Registers listeners on the specified window (either the main window or an iframe) to detect when the user has clicked somewhere. Anyone that creates an iframe should call this function.
Removes the role from an element.
Removes a state from an element.
Scroll the passed node into view, if it is not.
Functiondijit.selectInputText(element: DomNode, start: Number?, stop: Number?)
Select text in the input element argument, from start (default 0), to stop (default end).
Functiondijit.setWaiRole(elem, role: String)
Sets the role on an element.
Functiondijit.setWaiState(elem, state: String, value: String)
Sets a state on an element.
Functiondijit.showTooltip(innerHTML: String, aroundNode: DomNode, position)
Display tooltip w/specified contents in specified position. See description of dijit.Tooltip.defaultPosition for details on position parameter. If position is not specified then dijit.Tooltip.defaultPosition is used.
Finds the following descendants of the specified root node: * the first tab-navigable element in document order without a tabindex or with tabindex="0" * the last tab-navigable element in document order without a tabindex or with tabindex="0" * the first element in document order with the lowest positive tabindex value * the last element in document order with the highest positive tabindex value
Called when focus leaves a node. Usually ignored, unless it isn’t follwed by touching another node, which indicates that we tabbed off the last field on the page, in which case every widget is marked inactive
Callback when node is focused
Callback when node is focused or mouse-downed
Functiondijit._place(node: DomNode, choices: Array, layoutNode: Function)
Given a list of spots to put node, put it at the first spot where it fits, of if it doesn’t fit anywhere then the place with the least overflow
Functiondijit._setStack(newStack)
The stack of active widgets has changed. Send out appropriate events and record new stack

Jump to FunctionsJump to ConstructorsJump to NamespacesPropertiesBack to top

A roll-up for common dijit methods
A list of widgets on a page.