Wednesday, June 11th, 2008

Ajaxian Featured Tutorial: A Double Dose of Dojo

Category: Dojo

The team at Dojo have been really working hard to improve their documentation and put more information in the hands of Dojo developers. Between and the SitePen blog, they’ve really come a long way to providing solid education material for the Dojo community.

Normally, the Ajaxian Featured Tutorial consists of one really good educational piece but two really awesome tutorials were recently posted and I decided to give Ajaxian readers a two-fer:

Tutorial 1: Dojo Drag and Drop, Part 1: dojo.dnd

In the first part of this series, Revin Guillen takes you through the ins-and-outs of Dojo’s drag and drop API named dojo.dnd.

What I really like about Revin’s tutorial is his extensive code samples that reinforce the concepts. His demo code on building a drop handler, for example, is very extensive and concise allowing the reader to easily understand how to create the drop handler:


  1. // calculate simple totals in the wishlist and cart titles
  2. var setupCartTitle = function(){
  3.     var title = "Shopping Cart";
  4.     var cartLength = cart.getAllNodes().length;
  5.     if(cartLength){
  6.         var items = cartLength > 1 ? " items" : " item";
  7.         title += " (" + cartLength + items + ")";
  8.     }
  9.     cartPane.setTitle(title);
  10. };
  11. var setupWishlistTitle = function(){
  12.     var title = "Wishlist";
  13.     var wishlistLength = wishlist.getAllNodes().length;
  14.     if(wishlistLength){
  15.         var items = wishlistLength > 1 ? " items" : " item";
  16.         title += " (" + wishlistLength + items + ")";
  17.     }
  18.     wishlistPane.setTitle(title);
  19. };
  20. dojo.connect(cart, "onDndDrop", setupCartTitle);
  21. dojo.connect(wishlist, "onDndDrop", setupWishlistTitle);

Tutorial 3: A Beginner’s Guide to Dojo Charting, Part 1 of 2

Next up Doug McMaster teaches you how to leverage Dojo’s charting capability:

In this two part guide, we look at how easy it is to get Dojo Charting up and running, 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.

Doug explains how to easily create charts by customizing the available 2D charts included in Dojo charting API. Code as simple as:


Basic Charting


produces a nice chart like this:

Posted by Rey Bango at 9:00 am
1 Comment

3.9 rating from 44 votes

1 Comment »

Comments feed TrackBack URI

I’ve put up examples inspired by the Sitepen blog posting on the DojoCampus Demo Explorer, have a look at the demos named “Simple ….” at

Comment by sos — June 11, 2008

Leave a comment

You must be logged in to post a comment.