Dojo Tutorials

By  on  

Over the last few months, I've written several Dojo Toolkit tutorials to help explain basic and intermediate Dojo concepts.  Here's a rundown of the tutorials that have been released thus far:

Classy JavaScript with dojo.declare

The dojo.declare method is the foundation of class creation within the Dojo Toolkit. dojo.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 dojo.declare; in this tutorial, you'll learn why you should too.

Dojo Charting

Presenting statistical data in a readable, eye-catching manner is important, but it can also be difficult. The dojox.chartingsystem 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.

Advanced Charting with Dojo

While most developers only need basic charts, dojox.chartingis 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.

Dialogs & Tooltips

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 not elegant or flexible. Dijit, the Dojo Toolkit's UI framework, provides cross-browser, extendable, and themeable answers to what the browser's basic functionality lack, in the form of dijit.Tooltipdijit.Dialog, anddijit.TooltipDialog. In this tutorial, you'll learn about each of these widgets, sample usages of each, and the ins and outs of creating them.

Dijit Editor

Dijit's Editor widget is everything a developer looks for in aWYSIWYG editor: flexible, themeable, and above all, functional. In this tutorial, you'll learn how to easily implement dijit.Editor (programatically and declaratively), customize its toolbars, and include Editor plugins from DojoX.

Ajax with Dojo

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).

There are plenty more tutorials available, written by Dojo committers and contributors.  Expect more to come!

Recent Features

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • By
    39 Shirts – Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

Incredible Demos

  • By
    jQuery Random Link Color Animations

    We all know that we can set a link's :hover color, but what if we want to add a bit more dynamism and flair? jQuery allows you to not only animate to a specified color, but also allows you to animate to a random color. The...

  • By
    Digg-Style Dynamic Share Widget Using MooTools

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

Discussion

  1. Laurent

    Hi,
    I am new dojo user and I would like to have assistance on the page called “check-username.php” in the script “Check a Username’s Availability”.
    I imagine that an application checks for an answer in a database with the page “check-username.php” but what could be its structure?
    Thank you for your response.
    Regards

  2. idan

    hi same here what is “check-username.php” like ?
    I can’t reproduce it.

    thx

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!