// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= 使用 JSON 将 Dojo 树连接至 ArrayList
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: 使用 JSON 将 Dojo 树连接至 ArrayList - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, 使用 JSON 将 Dojo 树连接至 ArrayList

在 Web 应用程序中，Web 2.0 功能变得越来越重要。许多 Web 应用程序现在都使用 JavaScript 工具包（如 link:http://www.dojotoolkit.org/[+Dojo+]），这使得网页的工作方式更像桌面界面，同时可以克服浏览器不兼容性并利用可维护、可访问且符合标准的代码。

本教程改编自 link:http://developers.sun.com/learning/javaoneonline/j1lab.jsp?lab=LAB-5573&yr=2009&track=1[+Java One 动手实验室：对 Web 应用程序中的端到端连接利用 JavaScript 工具包+]，说明了如何在网页中添加和配置 link:http://dojocampus.org/explorer/#Dijit_Tree_Basic[+Dojo 树窗口部件+]，并使服务器端可以响应 JSON 格式的树请求。在执行此操作时，将会利用 link:http://json.org[+http://json.org+] 中免费提供的 Java 类将 ArrayList 中的数据处理为 JSON 格式。

image::images/netbeans-stamp-80-74-73.png[title="此页上的内容适用于 NetBeans IDE 7.2、7.3、7.4 和 8.0"]


*要完成本文档，您需要具备以下软件和资源。*

|===
|软件或资源 |要求的版本 

|link:https://netbeans.org/downloads/index.html[+NetBeans IDE+] |7.2、7.3、7.4、8.0、Java EE 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Java 开发工具包 (JDK)+] |7 或 8 

|GlassFish Server 
_或_ 
Tomcat Servlet 容器 |Open Source Edition 3.1.x 或 4.x 
_ _ 


.x 或 8.x 

|link:http://www.dojotoolkit.org/download[+Dojo 工具包+] |版本 1.8.x 或更高版本 

|link:https://netbeans.org/projects/samples/downloads/download/Samples/Java%20Web/DojoTreeSample.zip[+Dojo 样例项目+] |N/A 
|===


*注：*

* 您需要具有 Internet 连接，才能完成此教程中包括的若干个步骤。
* NetBeans IDE Java EE 下载包安装允许您选择性地安装 GlassFish Server Open Source Edition 并在 IDE 中注册。在此教程中，您需要服务器来模拟客户端-服务器通信。
* 完成的项目如下所示： 

image::images/dojo-tree-complete.png[title="在浏览器中查看的已完成练习"]


== 打开样例项目

首先在 IDE 中打开样例项目。打开项目后，在 "Projects"（项目）窗口中展开项目节点，并检查在项目中使用的 Dojo 资源和库。

1. 将教程的 link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaScript%252FDojoTreeSample.zip[+Dojo 样例项目+]下载到计算机上的某个位置。
2. 单击 IDE 工具栏中的 "Open Project"（打开项目）按钮 (image:images/open-project-btn.png[]) 按钮以打开 "Open Project"（打开项目）对话框。
3. 在 "Open Project"（打开项目）对话框中，定位至计算机上的 Dojo 样例项目并单击 "Open Project"（打开项目）。

当在 IDE 中打开 `DojoTreeSample` 项目时，您将看到该项目带有一个错误标记以便指示存在引用问题。

image::images/proj-win-ref-problems.png[title="项目引用问题由红色文本和错误标记指示"]

存在此引用问题的原因在于：项目（`Tribe` 和 `TribeDataManager`）中使用的 Java 类引用 JSON JAR 文件中的类，稍后您将在<<addJSON,为项目添加 JSON JAR 文件>>部分中添加该文件。

*注：*"Projects"（项目）窗口（Ctrl-1 组合键；在 Mac 上为 ⌘-1 组合键）提供了重要项目内容的_逻辑视图_，也是项目源的主入口点。"Files"（文件）窗口（Ctrl-2 组合键；在 Mac 上为 ⌘-2 组合键）显示_基于目录的项目视图_，其中包括 "Projects"（项目）窗口中未显示的任何文件和文件夹。


. 在 "Projects"（项目）窗口中展开 `Web Pages`（Web 页）节点。

