Skip to main content

skip to main content

developerWorks  >  Open source  >

Two tools bring Ajax to Eclipse's Ajax Toolkit Framework

Dojo and Zimbra

developerWorks
Document options

Document options requiring JavaScript are not displayed


My developerWorks needs you!

Connect to your technical community


Rate this page

Help us improve this content


Level: Intermediate

Tim McIntire (tim949@gmail.com), Software Engineer and HPC Cluster Architect, Consultant

09 May 2006

IBM's contribution to the launch of the new Open Ajax Initiative aims to increase accessibility to the powerful Web programming technique through the Eclipse Foundation. To help prepare developers for the new tool set, this article introduces two existing runtime tools -- Dojo and Zimbra -- which will be supported in Eclipse's Ajax Toolkit Framework (ATF).

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.


Figure 1. Open Ajax Initiative components
Open Ajax Initiative components


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.


Listing 1. A simple example that prints "Hello World!"

<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:


Listing 2. Use Button2 widget with "events" to call out 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.


Listing 3. Associate ID with above JavaScript

    </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.


Figure 2. Output of "Hello World!" Dojo application
Output of Hello World

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 3. Zimbra's mail application
Zimbra's mail application

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


Figure 4. Zimbra's calendar application
Zimbra's calendar application

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

Get products and technologies

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 page


Please take a moment to complete this form to help us better serve you.



 


 


Not
useful		Extremely
useful
 


Share this....

digg Digg this story del.icio.us del.icio.us Slashdot Slashdot it!



Back to top