Dojo Version:

Getting Started

Hello Dojo!
Difficulty: Beginner Dojo Version: 1.7
Welcome to Dojo! In this tutorial, you’ll learn how to load Dojo and begin exploring some of its core functionality. You’ll also learn about Dojo’s AMD-based module architecture, discover how to load additional modules to add extra functionality to your Web site or application, and find out how to get help when things go wrong.
View Tutorial
Defining Modules
Difficulty: Beginner Dojo Version: 1.7
Dojo now supports modules written in the Asynchronous Module Definition (AMD) format, which makes code easier to author and debug. In this tutorial, we learn all about this new module format, and explore how to write an application using it.
View Tutorial
Configuring Dojo with dojoConfig
Difficulty: Beginner Dojo Version: 1.7
The dojoConfig object (formerly djConfig) allows you to set options and default behavior for various aspects of the toolkit. In this tutorial we'll explore what's possible and how you can put dojoConfig to use in your code.
View Tutorial

Fundamentals

Classy JavaScript with dojo/_base/declare
Difficulty: Beginner Dojo Version: 1.7

The dojo/_base/declare module is the foundation of class creation within the Dojo Toolkit. declare allows for multiple inheritance to allow developers to create flexible code and avoid writing the same code routines. Dojo, Dijit, and Dojox modules all use declare; in this tutorial, you'll learn why you should too.

View Tutorial
Creating Template-based Widgets
Difficulty: Intermediate Dojo Version: 1.7
In this tutorial, you'll learn about the importance of Dijit's _Templated mixin, and how to use templates to quickly create your own custom widgets.
View Tutorial
NodeList Extensions
Difficulty: Beginner Dojo Version: 1.7
Dojo includes a range of extensions to the NodeList collection that is used by dojo/query. In this tutorial, we’ll look at what extended functionality is available and how to put it to good use.
View Tutorial
Making Functions with hitch and partial
Difficulty: Intermediate Dojo Version: 1.7
The dojo/_base/lang resource contains helpful methods for working with functions in JavaScript. In this tutorial, you'll learn the basics of the Function object—and how to bind contexts to functions using lang.hitch. From there, you'll learn how to bind specific arguments to a function using lang.partial, and how lang.hitch can combine the two operations.
View Tutorial

Ajax and Data Modeling

Ajax with Dojo
Difficulty: Beginner Dojo Version: 1.7
Ajax has become a fundamental technique for creating dynamic, usable web applications. In this tutorial, you'll learn about the Dojo Toolkit's Ajax communication methods, including basic XHR concepts, how to customize your Ajax calls, handling multiple types of data, and strategies for cross-domain JSON gathering (JSONP).
View Tutorial
Getting Jiggy with JSONP
Difficulty: Beginner Dojo Version: 1.7
JSON with Padding (JSONP) has become a common technique for accessing cross-domain resources from the browser. In this tutorial you learn what JSONP is and how you can use it to retrieve data from cross-domain sources.
View Tutorial
Dojo Object Store
Difficulty: Intermediate Dojo Version: 1.7
Separation of concerns is a fundamental aspect of good programming. Keeping presentation distinct from the data model is a key separation to employ. The Dojo object store architecture establishes a consistent interface for data interaction inspired by the HTML5 object store API.
View Tutorial
Data Modeling for MVC Applications
Difficulty: Expert Dojo Version: 1.7
The Model-Viewer-Controller (MVC) is a dominant paradigm for application development. Here we will look at the foundation Dojo provides for MVC-advised applications. We will learn how we can leverage Dojo object stores and Stateful objects for the foundational model, and how we can build modular viewer and controller code on top of the model.
View Tutorial

DOM, Events and Query

Dojo DOM Functions
Difficulty: Beginner Dojo Version: 1.7
In this tutorial, you'll learn about how to use Dojo to manipulate the DOM in a simple, cross-browser way. Using basic DOM knowledge and only a few Dojo functions, you will be able to efficiently create, read, update and delete elements in the page on the fly.
View Tutorial
Using dojo/query
Difficulty: Beginner Dojo Version: 1.7
In this tutorial, we will learn about DOM querying and how the dojo/query module allows you to easily select nodes and work with them.
View Tutorial
Events with Dojo
Difficulty: Beginner Dojo Version: 1.7
In this tutorial, we will be exploring dojo/on and how Dojo makes it easy to connect to DOM events. We will also explore Dojo's publish/subscribe framework: dojo/topic.
View Tutorial
Dojo Effects
Difficulty: Beginner Dojo Version: 1.7
In this tutorial, we will explore the effects that Dojo provides, which allow us to jazz up your page or application!
View Tutorial
Animations
Difficulty: Beginner Dojo Version: 1.7
In this tutorial, you will learn how to use Dojo to create and combine effects for customized animation of elements on the page.
View Tutorial

