Ajax Toolkit Framework（ATF）是新的 Open Ajax Initiative 的核心部分，旨在通过 Eclipse Foundation 提高对功能强大的 Web 编程技术的可访问性。通过为各种开源 Ajax 工具包（包括 Dojo、Zimbra 和 Rico）添加 Asynchronous JavaScript and XML（Ajax）开发环境，ATF 扩展了 Eclipse Web Tools Platform (WTP)。本文包括一个 HelloWorld 示例，您将在其中安装和配置 ATF，然后使用 Eclipse 和 Dojo 来创建基本的 Web 应用程序。

　本文是我在 2006 年 5 月介绍 Open Ajax Initiative 的标题为 “将 Ajax 带入 Eclipse 的 Ajax Toolkit Framework 的两个工具” 的文章和近期的 ATF（请参阅 参考资料）的后续延展。从那时到现在，项目已从当初的宣布发行到 alphaWorks 版本再到现在的 Eclipse 项目发布的V0.1 版本。

ATF 位于 Eclipse WTP 的顶部，WTP 在 Web 开发社区中使用得十分广泛。WTP 通过添加用于开发 Java™ 2 Platform，Enterprise Edition (J2EE) Web 应用程序的工具扩展了 Eclipse。

ATF 通过为各种开发源码的 Ajax 工具包（包括 Dojo、Zimbra 和 Rico）添加 Ajax 开发环境扩展了 WTP。它增强了 JavaScript 编辑功能，提供了 edit-time 语法检查、文档对象模型（Document Object Model，DOM）和层叠样式表（Cascading Style Sheet，CSS）Inspector 和集成 Mozilla 浏览器。ATF 允许开发人员使用 Eclipse 作为开源工具包所需的企业级集成开发环境（IDE）。ATF 背后的 Open Ajax Initiative 的目标是提高对 Ajax 的可访问性，Ajax 正在迅速流行开来，但是对于新的开发人员来说概念还是很晦涩难懂。

本文使用 Eclipse、ATF 和 Dojo 将 ATF 的安装步骤和创建示例 Ajax 应用程序紧密联系在一起。“将 Ajax 带入 Eclipse 的 Ajax Toolkit Framework 的两个工具” 介绍了 Dojo 和 Zimbra，并且先提供了 “Hello World!” 示例，然后提供了用 ATF 将 Dojo 集成到 Eclipse 中的方法。本文利用了 V0.1 版来创建类似的项目，并且更加简单。

安装 ATF

启动之前，请先阅读在 Microsoft? Windows? 下安装的快速说明（有关详细信息和下载，请参阅 参考资料）。如果尚未使用 Eclipse，请下载 J2EE 项目包，其中包括 Core Eclipse V3.2.1 和 Eclipse WTP（使用 ATF 时要求使用 WTP）。如果尚未安装和使用 Eclipse，这是满足 ATF 基本要求的最简单方法。

要开始使用 ATF，请执行以下操作：

1. 从 Eclipse.org 下载 ATF 的最新版本。本文是基于 V0.1 版 (0.1-20060912)。在下载并安装以下所有必需的组件之前，请先不要安装。
2. 下载 Java Runtime Environment (JRE) V1.4.2，它在当前的 V0.1 版中是必需的。Sun Microsystems 或 IBM? 版本都可以使用。
3. 下载 Apache Tomcat V5 用作本地 Web 服务器和 XULRunner，用于帮助 Eclipse 建立与 Mozilla 的接口（请参阅 参考资料）。
4. 安装 XULRunner、JRE，然后安装 Tomcat V5。
   注：Tomcat V5 更倾向于使用 JRE V5，因此还可能需要下载它，以避免特殊的 Tomcat 安装指导。
5. 安装 Eclipse（如果系统中没有安装的话）。

要将 ATF 安装到 Eclipse 中，请打开 Eclipse，然后单击 Help > Software Updates > Find and Install > Search for New Features to Install > New Archived Site。然后选择包含 ATF 的压缩文件。通过安装屏幕的提示指导您完成安装，其间应当确保选择所有 ATF 组件。确保仔细阅读 ATF Download 信息。一些 ATF 版本（包括 V0.1）包含特殊安装说明，末尾介绍了如何安装附加文件。

在 ATF 中构建 Dojo 应用程序

现在您已经准备好构建第一个 Dojo 应用程序。开始先创建一个新项目。参考资料 包含一个指向 flash 动画的链接，该动画将演示此过程的初始步骤，但是您将越过此进程创建一个互动的 HelloWorld 应用程序。新项目打开后，请完成以下步骤：

1. 打开 Eclipse，然后单击 File > New > Project。
2. 单击 Web > Static Web Project，然后单击 Next。
   图 1. 选择项目类型
   
   
3. 在 Project name 字段中键入 HelloWorld，然后单击 Target Runtime 下方的 New。此名称将是整个项目的封闭名称，可以在其中包括与所选名称同名的子文件夹和 Web 应用程序。
   图 2. 为项目命名
   
   
4. 单击 HTTP > HTTP Server，然后单击 Next。在此步骤中，您将告诉 Eclipse 需要使用本地 HTTP 服务器作为运行时目标。这就是安装步骤过程中必须安装 Tomcat V5（或其他支持 HTTP 的服务器）的原因，允许您在本地分析 Eclipse 内应用程序行为。
   图 3. 设置指向本地 HTTP 服务器的链接
   
5. 为本地 HTTP 服务器键入正确的端口（可能 80 或 8080），然后键入希望用于应用程序的目录的名称。
6. 选择 Publish Projects to this Server，然后单击 Browse 以选择本地 Web 目录。该示例在我的系统中的路径是 C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps\ROOT\helloworld。您可能需要创建 helloworld 目录，但父目录可能已经存在了。
7. 单击 Finish。
   图 4. 设置本地 HTTP 目录
   
