Introduction to AJAX and Dojo
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 V184.108.40.206 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
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
Figure 2. Project content before you add the Dojo Toolkit
To add the Dojo Toolkit, perform the following steps.
- Select the Web project
- Select Properties > Project Facets on the left.
- On the right, select the Web 2.0 check box, as shown in Figure 3.
Figure 3. Adding Web 2.0 features
- 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
- After adding the Dojo Toolkit facet, you should see a folder labeled
WebContent, as shown in Figure 5.
Figure 5. Project content after you add the Dojo Toolkit 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.
- Select the Web project.
- Select Properties > Validation, which launches a wizard.
- In the wizard, you can choose which validators to run, as shown in Figure 6.
- 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
- 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.
- Click the Add Exclude Group button, as shown in Figure 7.
Figure 7. Adding an exclusion group
- On the left, select the newly created Exclude Group
- Click the Add Rule button, which brings up the dialog where you can select what to exclude.
- Select Folder or File name and click Next, as shown in Figure 8.
Figure 8. Selecting the Filter type
- Next, click the Browse Folder button and navigate to the
dojofolder within your
WebContentfolder, as shown in Figure 9.
Figure 9. Selecting the folder to exclude from validation
- Click Finish.
- Verify the results. You should see the
WebContent/dojofolder under Exclude Group, as shown in Figure 10. Click OK.
Figure 10. Exclude Dojo from the JSP Content Validator
- 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).
- 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
- In Enterprise Explorer, right-click your web project and select Properties.
- In the Properties list, select Project Facets.
- In the Project Facets list, expand the Web 2.0 item, as shown in Figure 11.
- Clear the Dojo Toolkit checkbox.
- Click OK
Figure 11. Expanding the Web 2.0 Project Facet
- Remove the
- Repeat Steps 1 and 2.
- In the Project Facets list, expand the Web 2.0 item
- Select the Dojo Toolkit checkbox
- Click Further configuration available.
- Ensure that Loader and CSS are correct, as shown in Figure 12:
- Dojo Loader should be
- Dojo CSS should be
- Dijit CSS should be
- Theme CSS should be
- Dojo Loader should be
- Select the Copy to current project check box and ensure that the Target Folder is
- Click OK.
- Click OK.
Figure 12. Advanced Dojo configuration
The latest Dojo Toolkit library will be copied to the project. When the files are copied, verify the version by doing the following.
- In the Enterprise Explorer view, right-click your Web project and select Properties to display the Properties window.
- Select Dojo Toolkit.
- 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)
Starting in a new Rational Application Developer workspace, follow these steps to create your sample web application.
- Click File > New > Dynamic Web Project.
- Give the project a name.
- Accept all defaults by clicking Finish.
- When prompted, also accept switching to the Web perspective.
- Expand the newly created web project,
- select the
- Right-click it and select Import > General > Archive File
- Navigate to wherever you downloaded the attached file (
- select the
- 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
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
- To run the demonstration, select the
- Right-click it and select Run As > Run on Server.
- 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
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.
The author thanks Tommy Kong of the IBM Toronto Lab for reviewing this article.
|Dojo tree sample source files||DojoTreeSampleSourceFiles.zip||1.56 KB|
- 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.
- 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.