Menu

Dojo 1.6 Release Notes

Browser support

The following browsers are supported. If a browser is not supported, it still may work, but no effort is taken to test unsupported browsers and any specific fix for an unsupported browser is likely not to be done:

  • Firefox 3.6 (Dojo 1.6.1+ supports Firefox 4)
  • Safari 4/Safari 5 and Chrome 8
  • IE6, IE7, IE8 (Dojo 1.6.1+ supports IE9)
  • Opera 10.50 and later (Dojo core only)

Dojo Base

AMD format for modules

All modules in dojo and dijit have been converted to comply with the CommonJS Modules/AsynchronousDefinition (AMD) proposal. This is a preparatory step on the way to full AMD support in version 1.7 and beyond. Unless you are an early adopter of using dojo with an AMD loader, these changes should be transparent to you. For version 1.6:

  • dojo.provide and dojo.require have been replaced by AMD define in all dojo and dijit modules; dojox conversions are variable.
  • a fairly complete simulation of the AMD define function has been added to the synchronous loader (this allows the converted dojo and dijit modules to work); otherwise, the synchronous loader remains unchanged and fully supports dojo.provide and dojo.require.
  • the dojo build system transforms the converted modules back to use dojo.provide and dojo.require.

Asynchronous module loading is considered experimental and is not officially supported in version 1.6. For early adopters, you can find experimental dojo and dijit package support in dojo/lib and dijit/lib.

Dojo does not include an AMD loader. Two loaders are known to work with dojo and dijit.

For more detailed information on using Dojo with asynchronous modules and loaders see:

djConfig deprecated

The global djConfig object used to define runtime configuration options has been deprecated. Use var dojoConfig = ... . djConfig will be unsupported in 2.0. Additionally, the custom attribute used when placed on the dojo.js script element has been changed to the standard HTML attribute data-dojo-config. eg:

<script src="dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script>

var dojoConfig = { parseOnLoad:true }

Dojo Core

Dojo Object Store

New API, based on the W3C IndexedDB’s object store API, and intended to provide a next generation, simplified successor to Dojo Data and Dojo Storage. This is based on discussions on the dojo-dev mailing list: http://thread.gmane.org/gmane.comp.web.dojo.devel/12314/focus=12316. And the documentation.

NodeList

closest(), orphan(), and filter() enhanced to work on any selector rather than just simple selectors.

NodeList-data

New module, providing data and removeData API’s to dojo.NodeList. See NodeList-data

Parser

The parser has been enhanced to support HTML5 compliant attribute names. See ticket #11490 for the full discussion and change set:

  • The jsId attribute has been deprecated, and will be unsupported in 2.0. Replace all jsId references with data-dojo-id, the behavior is identical.

    <div data-dojo-id="bar" data-dojo-type="some.Thinger">I am exported to window.bar by reference</div>

  • The dojoType attribute has been deprecated, and will be unsupported in 2.0. Replace all occurrences of dojoType with data-dojo-type, as the behavior is mostly identical, with the following caveats:

    • when using data-dojo-type, all widget properties must be stashed on a single attribute: data-dojo-props eg:
    <div data-dojo-type="dijit.form.Button" data-dojo-props="disabled:true, onClick: someNamedFunction">Click</div>

    If degradation is a concern, duplicate native attributes in data-dojo-props and on the node reference, as widget parameters are no longer read from the node attributes individually. eg:

    <input data-dojo-type="dijit.form.CheckBox" data-dojo-props="checked:true" checked="checked" type="checkbox'>

  • The event and args attributes for script tags of type=”dojo/method” and type=”dojo/connect” are deprecated. Use data-dojo-event and data-dojo-args respectively.

    Replace all:

    <form data-dojo-type="dijit.form.Form" ...>
  <script type="dojo/method" event="onSubmit" args="evt">
              ...

    with:

    <form data-dojo-type="dijit.form.Form" ...>
  <script type="dojo/method" data-dojo-event="onSubmit" data-dojo-args="evt">
              ...

  • The dojoAttachEvent and dojoAttachPoint attributes have been deprecated, and will be unsupported in 2.0. Replace all dojoAttachEvent attributes with data-dojo-attach-event and all dojoAttachPoint attributes with data-dojo-attach-point. The behavior is identical.

    <button data-dojo-attach-point="cancelButton" data-dojo-type="dijit.form.Button" data-dojo-attach-event="onClick:cancel">Cancel</button>

  • Existing behavior has been preserved until 2.0, there should be no backward compatibility issues between 1.6 and previous 1.x Dojo versions.