Widgets and Apps

Layout with Dijit
Difficulty: Intermediate Dojo Version: 1.7
Creating dynamic and interactive layouts is a challenge common to any graphical user interface. We have a lot of ability to create layout with HTML and CSS. Where CSS leaves off, Dojo picks up with a set of extensible widgets as a part of Dijit - Dojo's UI framework. In this tutorial, we'll explain how Dijit addresses common layout needs and see how easy it can be to create even complex layouts with just a few flexible widgets.
View Tutorial
Understanding _WidgetBase
Difficulty: Intermediate Dojo Version: 1.7
In this tutorial, you'll learn what Dijit's _WidgetBase module is, and how it serves as the foundation for all widgets in the Dojo Toolkit.
View Tutorial
Dijit Themes, Buttons, and Textboxes
Difficulty: Beginner Dojo Version: 1.7
In this tutorial, we will show you the basics of creating and using simple form elements using Dijit—including how to set up a Dijit theme for your web application.
View Tutorial
Application Controller
Difficulty: Intermediate Dojo Version: 1.7
A page-level controller is the glue that ties together modular functionality to make a living, breathing application. We'll implement configuration and an explicit lifecycle over a loosely coupled architecture to assemble a single-page-application of many moving parts.
View Tutorial

Build Optimization

Creating Builds
Difficulty: Advanced Dojo Version: 1.7
Dojo’s build system helps you create highly optimized resources by concatenating and minimizing JavaScript and CSS files. The build system is able to leverage the dependency declarations within JavaScript source files and @import declarations in CSS files to create these builds with minimal effort and maintenance.
View Tutorial

Core Concepts

Arrays Made Easy
Difficulty: Beginner Dojo Version: 1.7
In this tutorial, you'll learn about Dojo's cross-platform solution for easily working with arrays in JavaScript: dojo/_base/array.
View Tutorial
Getting Started with Deferreds
Difficulty: Intermediate Dojo Version: 1.7
In this tutorial, you'll learn the basics of using Dojo's Deferred implementation, which are a way to easily work with asynchronous actions, such as Ajax calls. We'll also cover Dojo's DeferredList, which is a convenient way of waiting on multiple Deferreds at once.
View Tutorial
Dojo Deferreds and Promises
Difficulty: Intermediate Dojo Version: 1.7
Deferreds are a wonderful and powerful thing, but they're really an implementation of something greater - a promise. In this tutorial, we'll cover what that means, as well as some additional pieces of Dojo's API to work with both promises and regular values in a uniform way.
View Tutorial
Beyond Dojo's Core: Dijit and DojoX
Difficulty: Beginner Dojo Version: 1.7
One of the things that differentiates Dojo from many other JavaScript libraries is its scope. While you can simply use dojo.js with all its language helpers, DOM, Ajax, effects and other common functionality, the toolkit provides much, much more. In this tutorial, we'll go on a quick tour of the Dojo Toolkit, to introduce some of the other components that are shipped with each release.
View Tutorial
Using Custom Modules with a CDN
Difficulty: Intermediate Dojo Version: 1.7
From time to time, it can be useful to load Dojo modules from a CDN. Doing so and using local modules at the same time can seem impossible, however. This tutorial demonstrates how it can be done.
View Tutorial
Prototyping with dijit.Declaration
Difficulty: Intermediate Dojo Version: 1.7
In this tutorial, you'll learn about the special dijit/Declaration module, which was designed to allow you to quickly prototype custom widgets—all using declarative syntax.
View Tutorial
Working with Dates in Dojo
Difficulty: Beginner Dojo Version: 1.7
Dates can be awkward to work with in JavaScript. This tutorial walks through the use of dojo/date—Dojo's answer to the need for a standard library for date math, comparisons, parsing and formatting.
View Tutorial

More Widgets

