June 10, 2011, 1:39 p.m.
posted by idm
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.
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.
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.
Figure 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.
Fisheye effect through Dojo Widget
This is an idea well worth investigating further for your own libraries if you don't end up using Dojo.