Also, there’s a new “scope” parameter to the parser to control which attribute names it searches for. This is mainly used in conjunction with multi-version support, for example if dojo 1.6 and dojo 1.4 are loaded onto the same page, it allows searching for dojo16Type and data-dojo16-type instead of dojoType and data-dojo-type.

Performance boost

Two new methods are added to Dojo core, which can be used to improve performance when using IE6 and IE7.

  • dojo.replaceClass is a public method that replaces one or more CSS classes with one or more new CSS classes. This method modified the className property on a DOM node once rather than twice, resulting in better performance.
  • dojo._getMarginSize, a private method that returns the width and height of a node, and is a lightweight alternative to dojo.marginBox.

Dijit

Performance boost

Many performance tweaks have been made to increase performance on IE6 and IE7, see Shane’s blog post for details.

watch()

Watch() has been implemented for widgets, to monitor changes to widget attributes. For example:

myTitlePane.watch("open", function(attr, oldVal, newVal){
   console.log("pane is now " + (newVal ? "opened" : "closed"));
})

All the widgets in dijit have been upgraded to support watch, but owners of dojox/ widgets and custom widgets will need to do their own updates if they want watch() to work for them.

There’s a new Widget._set(name, val) method to perform a this[name]=val and then send watch notifications if the value changed. Widgets call this from custom setters (ex: _setDisabledAttr()) rather than setting attributes in “this” directly.

In general, converting a widget to support watch for all it’s attributes centers around computing attribute values all the time, rather than on a get(”....”) call. For example, clicking a TreeNode will send watch events for selectedItem and path, so the _getPathAttr() and _getSelectedItemAttr() methods had to be replaced by code in the TreeNode click handler (see [23189]). That’s also a good example of how some attributes are dependent on each other: changed selectedItem affects the path, and vice-versa.

Claro Theme / Custom Themes

Did some cleanup to the claro theme, and also converted the theme files to less format to make it easy to roll custom themes. See the README file in dijit/themes/claro for details, but basically you can make your own theme by modifying the settings in dijit/themes/claro/variables.css.

InlineEditBox

Can accept an object literal or string for editor and editorWrapper attributes.

_DateTimeTextBox

Can accept a string value of a date to be parsed in addition to the previous behavior of only accepting a literal Date object.

ProgressBar

  • new “label” parameter for customizing the label displayed (overriding the “12%” type default label), or for using a label with an indeterminate progress bar. Set the label via standard label=”....” markup or myProgressBar.set(“label”, “Loading mail...”) API.

Dialog

  • onHide is now called after the dialog’s hide animation finishes. (e.g. now it’s safe to destroy the dialog, if desired.)

TabContainer

  • Tab icons also appear in Menu
  • Home/End keys navigate to first/last tab label

Toolbar

  • Home/End keys navigate to first/last button