Dialogs & Tooltips
Difficulty: Beginner Dojo Version: 1.7
User interaction is extremely important in building responsive, interactive web applications. Web browsers provide basic methods for user interaction in the form of alerts and dialogs, but this functionality is neither elegant nor flexible. With dijit/Tooltip, dijit/Dialog, and dijit/TooltipDialog, Dijit, the Dojo Toolkit's UI framework, provides cross-browser, extendable, and themeable answers to what the browser's basic functionality lacks. In this tutorial, you'll learn about each of these widgets, sample usages of each, and the ins and outs of creating them.
View Tutorial
HTML5 Multi-File Uploader
Difficulty: Beginner Dojo Version: 1.7
The HTML5 multi-file uploader is a widget that creates a stylable file-input button, with optional mult-file selection, using only HTML elements. Non-HTML5 browsers have fallback options of Flash, or an iframe.
View Tutorial
Form Management with dojox/form/Manager
Difficulty: Intermediate Dojo Version: 1.7
While there are elements within Dojo to allow for simple form validation, occasionally you may want a more powerful solution. The Dojo Toolkit offers a fantastic solution for detailed form management: dojox/form/Manager.
View Tutorial
Forms and Validation
Difficulty: Beginner Dojo Version: 1.7
In this tutorial, you'll learn how to make use of the validation helpers in dojox/validate with your Dijit-based form widgets to create customizable, validating forms—all on the client side.
View Tutorial
Embedding Objects with dojox/embed
Difficulty: Beginner Dojo Version: 1.7
In this tutorial, you'll learn about the dojox/embed project, and how to use it to include plugin-based objects such as Flash and Quicktime movies—as well as learning about the special proxy method available for Flash objects.
View Tutorial
Slippin' Sliders with Dijit
Difficulty: Beginner Dojo Version: 1.7
The HTML5 specification provides many new features, such as the <input type="range"> element which allows users to choose from a range of values. Unfortunately, this new input type is not supported in all browsers, and looks different in each browser that does support it. That's where Dijit's HorizontalSlider and VerticalSlider widgets come in: flexible, themeable, and functional.
View Tutorial
Dijit Checkboxes
Difficulty: Beginner Dojo Version: 1.7
Dijit's collection of form widgets provides a convenient and flexible range of options for creating rich forms. In this tutorial we will look at the options available for checkbox-style interaction.
View Tutorial
Getting Selective with Dijit
Difficulty: Beginner Dojo Version: 1.7
In this tutorial, we will explore widgets in the dijit/form namespace which enhance the user experience of HTML select elements: Select, FilteringSelect, and ComboBox.
View Tutorial
Using dojo/behavior
Difficulty: Beginner Dojo Version: 1.7
It is frequently useful to isolate a page's "behavior" from its style and its content. The collection of event handlers that comprises that behavior layer can be succinctly defined and applied with dojo/behavior.
View Tutorial
Creating a custom widget
Difficulty: Intermediate Dojo Version: 1.7
In this recipe, we'll be covering how to leverage pieces of Dojo and the Dijit framework to create your own custom widgets, specifically covering use of dijit/_WidgetBase and dijit/_TemplatedMixin to quickly and easily set up your widget.
View Tutorial
Dijit Editor
Difficulty: Beginner Dojo Version: 1.7
Dijit's Editor widget is everything a developer looks for in a WYSIWYG editor: flexible, themeable, and above all, functional. In this tutorial, you'll learn how to easily implement dijit/Editor (programmatically and declaratively), customize its toolbars, and include Editor plugins from DojoX.
View Tutorial

Working with Data

Introduction to the DataGrid
Difficulty: Intermediate Dojo Version: 1.7
The DataGrid is the central component of many applications due to its effective and usable presentation of tabular data. In this tutorial we will look at how to define a grid's layout and discuss the scrolling mechanism the DataGrid uses.
View Tutorial
Connecting a Store to a DataGrid
Difficulty: Beginner Dojo Version: 1.7
The DataGrid is the central component of many applications due to its effective and usable presentation of tabular data. In this tutorial we will look at how to connect the grid to a store for quick and efficient data retrieval and updating.
View Tutorial
Populating your Grid using dojo/data
Difficulty: Intermediate Dojo Version: 1.7
The DataGrid is the central component of many applications due to its effective and usable presentation of tabular data. In this tutorial we will look at how to populate a grid and manipulate data in a grid.
View Tutorial
Connecting a Store to a Tree
Difficulty: Intermediate Dojo Version: 1.7
The Dojo Tree component is a powerful tool for visual presentation of hierarchical data. In this tutorial we will look at how to connect the tree to a store for quick and efficient data drill-down into nested data.
View Tutorial
Working with the Grid
Difficulty: Intermediate Dojo Version: 1.7
In this tutorial, you'll learn about the Grid's event system, how to select rows, and how to set up your grid for editing.
View Tutorial
Real-time Stores
Difficulty: Intermediate Dojo Version: 1.7
Web applications based on real-time stores give users a level of immediacy not possible with traditional web applications, allowing them to see data as it changes. The Dojo object store interface, which is the data model foundation of Dojo applications, was designed to support real-time data updates. In this tutorial we will see how to leverage the notification system to interact with real-time widgets.
View Tutorial
Creating Dojo Stores
Difficulty: Intermediate Dojo Version: 1.7
In this tutorial, you'll learn the basic APIs all dojo/stores follow and how to create your own store—including how to handle query results.
View Tutorial
Advanced Dijit Selects using Stores
Difficulty: Intermediate Dojo Version: 1.7
In this tutorial, we will further explore Dijit's select widgets—particularly how to create instances programmatically, populating their drop-down lists from dojo/data stores.
View Tutorial
Using Dojo Data
Difficulty: Intermediate Dojo Version: 1.7
Dojo Data is the legacy data interface used to abstract data consumers (like widgets) from the concerns of data providers. While the new object store interface has superseded the dojo/data interface, there are a number of existing data stores that implement this API and is used by quite a few existing widgets. Here we will look at the dojo/data interface, see how data providers and widgets connect together, and learn how it can be adapted to the new interface.
View Tutorial

