Introduction to AJAX and Dojo

AJAX (Asynchronous JavaScript and XML) programming is a recent trend in client-side web application development. It provides dynamic interaction between the user's browser and the Web server, without having to refresh a complete page each time. Due to the usefulness of this technique, there are quite a few implementations (variously called toolkits, frameworks, or libraries) available: the Dojo Toolkit, jQuery, Prototype, YUI (Yahoo! User Interface), qooxdoo, to name a few.

For further information, follow the links in the Resources section for a description of what AJAX is, what toolkits or libraries are available, and a link to a comparison between Dojo and YUI, which also gives a good explanation of why to use a library in the first place.

IBM® Rational® Application Developer supports AJAX programming by including one of its more popular implementations, specifically the Dojo library (which is shipped with IBM® WebSphere® Application Server Feature Pack for Web 2.0.

In Rational Application Developer V7.5.5.1 and later, the WebSphere Application Server Feature Pack for Web 2.0 is an installable option in the Installation Manager. When you select to install the WebSphere Application Server 7.0 Test Environment, you can choose several Feature Packs, including Web 2.0 (Figure 1).

IBM packages the Dojo Toolkit to include additional extensions as follows:

• SOAP (Simple Open Access Protocol) client for working with SOAP envelopes and RPC (remote procedure call)
• ATOM feeds and the ATOM Publishing Protocol (APP) as a feed input/output (IO) library and the dojo.data based data store
• An OpenSearch Data Store, which is an implementation of the dojo.data APIs
• Gauge Widgets, such as bar and analog gauges
• AJAX proxy

See the Resources section to get more details about the WebSphere Application Server Feature Pack for Web 2.0.

Back to top

Installing the Dojo Toolkit in your web project

Figure 2 shows the project content before you add the Dojo Toolkit (note that there is no dojo folder).

To add the Dojo Toolkit, perform the following steps.

1. Select the Web project
   1. Select Properties > Project Facets on the left.
   2. On the right, select the Web 2.0 check box, as shown in Figure 3.

2. Click OK. You should see the progress of the Dojo Toolkit files being copied to your web project, as shown in Figure 4.

3. After adding the Dojo Toolkit facet, you should see a folder labeled dojo under WebContent, as shown in Figure 5.

For additional information, you can follow the Adding Dojo widgets to existing Java EE Web pages link in the Resources section.

Back to top

Avoiding unnecessarily lengthy compilations

Due to the fact that the Dojo Toolkit library has been physically added to your Web content, it will be included in the validation of your project, which can unnecessarily extend the time required to complete a build. The Dojo Toolkit Library goes through its own review and validation. It is safe to exclude the entire WebContent/dojo folder from the Rational Application Developer IDE’s validation. In order to avoid a long build, you can create exclusion filters as follows.

1. Select the Web project.
2. Select Properties > Validation, which launches a wizard.
   1. In the wizard, you can choose which validators to run, as shown in Figure 6.
   2. You can also create rules (for example, to exclude the Dojo folder from being validated for HTML and JSP correctness).

3. To create an exclusion rule (for example, for the JSP Content validator), click the ellipses () button on its right to get to the Validation Filters wizard.
4. Click the Add Exclude Group button, as shown in Figure 7.

5. On the left, select the newly created Exclude Group
6. Click the Add Rule button, which brings up the dialog where you can select what to exclude.
7. Select Folder or File name and click Next, as shown in Figure 8.

8. Next, click the Browse Folder button and navigate to the dojo folder within your WebContent folder, as shown in Figure 9.

9. Click Finish.
10. Verify the results. You should see the WebContent/dojo folder under Exclude Group, as shown in Figure 10. Click OK.

11. Repeat this procedure for other relevant Validators that would be applied to the dojo libraries folder, (for example, the JSP Syntax Validator and the HTML Syntax Validator).
12. Click OK to exit the Preferences dialog.

Back to top

Updating the Dojo Toolkit

The Dojo Toolkit library that is available in Rational Application Developer comes installed as part of the WebSphere Application Server Feature Pack for Web 2.0. Updates to the library are made available when there is a new version of the feature pack.

As of the time of writing of this article, the latest Feature Pack for Web 2.0 is V1.0.1, which includes the Dojo Toolkit 1.4.1.

The Dojo Toolkit that is imported into the workspace projects is not updated automatically when you install the new Feature Pack for Web 2.0.

The following steps show you how to update a Dojo Toolkit that you might have installed into your web project at an earlier time.

As you saw previously, the default location for the imported dojo library is the WebContent/dojo folder.

1. In Enterprise Explorer, right-click your web project and select Properties.
2. In the Properties list, select Project Facets.
3. In the Project Facets list, expand the Web 2.0 item, as shown in Figure 11.
   1. Clear the Dojo Toolkit checkbox.
   2. Click OK

4. Remove the WebContent/dojo folder.
5. Repeat Steps 1 and 2.
6. In the Project Facets list, expand the Web 2.0 item
   1. Select the Dojo Toolkit checkbox
   2. Click Further configuration available.
   3. Ensure that Loader and CSS are correct, as shown in Figure 12:
      1. Dojo Loader should be dojo/dojo.js
      2. Dojo CSS should be dojo/resources/dojo.css
      3. Dijit CSS should be dijit/themes/dijit.css
      4. Theme CSS should be dijit/themes/tundra/tundra.css
   4. Select the Copy to current project check box and ensure that the Target Folder is WebContent/dojo.
   5. Click OK.
7. Click OK.

The latest Dojo Toolkit library will be copied to the project. When the files are copied, verify the version by doing the following.

1. In the Enterprise Explorer view, right-click your Web project and select Properties to display the Properties window.
2. Select Dojo Toolkit.
3. Verify the Version.

Back to top

Example web application

Download the attached .zip file, which contains a modified example application that shipped with the Dojo libraries. It consists of two files:

• An HTML file to construct an interactive tree of some hierarchical data (in this case, continents with some sample countries)
• A second file, in JSON (JavaScript Object Notation) format, which acts as the repository for this data

Starting in a new Rational Application Developer workspace, follow these steps to create your sample web application.

1. Click File > New > Dynamic Web Project.
   1. Give the project a name.
   2. Accept all defaults by clicking Finish.
   3. When prompted, also accept switching to the Web perspective.
2. Expand the newly created web project,
   1. select the Web Content folder
   2. Right-click it and select Import > General > Archive File
   3. Navigate to wherever you downloaded the attached file (DojoTreeSampleSourceFiles.zip)
3. Import and enable the Dojo libraries by following the steps described in the Installing the Dojo Toolkit in your web project section of this article (that is, from Properties > Project Facets > Web 2.0).

Your project structure now should look like that shown in Figure 13.

As a result of the import, you should now have under the WebContent folder the newly imported dojo folder, as well as the two imported files: SampleTree.html and the tree data in countries.json.

4. To run the demonstration, select the SampleTree.html file.
   1. Right-click it and select Run As > Run on Server.
   2. This example uses the previously installed WebSphere Test Environment V7.0, so select Existing server.

The end result of running the test should look like Figure 14 following: a list of continents that you can expand to see the countries under them.

Back to top

What you have learned

This article has showed you how to install and configure the Dojo libraries included in Rational Application Developer and WebSphere Application Server. You also learned how to create AJAX web applications by importing an example file.

Back to top

Acknowledgment

The author thanks Tommy Kong of the IBM Toronto Lab for reviewing this article.

Back to top

Download

Information about download methods

Resources

Learn

• Find out more about Rational Application Developer:
  • Browse the Rational Application Developer for WebSphere Software page on developerWorks for links to technical articles and many related resources.
  • Explore the Information Center.
  
  
• For other Rational software mentioned in this article, the developerWorks Rational software landing page is also a good starting place.
  
  
• You can also learn about other applications in the IBM Rational Software Delivery Platform, including collaboration tools for parallel development and geographically dispersed teams, plus specialized software for architecture management, asset management, change and release management, integrated requirements management, process and portfolio management, and quality management. You can find product manuals, installation guides, and other documentation in the IBM Rational Online Documentation Center.
  
  
• Explore Rational computer-based, Web-based, and instructor-led online courses. Hone your skills and learn more about Rational tools with these courses, which range from introductory to advanced. The courses on this catalog are available for purchase through computer-based training or Web-based training. Some of the "Getting Started" courses are available free of charge.
  
  
• What is AJAX?: a bit of history from Wikipedia.
  
  
• Ajax library smackdown: Dojo versus YUI
  
  
• WebSphere Application Server Feature pack for Web 2.0
  
  
• Installing the WebSphere Application Server Feature Pack for Web 2.0
  
  
• Adding Dojo widgets to existing Java EE Web pages
  
  
• In the XML area on developerWorks, get the resources you need to advance your XML skills, including DTDs, schemas, and XSLT.
  
  
• Stay current with developerWorks technical events and webcasts focused on a variety of IBM products and IT industry topics.
  
  
• Attend a free developerWorks Live! briefing to get up-to-speed quickly on IBM products and tools as well as IT industry trends.
  
  
• Follow developerWorks on Twitter.
  
  
• Watch developerWorks on-demand demos ranging from product installation and setup demos for beginners, to advanced functionality for experienced developers.
  
  

Get products and technologies

• Evaluate IBM products in the way that suits you best: Download a product trial, try a product online, use a product in a cloud environment, or spend a few hours in the SOA Sandbox learning how to implement Service Oriented Architecture efficiently.
  
  

Discuss

• Participate in the discussion forum.
  
  
• Get involved in the My developerWorks community. Connect with other developerWorks users while exploring the developer-driven blogs, forums, groups, and wikis.
  
  

About the authors

Robert works with the Eclipse and Rational Application Developer Accelerated Value Program team. He is located at the IBM Toronto Lab.

James works with the Rational Application Developer Accelerated Value Program team. He is located at the IBM Toronto Lab.

Rate this article

Comments

Back to top

Table of contents

• Introduction to AJAX and Dojo
• Installing the Dojo Toolkit in your web project
• Avoiding unnecessarily lengthy compilations
• Updating the Dojo Toolkit
• Example web application
• What you have learned
• Acknowledgment
• Download
• Resources
• About the authors
• Comments

Next steps from IBM

• Try: Rational Application Developer for WebSphere Software
• Buy: Rational Application Developer for WebSphere Software

Dig deeper into Rational on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

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

Special offers