探索 Eclipse 的 Ajax Toolkit Framework.docx

探索 Eclipse 的 Ajax Toolkit Framework.docx

《探索 Eclipse 的 Ajax Toolkit Framework.docx》由会员分享，可在线阅读，更多相关《探索 Eclipse 的 Ajax Toolkit Framework.docx（21页珍藏版）》请在冰豆网上搜索。

探索Eclipse的AjaxToolkitFramework

探索Eclipse的AjaxToolkitFramework

文档选项

窗体顶部

将此页作为电子邮件发送

未显示需要JavaScript的文档选项

窗体底部

级别:

中级

TimMcIntire,顾问,FreelanceWriter

2007年1月22日

AjaxToolkitFramework（ATF）是新的OpenAjaxInitiative的核心部分，旨在通过EclipseFoundation提高对功能强大的Web编程技术的可访问性。

通过为各种开源Ajax工具包（包括Dojo、Zimbra和Rico）添加AsynchronousJavaScriptandXML（Ajax）开发环境，ATF扩展了EclipseWebToolsPlatform（WTP）。

本文包括一个HelloWorld示例，您将在其中安装和配置ATF，然后使用Eclipse和Dojo来创建基本的Web应用程序。

本文是我在2006年5月介绍OpenAjaxInitiative的标题为“将Ajax带入Eclipse的AjaxToolkitFramework的两个工具”的文章和近期的ATF（请参阅参考资料）的后续延展。

从那时到现在，项目已从当初的宣布发行到alphaWorks版本再到现在的Eclipse项目发布的V0.1版本。

ATF位于EclipseWTP的顶部，WTP在Web开发社区中使用得十分广泛。

WTP通过添加用于开发Java™2Platform，EnterpriseEdition（J2EE）Web应用程序的工具扩展了Eclipse。

ATF通过为各种开发源码的Ajax工具包（包括Dojo、Zimbra和Rico）添加Ajax开发环境扩展了WTP。

它增强了JavaScript编辑功能，提供了edit-time语法检查、文档对象模型（DocumentObjectModel，DOM）和层叠样式表（CascadingStyleSheet，CSS）Inspector和集成Mozilla浏览器。

ATF允许开发人员使用Eclipse作为开源工具包所需的企业级集成开发环境（IDE）。

ATF背后的OpenAjaxInitiative的目标是提高对Ajax的可访问性，Ajax正在迅速流行开来，但是对于新的开发人员来说概念还是很晦涩难懂。

本文使用Eclipse、ATF和Dojo将ATF的安装步骤和创建示例Ajax应用程序紧密联系在一起。

“将Ajax带入Eclipse的AjaxToolkitFramework的两个工具”介绍了Dojo和Zimbra，并且先提供了“HelloWorld!

”示例，然后提供了用ATF将Dojo集成到Eclipse中的方法。

本文利用了V0.1版来创建类似的项目，并且更加简单。

安装ATF

启动之前，请先阅读在Microsoft®Windows®下安装的快速说明（有关详细信息和下载，请参阅参考资料）。

如果尚未使用Eclipse，请下载J2EE项目包，其中包括CoreEclipseV3.2.1和EclipseWTP（使用ATF时要求使用WTP）。

如果尚未安装和使用Eclipse，这是满足ATF基本要求的最简单方法。

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

1.从Eclipse.org下载ATF的最新版本。

本文是基于V0.1版（0.1-20060912）。

在下载并安装以下所有必需的组件之前，请先不要安装。

2.下载JavaRuntimeEnvironment（JRE）V1.4.2，它在当前的V0.1版中是必需的。

SunMicrosystems或IBM®版本都可以使用。

3.下载ApacheTomcatV5用作本地Web服务器和XULRunner，用于帮助Eclipse建立与Mozilla的接口（请参阅参考资料）。

4.安装XULRunner、JRE，然后安装TomcatV5。

注：

TomcatV5更倾向于使用JREV5，因此还可能需要下载它，以避免特殊的Tomcat安装指导。

5.安装Eclipse（如果系统中没有安装的话）。

安装了Eclipse之后，您就可以准备安装ATF了。

有关详细的安装细节，请参阅参考资料。

要将ATF安装到Eclipse中，请打开Eclipse，然后单击Help>SoftwareUpdates>FindandInstall>SearchforNewFeaturestoInstall>NewArchivedSite。

然后选择包含ATF的压缩文件。

