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:

  • Hot skills: Dojo encourages Ajax innovation
    What is it? In April 2006, a reviewer provided a round-up of 50 different Ajax frameworks and toolsets - and the number has certainly increased since...
  • HP prepares double dose of data deduplication
    HP's first two data deduplication products surface, unannounced, at its Tech Forum: a dedupe application for SMBs and remote offices and a license...
  • HP prepares double dose of data deduplication
    HP's first data deduplication products surface, unannounced, at HP's Technology Forum. One is an in-line dedupe application for SMBs and remote...
  • EGL Rich UI on IBM i: Do you Dojo?
    Taking advantage of the Rich UI features of EGL architecture on the AS/400 can save you time and complexity. Rich internet applications can be...
  • Ajax Tutorial
    Ajax, short for Asynchronous Java and XML, has allowed developers to create interactive Web pages with rich interfaces. Rich Internet applications...

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.