Blog

Dec 6

Learning Dojo 1.8

By Mike Wilcox on December 6, 2012 8:22 am

Since we last posted an article on Learning Dojo, things have changed dramatically. Dojo has become an early adopter of AMD, with a new build tool to match; there is a new grid; the documentation has been vastly improved, and there are tutorials galore!

In fact, there is so much information out there on learning Dojo, it might be overwhelming. In a way, Dojo 1.7′s migration to AMD amplifies the problem, in that many previously-published articles no longer reflect the most recent best practices. This post aims to start you off on the right foot by pointing to relevant up-to-date resources for getting started with — or catching up on — Dojo 1.8.

Why Dojo

10 Reasons your Projects Should use the Dojo Toolkit
Slides: Dojo 2.0: Modular, Mobile, and Reinventing Web App Development
Interview with Dojo Toolkit Co-creator Dylan Schiemann

Getting Started

Tutorial: Dojo Start – Answers many common questions asked by newcomers
Tutorial: Hello Dojo – Guides through the first steps in exploring Dojo

Transitioning from Dojo 1.6

Tutorial: Modern Dojo – Explains key differences between Dojo before and after 1.7
Slides: Moving to Dojo 1.7 and the path to 2.0 – Presents features new to Dojo 1.7 and up

AMD Resources

Tutorial: Defining Modules – Explains how to define and load modules, and configure the loader
AMD: The Definitive Source – Explains the reasoning and benefits of AMD
Slides: Modular JavaScript: AMD & CommonJS modules – Discusses the evolution of AMD
AMD API – Wiki containing AMD API specifications

Learning Dojo

Tutorial: Making Functions with hitch and partial – Explains execution context and how to control it
Tutorial: Classy JavaScript with dojo/_base/declare – Explains Dojo’s chief inheritance mechanism
Tutorial: Ajax with dojo/request – Introduces Dojo 1.8′s new Ajax API
Tutorial: Getting Started with Deferreds – Introduces Deferreds, crucial for asynchronous logic
Tutorial: Dojo Deferreds and Promises – Discusses Promises and their relation to Deferreds
Tutorial: Dojo Object Stores – Explains the dojo/store API, new since Dojo 1.6
Reference Guide: Dojo – Index of reference material for the Dojo package

Learning Dijit

Tutorial: Understanding _WidgetBase – Details the module forming the basis of all widgets
Tutorial: Layout with Dijit – Discusses Dijit’s layout widgets
Tutorial: Creating Template-based Widgets – Describes Dijit’s templating capabilities
Recipe: Creating a Custom Widget – Walks through implementing a widget
Reference Guide: Dijit – Index of reference material for the Dojo package

Developing Applications

Tutorial: Using dojo/hash and dojo/router – Discusses Dojo’s utilities for managing the browser hash
Recipe: Application Controller – enumerates an approach to writing a small app
Dojo Boilerplate – Provides a starting point for creating a Web application with Dojo
Tutorial: Getting Started with dojox/mobile – The first in a series of tutorials to build a mobile app

Build Tool Resources

Tutorial: Creating Builds – Thoroughly explains the various facets of a custom build
Working with Dojo and AMD in Production – Enumerates approaches to loading production builds
Reference Guide: The Dojo Build System – Definitive documentation on the new build system
Dojo Web Builder – An online tool for creating Dojo builds

Dojo Packages

Dojo Foundation Packages – Explains the role packages play in Dojo’s future
dgrid – Web site for dgrid, a Dojo Foundation package

Community

As always, the Dojo community is the best around.  If you get stumped or have an advanced question, you can get more answers by leveraging the following resources:

If you find that a self-guided tour or community support is inadequate, SitePen also offers workshops taught by Dojo experts, as well as highly responsive support services.

No Comments
Nov 9

Dojo Charting: Dive Into Theming

By Mike Wilcox on November 9, 2012 2:00 am

The previous installment of the Dive Into Dojo series shows how easy it is to Dive Into Dojo Charting. It comes with dozens of stylish themes you can effortlessly plug into any chart. But what if you want your charts to match your website’s design or business’ branding? No worries: Dojo’s charting library allows you to create custom themes!

