Blog

Dec 7

AMD Module and Local Variable Naming Conventions

By Matthew Maxwell on December 7, 2012 1:33 am

Client-Side web application development is becoming more and more robust. There are many amazing tools and technologies available for creating an immersive and interactive user experience. With the demand from users rising, the importance of creating code efficiently is paramount. When working with Dojo and other AMD compatible tools, you can easily harness the power of writing very modular source code. Two common challenges you might face when working with AMD are choosing meaningful names for your modules and determining naming conventions for local variable references to your modules.

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.

Nov 16

Dive Into Dijit with AMD

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

One huge feature that sets the Dojo Toolkit apart from other JavaScript libraries is its UI component system: Dijit. A flexible, comprehensive collection of Dojo modules (complemented by corresponding resources like images, CSS files, etc.), Dijit allows you to create flexible, extensible, stylish widgets. To learn how to install, configure, and use basic Dijits within your web application, keep reading!


themes

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

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.

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

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.

Nov 7

Dojo Tutorial: Dojo Start

By Dylan Schiemann on November 7, 2012 2:45 pm

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

Dojo Start

Dojo Start 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.

Without further ado, check out the Dojo Start tutorial!

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.