Developing AJAX Web applications with IBM Rational Application Developer and Dojo

This article describes how to develop AJAX web applications with the IBM® Rational® Application Developer IDE, while using the Dojo libraries shipped with the IBM® WebSphere® Application Server Feature Pack 2.0. This article also provides a practical example, using the Dojo Tree widget.

Robert Weisz (weisz@ca.ibm.com), Accelerated Value Specialist, IBM Canada

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



James Chung (jjchung@ca.ibm.com), Accelerated Value Specialist, IBM Canada

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



02 November 2010

Also available in Chinese Vietnamese Portuguese

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

Figure 1. Installing the Feature Pack for Web 2.0
Optional selection of the Feature Pack in Installation Manager

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.


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

Figure 2. Project content before you add the Dojo Toolkit
There is no dojo folder prior to adding Web 2.0 Facet

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.
Figure 3. Adding Web 2.0 features
Selecting the Web 2.0 Project Facet
  1. Click OK. You should see the progress of the Dojo Toolkit files being copied to your web project, as shown in Figure 4.
Figure 4. Verifying the installation progress
Progress indicator shows operation is in progress
  1. After adding the Dojo Toolkit facet, you should see a folder labeled dojo under WebContent, as shown in Figure 5.
Figure 5. Project content after you add the Dojo Toolkit facet
You can see the dojo folder after you select the Web 2.0 facet

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


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).
Figure 6. Validation filters and list of validators
Setting validation filters in the Validation Properties view
  1. To create an exclusion rule (for example, for the JSP Content validator), click the ellipses (ellipse icon) button on its right to get to the Validation Filters wizard.
  2. Click the Add Exclude Group button, as shown in Figure 7.
Figure 7. Adding an exclusion group
In the Validation Filters dialog, click Add Exclude Group
  1. On the left, select the newly created Exclude Group
  2. Click the Add Rule button, which brings up the dialog where you can select what to exclude.
  3. Select Folder or File name and click Next, as shown in Figure 8.
Figure 8. Selecting the Filter type
Select the Folder or file name radio button
  1. Next, click the Browse Folder button and navigate to the dojo folder within your WebContent folder, as shown in Figure 9.
Figure 9. Selecting the folder to exclude from validation
Click Browse Folder button and select the WebContent/dojo folder
  1. Click Finish.
  2. Verify the results. You should see the WebContent/dojo folder under Exclude Group, as shown in Figure 10. Click OK.
Figure 10. Exclude Dojo from the JSP Content Validator
WebContent/dojo folder was added to the exclusion group
  1. 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).
  2. Click OK to exit the Preferences dialog.

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
Figure 11. Expanding the Web 2.0 Project Facet
Clear the Dojo Toolkit highlighted under the Web 2.0 Facet
  1. Remove the WebContent/dojo folder.
  2. Repeat Steps 1 and 2.
  3. 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.
  4. Click OK.
Figure 12. Advanced Dojo configuration
Select Copy to current project to add Dojo libraries to your project

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.

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.

Figure 13. Updated project contents
Project contains 2 files and the dojo folder

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.

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

Figure 14. Dojo library dijit: Tree widget example
Output showing continents and countries in a tree topology

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.


Acknowledgment

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


Download

DescriptionNameSize
Dojo tree sample source filesDojoTreeSampleSourceFiles.zip1.56 KB

Resources

Learn

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

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


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

All information submitted is secure.

Choose your display name



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.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Rational software on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Rational, DevOps
ArticleID=559772
ArticleTitle=Developing AJAX Web applications with IBM Rational Application Developer and Dojo
publish-date=11022010