探索Eclipse的Ajax Toolkit Framework(1)(2)

在 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!” 写入调试窗口。

最后，在 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 窗口的右侧。

展开 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 节点。

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

(责任编辑：铭铭 mingming_ky#126.com TEL：（010）－68476636)