Discover the Ajax Toolkit Framework for Eclipse

The Ajax Toolkit Framework (ATF) is a core piece of the new Open Ajax initiative, which aims to increase accessibility to the powerful Web programming technique through the Eclipse Foundation. The ATF extends the Eclipse Web Tools Platform (WTP) by adding an Asynchronous JavaScript and XML (Ajax) development environment for a variety of open source Ajax tool kits, including Dojo, Zimbra, and Rico. This article includes a HelloWorld example in which you install and configure the ATF, then use Eclipse and Dojo to create a basic Web application.

Tim McIntire, Consultant, Freelance Writer

Tim McIntireTim McIntire is a consultant and co-founder of Cluster Corp., a market leader in HPCC software, support, and consulting. He also contributes periodically to IBM developerWorks and Apple Developer Connection. His research conducted while leading the computer science effort at Scripps Institution of Oceanography's Digital Image Analysis Lab has been published in a variety of journals, including Concurrency and Computation and IEEE Transactions on Geoscience and Remote Sensing Visit TimMcIntire.net to learn more.



29 November 2006

Also available in Chinese Russian Japanese

This is a follow-up to my May 2006 introduction to the Open Ajax initiative titled "Two tools bring Ajax to Eclipse's Ajax Toolkit Framework" and the upcoming ATF (see Resources). Since that time, the project has moved from announcement to an alphaWorks version to an active Eclipse project with a V0.1 release.

The ATF sits on top of the Eclipse WTP, which is widely used in the Web development community. The WTP extends Eclipse by adding tools for developing Java™ 2 Platform, Enterprise Edition (J2EE) Web applications.

The ATF extends the WTP by adding an Ajax development environment for a variety of open source Ajax tool kits, including Dojo, Zimbra, and Rico. It enhances JavaScript editing features, provides edit-time syntax checking, Document Object Model (DOM) and Cascading Style Sheets (CSS) Inspectors, and an integrated Mozilla browser. The ATF allows developers to use Eclipse as an enterprise-class integrated development environment (IDE) for open source tool kits that need just that. The goal of the Open Ajax initiative, which is behind the ATF, is to increase accessibility to Ajax, which is rapidly growing in popularity, but remains an obscure concept for new developers.

This article ties together the installation steps for the ATF and creates an example Ajax application using Eclipse, the ATF, and Dojo. "Two tools bring Ajax to Eclipse's Ajax Toolkit Framework" introduces Dojo and Zimbra, and gives a "Hello World!" example prior to Dojo's integration into Eclipse with the ATF. This article leverages the V0.1 release to create a similar project -- and more -- with ease.

Installing the ATF

To start, here's a quick explanation of the installation process in Microsoft® Windows® (see Resources for details and downloads). If you're not already using Eclipse, download the J2EE project bundle, which includes Core Eclipse V3.2.1 and the Eclipse WTP. (The WTP is required to use the ATF.) If you haven't already installed and used Eclipse, this is the simplest way to obtain the primary requirements for the ATF.

To get started with the ATF:

  1. Download the latest version of the ATF from Eclipse.org. This article is based on the V0.1 release (0.1-20060912). Hold off on the installation until you have downloaded and installed all the required components below.
  2. Download the Java Runtime Environment (JRE) V1.4.2, which is required in the current V0.1 release. Either the Sun Microsystems or IBM® version works fine.
  3. Download Apache Tomcat V5 to use as a local Web server and XULRunner, which helps Eclipse interface with Mozilla (see Resources).
  4. Install XULRunner, JRE, then Tomcat V5.

    Note: Tomcat V5 prefers JRE V5, so you may want to download it, too, to avoid special Tomcat installation instructions.

  5. Install Eclipse, if it wasn't already on your system.

When you've installed Eclipse, you'll be ready to install the ATF. See Resources for installation details.

To install the ATF into Eclipse, open Eclipse, and click Help > Software Updates > Find and Install > Search for New Features to Install > New Archived Site. Then select the zipped file containing the ATF. This will guide you through a couple of installation screens on which you should be sure to select all ATF components. Make sure to read the ATF Download information carefully. Some ATF releases (including V0.1) contain special installation notes at the end describing the installation of additional files.


Building a Dojo application in the ATF

Now you're ready to build your first Dojo application. Start by creating a new project. Resources contains a link to a flash movie that runs through the initial steps of this process, although you go beyond this to create an interactive HelloWorld application. With your new project open, complete the following:

  1. Open Eclipse, and then click File > New > Project.
  2. Click Web > Static Web Project, then click Next.
    Figure 1. Select the project type
    Select the project type
  3. Type HelloWorld in the Project name field, then click New under Target Runtime. This name will be the enclosing name for your entire project, where you can include subfolders and Web application with names of your choosing.
    Figure 2. Name your project
    Name your project
  4. Click HTTP > HTTP Server, then click Next. In this step, you tell Eclipse that you would like to use the local HTTP server for your target runtime destination. This is why you must install Tomcat V5 (or another supported HTTP server) during the installation step, allowing you to analyze application behavior locally within Eclipse.
    Figure 3. Set up the link to the local HTTP server
    Set up the link to the local HTTP server
  5. Type the correct port for your local HTTP server (probably 80 or 8080), then type the name of the directory you would like to use for your application.
  6. Choose Publish Projects to this Server, then click Browse to choose the local Web directory. In the example on my system, this path is C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps\ROOT\helloworld. You will likely have to create the helloworld directory, but the parent directories will already be there.
  7. Click Finish.
    Figure 4. Set up the local HTTP directory
    Set up the local HTTP directory
  8. Click Next, then click ATF > Dojo.
  9. Clear the Rico checkbox, then click Finish. This sets up your project with all the necessary requirements for developing an Ajax application using the Dojo Toolkit.
    Figure 5. Enable the Dojo Toolkit
    Enable the Dojo Toolkit