Vector Graphics

Dojo Charting
Difficulty: Beginner Dojo Version: 1.7
Presenting statistical data in a readable, eye-catching manner is important, but it can also be difficult. The dojox.charting system was created to alleviate those pains by allowing developers to create dynamic, unique, and functional charts from varying sets of data. In addition, dojox.charting provides numerous themes and chart types to allow developers to display their data any way they'd like. This tutorial will show you how to create basic charts with varying data, plots, axes, and themes.
View Tutorial
Advanced Charting with Dojo
Difficulty: Intermediate Dojo Version: 1.7
While most developers only need basic charts, dojox/charting is capable of highly advanced charts: charts with animations, charts that respond to changes in data, and charts that respond to events. In this tutorial, you will learn about using some these advanced capabilities within dojox/charting.
View Tutorial
Vector Graphics with Dojo's GFX
Difficulty: Beginner Dojo Version: 1.7
Vector graphics can have many advantages, including flawless scaling with maximum portability. The problem with vector graphic creation is that it can be difficult—but not so with Dojo's GFX library. GFX provides a simple and flexible API (along with other utilities) for creating, animating, and managing amazing vector graphics.
View Tutorial

Mobile

Getting Started with dojox/mobile
Difficulty: Beginner Dojo Version: 1.7 Series: TweetView
Content on the web is evolving at a rapid pace, and the path is quickly moving towards mobile devices. As with many other problems on the web, the Dojo Toolkit has the solution: dojox/mobile. dojox/mobile is a framework of controllers, CSS3-based themes, and device-like widgets that will allow you to effortlessly create intelligent, flexible, and cross-device-compatible mobile web applications. This is the introductory post in a series of posts exploring dojox/mobile. Throughout the series, we will create a powerful Twitter-based web application called TweetView. Before we can get to that, we'll need to learn about why and how to use dojox/mobile.
View Tutorial
Introduction to TweetView
Difficulty: Intermediate Dojo Version: 1.7 Series: TweetView
The first article in our series, Getting Started with dojox/mobile, detailed the fundamental concepts and usage of the Dojo Toolkit's dojox/mobile library. In the remaining posts in this series, we'll embark on creating our own fully functional dojox/mobile web application called TweetView. This post will focus on familiarizing you with what TweetView is, what we want it to do, and we'll get started on building the mobile application's HTML and CSS layout.
View Tutorial
Getting Started with TweetView: Tweets and Mentions
Difficulty: Intermediate Dojo Version: 1.7 Series: TweetView
In the previous post, Introduction to TweetView, we introduced the mobile application we will be building with dojox/mobile: TweetView. We built the general layout template for our application and now it's time to make TweetView work. This tutorial will focus specifically on the "Tweets" and "Mentions" views of our application. Before we begin coding our application, let's set up our application file structure and review a few mobile app development concepts.
View Tutorial
TweetView: Creating the Settings View
Difficulty: Intermediate Dojo Version: 1.7 Series: TweetView
In the previous post, Getting Started with TweetView: Tweets and Mentions, we solidified our mobile application's file structure, reviewed TweetView's goals, and created the Tweets and Mentions views by coding tweetview/_ViewMixin and tweetview/TweetView. This tutorial will focus specifically on the "Settings" view of our application: dependencies for the class, how the Settings view ties into the Tweet and Mention views, and coding the Settings view itself.
View Tutorial
TweetView: Android, Packaging, and Review
Difficulty: Intermediate Dojo Version: 1.7 Series: TweetView
In the previous two posts, Getting Started with TweetView: Tweets and Mentions and TweetView: Creating the Settings View, we created the HTML, CSS, and JavaScript code required to power the TweetView mobile application. This tutorial will focus on implementing an Android theme, leveraging the Dojo build system to keep the application compact for production, and a basic review of the entire dojox/mobile-powered application.
View Tutorial