Section 14.5. Dojo | Learning JavaScript, 2nd Edition

14.5. Dojo

I hesitated about including Dojo. In some ways, it demonstrates how far you can take JavaScript away from the language, which makes it a good demonstration of the flexibility of the language. On the other hand, Dojo demonstrates how far you can take JavaScript away from the language, to the point where much of the simplicity of JavaScript is lost (not to mention some of the built-in DOM functionality).

Dojo really is a mastery of packaging and encapsulation. Much of the functionality has to do with keeping the amount of code loaded into a page to a minimum. Unfortunately, it also makes the code extremely difficult to read.

What sets Dojo apart is its focus on making desktop applications in the browser. It supports a Flash-based storage mechanism, including providing the Flash file used as a container. Two stellar demos of the library are Mail, a simple mail application, and Moxie, a web editor with persistent storage.

Another aspect of Dojo's library and framework that makes it stand out is its concept of widgets, which we'll get into later.

The Dojo Toolkit web site is at http://dojotoolkit.org/. This includes the beginnings of a very nice set of documentation by Alex Russell, at http://dojotoolkit.org/docs/, and a manual at http://manual.dojotoolkit.org/index.html.

14.5.1. Installing and Setting Up Dojo

When you download and unzip Dojo, you'll end up with a group of directories and files. Just as with previous frameworks, you'll include dojo.js in your Dojo-enabled application, but you'll also need to load the secondary libraries based on your planned development activity. And there are a lot of libraries. For instance, if you're working with Dojo form widgets (a packaged functionality), you could end up needing to include the following script components:

dojo.require("dojo.widget.validate");         dojo.require("dojo.widget.ComboBox"); dojo.require("dojo.widget.Checkbox"); dojo.require("dojo.widget.Editor"); dojo.require("dojo.widget.DatePicker"); dojo.require("dojo.widget.Button");

Dojo then loads only those components you specify.

Like most of the newer libraries, Dojo has an Ajax component and drag-and-drop support, as well as an effects component, with slides, fades, and so on. In addition, it has three sets of widget libraries: ones for layout, form, and a general widget. It's actually the widget libraries that interested me most with Dojo.

14.5.2. Dojo Widgets

Dojo widgets are HTML elements bound to custom JavaScript objects. They're not unlike the added functionality associated with HTML elements in the BOM, except that widgets extend the base functionality. And they do so through attachment of a CSS class, which is a nicely different approach from the other libraries.

To demonstrate this capability, there's a rather nice fisheye component that magnifies content when your mouse is over the object. A demo of its use is included in the Dojo download, so I picked through the example to see what I could stea ...borrow.

Example 14-5 demonstrates how to use the fisheye widget. The key elements are the use of the class definitions for each DIV element that encloses the toolbar image, and the attribute for the image. Once the proper library is loaded, in this case, dojo.widget.FisheyeList, no other script needs to be used in the page. The reason is that the underlying code uses class definitions and attributes to decide what needs to be adjusted and when.

Example 14-5. Fisheye widget

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>FishEye on Dotty</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .container { width: 800px;              margin: 0px auto;              border: 1px solid #00f;             } .content { padding: 30px } .dojoHtmlFisheyeListBar {         margin: 0 auto;         text-align: center; } .outerbar {         background-color: #CCD9FF;         text-align: center;         left: 0px;         top: 0px;         width: 100%; } </style> <script type="text/javascript" src="/books/4/327/1/html/2/dojo/dojo.js"></script> <script type="text/javascript"> //<![CDATA[         dojo.require("dojo.widget.FisheyeList"); //]]> </script> </head> <body> <div > <div > <div          dojo:itemWidth="60" dojo:itemHeight="60"         dojo:itemMaxWidth="300" dojo:itemMaxHeight="300"         dojo:orientation="horizontal"         dojo:effectUnits="2"         dojo:itemPadding="10"         dojo:attachEdge="top"         dojo:labelEdge="bottom"         dojo:enableCrappySvgSupport="false" >         <div  onClick="load_app(1);"                 dojo:iconsrc="/books/4/327/1/html/2/dotty.gif" caption="Dotty">         </div>         <div  onClick="load_app(2);"                 dojo:iconsrc="/books/4/327/1/html/2/doomed.gif" caption="Doomed">         </div>         <div  onClick="load_app(3);"                 dojo:iconsrc="/books/4/327/1/html/2/falling.gif" caption="I'm falling">         </div>         <div  onClick="load_app(4);"                 dojo:iconsrc="/books/4/327/1/html/2/impatient.gif" caption="Impatient">         </div>         <div  onClick="load_app(5);"                 dojo:iconsrc="/books/4/327/1/html/2/upright.gif" caption="Upright">         </div>         <div  onClick="load_app(6);"                 dojo:iconsrc="/books/4/327/1/html/2/mad.gif" dojo:caption="Mad" >         </div> </div> </div> <div > <p><pre> Forgive me, I'm no good at this. I can't write back. I never read your letter. I can't say I got your note. I haven't had the strength to open the envelope. The mail stacks up by the door. Your hand's illegible. Your postcards were defaced. Wash your wet hair? Any document you meant to send has yet to reach me. The untied parcel service never delivered. I regret to say I'm unable to reply to your unexpressed desires. I didn't get the book you sent. By the way, my computer was stolen. Now I'm unable to process words... Excerpt from <em>All She Wrote</em> by Harryette Mullen </pre></p> </div> </div> </body> </html>

Figure 14-2 shows the page after the mouse is moved over the menu bar. The effect is very well done, providing just enough of the rollover feel of a fisheye toolbar magnifier. More importantly, if JavaScript is enabled, it's easy to include script to create the menu; if JavaScript's not enabled, it provides an alternative menu system in a NOSCRIPT tag.

Figure 14-2. Fisheye effect through Dojo Widget

You can also create your own widgets. One of the articles in the documentation section of the Dojo Toolkit provides detailed instructions on how to create your own widget (http://dojotoolkit.org/docs/fast_widget_authoring.html). Just like with Apple's Dashboard widgets, these JavaScript widgets are a package of XHTML page elements constrained by CSS and bound to JavaScript.

This is an idea well worth investigating further for your own libraries if you don't end up using Dojo.

If there's one other major downside to Dojo aside from the difficulty in reading the script (outside of the use of compression), it's the fact that it doesn't load quickly. There is a noticeable lag in loading unless you strip the modules used down to the absolute minimum.