The partners behind the Open Asynchronous JavaScript and XML (Ajax) Initiative are strengthening the community by building an open platform in which developers can collaborate. The founding members of the initiative -- including BEA Systems, Borland Software, the Dojo Foundation, the Eclipse Foundation, Google, IBM, Laszlo Systems, Mozilla, Novell, Openwave Systems, Oracle, Red Hat, Yahoo!, Zend Technologies, and Zimbra -- realize the tremendous importance of introducing new tools to a growing community of Ajax developers. The initiative puts a wide range of tools into the hands of the people who are building responsive user interfaces (UIs) into new and existing environments. The unified interface and advanced debugging capabilities in Eclipse bring an enterprise-class coding environment to the community. Eclipse's ATF will offer easy access to toolkits from Dojo and Zimbra.

Initiative members believe that major backing of Open Ajax may be the tipping point it takes to drive the message that the Web still has life in it. The Open Ajax Initiative is working to do something positive for the health of the Web in general.

Note: See Resources for a press release explaining the Open Ajax Initiative.

The Eclipse ATF

The Eclipse Foundation has been a beacon for open source development and powerful application frameworks. Eclipse is a Java™-based open source development platform that is fully extensible and can be deployed on every major platform. A wide variety of plug-ins and tools are available.

As part of the Open Ajax Initiative, the Eclipse Foundation is building the ATF, which will provide an extensible framework for runtime environments, such as Dojo and Zimbra. The ATF acts a central component unifying tools that are part of the Open Ajax Initiative. An early version of the ATF is available from IBM alphaWorks (see Resources).

Based on the Eclipse Web Tools Project, the ATF provides tools for building independent development environments (IDEs), includes features such as runtime syntax checking, and embeds a JavaScript debugger, Document Object Model (DOM) browser, and a Mozilla Web browser. The ATF is what gives traditionally sparsely featured open source development tools the full enterprise-style development environment that many developers are comfortable working in. This tutorial focuses on Dojo and Zimbra, as they are two of the most capable and mature Ajax tools available. Figure 1 shows the components of the initiative and how the ATF fits in.

Back to top

Dojo

In anticipation of the adoption of tools used in the Open Ajax Initiative, you should familiarize yourself with the tool kits the ATF will support, such as Dojo and Zimbra.

Dojo is a community project designed to unify the efforts of the JavaScript and Dynamic Hypertext Markup Language (DHTML) communities in a single direction by building a standard JavaScript library. The community realized it wouldn't get far without people working together, so three separate predecessor tool kits were unified to form the Dojo Foundation, which owns and maintains the code. Dojo has several optional packages, including an Ajax edition; an I/O edition; and a "Kitchen Sink" edition, which includes the entire tool set.

Getting started with Dojo is as simple as downloading one of five editions:

• Ajax -- Use the Ajax edition to create applications with asynchronous I/O (XmlHttp), integrate complex visual effects, and use an aspect-oriented event system.
• I/O (XmlHttp) -- The I/O edition is built with dojo.io.bind, so you can use an XmlHttp layer for asynchronous I/O.
• Event + I/O -- This edition includes Dojo's aspect-oriented event system and the XmlHttp layer.
• Widgets -- This includes HTML and Cascading Style Sheet (CSS) template capabilities with loose coupling to the widget implementation, providing distinct separation of style, content, and logic.
• The "Kitchen Sink" -- This build includes all the Dojo libraries.

Install Dojo

