The first time you sign into developerWorks, a profile is created for you. Select information in your profile (name, country/region, and company) is displayed to the public and will accompany any content you post. You may update your IBM account at any time.

All information submitted is secure.

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerworks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

All information submitted is secure.

My developerWorks:

My notifications:

Sign out

Select a language:

Build an Ajax application with the Dojo Toolkit

Joe Lennon, Product Manager, Core International

Joe Lennon is a 25-year-old mobile and web application developer from Cork, Ireland. Joe works for Core International, where he leads the development of Core's mobile HR self service solutions. Joe is also a keen technical writer, having written many articles and tutorials for IBM developerWorks on topics such as DB2 pureXML, Flex, JavaScript, Adobe AIR, .NET, PHP, Python and much more. Joe's first book, Beginning CouchDB was published in late 2009 by Apress. In his spare time, Joe enjoys travelling, reading and video games.

Summary: The Dojo toolkit is a JavaScript library that makes the process of building large JavaScript-based Rich Internet Applications (RIAs) much simpler. With a wide range of features—from DOM querying and manipulation, Asynchronous JavaScript and XML (Ajax) request handling, excellent object-orientation support, and a full user interface widget library (Dijit)—Dojo is an excellent library to use to build a dynamic and interactive web application. In this tutorial, learn about many of the concepts of Dojo and the Dijit widget library through the development of a fully featured sample application, a contact manager system. This application lets a user browse, create, edit, and remove contacts (and contact groups) from a MySQL database. PHP is used on the server side to communicate with the database, with Dojo and the Dijit component library providing a rich, Ajax-powered user interface. The final result is a powerful web application that you can use as a foundation for your own RIAs.

Date: 01 Mar 2011
Level: Intermediate
PDF: A4 and Letter (334 KB | 44 pages)Get Adobe® Reader®

Activity: 84775 views
Comments:

Before you start

This tutorial is for web application developers who are interested in utilizing the Dojo Toolkit to create visually impressive RIAs with relative ease. The tutorial guides you through the process of developing a full web application using Dojo, and although you will learn a lot about Dojo through it, it is recommended that you familiarize yourself with the basics of Dojo before proceeding. You should also be familiar with HTML and CSS, and you should be comfortable with JavaScript development. You don't need to be an expert, but the more knowledge you have of these topics, the easier the tutorial will be to follow. For a detailed introduction to Dojo, please see Resources for links to some introductory articles.

About this tutorial

The Dojo toolkit is a powerful JavaScript framework that provides all of the building blocks required to build impressive desktop-style RIAs. At its base, the framework includes various useful features that make the process of writing JavaScript applications easier, including DOM querying and manipulation, effects and animations, Ajax event handling, and more. Where Dojo stands apart from many other libraries, however, is in its one-of-a-kind widget system, Dijit, which includes a powerful parser that lets you use Dijit components as if they were regular HTML elements. Finally, Dojo also includes an extensive suite of extensions in DojoX that provide additional features, including support for a wide range of data stores, data grids, additional Dijit components, and much more.

In this tutorial, you will implement each of these three parts of the toolkit in a sample application that resembles a desktop contact manager application. This application will allow you to manage your contacts by adding new ones as well as editing or deleting existing ones. You can arrange your contacts into groups, moving them between groups as required. The groups themselves can also be added, modified, and deleted. The idea is that this tutorial will show you how to create a fully functional, dynamic, database-driven application with relative simplicity and much less code than you might expect. The application you create in this tutorial can be easily extended or modified to create projects of your own.

Prerequisites

To follow this tutorial, you will need the following:

A web server that supports PHP, such as Apache
PHP, version 5 or later
MySQL, version 4 or later (earlier versions may work)
Dojo Toolkit 1.5 or later (can be loaded using the Google Content Delivery Network. Alternatively, you can download the toolkit locally and run it from your development machine.)

The PHP scripts and MySQL tables used in this application are extremely straightforward, so they should be relatively easy to convert to other server-side languages such as Java™ code, C#, Python, and so on, and databases such as DB2®, Oracle, and SQL Server. The majority of the work in this application is done by Dojo, with PHP and MySQL simply used for persistence.

See Resources for links to these tools.

Comments