您可以看到  ``resources``  文件夹已在 "Projects"（项目）窗口中的 `Web Pages`（Web 页）节点下列出。 ``resources``  文件夹包含 link:http://www.dojotoolkit.org/download[+Dojo 工具包+]中的 Dojo 核心和 Dijit 库。为了实现 Dojo 的树窗口部件，您需要两个组件：来自 Core 库的 `ItemFileReadStore` 模块以及 Dijit 库中包含的`树`窗口部件本身。

* `link:http://docs.dojocampus.org/dojo/data/ItemFileReadStore[+dojo.data.ItemFileReadStore+]`：从 HTTP 端点（在此教程中为 Servlet）读取 JSON 结构化内容并将所有项都存储在内存中，以便简单、快速地进行访问。
* `link:http://docs.dojocampus.org/dijit/Tree[+dijit.Tree+]`：树窗口部件，它提供了从 `ItemFileReadStore` 中检索的 JSON 数据的视图。

*注：*此项目不需要 `DojoX` 库。


. 在 "Projects"（项目）窗口中展开 `Libraries`（库）节点，并确认所有必需库均在类路径上。

*注：*根据您的配置不同，您可能需要解决缺少服务器问题。如果您在 `Libraries`（库）节点下看到  ``<Missing Java EE Server>`` （<缺少 Java EE 服务器>）节点，请右键单击项目节点，然后在弹出菜单中选择 "Resolve Missing Server Problem"（解决缺少服务器问题）。

image::images/proj-win-dojo-resources.png[title="Dojo 和 Dijit 库已添加到项目的 &quot;resources&quot; 文件夹中"]

在 "Resolve References"（解决引用）对话框中选择 "GlassFish Server"。单击 "OK"（确定）。

image::images/dojo-add-server.png[title="Dojo 和 Dijit 库已添加到项目的 &quot;resources&quot; 文件夹中"]

在此阶段，您已成功在 IDE 中打开 `DojoTreeSample` 项目并且已确认 Dojo 库包括在应用程序中。在下一步中，您将开始在 HTML 文件中工作，该文件将向最终用户显示树窗口部件。


== 从项目文件链接到工具包资源

为了使用工具包中的资源，您需要链接到在 Core 库中找到的 `dojo.js` 文件。`dojo.js` 文件是 Dojo 的_源代码加载器_，用于确定要使用的正确托管环境。在执行此操作时，还可以通过添加 `parseOnLoad` 参数来配置 `djConfig`。

1. 在“项目”窗口中，双击 `dojoDemo.html` 文件在编辑器中将其打开。
2. 在 `dojoDemo.html` 文件中的 `<head>` 标记之间添加以下 `<script>` 标记（以粗体显示）。

[source,xml]
----

<!-- TODO: link to Dojo resources here -->

*<script type="text/javascript">
    var djConfig = {parseOnLoad: true,
        isDebug: true};
</script> 
<script
    type="text/javascript"
    src="resources/dojo/dojo.js">
</script>*
    
</head>
----
* `link:http://dojotoolkit.org/reference-guide/1.6/djConfig.html[+djConfig+]` 允许您覆盖用于控制 Dojo 运行方式的全局设置（例如，使用 `parseOnLoad` 属性）。
* `parseOnLoad` 设置为 `true` 可确保在加载页面时解析窗口部件和页面标记。


. 通过在 `<head>` 标记之间和添加的 `<script>` 标记下方添加以下 `@import` 语句（以粗体显示），可以为工具包中包含的 `nihilo` link:http://docs.dojocampus.org/dijit/themes[+样例主题+]添加一个链接。

[source,xml]
----

<script type="text/javascript">
    var djConfig = {parseOnLoad: true,
        isDebug: true};
</script> 
<script
    type="text/javascript"
    src="resources/dojo/dojo.js">
</script>

*<style type="text/css">
    @import "resources/dijit/themes/nihilo/nihilo.css";
</style>*
----

默认情况下，`nihilo` 主题包含在工具包中。通过在“项目”窗口中展开 `dijit/themes` 文件夹可以查看默认提供的其他样例主题。


. 在页 `<body>` 标记中添加以下类选择器可以指定使用的主题的名称。当您执行此操作时，加载到页面中的任何 Dojo 窗口部件都将使用与主题关联的样式来呈现。

[source,java]
----

<body *class="nihilo"*>
----

在此阶段，`dojoDemo.html` 文件准备就绪，可以接受引用 Dojo Core 和 Dijit 库的任意代码，并将使用 Dojo 的 `nihilo` 主题来呈现任何窗口部件。


== 添加和配置 Dojo 树窗口部件