dojo-chart-creation

Continue readingNo Comments

Dive Into Dojo Charting Again

By Mike Wilcox on November 9, 2012 2:00 am

header

One of the most powerful pieces of Dojo is also one of the most underutilized: Charting.  The Dojo Charting library lives within the DojoX (extensions) branch of Dojo, and features numerous chart types, options, and a variety of themes. This post introduce you to the charting library and show you how you can take a mundane data collection and make it a beautiful visual chart in any modern web browser.

Continue readingNo Comments

Dojo Charting: Actions and Tooltips

By Mike Wilcox on November 9, 2012 2:00 am

Actions are self-contained objects, which use events to implement certain effects when a user interact with a chart. In general they are designed to attract attention and indicate which charting element is selected, or to show additional information.

Continue reading1 Comment

Dojo Charting: Legends

By Mike Wilcox on November 9, 2012 2:00 am

Legend

The Legend widget is one of the most popular features in Dojo charting. This widget was contributed by Chris Mitchell of IBM. It can handle all existing chart and plot types and supports horizontal and vertical modes.

legend

By default it uses the “legend” parameter of a series. It reverts to the “name” parameter if legend is not specified.

For a pie chart, the behavior is different: if the chart was specified with an array of numbers, it will use numbers. Otherwise it will check object properties in the following order: “legend”, “text”, and the numeric value.

legend2

The legend icons will change if you have more than one series. This is especially evident in Marker charts:

markers

Legends can be created programmatically as well. Just pass in the chart object instead of the chart id. The following code makes the Marker chart shown above:

require([
	"dojox/charting/Chart",
	"dojox/charting/widget/Legend",
	"dojox/charting/plot2d/Markers",
	"dojox/charting/themes/PlotKit/green"
], function(Chart, Legend, Markers, PlotKitGreen){

	var chart = new Chart("chartNode");
	chart.setTheme(PlotKitGreen);
	chart.addPlot("default", {type: "Markers"});
	chart.addSeries("Series A", [2.6, 1.8, 2, 1, 1.4, 0.7, 2]);
	chart.addSeries("Series B", [5.6, 1, 9, 11, 4.4, 8.7, 2]);
	chart.addSeries("Series C", [8.6, 6, 3, 6, 8, 6, 6]);
	chart.render();

	new Legend({chartRef:chart}, 'legendNode');
});

Further Reading

1 Comment

A Beginner’s Guide to Dojo Charting with AMD, Part 1 of 2

By Mike Wilcox on November 9, 2012 2:00 am

Welcome! If you are looking for a way to quickly and easily add great looking and functional charts and graphs to your web pages, you’ve found the right place. All you need is a tiny bit of JavaScript skills and a copy of Dojo.

In this two part guide, we look at how easy it is to get Dojo Charting up and running with version 1.8, and then examine in greater detail the options available for different looks for your charts. Today in Part 1, we start with a basic example and then examine all the options available in defining your plot type. Part 2 will cover the options available in defining the axes and data sets for your charts.

Continue reading1 Comment
Nov 8

Dojo Tutorial: Augmenting Objects

By Dylan Schiemann on November 8, 2012 9:59 am

As part of our great updates to the Dojo Tutorials for Dojo 1.8, we’ve been busy creating several new tutorials.

Augmenting Objects

Augmenting Objects In JavaScript applications, you’re working with objects all day long. This tutorial covers the features found in dojo/_base/lang for augmenting your objects efficiently.

Without further ado, check out the Augmenting Objects tutorial for Dojo 1.8, 1.7, or 1.6!

Want to see a specific Tutorial? Want to Learn More?

Is there something you’d like to learn how to do with Dojo? Always wanted to know how something in Dojo works? Leave us a message in the blog comments and we’ll see about getting a tutorial created for you. Or sign-up for an upcoming SitePen Dojo Workshop to get a fully immersive hands-on experience with Dojo.

No Comments

Featured articles

Search the blog

Dojo Toolkit workshops