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.
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:
- 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.
- 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.
- Download Apache Tomcat V5 to use as a local Web server and XULRunner, which helps Eclipse interface with Mozilla (see Resources).
- 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.
- 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:
- Open Eclipse, and then click File > New > Project.
- Click Web > Static Web Project, then click Next.
Figure 1. Select the project type
- 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
- 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
- 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.
- 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.
- Click Finish.
Figure 4. Set up the local HTTP directory
- Click Next, then click ATF > Dojo.
- 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
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
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
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
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
Generate a working HelloWorld application
Start by changing the title to
Figure 10. 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
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
Save, compile, and run the application
Now, it's time to save, compile, and run the HelloWorld application you've created:
- Click File > Save.
- Expand HelloWorld, WebContent, and helloworldapp in the Navigator frame in Eclipse.
- Right-click helloworldapp.html, then click Run As > Run in Mozilla.
- Click Finish to bring up an integrated Mozilla browser running your HelloWorld application.
Figure 13. 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
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
Figure 16. 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
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.
- "Tech Titans Contribute Browser-Boosting Ajax Technologies to Open Source Community": This February 2006 IBM press release provides details on the Open Ajax initiative.
- Visit Eclipse.org for details on the Eclipse IDE.
- Read "Two tools bring Ajax to Eclipse's Open Ajax Toolkit" for an introduction to the ATF.
- Watch the Flash movie Dojo Project Cycle Demo on creating a Dojo project in Ajax. You can leverage this information for some of the steps in this article.
- Check out the Dojo Toolkit documentation for more information about Dojo.
- Find a detailed HelloWorld example on the JotSpot wiki.
- For an excellent introduction to the Eclipse platform, see "Getting started with the Eclipse Platform."
- Visit IBM developerWorks' Eclipse project resources to learn more about Eclipse.
- Stay current with developerWorks technical events and webcasts.
- Check out upcoming conferences, trade shows, webcasts, and other Events around the world that are of interest to IBM open source developers.
- Visit the developerWorks Open source zone for extensive how-to information, tools, and project updates to help you develop with open source technologies and use them with IBM's products.
- To listen to interesting interviews and discussions for software developers, be sure to check out developerWorks podcasts.
Get products and technologies
- Check out the ATF project.
- Also check out the Eclipse WTP Project.
- Download the Eclipse Callisto bundle to get the basic components required to install the ATF.
- Download the latest version of the ATF from Eclipse.
- Download the JRE, which is required to use the ATF.
- Download Apache Tomcat V5, a compatible Web server that will integrate into the ATF.
- See the latest Eclipse technology downloads at IBM alphaWorks.
- Innovate your next open source development project with IBM trial software, available for download or on DVD.
- The Eclipse newsgroups has many resources for people interested in using and extending Eclipse.
- Get involved in the developerWorks community by participating in developerWorks blogs.