Explore eclipse's Ajax Toolkit framework

Ajax Toolkit framework (ATF) is the core part of the new open Ajax initiative. It aims to improve the accessibility of powerful web programming technologies through the eclipse Foundation. By adding Asynchronous JavaScript and XML (Ajax) development environments to a variety of open-source Ajax sdks (including dojo, zimbra, And Rico), ATF extends eclipse web tools platform (WTP ). This article includes a helloworld example where you will install and configure ATF, and then use eclipse and dojo to create basic web applications.

This article is my article titled "bringing Ajax into eclipse's Ajax Toolkit framework" in May 2006 and the recent ATF (see references). From that time to now, the project has been released from the original announcement to the alphaWorks version to the current Eclipse project version v0.1.

ATF is located at the top of eclipse WTP, which is widely used in the Web development community. WTP extends eclipse by adding tools for developing Java 2 platform and Enterprise Edition (J2EE) web applications.

ATF extends WTP by adding Ajax development environments for various development source code sdks (including dojo, zimbra, And Rico. It enhances the Javascript editing function and provides the edit-time syntax check, Document Object Model (DOM), and Cascading Style Sheet (CSS) inspector and integrated Mozilla Browser. ATF allows developers to use eclipse as the enterprise-level integrated development environment (IDE) required by the open-source toolkit ). The goal of open Ajax initiative behind ATF is to improve the accessibility to Ajax. Ajax is becoming increasingly popular, but it is still difficult for new developers to understand the concept.

This document uses eclipse, ATF, and dojo to closely link the installation steps of ATF with the example Ajax application. "Bringing Ajax into two tools of Eclipse's Ajax Toolkit framework" introduces dojo and zimbra, and first provides "Hello world !" For example, you can use ATF to integrate dojo into eclipse. This article uses v0.1 to create similar projects, which is simpler.

Install ATF

Before starting, read the quick instructions for installing windows in Microsoft (for more information and downloads, see references ). If you have not used eclipse, download the J2EE project package, including core eclipse v3.2.1 and eclipse WTP (WTP is required when using ATF ). If eclipse has not been installed and used, this is the easiest way to meet the basic requirements of ATF.

To start using ATF, perform the following operations:

1. Download the latest version of ATF from eclipse.org. This article is based on v0.1 (0.1-20060912 ). Do not install the following components before downloading and installing them.
2. Download Java Runtime Environment (JRE) v1.4.2, which is required in the current v0.1 version. Sun Microsystems or IBM can be used.
3. Download Apache Tomcat V5 as a local web server and xulrunner to help eclipse establish interfaces with Mozilla (see references ).
4. Install xulrunner and JRE, and then install Tomcat V5.

   Note:Tomcat v5 is more inclined to use JRE V5, so it may need to be downloaded to avoid special tomcat installation instructions.

5. Install eclipse (if not installed in the system ).

After eclipse is installed, you can prepare to install ATF. For detailed installation details, see references.

To install ATF to eclipse, open eclipse and clickHelp> Software Updates> Find and install> search for new features to install> New archived site. Select a compressed file that contains ATF. The installation screen prompts you to complete the installation. Make sure to select all ATF components. Make sure that you carefully read the ATF download information. Some ATF versions (including v0.1) contain special installation instructions. The following describes how to install additional files.

Build a dojo application in ATF

Now you are ready to build the first dojo application. Create a new project first. The reference contains a link to the Flash animation, which demonstrates the initial steps of this process, but you will create an interactive helloworld application beyond this process. After the new project is opened, complete these steps:

1. Open eclipse, and then clickFile> New> Project.
2. ClickWeb> static Web projectAnd then clickNext.

   Figure 1. Select the project type
   

3. InProject nameTypeHelloworldAnd then clickTarget RuntimeBelowNew. This name will be a closed name for the entire project, including subfolders and Web applications with the same name as the selected name.

   Figure 2. Name the project
   