The preceding steps create a skeleton Dojo project in Eclipse. Now you must create an application to get started with.

Create an application

In the Navigator, expand HelloWorld. Next, right-click WebContent, then click New > Other.

Figure 6. Create new Web content
Create new Web content

Now, expand Dojo and click Dojo Application > Next. The above steps set up the framework for your application, but this step actually creates the files that you'll use in the edit and build process for a single Dojo application within your project. You can create many applications within a single project.

Figure 7. Create a Dojo application
Create a Dojo application

Type helloworldapp in the Name field, then click Finish. Each application name should be at least slightly different from your project name to differentiate what this set of files represents.

Figure 8. Name your Dojo application
Name your Dojo application

This step loads helloworldapp.html in the center frame of Eclipse. In this frame, edit helloworldapp.html to change it from a skeleton application to a working HelloWorld application.

Figure 9. Examine the edit pane
Examine the edit pane

Generate a working HelloWorld application

Start by changing the title to Hello World. This is a regular HTML file that supports the same syntax and HTML you're accustomed to but also includes JavaScript code that uses Dojo and Dojo widgets. You can treat the basic HTML elements like any other Web page.

Figure 10. Alter the HTML to include a relevant project name
Alter the HTML to include a relevant project name

Now, add the code for your HelloWorld application. These code snippets were also used in the previous HelloWorld example, but in this case, the framework for the application was set up for you with Eclipse. Insert this script at the end of the head section of your helloworldapp.html code. Use this code snippet to create a button the user can press to write "Hello World!" to the debug window.

Figure 11. Add a Button widget to your code
Add a Button widget to your code

Finally, at the top of the body section, add the code to actually put the button on your user's screen. Because you have already loaded the Dojo Button widget, it can now be referenced in the body of the HTML. Note that this is a little more advanced than a typical HelloWorld application that prints the statement without user interaction, but the message is printed to debug.

Figure 12. Add the actual button to your content area
Add the actual button to your content area

Save, compile, and run the application

Now, it's time to save, compile, and run the HelloWorld application you've created:

  1. Click File > Save.
  2. Expand HelloWorld, WebContent, and helloworldapp in the Navigator frame in Eclipse.
  3. Right-click helloworldapp.html, then click Run As > Run in Mozilla.
  4. Click Finish to bring up an integrated Mozilla browser running your HelloWorld application.
    Figure 13. Examine the output of your Dojo application
    Examine the output of your Dojo application

Click Press Me, and you'll see "Hello World!" print in the debug console. If it prints properly with no other messages, you can be confident that your ATF installation and project code are working properly.

Figure 14. Try the button
Try the button

Expand the application's functionality

Now that you have a basic working application, take a look at expanding the functionality by leveraging code snippets included in the ATF. If you don't already have a Snippets pane in your view of Eclipse, click Window > Show View > Other. Expand General, click Snippets, then click OK. The Snippets pane should appear on the right side of your Eclipse window.

Figure 15. Premade code snippets
Premade code snippets

Expand Dojo in the Snippets pane, then drag dojo.require into a JavaScript block in the helloworldapp.html editing pane. A dialog appears asking for the package name. For this example, type dojo.widget.Tree. Doing so adds a line that loads the Tree widget, which allows you to use the widget in the content area of your code.

Figure 16. Load the Tree widget
Load the Tree widget

Scroll down to the body section of helloworldapp.html, and drag Tree from the Snippet pane to the edit pane. Eclipse asks whether to include sample data. Clear this checkbox so that just the enclosing Tree code will be added. Then, drag a Tree Node snippet from the Snippet pane to the edit pane, inside your Tree tags, and name the node Hello. Subsequently, add three more Tree nodes inside of your Hello node.

Figure 17. Create Tree nodes with HelloWorld data
Create Tree nodes with HelloWorld data

Once again, it's time to save, compile, and run the HelloWorld application you have created. Click File > Save. Then expand HelloWorld, WebContent, and helloworldapp in the Navigator frame in Eclipse. Right-click helloworldapp.html, and then click Run As > Run in Mozilla. Click Finish to bring up an integrated Mozilla browser running your HelloWorld application. You should be able to click to expand and contract the Hello node, which shows or hides its children nodes.


Wrapping up

You now have a basic understanding of creating the components of a Dojo project using the ATF in Eclipse. To become a more advanced user, learn all you can about the Ajax tool kit you choose to use within Eclipse. Also, explore advanced features used in the Eclipse ATF, such as the DOM Inspector, the CSS Inspector, and the JavaScript debugger. Creating a simple HelloWorld application using Dojo is greatly simplified using Eclipse, and the advantages of building a full-fledged Web application are compounded as your project becomes more complex. Future articles will provide updates on new releases and features as well as go into details on more components of the ATF and other support tool kits, such as Zimbra and Rico.

Resources

Learn

Get products and technologies

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 Open source on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Open source
ArticleID=176332
ArticleTitle=Discover the Ajax Toolkit Framework for Eclipse
publish-date=11292006