探索 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,请执行以下操作:

  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(如果系统中没有安装的话)。

安装了 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 应用程序。新项目打开后,请完成以下步骤:

  1. 打开 Eclipse,然后单击 File > New > Project
  2. 单击 Web > Static Web Project,然后单击 Next

    图 1. 选择项目类型


  3. Project name 字段中键入 HelloWorld,然后单击 Target Runtime 下方的 New。此名称将是整个项目的封闭名称,可以在其中包括与所选名称同名的子文件夹和 Web 应用程序。

    图 2. 为项目命名
    探索 Eclipse 的 Ajax Toolkit Framework_第1张图片

  4. 单击 HTTP > HTTP Server,然后单击 Next。在此步骤中,您将告诉 Eclipse 需要使用本地 HTTP 服务器作为运行时目标。这就是安装步骤过程中必须安装 Tomcat V5(或其他支持 HTTP 的服务器)的原因,允许您在本地分析 Eclipse 内应用程序行为。

    图 3. 设置指向本地 HTTP 服务器的链接
    探索 Eclipse 的 Ajax Toolkit Framework_第2张图片

  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


上述步骤将在 Eclipse 中创建 Dojo 项目骨架。现在必须开始着手创建一个应用程序。

创建应用程序

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


图 6. 创建新的 Web 内容


现在,展开 Dojo 并单击 Dojo Application > Next。以上步骤将设置应用程序的框架,但是此步骤实际上将创建一个文件,用于项目内的单个 Dojo 应用程序的编辑和构建过程。您可以在单个项目中创建多个应用程序。


图 7. 创建 Dojo 应用程序
探索 Eclipse 的 Ajax Toolkit Framework_第3张图片

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


图 8. 为 Dojo 应用程序命名
探索 Eclipse 的 Ajax Toolkit Framework_第4张图片

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


图 9. 检验编辑窗格
探索 Eclipse 的 Ajax Toolkit Framework_第5张图片

生成运行的 HelloWorld 应用程序

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


图 10. 改变 HTML 以包括相应的项目名称
改变 HTML 以包括相应的项目名称

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


图 11. 向代码中添加 Button 控件
探索 Eclipse 的 Ajax Toolkit Framework_第6张图片

最后,在 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 应用程序的输出
    探索 Eclipse 的 Ajax Toolkit Framework_第7张图片

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


图 14. 尝试使用按钮


扩展应用程序的功能

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


图 15. 预制的代码片段
探索 Eclipse 的 Ajax Toolkit Framework_第8张图片

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


图 16. 装入 Tree 控件
装入 Tree 控件

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


图 17. 用 HelloWorld 数据创建 Tree 节点
探索 Eclipse 的 Ajax Toolkit Framework_第9张图片

需要再次保存、编译和运行已创建的 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 社区。


关于作者

Photo of Tim McIntire

Tim McIntire 是 Cluster Corp. 的顾问和创始人之一,该公司是 HPCC 软件、支持和咨询的市场领跑者。他还定期向 IBM developerWorks 和 Apple Developer Connection 投稿。Tim 领导 Oceanography 的 Digital Image Analysis Lab 的 Scripps Institution 进行了计算机科学方面的研究工作,在各种期刊上发表了相关研究成果,包括 Concurrency and ComputationIEEE Transactions on Geoscience and Remote Sensing。您可以访问 TimMcIntire.net 以了解更多关于 Tim 的信息。




对本文的评价

太差! (1)
需提高 (2)
一般;尚可 (3)
好文章 (4)
真棒!(5)

建议?
 



回页首


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

你可能感兴趣的:(JavaScript,eclipse,Ajax,IBM,dojo,mozilla)