Treehouse

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!

ydkjs-4.png

Recent Features

  • How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • Introducing MooTools LinkAlert

    One of my favorite Firefox plugins is called LinkAlert. LinkAlert shows the user an icon when they hover over a special link, like a link to a Microsoft Word DOC or a PDF file. I love that warning because I hate the surprise...

  • Display Images as Grayscale with CSS Filters

    CSS filters aren't yet widely supported but they are indeed impressive and a modern need for web imagery.  CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale. Doing so requires the...

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!