Choose the appropriate Dojo edition, download it, and extract the package. Move the following files into your root Web directory (you'll add a helloworld.html file for example purposes):

• dojo.js
• iframe_history.html
• src (directory)
• helloworld.html

Add a single line to .html files with the path to your Dojo files:

<script type="text/javascript" src="path/to/dojo/dojo.js"></script>

You're now free to load Dojo libraries and widgets within your JavaScript. (see Resources for detailed instructions).

A simple Dojo example

Now let's try a simple example that prints "Hello World!" through a debug process each time you press a button. We will edit helloworld.html in this example. The initial bit of code shown in Listing 1 sets the path for dojo.js and turns debug mode on so you can test your output.

<html>
  <head>
    <script type="text/javascript">
      djConfig = { isDebug: true };
    <script>

    <script type="text/javascript" src="./dojo.js"></script>

Use the Button2 widget with "events" to call out your helloPressed function:

<!-- DOJO EXECUTION -->
<script type="text/javascript">
  dojo.require("dojo.widget.Button2");
  dojo.require("dojo.event.*");

The helloPressed function simply makes a call to dojo.debug to print out the "Hello World!" message:

function helloPressed()
{
  dojo.debug('Hello World!');
}

Here you have an init function, which associates the helloButton with a Dojo widget. The second line indicates that the helloPressed function should be called when you click Press Me.

function init()
{
  var helloButton = dojo.widget.byId('helloButton');
  dojo.event.connect(helloButton, 'onClick', 'helloPressed');
}

The following line runs the init function on the initial page load:

dojo.addOnLoad(init);

Finally, the body of the HTML contains the actual button, which is given a type and an Id to associate it with the JavaScript above.

    </script>
  </head>

  <body>
    <button dojoType="Button2" widgetId="helloButton">Press Me</button>
  </body>
</html>

Figure 2 shows the output of your "Hello World!" Dojo application after you click Press Me.

A detailed HelloWorld example is available from the Dojo wiki (see Resources).

Dojo makes integrating small snippets of Ajax code into existing Web pages easy by providing a powerful and growing widget set with which you can easily add UI effects you would expect to find in a desktop environment. Developers are protected from having to write every part of the UI by hand. For advanced users, it provides capabilities that most tools don't. For instance, a packaging and build system are included for quickly optimizing projects for deployment. Dojo is a palatable solution for Ajax developers at all levels.

The introduction of the ATF, which integrates Dojo into Eclipse, will advance these capabilities to the enterprise level by providing a graphical coding environment and access to additional Eclipse plug-ins. For an early demo of Dojo in Eclipse, see Resources.

Back to top

The Zimbra Ajax Toolkit

Zimbra is contributing to the Open Ajax Initiative by providing open access to the Zimbra Ajax Toolkit (AjaxTK). Zimbra has used AjaxTK to push the envelope of what we think of as a Web page by developing a complete online Collaboration Suite, including enterprise-class e-mail, calendar, and contacts. The AjaxTK squeezes the responsiveness gap between a Web-based application and a standard desktop-based application to near zero. Figure 3 shows the mail application included in Zimbra's Collaboration Suite, developed using the AjaxTK.

Figure 4 shows Zimbra's calendar application, also developed with AjaxTK.

The same Ajax tool used in-house to develop this impressive Collaboration Suite is available to the public. A belief in the strength of an open and nonproprietary environment for Ajax development provided the impetus to open the powerful tool to the public.

AjaxTK is built on the following source packages:

• config -- Configuration information and message localization files
• core -- Base exception classes and environment information
• debug -- Debug classes for run time application debugging
• dwt -- DHTML Widget Toolkit:
  • config -- CSS rules, images, and localized text
  • core -- Exception handling and low-level DOM utility functions
  • dnd -- Drag-and-drop support
  • events -- Various events used by the tool kit and built on the general AjaxTK event support
  • graphics -- Points, rectangles, and CSS utilities
  • widgets -- The DWT widget set and supporting classes
  • xforms -- Provides an XForms implementation for creating complex forms
• events -- Base event and event listener classes, as well as the event manager class responsible for event registration and dispatching
• net -- Network communications
• soap -- SOAP document handling
• util -- Utility classes for such tasks as string manipulation, cookie management, data manipulation, deferred action support, and callback support
• xml -- XML document handling

Enterprise developers can take comfort in knowing that the Zimbra Ajax Toolkit has been used to build large, robust applications deployed in the real world. Zimbra's Collaboration Suite contains more than 130,000 lines of JavaScript. AjaxTK takes aim at developers planning to build complete replacements for desktop applications. If you want to enhance existing Web pages with Ajax, perhaps Dojo is more appropriate. The choice depends on what you're trying to do.

As AjaxTK is plugged into Eclipse, components you generally need to develop a rich UI -- such as trees, buttons, and lists -- are becoming easier and quicker to implement. Integration with Eclipse adds enhanced capabilities to the table, including powerful debugging tools and drag-and-drop composition. Zimbra plans to continue to drive Ajax by collaborating with the members of the Open Ajax Initiative and supporting open, nonproprietary technologies.

Back to top

The initiative goes forward

As the adoption of Ajax helps the Web reach new levels of interactivity and responsiveness, the importance of enterprise-class development tools will continue to grow. The ATF, Dojo, and Zimbra are key components to this advancement. As Web audiences continue to demand better, faster, smoother Web applications, the burden is on tool kit developers and the browser manufacturers to maintain a cooperative environment that encourages advancements in UI and cross-platform compatibility. The Open Ajax Initiative is a framework in and of itself, built for just such a purpose.

As the Open Ajax Initiative makes strides and the ATF comes to life, this series will continue, providing technical detail and tutorials for building Ajax applications in Eclipse.

Acknowledgements

Special thanks to Alex Russell (Dojo Foundation founder and president), Ross Dargahi (Zimbra co-founder and vice president of engineering), and John Robb (Zimbra vice president of marketing and product management) for taking the time to weigh in on the Open Ajax Initiative for this article.

Resources

Learn

• The press release "Tech Titans Contribute Browser-Boosting Ajax Technologies to Open Source Community" provides details on the Open Ajax Initiative.
  
  
• Visit Eclipse.org for extensive Eclipse information.
  
  
• Visit The AJAX Toolkit Framework (ATF) Project for details on the ATF, as well as the original ATF proposal.
  
  
• Visit Dojo for documentation and more information.
  
  
• Find a detailed HelloWorld example on the Dojo JotSpot.
  
  
• Find an early demo of Dojo in Eclipse on IBM alphaWorks' Dojo Project Cycle Demo.
  
  
• Register for a hosted demo of Zimbra's flagship product, Zimbra Collaboration Suite.
  
  
• Read the complete Zimbra AjaxTK white paper "The Zimbra Ajax Toolkit (AjaxTK) -- A Toolkit for Developing Rich, Browser-based Applications (PDF)."
  
  
• Read the developerWorks tutorial "Build apps using Asynchronous JavaScript with XML (AJAX)" to learn how to build AJAX-based Web applications, complete with real time validation and without page refreshes, by following the construction of a sample book order application.
  
  
• Check out the "Recommended Eclipse reading list."
  
  
• Browse all the Eclipse content on developerWorks.
  
  
• Users new to Eclipse should look at the Eclipse start here.
  
  
• Expand your Eclipse skills by checking out IBM developerWorks' Eclipse project resources.
  
  
• To listen to interesting interviews and discussions for software developers, check out check out developerWorks podcasts.
  
  
• For an introduction to the Eclipse platform, see "Getting started with the Eclipse Platform."
  
  
• Stay current with developerWorks' Technical events and webcasts.
  
  
• Check out upcoming conferences, trade shows, webcasts, and other Events around the world that are of interest to IBM open source developers.
  
  
• Visit the developerWorks Open source zone for extensive how-to information, tools, and project updates to help you develop with open source technologies and use them with IBM's products.
  
  

Get products and technologies

• Get the alpha version of the Ajax Toolkit Framework from IBM alphaWorks.
  
  
• Download AjaxTK, the Zimbra Ajax Toolkit.
  
  
• Check out the latest Eclipse technology downloads at IBM alphaWorks.
  
  
• Innovate your next open source development project with IBM trial software, available for download or on DVD.
  
  

Discuss

• An active Zimbra forum supports the development of working examples using AjaxTK.
  
  
• The Eclipse Platform newsgroups should be your first stop to discuss questions regarding Eclipse. (Selecting this will launch your default Usenet news reader application and open eclipse.platform.)
  
  
• The Eclipse newsgroups has many resources for people interested in using and extending Eclipse.
  
  
• Participate in developerWorks blogs and get involved in the developerWorks community.
  
  

About the author

Tim McIntire works as a consultant in a variety of computer science disciplines. His research has been published in Concurrency and Computation and IEEE Transactions on Geoscience and Remote Sensing. He is also the co-founder of Cluster Corp., a market leader in Rocks cluster integration and HPC consulting. Previously, he led the computer science effort at Scripps Institution of Oceanography's Digital Image Analysis Lab, and his work on the NASA-sponsored Parallel Image Processing Environment (PIPE) was featured in an article on Rocks cluster software in the computational science magazine EnVision.

Rate this article

Comments

Back to top

Table of contents

• The Eclipse ATF
• Dojo
• The Zimbra Ajax Toolkit
• The initiative goes forward
• Acknowledgements
• Resources
• About the author
• Comments

Next steps from IBM

Create rich Internet applications using WebSphere Portal Express Web 2.0 technologies.

---

• Try: WebSphere Portal Express
• Article: Get started using Ajax and WebSphere Portal Express
• Tutorial: Quickly build a an Ajax-enabled WebSphere Portal Express Web application
• Demo: Architecture, design, and construction using the IBM Rational Software Delivery Platform: AJAX
• Buy: WebSphere Portal Express

Dig deeper into Open source on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

Get started with the cloud-based trial and pattern development kit.

Special offers