通过安装屏幕的提示指导您完成安装，其间应当确保选择所有ATF组件。

确保仔细阅读ATFDownload信息。

一些ATF版本（包括V0.1）包含特殊安装说明，末尾介绍了如何安装附加文件。

回页首

在ATF中构建Dojo应用程序

现在您已经准备好构建第一个Dojo应用程序。

开始先创建一个新项目。

参考资料包含一个指向flash动画的链接，该动画将演示此过程的初始步骤，但是您将越过此进程创建一个互动的HelloWorld应用程序。

新项目打开后，请完成以下步骤：

1.打开Eclipse，然后单击File>New>Project。

2.单击Web>StaticWebProject，然后单击Next。

图1.选择项目类型

3.在Projectname字段中键入HelloWorld，然后单击TargetRuntime下方的New。

此名称将是整个项目的封闭名称，可以在其中包括与所选名称同名的子文件夹和Web应用程序。

图2.为项目命名

4.单击HTTP>HTTPServer，然后单击Next。

在此步骤中，您将告诉Eclipse需要使用本地HTTP服务器作为运行时目标。

这就是安装步骤过程中必须安装TomcatV5（或其他支持HTTP的服务器）的原因，允许您在本地分析Eclipse内应用程序行为。

图3.设置指向本地HTTP服务器的链接

5.为本地HTTP服务器键入正确的端口（可能80或8080），然后键入希望用于应用程序的目录的名称。

6.选择PublishProjectstothisServer，然后单击Browse以选择本地Web目录。

该示例在我的系统中的路径是C:

\ProgramFiles\ApacheSoftwareFoundation\Tomcat5.5\webapps\ROOT\helloworld。

您可能需要创建helloworld目录，但父目录可能已经存在了。

7.单击Finish。

图4.设置本地HTTP目录

8.单击Next，然后单击ATF>Dojo。

9.取消选中Rico复选框，然后单击Finish。

此步骤将按照使用DojoToolkit开发Ajax应用程序的所有必要要求来设置项目。

图5.启用DojoToolkit

上述步骤将在Eclipse中创建Dojo项目骨架。

现在必须开始着手创建一个应用程序。

创建应用程序

在Navigator中，展开HelloWorld。

接下来，右键单击WebContent，然后单击New>Other。

图6.创建新的Web内容

现在，展开Dojo并单击DojoApplication>Next。

以上步骤将设置应用程序的框架，但是此步骤实际上将创建一个文件，用于项目内的单个Dojo应用程序的编辑和构建过程。

您可以在单个项目中创建多个应用程序。

图7.创建Dojo应用程序

在Name字段中键入helloworldapp，然后单击Finish。

每个应用程序名称与项目名称至少应当略有不同，以区分此组文件所代表的内容。

图8.为Dojo应用程序命名

此步骤将在Eclipse的中央框架中装入helloworldapp.html。

在此框架中，编辑helloworldapp.html将其从只有骨架的应用程序更改为可运行的HelloWorld应用程序。

图9.检验编辑窗格

生成运行的HelloWorld应用程序

首先将标题更改为HelloWorld。

这是一个常规的HTML文件，它支持您所熟悉的语法和HTML，而且还包括使用Dojo和Dojo控件的JavaScript代码。

您可以像处理任何其他Web页面一样处理基本的HTML元素。

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

现在，为HelloWorld应用程序添加代码。

这些代码片段在先前的HelloWorld示例中也有使用，但在本例中，应用程序的框架是用Eclipse设置的。

将此脚本插入helloworldapp.html代码的head部分的末尾。

使用此代码片段创建一个按钮，用户可以按下该按钮将“HelloWorld!

”写入调试窗口。

图11.向代码中添加Button控件

最后，在body部分的顶部，添加代码使按钮实际显示在用户的屏幕上。

由于您已经装入了DojoButton控件，因此现在可以在HTML的主体中引用它。

注意，这比只打印出helloworld句子而没有用户交互的典型HelloWorld应用程序稍高级一些，但消息被输出到了调试窗口。

图12.向内容区域中添加实际按钮

保存、编译并运行应用程序

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

1.单击File>Save。

2.在Eclipse的Navigator框架中展开HelloWorld、WebContent和helloworldapp。

3.右键单击helloworldapp.html，然后单击RunAs>RuninMozilla。

4.单击Finish将打开运行HelloWorld应用程序的集成Mozilla浏览器。

图13.检验Dojo应用程序的输出