8. 单击 Next，然后单击 ATF > Dojo。
9. 取消选中 Rico 复选框，然后单击 Finish。此步骤将按照使用 Dojo Toolkit 开发 Ajax 应用程序的所有必要要求来设置项目。
   图 5. 启用 Dojo Toolkit
   

创建应用程序

在 Navigator 中，展开 HelloWorld。接下来，右键单击 WebContent ，然后单击 New > Other。

图 6. 创建新的 Web 内容
　

图 7. 创建 Dojo 应用程序
　
　在 Name 字段中键入 helloworldapp，然后单击 Finish。每个应用程序名称与项目名称至少应当略有不同，以区分此组文件所代表的内容。

图 8. 为 Dojo 应用程序命名
　
　此步骤将在 Eclipse 的中央框架中装入 helloworldapp.html。在此框架中，编辑 helloworldapp.html 将其从只有骨架的应用程序更改为可运行的 HelloWorld 应用程序。

图 9. 检验编辑窗格
　

生成运行的 HelloWorld 应用程序

首先将标题更改为 Hello World。这是一个常规的 HTML 文件，它支持您所熟悉的语法和 HTML，而且还包括使用 Dojo 和 Dojo 控件的 JavaScript 代码。您可以像处理任何其他 Web 页面一样处理基本的 HTML 元素。

图 10. 改变 HTML 以包括相应的项目名称
　
　现在，为 HelloWorld 应用程序添加代码。这些代码片段在先前的 HelloWorld 示例中也有使用，但在本例中，应用程序的框架是用 Eclipse 设置的。将此脚本插入 helloworldapp.html 代码的 head 部分的末尾。使用此代码片段创建一个按钮，用户可以按下该按钮将 “Hello World!” 写入调试窗口。

图 11. 向代码中添加 Button 控件
　
　最后，在 body 部分的顶部，添加代码使按钮实际显示在用户的屏幕上。由于您已经装入了 Dojo Button 控件，因此现在可以在 HTML 的主体中引用它。注意，这比只打印出 hello world 句子而没有用户交互的典型 HelloWorld 应用程序稍高级一些，但消息被输出到了调试窗口。

图 12. 向内容区域中添加实际按钮
　
　保存、编译并运行应用程序

现在需要保存、编译和运行您创建的 HelloWorld 应用程序：

1. 单击 File > Save。
2. 在 Eclipse 的 Navigator 框架中展开 HelloWorld、WebContent 和 helloworldapp。
3. 右键单击 helloworldapp.html，然后单击 Run As > Run in Mozilla。
4. 单击 Finish 将打开运行 HelloWorld 应用程序的集成 Mozilla 浏览器。
   图 13. 检验 Dojo 应用程序的输出
   

单击 Press Me，然后您将看到 “Hello World!” 显示在调试控制台中。如果正常显示并且没有其他消息，则可以确信 ATF 安装和项目代码运行正常。

图 14. 尝试使用按钮
　
　扩展应用程序的功能

现在，您已经有了一个基本的运行应用程序，接下来利用 ATF 附带的代码片段来扩展功能。如果 Eclipse 视图中还没有 Snippets 窗格，请单击 Window > Show View > Other。展开 General，单击 Snippets，然后单击 OK。Snippets 窗格应当会出现在 Eclipse 窗口的右侧。

图 15. 预制的代码片段
　
　展开 Snippets 窗格中的 Dojo，然后将 dojo.require 拖入 helloworldapp.html 编辑窗格的 JavaScript 块中。系统将显示一个对话框要求输入软件包名称。对于本例，请键入 dojo.widget.Tree。这样做将添加一行代码用于装入 Tree 控件，它将允许您在代码的内容区域使用控件。

图 16. 装入 Tree 控件
　
　向下滚动至 helloworldapp.html 的主体部分，并将 Tree 从 Snippet 窗格拖到编辑窗格中。Eclipse 将询问是否包括示例数据。取消此复选框，从而仅添加封装 Tree 代码。然后，将 Tree Node 片段从 Snippet 窗格拖入编辑窗格的 Tree 标记内，然后将节点命名为 Hello。随后，在 Hello 节点内再添加三个 Tree 节点。

图 17. 用 HelloWorld 数据创建 Tree 节点
　
　需要再次保存、编译和运行已创建的 HelloWorld 应用程序。单击 File > Save。然后在 Eclipse 的 Navigator 框架中展开 HelloWorld、WebContent 和 helloworldapp。在 helloworldapp.html 上单击鼠标右键，然后单击 Run As > Run in Mozilla。单击 Finish 将打开运行 HelloWorld 应用程序的集成 Mozilla 浏览器。您应当可以单击展开和收缩 Hello 节点，这样可以显示或隐藏其子节点。

结束语

现在，您已经基本了解了如何在 Eclipse 中使用 ATF 创建 Dojo 项目的组件。要成为更高级的用户，请了解如何在 Eclipse 中使用所选 Ajax 工具包的全部内容。而且，需要研究 Eclipse ATF 中使用的高级功能，例如 DOM Inspector、CSS Inspector 和 JavaScript 调试程序。使用 Dojo 创建一个简单的 HelloWorld 应用程序极大地简化了使用 Eclipse 的过程，构建完整的 Web 应用程序的优势会在项目变得越来越复杂时不断累积。接下来的文章将提供新版本及功能的更新，并进一步讨论关于 ATF 及其他支持工具包（例如 Zimbra 和 Rico）更多组件的详细信息。

组织简介 | 联系我们 |   Copyright 2002 ®  UML软件工程组织 京ICP备10020922号

京公海网安备110108001071号