Introduction to the Dojo toolkit, Part 1: Setup, core, and widgets

Object-oriented JavaScript programming for Java developers

reWeb 2.0 has brought with it the need to develop extensive JavaScript infrastructure code on the client side, something few Java developers saw themselves doing five years ago. The open source Dojo toolkit distinguishes itself from other JavaScript libraries with capabilities that go far beyond simplifying DOM access. In this first half of his introduction to Dojo, Sunil Patil introduces the toolkit's basic features, helps you set up your development and debugging environment, and shows you how to put Dojo's mojo to work in your Ajax development projects. Level: Intermediate

In the Web 1.0 world, the common Java application architecture called for implementing business and application flow logic with Java EE on the server side. Web application developers typically used JavaScript only for input validation and to display error messages to users. Accordingly, most Web 1.0 applications used some kind of Model-View-Controller (MVC) framework -- such as Struts, JavaServer Faces (JSF), or Spring MVC -- on the server side, but few needed a JavaScript framework for client-side programming.

Web 2.0 has ushered in a very different programming model, where much of the application flow and business logic is developed using JavaScript on the client side. We commonly use JavaScript code for tasks such as:

  • Making asynchronous requests to the server side
  • Document object model (DOM) manipulation and event-handling logic that works across multiple browsers
  • Internationalization
  • Logging

You can either write and maintain this infrastructure code on your own or take the less painful route of using a JavaScript library. One of the more capable entries in this space is the Dojo toolkit, an open source JavaScript framework that you can use to create free or commercial applications. This article introduces you to Dojo's core features and widget library; walks you through installing and setting up a JavaScript development and debugging environment (using Dojo and Firebug); and gets you started with building a sample application using Dojo. You'll also learn about Dojo's support for object-oriented programming in JavaScript (which is based on familiar concepts such as classes, constructors, and inheritance), and get a quick introduction to Dojo modules.

Dojo at a glance

There currently are quite a few open source and commercial JavaScript frameworks available, including Prototype, EXTJS, YUI, and jQuery. Whereas most JavaScript frameworks focus on simplifying DOM access, it could be argued that Dojo is a one-stop solution. Here is some of what Dojo does for you:

  • Introduces the concept of classes, constructors, and inheritance in JavaScript, allowing you to build object-oriented JavaScript code.
  • Allows you to build more-manageable code by breaking your code into modules.
  • Simplifies Ajax programming by providing infrastructure code for making asynchronous requests using XMLHttpRequest and cross-browser-compatible DOM-manipulation code.

As a framework, Dojo has three main components:

  • The Dojo core provides core functionality such as ability to make remote method calls, manipulate DOM node, and manipulate Cascading Style Sheets (CSS). The Dojo core also supports animation features and drag-and-drop functionality.
  • Dijit is Dojo's widget library, built on top of the Dojo core. Dijit provides template-based, accessible widgets, not only for simple form control but also advanced widgets such as calendar control, menus, toolbars, progress bars, charts, and graphs.
  • DojoX is a container for developing extensions to the Dojo toolkit. It acts as an incubator for new ideas and a testbed for experimental additions to the main toolkit, as well as a repository for more stable and mature extensions.

Dojo's history

Alex Russell, David Schontzler, and Dylan Schieman started work on the Dojo framework by in 2004 while working for Informatica. Later many other developers started contributing to Dojo. In 2005, the Dojo foundation was formed to house the code and manage intellectual-property rights. So far, eight major releases have been issued, and the framework has been downloaded more than 1 million times. Companies such as IBM, AOL, Sun, SitePen, Blogline, Google, Nextweb, and others contribute to the Dojo framework.

Setting up your development environment

Before you can start developing this article's sample Dojo application, you need to set up your development and debug environment so that you can try out application changes rapidly and debug issues if errors occur. Setting up a development environment for a JavaScript framework like Dojo is a little different from doing so for Java SE or EE frameworks. You must first install the Dojo framework in your Web application and then set up the debugging environment in the browser.

1 2 3 4 5 6 Page 1
Page 1 of 6