ValidationTextBox

  • state attribute now has new “Incomplete” value to indicate a required but empty field, or a field where the value isn’t valid but the user is still typing (ex: a DateTextBox where the user has only typed “12/31/” and still needs to enter the year.

_WidgetBase

A new widget base class called _WidgetBase has been added. It’s lighter weight than _Widget and useful as an alternative to _Widget for lightweight/mobile widgets. _Widget’s functionality and API haven’t changed.

a11y

  • The waiRole and waiState attributes have been deprecated, and will be unsupported in 2.0. Replace them with role and aria-?stateName?. The behavior is identical.

For instance. Replace:

<span waiRole="treeitem" waiState="selected-false,haspopup-true"></span>

With:

<span role="treeitem" aria-selected="false" aria-haspopup="true"></span>

DojoX

Charting

New features:

  • Spider Chart.
  • New Interactive Legend - A new legend for all dojo charts that allows the end-user to click and select/deselect which of the chart series should be displayed on the chart.

General enhancements:

  • Charting Title - Support having a general chart title at the top or bottom side.
  • Axis Title - Support adding axis titles at left/right/top/bottom side.
  • Label Shortening - Enable shortening labels when labels overlapped with each other.
  • Smart Label for Pie - Labels laid automatically without overlapping on each other.

Gantt

New sub-project for gantt chart code, the first release introduces a gantt prototype providing support of task/resource/project management.

NodeList

New project called dojox.NodeList, currently adding a delegate() method to NodeList allowing apps to setup a single handler on a root node rather than individual handlers on sub nodes. For example:

dojo.query("navbar").delegate("a", "onclick", function(evt){
     console.log("user clicked anchor ", this.node);
});

TitleGroup

New widget TitleGroup in dojox.widgets, like an AccordionContainer without an predefined height (i.e., the AccordionContainer version of a TabContainer with the doLayout=false)

Dialog

New base class dialog and small refactoring of dojox.widget.Dialog to use Dialog Simple mixin

Editor

New plugins are available for the following features:

DataGrid

A set of high priority defects have been fixed including auto Height related issues， editable support and performance tweaks etc. (still in progress)

EnhancedGrid

An improved plugin mechanism as well as a rich set of new features:

  • Filter - Support for defining rules to filter grid content in various data types.
  • Exporter - Support for exporting grid content to various formats.
  • Printer - Provide convenient ways to printing grid.
  • Selector - Unified extended selection support for rows, columns and cells.
  • DnD - Drag-and-drop support for rows/columns/cells, both within grid and out of grid.
  • Pagination - A different approach to work with huge data set besides the default virtual scrolling way
  • CellMerge - Support for merging adjacent cells within a row.
  • Cookie - Persistence of grid preferences, like column width, column order and sorting order.
  • Search - Support for searching the grid by regular expressions as well as wildcard pattern.

LazyTreeGrid

Provides a new way to support lazy loading(virtual scrolling) for nested children rows, and it’s now possible to support a large data set(with huge children rows) for TreeGrid

Uploader

An HTML5 file input that handles multiple file selections, upload progress, and deprecates to a SWF file for non-HTML5 compliant browsers (ergo, IE6-IE9) The dojox.form.Uploader is an improvement upon, and replaces the dojox.form.FileUploader. Uploader works very well in Dialogs and Tabs, which were the bane of FielUploader.

Util

Build

The build now supports auto-generation of profiles from HTML files with the new htmlFiles and htmlDir build parameters.

Migration

As usual dojo is API backwards-compatible with previous 1.x versions. There are a few things to be aware of though:

Claro’s reset CSS

The claro theme no longer automatically includes its CSS reset file for page level elements (H1, H2, P, etc.) If you want that CSS please import dijit/themes/claro/document.css, in the same way that you import dojo/resources/dojo.css.

Popups and drop downs

For accessibility reasons the dijit.popup code now hides popup / dropdown widgets with style=”display: none” rather than style=”visibility:hidden; top: -9999px”. (Actually that style is on a wrapper node.) This may cause issues for popup / drop down widgets that do layout on initialization. In that case you should defer the layout until the first onShow() call for the widget.

BorderContainer border

The dijit.layout.BorderContainer widget now has no predefined border. You can specify a border via a style tag if your application needs one. However, aesthetically the widget should have no border in most cases, including when it’s at 100% of the viewport size, or when it’s nested inside another layout widget.

DojoX Form manager

In dojox.form.manager._Mixin, the watch() method has been renamed to watching() to avoid a clash with Stateful’s / dijit._Widget’s watch() method.

Error in the documentation? Can’t find what you are looking for? Let us know!