探索 Eclipse 的 Ajax Toolkit Framework
原文地址:http://www.ibm.com/developerworks/cn/opensource/os-ecl-atf/
简介: 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 版来创建类似的项目,并且更加简单。
启动之前,请先阅读在 Microsoft® Windows® 下安装的快速说明(有关详细信息和下载,请参阅 参考资料 )。如果尚未使用 Eclipse,请下载 J2EE 项目包,其中包括 Core Eclipse V3.2.1 和 Eclipse WTP(使用 ATF 时要求使用 WTP)。如果尚未安装和使用 Eclipse,这是满足 ATF 基本要求的最简单方法。
要开始使用 ATF,请执行以下操作:
注: Tomcat V5 更倾向于使用 JRE V5,因此还可能需要下载它,以避免特殊的 Tomcat 安装指导。
安装了 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)包含特殊安装说明,末尾介绍了如何安装附加文件。
现在您已经准备好构建第一个 Dojo 应用程序。开始先创建一个新项目。参考资料 包含一个指向 flash 动画的链接,该动画将演示此过程的初始步骤,但是您将越过此进程创建一个互动的 HelloWorld 应用程序。新项目打开后,请完成以下步骤:
上述步骤将在 Eclipse 中创建 Dojo 项目骨架。现在必须开始着手创建一个应用程序。
在 Navigator 中,展开 HelloWorld。接下来,右键单击 WebContent ,然后单击 New > Other 。
现在,展开 Dojo 并单击 Dojo Application > Next 。以上步骤将设置应用程序的框架,但是此步骤实际上将创建一个文件,用于项目内的单个 Dojo 应用程序的编辑和构建过程。您可以在单个项目中创建多个应用程序。
在 Name 字段中键入 helloworldapp
,然后单击 Finish 。每个应用程序名称与项目名称至少应当略有不同,以区分此组文件所代表的内容。
此步骤将在 Eclipse 的中央框架中装入 helloworldapp.html。在此框架中,编辑 helloworldapp.html 将其从只有骨架的应用程序更改为可运行的 HelloWorld 应用程序。
首先将标题更改为 Hello World
。这是一个常规的 HTML 文件,它支持您所熟悉的语法和 HTML,而且还包括使用 Dojo 和 Dojo 控件的 JavaScript 代码。您可以像处理任何其他 Web 页面一样处理基本的 HTML 元素。
现在,为 HelloWorld 应用程序添加代码。这些代码片段在先前的 HelloWorld 示例中也有使用,但在本例中,应用程序的框架是用 Eclipse 设置的。将此脚本插入 helloworldapp.html 代码的 head
部分的末尾。使用此代码片段创建一个按钮,用户可以按下该按钮将 “Hello World!” 写入调试窗口。
最后,在 body
部分的顶部,添加代码使按钮实际显示在用户的屏幕上。由于您已经装入了 Dojo Button 控件,因此现在可以在 HTML 的主体中引用它。注意,这比只打印出 hello world 句子而没有用户交互的典型 HelloWorld 应用程序稍高级一些,但消息被输出到了调试窗口。
现在需要保存、编译和运行您创建的 HelloWorld 应用程序:
单击 Press Me ,然后您将看到 “Hello World!” 显示在调试控制台中。如果正常显示并且没有其他消息,则可以确信 ATF 安装和项目代码运行正常。
现在,您已经有了一个基本的运行应用程序,接下来利用 ATF 附带的代码片段来扩展功能。如果 Eclipse 视图中还没有 Snippets 窗格,请单击 Window > Show View > Other 。展开 General,单击 Snippets ,然后单击 OK 。Snippets 窗格应当会出现在 Eclipse 窗口的右侧。
展开 Snippets 窗格中的 Dojo,然后将 dojo.require 拖入 helloworldapp.html 编辑窗格的 JavaScript 块中。系统将显示一个对话框要求输入软件包名称。对于本例,请键入 dojo.widget.Tree 。这样做将添加一行代码用于装入 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)更多组件的详细信息。
学习
获得产品和技术
讨论
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 的信息。