链接到 `dojo.js` 之后，便可开始添加代码，以利用 Dojo 的模块和窗口部件。首先，添加代码，以使用 `link:http://docs.dojocampus.org/dojo/require[+dojo.require+]` 语句加载 `dijit.Tree` 窗口部件和 `dojo.data.ItemFileReadStore`。然后，将窗口部件和模块本身添加到页面中。

1. 在文件的  ``<body<``  标记之间添加以下 `dojo.require` 语句（以粗体显示）。

[source,xml]
----

<script type="text/javascript">

    // TODO: add dojo.require statements here
    *dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.Tree");*

</script>
----
* `link:http://docs.dojocampus.org/dojo/data/ItemFileReadStore[+dojo.data.ItemFileReadStore+]`：从 HTTP 端点读取 JSON 结构化内容（在<<prepareServlet,准备 Servlet 以启动 JSON 响应>>中，将为此用途实现 servlet。）并将所有项都存储在内存中，以便简单、快速地进行访问。
* `link:http://docs.dojocampus.org/dijit/Tree[+dijit.Tree+]`：树窗口部件，它提供了从 `ItemFileReadStore` 中检索的 JSON 数据的视图。


. 添加以下代码（以粗体显示）以便添加 `ItemFileReadStore` 和 `Tree` 窗口部件。

[source,html]
----

<!-- TODO: specify AJAX retrieval -->

<!-- TODO: add Tree widget and configure attributes -->
*<div dojoType="dojo.data.ItemFileReadStore"
     url="TribeServlet"
     jsId="indianStore">
</div>

<div dojoType="dijit.Tree"
     store="indianStore"
     query="{type:'region'}"
     label="North American Indians">
</div>*
----
* `ItemFileReadStore` 需要您通过指向返回 JSON 数据的服务器端资源来指定 `url` 属性。这是 `TribeServlet`，以后将对其进行说明。使用 `jsId` 属性可为检索的 JSON 数据指定 ID，然后可以通过窗口部件来使用该 ID 以引用数据存储。
* `Tree` 使用 `store` 属性指向提供 JSON 数据的 `ItemFileReadStore`。通过 `query` 属性，可以根据 JSON 文件中使用的关键字来排列数据的显示。

*注：*在添加此代码后，可以忽略编辑器中显示的警告。

在此阶段，`dojoDemo.html` 文件已完成，对项目的所有_客户端修改_也已就绪。在下面的两个步骤中，您要进行的更改将在发出树请求时影响项目的_服务器端_行为。


== 将第三方 JSON 转换源代码作为 JAR 文件添加到项目中

在本教程中，在 `Tribe` 和 `TribeDataManager` 类中为您准备了用于解压缩 ArrayList 样例数据的逻辑。实际上，只需包括为项目处理 JSON 转换的第三方 Java 类，然后在 `Tribe` 和 `TribeDataManager` 类中为这些类添加 `import` 语句即可。但要完成此操作，需先编译第三方 Java 类并创建 Java 档案（JAR 文件）。IDE 可以使用 Java 类库向导帮助您完成此操作。

1. 访问 link:http://json.org/java[+http://json.org/java+]，并请注意，用于 JSON 转换的 Java 类可以免费使用。单击 "Free source code is available"（提供免费源代码）链接，以下载包含源代码的 `JSON-java-master.zip` 文件。
2. 解压缩 `JSON-java-master.zip` 文件，并请注意，解压缩的文件夹包含在 link:http://json.org/java[+http://json.org/java+] 中列出的源代码。

现在，我们要编译这些源代码并创建将添加到 `DojoTreeSample` 项目中的 Java 档案（JAR 文件）。


. 单击工具栏中的 "New Project"（新建项目）按钮 (image:images/new-project-btn.png[]) 以便打开 "New Project"（新建项目）向导。


. 在 "New Project"（新建项目）向导中，选择 "Java" 类别的 "Java Class Library"（Java 类库）项目模板。单击 "Next"（下一步）。


. 在 "Java Class Library"（Java 类库）向导的 "Name and Location"（名称和位置）面板中，键入 *`json`* 作为项目名称。单击 "Finish"（完成）。

单击 "Finish"（完成）后，将创建新项目并在 "Projects"（项目）窗口中将其打开。

现在，您需要按照将 Dojo 工具包资源复制到  ``DojoTreeSample``  项目的相同方式，将下载的 JSON 资源复制到  ``json``  项目。