4. ClickHTTP> HTTP ServerAnd then clickNext. In this step, you will tell eclipse to use the local HTTP server as the runtime target. This is the reason why Tomcat V5 (or other servers supporting HTTP) must be installed during the installation process. It allows you to locally analyze the application behavior in eclipse.

   Figure 3. Set the link to the local HTTP Server
   

5. Enter the correct port (possibly 80 or 8080) for the local HTTP server, and then enter the name of the directory you want to use for the application.
6. SelectPublish projects to this serverAnd then clickBrowseTo select the local web directory. The path of this example in my system is C:/program files/Apache Software Foundation/tomcat 5.5/webapps/root/helloworld. You may need to create the helloworld directory, but the parent directory may already exist.

ClickFinish.
Figure 4. Set the local HTTP directory

ClickNextAnd then clickATF> dojo.

DeselectRicoCheck box, and then clickFinish. This step sets the project according to all the necessary requirements for developing Ajax applications using the dojo toolkit.

Figure 5. Enable the dojo Toolkit

The above steps will create the dojo project skeleton in eclipse. Now you must start to create an application.

Create an application

In navigator, expand helloworld. Next, right-clickWebcontentAnd then clickNew> Other.

Figure 6. Create a new Web Content

Now, expand dojo and clickDojo Application> next. The above steps will set up the application framework, but this step will actually create a file for editing and building a single dojo application in the project. You can create multiple applications in a single project.

Figure 7. Create a dojo Application

InNameTypehelloworldappAnd then clickFinish. Each application name and project name should at least be slightly different to distinguish the content represented by this group of files.

Figure 8. Name the dojo Application

In this step, helloworldapp.html is installed in the eclipse central framework. In this framework, edit helloworldapp.html to change it from a skeleton-only application to a running helloworld application.

Figure 9. Verify the editing pane

Generate a running helloworld Application

First, change the titleHello World. This is a conventional HTML file that supports the syntax and HTML you are familiar with, and also contains JavaScript code using the dojo and dojo controls. You can process basic HTML elements like any other web page.

Figure 10. Change HTML to include the corresponding project name

Now, add code for the helloworld application. These code snippets are also used in the previous helloworld example, but in this example, the application framework is set using eclipse. Insert this script into the helloworldapp.html codeheadThe end of the part. Use this code snippet to create a button. You can press this button to "Hello world !" Write debugging window.

Figure 11. Add a button control to the code

FinallybodyAdd code to the top of the page so that the button is displayed on the user's screen. Since you have installed the dojo button control, you can reference it in the HTML body. Note that this is a little more advanced than a typical helloworld application that only prints Hello World sentences without user interaction, but the message is output to the debugging window.

Figure 12. Add a button to the content area

Save, compile, and run applications

Now you need to save, compile, and run the helloworld application you created:

1. ClickFile> Save.
2. Expand helloworld, webcontent, and helloworldapp In the eclipse navigator framework.
3. Right-clickHelloworldapp.htmlAnd then clickRun as> run in Mozilla.
4. ClickFinishThe integrated Mozilla browser that runs the helloworld application will open.

   Figure 13. Verify the output of the dojo Application
   

5. ClickPress meAnd then you will see "Hello world !" Displayed on the debugging console. If no other message is displayed, make sure that the ATF installation and project code are running properly.

6. Figure 14. Try button
   

7. Extended Application functions
8. Now you have a basic running application, and then use the code snippets attached to ATF to expand the function. If the snippets pane does not exist in the eclipse view, clickWindow> show View> Other. Expand General, clickSnippetsAnd then clickOK. The snippets pane should appear on the right of the eclipse window.

9. Figure 15. premade code snippets
   

