探索 Eclipse 的 Ajax Toolkit Framework

级别: 中级 Tim McIntire, 顾问, Freelance Writer 2007 年 1 月 22 日 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，请执行以下操作： 从 Eclipse.org 下载 ATF 的最新版本。本文是基于 V0.1 版 (0.1-20060912)。在下载并安装以下所有必需的组件之前，请先不要安装。 下载 Java Runtime Environment (JRE) V1.4.2，它在当前的 V0.1 版中是必需的。Sun Microsystems 或 IBM® 版本都可以使用。 下载 Apache Tomcat V5 用作本地 Web 服务器和 XULRunner，用于帮助 Eclipse 建立与 Mozilla 的接口（请参阅 参考资料）。 安装 XULRunner、JRE，然后安装 Tomcat V5。 注：Tomcat V5 更倾向于使用 JRE V5，因此还可能需要下载它，以避免特殊的 Tomcat 安装指导。 安装 Eclipse（如果系统中没有安装的话）。 安装了 Eclipse 之后，您就可以准备安装 ATF 了。有关详细的安装细节，请参阅 参考资料。 要将 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 应用程序。新项目打开后，请完成以下步骤： 打开 Eclipse，然后单击 File > New > Project。 单击 Web > Static Web Project，然后单击 Next。 图 1. 选择项目类型 在 Project name 字段中键入 HelloWorld，然后单击 Target Runtime 下方的 New。此名称将是整个项目的封闭名称，可以在其中包括与所选名称同名的子文件夹和 Web 应用程序。 图 2. 为项目命名 单击 HTTP > HTTP Server，然后单击 Next。在此步骤中，您将告诉 Eclipse 需要使用本地 HTTP 服务器作为运行时目标。这就是安装步骤过程中必须安装 Tomcat V5（或其他支持 HTTP 的服务器）的原因，允许您在本地分析 Eclipse 内应用程序行为。 图 3. 设置指向本地 HTTP 服务器的链接 为本地 HTTP 服务器键入正确的端口（可能 80 或 8080），然后键入希望用于应用程序的目录的名称。 选择 Publish Projects to this Server，然后单击 Browse 以选择本地 Web 目录。该示例在我的系统中的路径是 C:/Program Files/Apache Software Foundation/Tomcat 5.5/webapps/ROOT/helloworld。您可能需要创建 helloworld 目录，但父目录可能已经存在了。 单击 Finish。 图 4. 设置本地 HTTP 目录 单击 Next，然后单击 ATF > Dojo。 取消选中 Rico 复选框，然后单击 Finish。此步骤将按照使用 Dojo Toolkit 开发 Ajax 应用程序的所有必要要求来设置项目。 图 5. 启用 Dojo Toolkit 上述步骤将在 Eclipse 中创建 Dojo 项目骨架。现在必须开始着手创建一个应用程序。 创建应用程序 在 Navigator 中，展开 HelloWorld。接下来，右键单击 WebContent ，然后单击 New > Other。 图 6. 创建新的 Web 内容 现在，展开 Dojo 并单击 Dojo Application > Next。以上步骤将设置应用程序的框架，但是此步骤实际上将创建一个文件，用于项目内的单个 Dojo 应用程序的编辑和构建过程。您可以在单个项目中创建多个应用程序。 图 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 应用程序： 单击 File > Save。 在 Eclipse 的 Navigator 框架中展开 HelloWorld、WebContent 和 helloworldapp。 右键单击 helloworldapp.html，然后单击 Run As > Run in Mozilla。 单击 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）更多组件的详细信息。 参考资料 学习 您可以参阅本文在 developerWorks 全球站点上的 英文原文 。 访问 IBM developerWorks 的 Eclipse 项目资源中心，了解关于 Eclipse 的更多信息。 Ajax 技术资源中心：在这里您可以找到更多关于 Ajax 的知识，包括 Ajax 基础入门、使用 Java, PHP 等语言开发 Ajax 应用的各种技巧和多种 Ajax 框架的技术信息。 阅读 “将 Ajax 带入 Eclipse 的 Open Ajax Toolkit 的两个工具” 关于 ATF 的介绍。 阅读 “使用 Ajax Toolkit Framework 开发 Dojo 应用” 介绍如何利用 Ajax Toolkit Framework 工具来使用 Dojo Toolkit 开源工具包，从而简化和增强 Ajax 应用的开发。 “Tech Titans Contribute Browser-Boosting Ajax Technologies to Open Source Community”：2006 年 2 月的这篇 IBM 新闻稿提供了关于 Open Ajax Initiative 的详细信息。 访问 Eclipse.org 以获得关于 Eclipse IDE 的详细信息。 观看 Flash 动画 Dojo Project Cycle Demo，它是关于如何在 Ajax 中创建 Dojo 项目的。您可以将此信息用在本文的某些步骤中。 查看 Dojo Toolkit 文档 获得关于 Dojo 的更多信息。 查看 JotSpot wiki 中 HelloWorld 的详细示例。 要获得 Eclipse 平台的优秀介绍，请参阅 “Eclipse 平台入门”。 随时关注 developerWorks 技术讲座和网络广播。 查阅最近将在全球举办的面向 IBM 开放源码开发人员的会议、展览、网络广播和其他 活动。 访问 developerWorks Open source 专区 以获得大量的 how-to 信息、工具和项目更新信息，可以帮助您利用开放源码技术进行开发，并与 IBM 的产品结合使用。 要收听针对软件开发人员的有趣访谈和讨论，一定要访问 developerWorks podcasts。 获得产品和技术 查看 ATF 项目。 查看 Eclipse WTP 项目。 下载 Eclipse Callisto 包 获得安装 ATF 所需的基本组件。 从 Eclipse 下载最新版本的 ATF。 下载 JRE，这是使用 ATF 所必需的组件。 下载 Apache Tomcat V5，它是将集成到 ATF 中的兼容 Web 服务器。 请参阅 IBM alphaWorks 中最新的 Eclipse 技术下载。 使用 IBM 试用软件 改进您的下一个开放源码开发项目，这些软件可以通过下载或从 DVD 中获得。 讨论 Eclipse 新闻组 有很多参考资料适用于对使用和扩展 Eclipse 感兴趣的人士。 通过参与 developerWorks blogs 加入 developerWorks 社区。 关于作者 Tim McIntire 是 Cluster Corp. 的顾问和创始人之一，该公司是 HPCC 软件、支持和咨询的市场领跑者。他还定期向 IBM developerWorks 和 Apple Developer Connection 投稿。Tim 领导 Oceanography 的 Digital Image Analysis Lab 的 Scripps Institution 进行了计算机科学方面的研究工作，在各种期刊上发表了相关研究成果，包括 Concurrency and Computation 和 IEEE Transactions on Geoscience and Remote Sensing。您可以访问 TimMcIntire.net 以了解更多关于 Tim 的信息。 对本文的评价 太差！ (1) 需提高 (2) 一般；尚可 (3) 好文章 (4) 真棒！(5) 建议？   回页首

IBM 公司保留在 developerWorks 网站上发表的内容的著作权。未经IBM公司或原始作者的书面明确许可，请勿转载。如果您希望转载，请通过 提交转载请求表单 联系我们的编辑团队。