. 提取 `JSON-java-master.zip` 档案并复制（Ctrl-C 组合键；在 Mac 上为 ⌘-C 组合键）根文件夹中的 Java 源文件。

*注：*您无需复制同样也位于所提取档案的根文件夹中的 `zip` 文件夹及其内容。


. 在 IDE 的 "Projects"（项目）窗口中，右键单击 "Source Packages"（源包）节点，然后在弹出菜单中选择 "New"（新建）> "Java Package"（Java 包）。


. 键入 *json* 作为包名称。单击 "Finish"（完成）。


. 右键单击 `json` 源包，然后在弹出菜单中选择 "Paste"（粘贴）。

展开此包时，您可以看到  ``json``  源。

image::images/proj-win-json-sources.png[title="源文件现已包含在新的 &quot;json&quot; 项目中"]


. 在 "Projects"（项目）窗口中右键单击 `json` 项目节点，然后选择 "Clean and Build"（清理并构建）构建项目。

在构建项目时，所有 Java 类都将编译到 `.class` 文件中。IDE 会创建一个 `build` 文件夹来包含编译的类，同时创建一个 `dist` 文件夹来包含项目的 JAR 文件。从 IDE 的 "Files"（文件）窗口中可以查看这些文件夹。

在构建 `json` 项目后，打开 "Files"（文件）窗口（Ctrl-2 组合键；在 Mac 上为 ⌘-2 组合键）并展开 `json` 文件夹。`build` 文件夹包含 `JSON-java-master.zip` 文件中的已编译源代码，`dist` 文件夹包含 `DojoTreeSample` 项目需要引用的 JAR 文件。

image::images/files-win-compiled-classes.png[title="可在项目的 &quot;build&quot; 文件夹中查看已编译源代码"]

现在，您已具有 `json.jar` 文件，因此可以解决 `DojoTreeSample` 项目自打开以来显现的引用问题。


. 在 "Projects"（项目）窗口中，右键单击 `DojoTreeSample` 的 "Libraries"（库）节点并选择 "Add JAR/Folder"（添加 JAR/文件夹）。然后，在对话框中，导航至 `json` 项目的 `dist` 文件夹的位置并选择 `json.jar` 文件。

或者，也可以右键单击 "Libraries"（库）节点，然后在弹出菜单中选择 "Add Project"（添加项目）并在 "Add Project"（添加项目）对话框中定位 `json` 项目。

退出该对话框时，将在 `Libraries` 节点下列出 `json.jar` 文件。

image::images/libraries-json-jar.png[title="JAR 文件由项目引用"]

*注：*尽管 `json.jar` 文件列在项目的 `Libraries` 节点下，但该文件却是从原始位置引用的，而不是复制并添加到项目中的（例如，您将无法在 "Files"（文件）窗口中的 `DojoTreeSample` 项目下找到它）。因此，如果更改 JAR 文件的位置，引用将中断。


. 展开 `Source Packages`（源包）> `dojo.indians` 包并双击 `Tribe` 和 `TribeDataManager` 类，以便在编辑器中将其打开。


. 向两个类中添加必要的 import 语句。在每个类中，右键单击编辑器并选择 "Fix Imports"（修复导入）。

`Tribe` 类需要以下导入：

[source,java]
----

import dojo.org.json.JSONException;
import dojo.org.json.JSONObject;
----
`TribeDataManager` 类需要以下导入：

[source,java]
----

import dojo.org.json.JSONArray;
import dojo.org.json.JSONException;
import dojo.org.json.JSONObject;
----

请注意，link:http://json.org/java[+http://json.org/java+] 中还提供用于 JSON 的 API - 以后检查 `Tribe` 和 `TribeDataManager` 中的代码时，可能要使此页保持打开状态。


. 检查 `TribeDataManager` 中的 ArrayList。ArrayList 是 `Tribe` 对象的集合。查看 ArrayList 的第一个元素，您可以看到创建了一个新 `Tribe` 对象并将其添加到了列表中：

[source,java]
----

indians.add(new Tribe("Eskimo-Aleut", "Arctic", "Alaska Natives"));
----
每个 `Tribe` 对象捕获三个信息点：_tribe_、_category_ 和 _region_。此练习中的数据摘自维基百科中有关 link:http://en.wikipedia.org/wiki/Native_Americans_in_the_United_States#Ethno-linguistic_classification[+Native Americans in the United States+] 的条目。您可以确定，在一个 category 中可以对多个 _tribe __分类_，一个大的 _region_ 中可以包含许多 category。


