Wednesday, June 11th, 2008

Ajaxian Featured Tutorial: A Double Dose of Dojo

Category: Dojo

<>p>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:

< view plain text >
  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:



produces a nice chart like this:

Related Content:

  • Ajax Learning Guide
    Chances are, you've been doing JavaScript and XML developer work in Lotus Domino for quite some time. This old/new approach is causing quite a stir in...
  • JavaOne2006 - Day3
    Some of the hottest topics at this year's event were Ajax, scripting languages, JavaServer Faces and the new features in Java EE 5. See what other...
  • Ajax Learning Guide
    Are you a Web developer? The time has come to rethink your entire approach to developing Web applications. Find out about the Ajax approach...
  • Ajax Learning Guide
    Are you a Web developer? The time has come to rethink your entire approach to developing Web applications. Find out about the Ajax approach...
  • Java versus C# -- no need for war, just understanding
    Learning Java first may be sharp...

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.