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.
Visit dojo.io for documentation, examples, and more on Dojo, the Progressive Framework for Modern Web Apps and successor to the Dojo Toolkit
Dojo Documentation
Tutorials
Getting Started
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.
You may have been away from Dojo for a while, or you have been struggling to keep your older Dojo 1.6 applications working under 1.10 and you find yourself not sure of what is going on. You keep hearing talk of "AMD" and "baseless", but you aren't sure what to do or where to start. This tutorial will help you with that.
How do I start learning Dojo? Where are the docs? How do I get support and training? Which Dojo version should I use? Why do I need to use a web server? How can I avoid common mistakes? How do I report issues? How do I contribute and get involved? These questions and more are answered with this introductory start tutorial.
Modules
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.
Dojo supports modules written in the Asynchronous Module Definition (AMD) format, which makes code easier to author and debug. In this tutorial, we explain the basics of understanding and using AMD.
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.
JavaScript is not just for the client side. With the rise of technologies like Node.js, server side JavaScript is a
very viable option. Not only is JavaScript ready for the server side, AMD and the Dojo Toolkit also work well and this
tutorial will explain how you can use Dojo with Node.js.
DOM Basics
In this tutorial, you will learn how to use Dojo to create and combine effects for customized animation of elements on the page.
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.
In this tutorial, we will explore the effects that Dojo provides, which allow us to jazz up your page or application!
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.
In this tutorial, we will be exploring Dojo's event normalization and dojo/keys and how Dojo makes it easy to handle
keyboard events.
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.
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.
Fundamentals
dojo/request is a new API (introduced in Dojo 1.8) for making requests to a server from the client. This tutorial introduces the dojo/request API: you'll learn how to request a text file from the server, handle errors if they occur, post information to the server, take advantage of the notify API, and use the registry to use the same code to request data from different locations.
In this tutorial, you'll learn about Dojo's cross-platform solution for easily working with arrays in JavaScript: dojo/_base/array.
When you’re working with JavaScript, you’re working with objects. The dojo/_base/lang resource makes it easy to augment objects and prototypes using lang.mixin, lang.extend, and declare.safeMixin when using dojo/_base/declare.
Dojo's build system provides a way to "build" Dojo and your other JavaScript resources and CSS files, so they can be more efficiently used in a production environment by your applications.
One of the quickest ways to start using Dojo, especially with widgets like Dijit, is to leverage the dojo/parser and declarative syntax. This tutorial will help you get the most out of this style of programming.
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.
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.
Dojo now uses the popular has() pattern for feature detection in
combination with a has()-aware build system. While it is easy enough
to write feature detection tests with ad-hoc JavaScript expressions, the
has() pattern defines a specific syntax such that the build system
can detect these feature-based branches, and one can create application builds
that are highly optimized for specific devices, with known feature shims factored out.
In JavaScript applications, modifying the URL hash is a great way to provide bookmarkable, history-enabled page states.
With dojo/hash, adding this functionality is easy. Coupled with dojo/router, dojo/hash can be a powerful tool for
creating robust and interactive applications.
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.
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.
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.
Widgets
Working with Data
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.
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.
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.
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.
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.
In this tutorial, you'll learn how the Dojo Toolkit supports internationalization (i18n), including the use
of dictionaries for string substitution, and how basic locale formatting for things such as Date
objects, numbers and currencies are supported.
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.
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.
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.
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.
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.
Mobile
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: Dojo Mobile. Dojo Mobile is a framework that allow you
to effortlessly create cross-device-compatible mobile web applications. This is the introductory post in a series of
posts exploring Dojo Mobile. Throughout the series, we will create a Dojo Mobile application called FlickrView. Before
we can get to that, we'll need to learn about why and how to use Dojo Mobile.
The first article in our series, Getting Started with Dojo 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 Dojo Mobile web application called
FlickrView. This post will focus on familiarizing you with what FlickrView is, what we want it to do, and we'll
get started on building the mobile application's HTML and CSS layout.
In the previous part, Developing a Dojo Mobile Application,
we built the general layout template and came up with a mockup of the application. This part will focus on updating the
mockup to dynamically get data and display feeds from Flickr. You will learn how to initiate, get response and handle
error from a JSON request, use a progress indicator while waiting for the server to respond, dynamically populate a
list with ListItems, use a basic HTML template to create ListItems and format a date according to a specific locale.
Are you ready? Let's go!
In the previous part, FlickerView: Implementing FeedView, we implemented the feed view and we are now
able to use data from a JSON request to update our ScrollableView with templated ListItems. This part will focus on the
Settings view to get and set values from various input widgets (TextBox, Switch, RadioButton) and use Transition Events.
In the previous parts, Developing a Dojo Mobile Application, Implementing FeedView and
Implementing Settings View, we created the HTML, CSS, and JavaScript code required to power the FlickrView
mobile application. This tutorial will focus on updating the code for deployment, leveraging the Dojo build system to
keep the application compact for production, and a basic review of the entire Dojo Mobile-powered application.
dojox/app
In the previous tutorial, Updating the Contacts App for a Tablet,
we updated the Contacts Application to use a tablet form factor in addition to the
phone form factor. In this tutorial we will see how to update the Contacts Application to use Cordova/PhoneGap based access
the native contacts on a mobile device, and how to use the dojox/app "Build" support.
In this tutorial, we will cover how to use dojox/app and dojox/mobile to create a simple one page Contacts List Application.
In the previous tutorial, Getting Started with dojox/app,
we created a simple Contacts List Application using the dojox/app library.
This tutorial will use a phone form factor and two views, the "list" view from the previous tutorial and a new "details" view.
In the previous tutorial, Updating the Contacts App for a Phone,
we created a Contacts Application with two views, a "list" view and a "details" view.
This tutorial will add support for a tablet form factor in addition to the phone form factor. On a tablet the Contacts
Application will use a 2 column layout with the "list" view on the left and the "details" view in the center.