. 在编辑器中打开 `Tribe` 类，并请注意，它基本上是 link:http://java.sun.com/docs/books/tutorial/javabeans/index.html[+JavaBean+]，`toJSONObject()` 方法除外：

[source,java]
----

public JSONObject toJSONObject() throws JSONException {
    JSONObject jo = new JSONObject();
    jo.put("name", this.name);
    jo.put("type", "tribe");

    return jo;
}
----


. 切换回 `TribeDataManager`（Ctrl-Tab 组合键）并检查该类中包括的方法。打开导航器（Ctrl-7 组合键；在 Mac 上为 ⌘-7 组合键），以查看该类中包含的字段和属性的列表。

image::images/dojo-navigator.png[title="使用导航器查看类字段和属性"] 

其中包含的最重要方法是 `getIndiansAsJSONObject()`。此方法会扫描 ArrayList，处理数据，并以 `JSONObject` 的形式返回它。JSONObject 的 `String` 形式是 Dojo 的 `ItemFileReadStore` 所需要的。

[source,java]
----

public static JSONObject getIndiansAsJSONObject() throws JSONException {

    JSONObject jo = new JSONObject();
    JSONArray itemsArray = new JSONArray();

    jo.put("identifier", "name");
    jo.put("label", "name");

    // add regions
    addRegionsToJSONArray(itemsArray);

    // add categories
    addCategoriesToJSONArray(itemsArray);

    // add tribes
    addTribesToJSONArray(itemsArray);

    jo.put("items", itemsArray);
    return jo;
}
----


. 在 `getIndiansAsJSONObject()` 方法中打开 Javadoc。通过返回到导航器（Ctrl-7 组合键；在 Mac 上为 ⌘-7 组合键）并将光标悬停于方法上方可以执行此操作。否则，请从主菜单中选择 "Window"（窗口）> "Other"（其他）> "Javadoc"，然后在编辑器中单击方法签名。 

 image::images/javadoc-window.png[title="TribeDataManager 的 Javadoc 提供 JSON 数据的示例"]


. 检查在 Javadoc 中提供的 JSON 数据的示例。请注意，数据格式符合 link:http://o.dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/what-dojo-data/available-stores/dojo-data-item[+Dojo 文档+]中提供的示例。


=== NetBeans IDE 的 Java 调试器

您将实现一个 Servlet，它将在下一步中调用 `getIndiansAsJSONObject()` 方法。在执行此操作后，您可以执行下列步骤以便使用 IDE Java 调试器逐步执行此方法，并检查 `JSONObject` 的格式。

1. 在方法中设置断点（在编辑器的左旁注中单击行号（即第 99 行））。

image::images/debugger-breakpoint.png[title="使用 Java 调试器逐步执行代码"]


. 在 "Projects"（项目）窗口中选择  ``DojoTreeSample``  项目。


. 运行调试器（在工具栏中单击 "Debug Project"（调试项目）按钮 (image:images/debug-btn.png[])）。


. 使用工具栏中的 "Step Into"（步入）(image:images/step-into-btn.png[]) 和 "Step Over"（步过）(image:images/step-over-btn.png[]) 按钮。


. 在 "Local Variables"（局部变量）窗口中检查变量和表达式值（"Window"（窗口）> "Debugging"（调试）> "Variables"（变量））。

有关 Java 调试器的详细信息，请参见以下屏幕快照：

* link:../java/debug-stepinto-screencast.html[+NetBeans 调试器中可视“步入”操作+]
* link:../java/debug-deadlock-screencast.html[+使用 NetBeans 调试器进行死锁检测+]
* link:../java/debug-evaluator-screencast.html[+在 NetBeans 调试器中使用代码片段计算器+]


在此步骤中，您已编译来自 link:http://json.org[+http://json.org+] 的第三方源代码并将其作为 JAR 文件添加至 `DojoTreeSample` 项目中。然后，在 `Tribe` 和 `TribeDataManager` 类中，向 JAR 文件中的类添加 import 语句。最后，您检查了 `TribeDataManager` 中包含的一些方法，这些方法用于将 ArrayList 数据转换为 JSON 字符串。

在下一步中，您将创建一个 servlet，它将通过调用 `TribeDataManager` 的 `getIndiansAsJSONObject()` 方法处理传入请求，并将生成的 JSON 字符串作为响应发送至客户端。


