Web applications can be deployed to many environments, including desktops, tablets, and mobile devices. We can even deploy web applications natively using a wrapper such as Apache Cordova to gain access to device features such as GPS, battery, and accelerometer data.

One of the additions of the recent Dojo 1.11 release is a modern flat theme created with the Stylus preprocessor. The flat theme allows you to apply a modern, flat look and feel to existing Dojo applications.

Deadlines are looming and it looks like it’s is going to come down to the wire. A developer has hit a roadblock while trying to integrate code from another team and connect it to a third-party API.

Dojo’s Deferred module provides a convenient way of managing asynchronous operations. If you’re new to deferreds, you can get a good introduction by reading our blog post and some tutorials on dojotoolkit.org: Getting started with Deferreds and Dojo Deferreds and Promises.

While a more recent advancement allows us use the HTML5 file API to retrieve contents from files, this approach is not universally supported in web browsers as yet. Instead, we will access data from user-uploaded CSV files using the following steps: Upload a file to the server Retrieve the file from the server Load the data into an easy-to-use format Traditional file uploads from within a form are only permitted when the entire form is submitted to the server and a new page is returned.

While it will not happen often, there may be times when you need to patch your Dojo source. Perhaps you discovered a bug and are waiting for the fix to be committed or released, or your application uses an older version of Dojo but you want to use features found in newer releases.

A common scenario with web applications is accessing protected resources, which require authentication with the server in order to proceed. A common flow is as follows: User opens web site Web site presents authentication screen User enters credentials Web site presents protected information This is simple enough to begin with, but what happens when the session times out? Or perhaps the application does not require authentication initially, but once the user initiates an action to access protected resources authentication is required? A common approach is to use redirects to an authentication page: User’s authentication session times out Any action on user’s part redirects to authentication screen After successful authentication, user is redirected to the results of the initial action This model works well enough with applications architected around the full page request-response model, but becomes less pleasant with single-page applications that provide a persistent and responsive user interface.

As object stores are frequently used in Dojo-based applications, developers often ask about a good way to utilize stores in their custom widgets. Here we present a common pattern for doing just that in a two-stage approach, starting simple.

Bootstrap is a framework created by Twitter’s developers to consolidate their HTML/CSS design and widgets. Bootstrap provides a clean responsive design, but the set of widgets it includes is limited, especially when compared to what’s available in the Dijit library.

Dojo’s store API is a common interface for providing data to user interface widgets, such as dgrid, Dijit Select, and Dojo Charting. The beauty of having a consistent API is that once you’ve defined an interface for a data source, that data becomes easily available to all widgets that support the store API.

In large JavaScript applications, it can be beneficial to dynamically load CSS stylesheets. For example, if a certain JavaScript widget, such as a complex grid, uses a large standalone stylesheet for its display aesthetics, it would be optimal to only load this stylesheet if the widget is in use, rather than always including the CSS source on each application load.

Intern is a great test stack for writing full-featured unit and functional tests, with remote WebDriver-based testing (e.g. BrowserStack) and continuous integration (e.g.

dgrid is SitePen’s lightweight, modular, and easily extensible modern grid component, designed for use with AMD and Dojo. The Selection and CellSelection mixins enable selection of rows or cells, both from mouse or keyboard actions and programmatically.

dojo/on and dojo/aspect are two APIs that appear to do similar jobs but actually serve two different purposes. dojo/on is used to setup event listeners for DOM nodes and event-emitting objects.

The widgets provided in Dojo’s Dijit library include not only advanced widgets not provided by HTML, but also enhanced versions of the basic HTML form elements, like <input>. Dijit’s dijit/form/RadioButton provides the same basic functionality as an HTML radio button, so let’s look at how you set one to be checked by default.

In web browsers that support Cross-Origin Resource Sharing (CORS) via XMLHttpRequest objects, Dojo’s XHR mechanism can make cross-domain requests out of the box. Because of the same-origin policy of XMLHttpRequest, Dojo has long supported various methods of loading resources across domains – dojo/io/script and dojo/io/frame; dojo/request/script and dojo/request/iframe in recent versions (1.8+).

A common error when using Dijits is “Tried to register widget with id==XXX but that id is already registered”. That is the dijit/registry telling us that we’ve made a mistake instantiating a widget.

Dijit widgets provide the ability to write custom setters and getters, whose logic is executed when calling the set and get methods. dijit/_WidgetBase also provides a _set method, which is very important when writing widgets, but can cause a bit of confusion due to its name.

One pretty common issue we get in the dojo-interest mailing list asks why RoundRectStoreList.set(“store”, store); doesn’t actually appear to be setting the store properly? That is, the data in the RoundRectStoreList doesn’t actually render the data in the new store, but instead keeps old data rendered. An example of this error: HTML: [code language=”html”] Swap ‘Em! [/code] JavaScript: [code language=”javascript”] require([ “dojo/store/Memory”, “dijit/form/Button”, “dojox/mobile/RoundRectStoreList” ], function (Memory, Button, RoundRectStoreList) { var sampleStore1 = new Memory({data:[ { “label”: “Wi-Fi”, “rightText”: “Off”, “moveTo”: “bar” }, { “label”: “VPN”, “rightText”: “VPN”, “moveTo”: “bar” } ], idProperty:”label”}), sampleStore2 = new Memory({data:[ { “label”: “Ice Cream”, “rightText”: “Ice Cream”, “moveTo”: “bar” }, { “label”: “Shortcake”, “rightText”: “Shortcake”, “moveTo”: “bar” } ], idProperty:”label”}), storeList = new RoundRectStoreList({store:sampleStore1}, “storeList”), wrongSwap = new Button({}, “wrongSwap”), isStore1 = true; storeList.startup(); wrongSwap.on(“click”, function () { storeList.set(“store”, isStore1 ? sampleStore2 : sampleStore1); isStore1 = !isStore1; }); }); [/code] Here, you will see that the data in the list never actually changes, even though we’re attempting to set the store using the .set() function.

In addition to a simple, consistent, cross-browser interface to DOM events, dojo/on provides for very convenient clean-up – the function returns a handle with a remove method that will un-register the event listener. Clean-up concerns are not limited to DOM events, so Dojo provides the same interface for dojo/aspect and dojo/topic.

Dojo provides many settings to configure the optimal loading and building of your application source code. We are often asked about the differences between packages, paths, and aliases.

We answer many, many, many questions on a daily basis through our Dojo training workshops, JavaScript support plans and during our customers’ development projects. We have bucket-loads of answered questions.