Dojo for Designers

By on February 24, 2009 1:01 am


From the perspective of a web designer with experience predominantly in HTML and CSS (the content and presentation layers), the behavior layer can seem a bit mystical. The behavior layer focuses on interactivity; unfortunately, it is a layer that can easily get lost, overlooked, or simply ignored in the collection of obligations that lay at the web designer’s feet—especially those who work for themselves, or who are within an organization as the sole “web person.” To all the multi-hatted, multi-tasked designers out there, this article is an introduction to Dojo, a JavaScript toolkit that makes adding oomph to the behavior layer (and so much more) really easy to do.

The Three Layers of Web Development

As web designers and developers, it is helpful that we understand and adhere to the three essential layers of modern web page/application development. These core layers—content, presentation, and behavior—form the basis for what we do. From ideas to sketching out wireframes, through our favorite graphic and code editing applications, the end result comes to life built upon the foundation of content, presentation, and behavior.

Content, or structure, is the central building block of any web page or application. This is comprised of the text and images that your audience sees and interacts with. It is the meat and potatoes, the layer that draws people to your page or application. This is HTML/XHTML.

Presentation, or style, is how your page or application looks to your audience. A little style can go a long way, by taking great content to a whole new level with specified fonts, colors, background images, and positioning. This is CSS.

Behavior, or interactivity, is the layer that—in essence—does something. Need your audience to submit a form? Do you want images to be displayed with a Lightbox effect? Do you want to be able to have your audience simply drag an image of something they want to buy and drop it into a shopping cart? Behavior to the rescue.

Oh, Behave!

So your forte is crafting killer HTML and CSS. You just haven’t had time to learn about the magic and power of the behavior layer, and how JavaScript can benefit your page or application. It takes hours, days, even weeks to learn new stuff, right? And JavaScript, well, that’s just not your thing. It’s intimidating and complex. Daunting. Scary! I know. I used to feel the same way. Until Dojo.

Dojo in Action

Let’s take a look at some of the things that we can do with Dojo to enhance our behavior layer, shall we? First, let’s stroll on over to the Dojo Campus and get our learn on. This is a great resource. We’re going to begin our education by looking at the site’s Dojo Feature Explorer, where there are lots of useful interactive demos. The Feature Explorer is a great hands-on tool for getting familiar with Dojo, and to see what it can do for you. We’re going to start by looking at ways to use Dojo to enhance our images, in particular, by using Lightbox and FishEyeLite.

Lightbox (Single Image)

lightbox (Single Image) Demo

The dojox.image.Lightbox widget will be what we use to display our image with a nice Lightbox effect. This effect has become a standardized way to present image files to audiences, and you’re going to see how it’s done with Dojo.

Let’s begin the Lightbox overview by heading over to the demo page. This is what you’re going to be doing using Dojo’s Lightbox widget. Pretty cool, eh? In this demo, we’ve added the dojox.image.Lightbox widget code to the page, and then placed dojoType="dojox.image.Lightbox" within our anchor element to get the image to pop up in a nice, well-designed, styled and ready to roll Lightbox. Let’s take a look at the code that makes this possible:

Conveniently linking our CSS in the head of HTML:

Now we’re including Dojo in the head of our HTML. Note, we are using Dojo from the content distribution network (CDN) for ease of use with this demo. You can, of course, download your own Dojo bits and pull from there:

Author’s note: Since Dojo code is hosted on AOL’s CDN, your life is a whole lot easier. Simply add the simple script tag (as seen in the first script tag in the previous code block) and you are ready to harness the full potential of Dojo. No need to download and install Dojo on your server. Also note that when scaling matters most, you might not want to include resources in the HEAD, but at the end of your HTML document to prevent the blocking of resources.

This is the content within the body of our HTML:

Lightbox (Multiple Images)

lightbox (Multiple Images) Demo

The dojox.image.Lightbox widget can also be used to display multiple images with a nice Lightbox effect. We’re going to expand on our previous demo, and see how simple it is to set up multiple images for use with Lightbox.

Let’s take a look at the demo. This is what you’re going to be doing using Dojo’s Lightbox widget with multiple images. Similar to the previous Lightbox demo, we’ve added the dojox.image.Lightbox widget to the page, and we’ll be using it to present our images within the Lightbox viewer. When using multiple images, we also set an additional attribute for Lightbox to use, the group attribute. The code looks like this:

Linking to CSS in the head of HTML:

Now for the Dojo JavaScript in the head of our HTML:

The content within the body of our HTML:

Author’s note: The anchor tags span two lines here in the following code block, but you can have them as one line in your code. Also, to see complete data for the previous block of code, please view the code’s source on the demo page.

And last, a bit of CSS:

#lightboxViewer ul {
	list-style: none;


fishEyeLite Demo

Now let’s take a look at another example of how we can use the Dojo Toolkit to add some flair to our behavior layer. This time, we’re going to be working with the dojox.widget.FishEyeLite widget. This is a really cool effect—if you’re a Mac user, you see this type of effect when you hover over your Dock.

Okay, let’s head over to the demo page to see this behavior in action. I love how easy it is to add this effect to existing elements! We’re using the widget with img elements in this demo, but you can use it with various HTML elements.

Here are the links to the CSS in the head of our HTML:

Here we’re including the relevant Dojo JavaScript in the head of our HTML:

Author’s note: One note about the height and width properties in the code block above. The size of the images used in this demo are 128px. In the CSS (which we’ll get to below) we set the initial size of the img elements to 64px. By setting the height and width properties in the JavaScript to 2.0, we are telling the widget to increase the image size by that percentage when it is hovered over, thus taking the image from 64px to 128px.

Here’s what’s in the body of our HTML:

And last, a smidgen of CSS to wrap things up:

.imgBounce {
      margin: 0 5px;
      padding: 0;
      width: 64px;
      height: 64px;
     vertical-align: middle;
     position: relative;

     top: 0;

#fishEyeLiteViewer {
     height: 140px;
     line-height: 140px;


Dojo is often thought of as complex, but as you can see from these examples, it’s really quite easy to use Dojo to add some interactivity to your web site. Graphics, HTML, and CSS might be a web designer’s domain, the place we call home and that feels most comfortable, but as we’ve proven, a little bit of easily implemented JavaScript can take your skills to another dimension. Happy coding!