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:
If you are using a source distribution of Dojo and want to use it inside a Firefox extension, be sure to set djConfig.hostEnv = "ff_ext" before including dojo.js for it to work correctly.
Updated cultural tables to use CLDR 1.8 (unicode.org/cldr) for formatting of numbers, currencies, and dates.
dojo.Deferred was refactored for side effect free chaining, such that you can execute code like:
var def = dojo.xhr(...);
def.then(...);
def.then(...);
without worrying that the first then() call will affect the value passed to the second then call.
It also allows chaining where each element in the chain does affect the value, like this:
dojo.xhr(...).then(function(val){ return dojo.toJson(val); }).then(...);
Finally, dojo.when() is a method that will take either a Deferred or a plain value and execute some code when that value is ready (for a Deferred) or immediately otherwise.
// val might be a Deferred, or it could be (for example) a String
dojo.when(val, function(val){
...
});
See blog post for more information.
Some functions from dijit have been moved to dojo core (with stubs left in dijit for backwards compatibility).
A new generic interface and base class for getting, setting, and watching for property changes (with getters and setters) in a consistent manner.
See also:
A new theme for Dijit and the dojox.Grid is called Claro (nee Lucid). The Claro theme has several aims:
- to deliver a modern and engaging visual style for rich internet applications using the Dojo Dijit library, with the visual enhancements of transparent gradient background images, drop shadows, and appropriate CSS animation (on webkit and mozilla);
- to deliver the 'fit and finish' professional quality with consistent padding, font treatment and alignment; and fix missing expected behavioral states (hover, active and selected) in widgets;
- to improve ease of customizing the theme CSS that allows designers to easily create their own theme by styling elements such as padding and color, without designing new background images.
The Claro theme supports both left-to-right (LTR) and right-to-left (RTL) display, and all Dojo 1.5 supported browsers, albeit with graceful degradation of some styling: no 24 bit PNG's in IE6; and no rounded corners in IE6, 7 and 8.
See Themes and Theming for more information on Dijit themes (Claro, Tundra, Nihilo and Soria) and 1.5 theme updates.
Claro's .dijitTreeIcon class doesn't specify a width/height. If you are defining custom icons for tree folders (or for anything else, for that matter), be sure that they specify a width/height.
Also, in TabContainer, tabs without icons will be <16px tall, which will cause a height disparity if some of your tabs have icons and others don't. You can either add a min-height rule:
.dijitTab .tabLabel {
min-height: 12px;
}
or alternately specify a 1x16 blank icon for all of your "non-icon" tabs.
The styling was changed to put a white border around each color swatch, so that it's clear when the dark swatches are being hovered or focused. In addition, focus was decoupled from hovering.
Additionally, ColorPalette now supports set("value", ...) and get("value"), and indicates the currently selected color via a thin black border around that color. The editor's foreground and background color plugins also indicate the color of the currently selected text (or if no text is selected, the text around the caret).
The dialog widget now supports an "action bar", a gray bar at the bottom of the dialog with action buttons, typically OK and cancel. Simply create your dialog as before but separate the dialog contents from the buttons like this:
<div dojoType="dijit.Dialog" id="myDialog">
<div class="dijitDialogPaneContentArea">
...
</div>
<div class="dijitDialogPaneActionBar">
<button dojoType="dijit.form.Button" type="submit" id="ok">OK</button>
<button dojoType="dijit.form.Button" type="button" onClick="dijit.byId('myDialog').onCancel();"
id="cancel">Cancel</button>
</div>
</div>
The HTML5 placeholder parameter (also known as a "hint") has been implemented for all TextBox based widgets. Placeholder is gray example or hint text that the widget displays inside the input area of empty form fields, such as "John Doe" or "Your Name". The text disappears when the user focuses the field.
In order to use it, submit a parameter "placeHolder" to your widget:
myTextBox = new dijit.form.TextBox({
name: "firstname",
value: "" /* no or empty value! */,
placeHolder: "type in your name"
}, "firstname");
Also, the width/height of the input widgets (TextBox, ValidationTextBox, ComboBox/FilteringSelect, NumberSpinner) has been standardized. Previously the height or width of these widgets could differ by a few pixels making the UI look a little off.
An app can now set text-rendering direction per-widget, via the dir attribute. Possible settings are "ltr" (left-to-right, used by most languages) and "rtl" (for Arabic and Hebrew). Previously all the widgets rendered in the same direction, the direction of the page. Note that this attribute can only be set at creation. For example:
new dijit.Editor({dir: "rtl"}, srcNodeRef);
new dijit.Editor({dir: "ltr"}, srcNodeRef);
Also, the parser has been refactored and now is cognizant of dir=rtl and dir=ltr settings on nodes (with or without dojoType specified). If a node has a dir setting, then all the widgets beneath that node are created with that dir attribute specified. For example:
<div dir="ltr">
<input dojoType="dijit.TextBox">
<input dojoType="dijit.TextBox">
<input dojoType="dijit.TextBox">
</div>
<div dir="rtl">
<input dojoType="dijit.TextBox">
<input dojoType="dijit.TextBox">
<input dojoType="dijit.TextBox">
</div>
The parser can also take a flag specifying default dir and lang for inherited widgets:
dojo.parser.parse({rootNode: ..., inherited: {dir: rtl, lang: "ar-eg"} });
(In general though it's not necessary to specify, as the parser will pick up the documents default direction and language.)
These two changes allow things like a portal page where different portlets are in different languages, or a page in an RTL language like Hebrew or Arabic but with one section in English.
Tundra and Claro themes support mixed RTL and LTR pages.
Internally, this feature is implemented by dir=rtl widgets applying a CSS class like dijitTextBoxRtl (the widget's baseClass + "Rtl") to the widget's root node, in addition to applying the plain baseClass like dijitTextBox. The tundra and claro themes have been modified to reference those per widget CSS classes rather than referencing the dijitRtl class applied to the BODY node.
Finally, note that although (as before) lang can be set on a per-widget basis, the translations used by dojo (default tooltips, loading messages, etc.) are still one language per page.
New mixin for widgets that set CSS classes on their nodes depending on hover/active/focused state, and also semantic state (checked, selected, disabled, etc.). Most of the dijit widgets have been updated to use this mixin. As a result, there are more selectors available than before, such as CSS classes for when the slider handle is hovered or when the increment button is depressed.
For the following widgets, the behavioral states of hover, active (mouse down) and selected (focus), have been added:
dijit.Calendardijit.ColorPalettedijit.Dialogdijit.Editordijit.InlineEditBoxdijit.Menudijit.MenuBardijit.ProgressBardijit.TitlePanedijit.Toolbardijit.Treedijit.layout.AccordionContainerdijit.layout.BorderContainerdijit.layout.ContentPanedijit.layout.TabContainerdojox.grid.EnhancedGriddojox.grid.enhancedDataGrid
To use this mixin in custom widgets:
require _CssStateMixin and mix it in to the widget:
dojo.require("dijit._CssStateMixin");
...
dojo.declare(myWidget, [ ..., dijit._CssStateMixin], ...
Note that all form widgets already inherit _CssStateMixin through _FormWidget, so they should skip this step
set baseClass if not already set (form widgets already set baseClass)
baseClass: "dijitSlider",
(If you want CSS class settings on widget subnodes, like the up/down buttons on the slider, then) set cssStateNodes attribute:
cssStateNodes: {
incrementButton: "dijitSliderIncrementButton",
decrementButton: "dijitSliderDecrementButton",
focusNode: "dijitSliderThumb"
}
The left side (ex: incrementButton) is the dojoAttachPoint name, and the right side ("dijitSliderIncrementButton") is used to construct the CSS class name to apply to the node.
After the steps above, CSS classes will automatically be applied to the slider domNode (dijitSliderHover, dijitSliderFocused etc.) in addition to the specified sub nodes (this.incrementButton --> "dijitSliderIncrementButtonActive" CSS class etc.).
Note that there's no event handling code for hover/active/focus CSS needed in the widget template
Decoupled concepts of "focused node" and "selected node", so that:
In order to make code clearer, Dojo Toolkit 1.5 will start to use the get()/set() pattern for code-controlled property access instead of the former used .attr()-Method, which has handled both gets and sets.
Coming with this, the recommended way to set properties of Dijits changes from
widget.attr('property', 'value'); // old way and now deprecated for Dijits
to
widget.set('property', 'value'); // new since 1.5
The same for getting properties:
widget.attr('property'); // old way and now deprecated for Dijits
changes to
widget.get('property'); // new since 1.5
Major update of charting themes:
General enhancements:
New dojo.style extension to support the transform and transform-origin properties:
dojo.require("dojox.html.ext-dojo.style");
dojo.style("myNode", "transformOrigin", "0 0");
dojo.style("myNode", "transform", "skew(10deg) rotate(20deg");
Internet Explorer 5.5+, Safari 3.1+, Firefox 3.5+, Chrome/Chromium and Opera 10.50+ are supported.
New sub-project for dojo.dnd-related improvements. It introduces:
New sub-project for geographical-related code. The first release introduces a map-based charting. The map of US states is included as an example.
Added new module: dojox.lang.async. It helps to arrange the order of asynchronous operations (the ones that return dojo.Deferred). Following arrangements are supported:
Adapter modules are provided for common asynchronous operations: events, topics, and timers.
Using this module it is possible to build highly asynchronous complex operations using simple building blocks.
GridContainer is revamped using MDnD, GridContainerLite is introduced. The usage of GridContainer remains more or less the same, with the only change being the acceptTypes attribute. Previously this accepted a comma separated list of class names, e.g. 'dojox.widget.Portlet,dijit.layout.ContentPane'. This has changed to accept any arbitrary string, which should match up to the 'dndType' attribute on the child widgets, e.g. on the GridContainer, acceptTypes="Portlet,SomeCustomWidget" , and on the child widgets, dndType="Portlet" or dndType="SomeCustomWidget
dojox.mdnd implements Moveable DnD using an interface similar to dojo.dnd. You can move nodes between containers without using the avatar. This new facility is especially useful for organizing panel-based user interfaces.
dojox.mobile is set of lightweight widgets designed specifically for mobile plans, with themes for iPhone and android. It supports buttons, on/off switch, lists "tab container", etc
As usual dojo is API backwards-compatible with previous 1.x versions. There were however some CSS changes, plus a few gotchas.
attr() is being phased out in favor of get() and set(). The old attr() is still supported (with a deprecation warning) so old code should continue to work.
However, if you have classes that define custom get()/set() methods, they will conflict with the get()/set() methods added to _Widget, or with any class that extends dojo._Stateful.
Also, dojo.connect() calls on attr() should be changed to connecting to set().
Dijit.popup shouldn't be shortcutted. This will work:
dijit.popup.open({...});
However, this will not:
var open = dijit.popup.open;
open({...});
Code like
myWidget.getChildren().forEach(...);
should be changed to
dojo.forEach(myWidget.getChildren(), ...);
Although getChildren() was always documented as returning a plain array, in version 1.4 it actually returned an array with methods like forEach() and filter(), so some user code may be depending on that.
If you have custom widgets extending _FormWidget, with templates referencing ${nameAttrSetting}, should change the reference to ${!nameAttrSetting}. This is for issues with escaping special characters.
The TextBox template was changed to be similar to ValidationTextBox, where the <input> is surrounded by a <div>.
For a TextBox with id=foo, to apply styling to the <input>, as before, make a rule on #foo:
#foo { font: ... }
To apply styling to the outer node, make a rule on #widget_foo:
#widget_foo { margin: 2em; }
See #11133 for more details.
If you have modified widget templates to dijit widgets, you will probably have some onmouseenter/onmouseleave/onfocus/onblur handlers that should be removed. In particular, _onMouse() has been removed from _FormWidget so you should remove calls to it from custom templates.
In addition, if you have custom CSS rules, there were a few changes about form widget classes with nested buttons, seen in http://bugs.dojotoolkit.org/changeset/21117:
To update CSS class names in your custom CSS rules, run the script dijitCss14to15.sed in util/migration. (If you are running windows you'll need cygwin or some unix utilities):
sed -f dojoPath/util/migration/dijitCss14to15.sed -i .bak $(find myCssDirectoryPath -name '*.css' -print)
Alternately you can manually update the names as per the tables below.
Spinner:
| Old | New | Description |
|---|---|---|
| .dijitSpinnerUpArrowHover .dijitUpArrowButton | .dijitSpinner .dijitUpArrowButtonHover | |
| .dijitSpinnerUpArrowActive .dijitUpArrowButton | .dijitSpinner .dijitUpArrowButtonActive | |
| .dijitSpinnerDownArrowHover .dijitDownArrowButton | .dijitSpinner .dijitDownArrowButtonHover | |
| .dijitSpinnerDownArrowActive .dijitDownArrowButton | .dijitSpinner .dijitDownArrowButtonActive |
ComboButton:
| Old | New | Description |
|---|---|---|
| .dijitComboButtonHover .dijitButtonContents | .dijitComboButton .dijitButtonContentsHover | |
| .dijitComboButtonActive .dijitButtonContents | .dijitComboButton .dijitButtonContentsActive | |
| .dijitComboButtonDownArrowHover .dijitDownArrowButton | .dijitComboButton .dijitDownArrowButtonHover | |
| .dijitComboButtonDownArrowActive .dijitDownArrowButton | .dijitComboButton .dijitDownArrowButtonActive |
Other changes occurred to CSS selectors to standardize the names, as follows:
Accordion:
| Old | New | Description |
|---|---|---|
| .dijitAccordionFocused | .dijitAccordionTitleFocused | The accordion title is focused, not the pane contents |
| .dijitAccordionTitle-hover | .dijitAccordionTitleHover | |
| .dijitAccordionTitle-selected | .dijitAccordionTitleSelected |
In addition, the accordion layout was changed so that every pane is surrounded by a dijitInnerAccordionContainer <div>, which holds the title and the content, similar to a TitlePane. If you are subclassing AccordionContainer or doing something else related to the internals of AccordionContainer you may need to update your code.
TabContainer:
| Old | New | Description |
|---|---|---|
| .dijitTab .closeButton | .dijitTabCloseButton | |
| .dijitTab .closeButton-hover | .dijitTabCloseButtonHover | close button for individual tab |
| .dijitTabBtnDisabled | .dijitTabDisabled | left and right scroll buttons on tab strip |
| .dijitTab .closeImage | .dijitTabCloseIcon | icon inside of close button |
| .dijitTab .closeText | .dijitTabCloseText | text inside of close button, for a11y |
| .tabStripButton img | .dijitTabStripIcon | class for tabstrip's scroll-left, scroll-right, and menu icons |
| .tabStripMenuButton img | .dijitTabStripMenuIcon | icon to show menu (listing all tabs) |
| .tabStripSlideButtonLeft img | .dijitTabStripSlideLeftIcon | icon to scroll tabs to left |
| .tabStripSlideButtonRight img | .dijitTabStripSlideRightIcon | icon to scroll tabs to right |
Dialog:
| Old | New | Description |
|---|---|---|
| .dijitDialogCloseIcon-hover | .dijitDialogCloseIconHover |
Tree:
| Old | New | Description |
|---|---|---|
| .dijitTreeNodeHover | .dijitTreeRowHover | on the TreeNode.rowNode domNode |
| .dijitTreeNodeSelected | .dijitTreeRowSelected |
TitlePane:
| Old | New | Description |
|---|---|---|
| .dijitTitlePaneTitle-hover | .dijitTitlePaneTitleHover |
InlineEditBox:
| Old | New | Description |
|---|---|---|
| .dijitInlineEditBoxDisplayMode-hover | .dijitInlineEditBoxDisplayModeHover | |
| .dijitInlineEditBoxDisplayMode-disabled | .dijitInlineEditBoxDisplayModeDisabled | equivalent to a plain <div> or <span>, clicking has no effect |
Editor:
| Old | New | Description |
|---|---|---|
| .RichTextEditable | .dijitEditor | editor's root node |