单击PressMe，然后您将看到“HelloWorld!

”显示在调试控制台中。

如果正常显示并且没有其他消息，则可以确信ATF安装和项目代码运行正常。

图14.尝试使用按钮

扩展应用程序的功能

现在，您已经有了一个基本的运行应用程序，接下来利用ATF附带的代码片段来扩展功能。

如果Eclipse视图中还没有Snippets窗格，请单击Window>ShowView>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代码。

然后，将TreeNode片段从Snippet窗格拖入编辑窗格的Tree标记内，然后将节点命名为Hello。

随后，在Hello节点内再添加三个Tree节点。

图17.用HelloWorld数据创建Tree节点

需要再次保存、编译和运行已创建的HelloWorld应用程序。

单击File>Save。

然后在Eclipse的Navigator框架中展开HelloWorld、WebContent和helloworldapp。

在helloworldapp.html上单击鼠标右键，然后单击RunAs>RuninMozilla。

单击Finish将打开运行HelloWorld应用程序的集成Mozilla浏览器。

您应当可以单击展开和收缩Hello节点，这样可以显示或隐藏其子节点。

回页首

结束语

现在，您已经基本了解了如何在Eclipse中使用ATF创建Dojo项目的组件。

要成为更高级的用户，请了解如何在Eclipse中使用所选Ajax工具包的全部内容。

而且，需要研究EclipseATF中使用的高级功能，例如DOMInspector、CSSInspector和JavaScript调试程序。

使用Dojo创建一个简单的HelloWorld应用程序极大地简化了使用Eclipse的过程，构建完整的Web应用程序的优势会在项目变得越来越复杂时不断累积。

接下来的文章将提供新版本及功能的更新，并进一步讨论关于ATF及其他支持工具包（例如Zimbra和Rico）更多组件的详细信息。

参考资料

学习

∙您可以参阅本文在developerWorks全球站点上的英文原文。

∙访问IBMdeveloperWorks的Eclipse项目资源中心，了解关于Eclipse的更多信息。

∙Ajax技术资源中心：

在这里您可以找到更多关于Ajax的知识，包括Ajax基础入门、使用Java,PHP等语言开发Ajax应用的各种技巧和多种Ajax框架的技术信息。

∙阅读“将Ajax带入Eclipse的OpenAjaxToolkit的两个工具”关于ATF的介绍。

∙阅读“使用AjaxToolkitFramework开发Dojo应用”介绍如何利用AjaxToolkitFramework工具来使用DojoToolkit开源工具包，从而简化和增强Ajax应用的开发。

∙“TechTitansContributeBrowser-BoostingAjaxTechnologiestoOpenSourceCommunity”：

2006年2月的这篇IBM新闻稿提供了关于OpenAjaxInitiative的详细信息。

∙访问Eclipse.org以获得关于EclipseIDE的详细信息。

∙观看Flash动画DojoProjectCycleDemo，它是关于如何在Ajax中创建Dojo项目的。

您可以将此信息用在本文的某些步骤中。

∙查看DojoToolkit文档获得关于Dojo的更多信息。

∙查看JotSpotwiki中HelloWorld的详细示例。

∙要获得Eclipse平台的优秀介绍，请参阅“Eclipse平台入门”。

∙随时关注developerWorks技术讲座和网络广播。

∙查阅最近将在全球举办的面向IBM开放源码开发人员的会议、展览、网络广播和其他活动。

∙访问developerWorksOpensource专区以获得大量的how-to信息、工具和项目更新信息，可以帮助您利用开放源码技术进行开发，并与IBM的产品结合使用。

∙要收听针对软件开发人员的有趣访谈和讨论，一定要访问developerWorkspodcasts。

获得产品和技术

∙查看ATF项目。

∙查看EclipseWTP项目。

∙下载EclipseCallisto包获得安装ATF所需的基本组件。

∙从Eclipse下载最新版本的ATF。

∙下载JRE，这是使用ATF所必需的组件。

∙下载ApacheTomcatV5，它是将集成到ATF中的兼容Web服务器。

∙请参阅IBMalphaWorks中最新的Eclipse技术下载。

∙使用IBM试用软件改进您的下一个开放源码开发项目，这些软件可以通过下载或从DVD中获得。

讨论

∙Eclipse新闻组有很多参考资料适用于对使用和扩展Eclipse感兴趣的人士。

∙通过参与developerWorksblogs加入developerWorks社区。