10. Expand dojo in the snippets pane, and drag dojo. Require into the Javascript block in the helloworldapp.html editing pane. The system displays a dialog box asking you to enter the software package name. For this example, TypeDojo. widget. Tree. In this way, a line of code is added for loading the tree control, which allows you to use the control in the content area of the Code.
    Figure 16. Load the tree control
    

    Scroll down to the main part of helloworldapp.html andTreeDrag the snippet pane to the editing pane. Eclipse will ask if the sample data is included. Deselect this check box to add only the encapsulated tree code. Then, drag the tree node fragment from the snippet pane into the tree tag in the editing pane, and name the nodeHello. Then, add three more Tree nodes to the hello node.

    Figure 17. Use helloworld data to create a tree node
    

    You need to save, compile, and run the created helloworld application again. ClickFile> Save. Then, expand helloworld, webcontent, and helloworldapp In the eclipse navigator framework. InHelloworldapp.htmlRight-click, and then clickRun as> run in Mozilla. ClickFinishThe integrated Mozilla browser that runs the helloworld application will open. You should be able to expand and contract the hello node to show or hide its subnodes.

    Conclusion

    Now you have learned how to use ATF in eclipse to create the components of the dojo project. To become a more advanced user, learn how to use all the content of the selected Ajax toolkit in eclipse. In addition, you need to study the advanced functions used in eclipse ATF, such as Dom inspector, CSS inspector, and JavaScript debugging programs. Using dojo to create a simple helloworld application greatly simplifies the process of using eclipse. The advantages of building a complete Web application will accumulate as the project becomes increasingly complex. The next article will provide updates to new versions and functions, and further discuss more details about ATF and other support kits (such as zimbra and Rico.

    References

    Learning

    • For more information, see the original article on the developerworks global site.

    • Visit the Eclipse project resource center on IBM developerworks to learn more about eclipse.
    • Ajax technical resource center: here you can find more about Ajax, including Ajax basics, using Java, various Ajax application development skills and technical information of multiple Ajax frameworks in PHP and other languages.
    • Read the ATF introduction to "bringing Ajax into eclipse's two open Ajax toolkit Tools.
    • Read "Using ajax Toolkit framework to develop a dojo application" to introduce how to use the Ajax Toolkit framework tool to use the dojo toolkit open source toolkit to simplify and enhance the development of Ajax applications.
    • "Tech titans contribute browser-boosting Ajax technologies to open source community": the IBM press release in February 2006 provided details about open Ajax initiative.
    • Visit eclipse.org for details about Eclipse IDE.
    • Watch the Flash Animation dojo project cycle demo, which is about how to create a dojo project in Ajax. You can use this information in some steps in this article.
    • View the dojo toolkit document for more information about dojo.
    • View the detailed examples of helloworld in jotspot wiki.
    • For an excellent introduction to the eclipse platform, see "getting started with eclipse platform ".
    • Stay tuned to developerworks technical lectures and network broadcasts.
    • Check out recent conferences, exhibitions, network broadcasts and other activities for IBM open source code developers to be held globally.
    • Visit the developerworks open source area to get a lot of information about how-to, tools, and project updates. It can help you develop with open source technology and work with IBM products.
    • To listen to interesting interviews and discussions with software developers, visit the developerworks podcasts.

    Obtain products and technologies

    • View the ATF project.

    • View the eclipse WTP project.
    • Download the eclipse Callisto package to obtain the basic components required to install ATF.
    • Download the latest version of ATF from eclipse.
    • Download JRE, a required component for using ATF.
    • Download Apache Tomcat V5, which is compatible with Web servers integrated into ATF.
    • See the latest eclipse technology download in IBM alphaWorks.
    • Use IBM trial software to improve your next open source code development project, which can be downloaded or obtained from a DVD.

    Discussion

    • The eclipse news group has many references for those interested in using and extending eclipse.

    • Join the developerworks community by joining developerworks blogs.

    About the author

    		Tim McIntire is one of the consultants and founders of cluster Corp. The company is the market leader in HPCC software, support and consulting. He also regularly contributes to IBM developerworks and Apple Developer Connection. Tim leads Oceanography's digital image analysis lab Scripps Institution to conduct research on computer science and published relevant research results in various journals, includingConcurrency and ComputationAndIEEE Transactions on geoscience and Remote Sensing. You can visit timmcintire.net to learn more about Tim.