== 准备 Servlet 以启动 JSON 响应

回想一下，您在向 Web 页中添加 `ItemFileReadStore` 时，<<TribeServlet,已将 "`TribeServlet`" 指定为 `url` 属性的值>>。这是任务为准备 JSON 数据并将其返回客户端的服务器端中的目标。现在，我们要创建此 Servlet。

1. 在 "Projects"（项目）窗口中，右键单击 `dojo.indians` 源包并选择 "New"（新建）> "Servlet"。
2. 在 "New Servlet"（新建 Servlet）向导中，键入 *`TribeServlet`* 作为类名。确认已将 `dojo.indians` 指定为包。单击 "Next"（下一步）。

image::images/new-servlet-wizard.png[title="使用新建 Servlet 向导创建 Servlet"]


. 确认默认的 "Servlet Name"（Servlet 名称）和 "URL Patterns"（URL 模式）值正确。单击 "Finish"（完成）将为 Servlet 生成框架类。

Servlet 的功能是调用 `getIndiansAsJSONObject()` 方法，并使用来自此方法的数据响应客户端请求。为了准备 JSON 格式的响应，必须首先将响应的 MIME 类型设置为 JSON 格式。

*注：*此向导会自动将 Servlet 名称和 URL 模式添加到 `web.xml` 中。因此，对用于 `TribeServlet` 的主机域的任何请求（即 `http://localhost:8080/DojoTreeSample/`）都将由 `dojo.indians.TribeServlet` 类来处理。如果在编辑器中打开 `web.xml`，您可以看到此文件现在包含 `<servlet>` 和 `<servlet-mapping>` 元素。


. 通过执行以下更改（以粗体显示）来修改 `processRequest()` 方法。

[source,java]
----

response.setContentType("*application/json*");
----

此更改将设置 HTTP 响应的 `Content-Type` 头，以指示任何返回的内容均为 JSON 格式。


. 将 `processRequest()` 方法的 `try` 块内的注释代码替换为以下代码（更改以*粗体*显示）：

[source,java]
----

try {

    *JSONObject jo = null;
    try {
        jo = TribeDataManager.getIndiansAsJSONObject();
    } catch (JSONException ex) {
        System.out.println("Unable to get JSONObject: " + ex.getMessage());
    }

    out.println(jo);*

} finally {
    out.close();
}
----

要重新格式化代码，请在编辑器中单击右键并选择 "Format"（格式化代码）。


. 使用 IDE 的提示添加以下 import 语句。

[source,java]
----

import dojo.org.json.JSONException;
import dojo.org.json.JSONObject;
----


. 要运行项目，请在 "Projects"（项目）窗口中选择 `DojoTreeSample` 项目节点，然后单击 IDE 工具栏中的 "Run Project"（运行项目）(image:images/run-project-btn.png[]) 按钮。

浏览器将打开以显示欢迎页 (`dojoDemo.html`)，您可以看到 Dojo 数窗口部件正在正确显示 ArrayList 中的数据，如<<final,上面的屏幕快照>>所示。
link:/about/contact_form.html?to=3&subject=Feedback:%20Connecting%20a%20Dojo%20Tree%20to%20an%20ArrayList[+请将您的反馈意见发送给我们+]


== 另请参见

有关 Dojo 的更多信息，请参见官方文档：

* Dojo Toolkit 参考指南：link:http://dojotoolkit.org/reference-guide/[+Reference Guide+]
* 联机 API 参考：link:http://api.dojotoolkit.org/[+http://api.dojotoolkit.org/+]
* Dojo 演示：link:http://demos.dojotoolkit.org/demos/[+http://demos.dojotoolkit.org/demos/+]

有关 link:https://netbeans.org/[+netbeans.org+] 中 JavaScript 和 JavaScript 工具包的更多信息，请参见以下资源：

* link:js-toolkits-jquery.html[+使用 jQuery 改善 Web 页的外观和可用性+]。提供了 jQuery 简介，还介绍了一些步骤演示如何将 jQuery 的可折叠窗口部件应用于 Web 页中的 HTML 标记。
* link:ajax-quickstart.html[+Ajax 简介 (Java)+]。介绍如何使用 Servlet 技术构建简单的应用程序，同时讲解了 Ajax 请求的基础过程流。
* _使用 NetBeans IDE 开发应用程序_中的link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG2272[+创建 JavaScript 文件+]。