使用 JSON 将 Dojo 树连接至 ArrayList

This tutorial needs a review. You can open a JIRA issue, or edit it in GitHub following these contribution guidelines.

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

本教程改编自 Java One 动手实验室：对 Web 应用程序中的端到端连接利用 JavaScript 工具包，说明了如何在网页中添加和配置 Dojo 树窗口部件，并使服务器端可以响应 JSON 格式的树请求。在执行此操作时，将会利用 http://json.org 中免费提供的 Java 类将 ArrayList 中的数据处理为 JSON 格式。

netbeans stamp 80 74 73
Figure 1. 此页上的内容适用于 NetBeans IDE 7.2、7.3、7.4 和 8.0

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

软件或资源 要求的版本

NetBeans IDE

7.2、7.3、7.4、8.0、Java EE

Java 开发工具包 (JDK)

7 或 8

GlassFish Server 或 Tomcat Servlet 容器

Open Source Edition 3.1.x 或 4.x _ _

.x 或 8.x

Dojo 工具包

版本 1.8.x 或更高版本

Dojo 样例项目

N/A

注：

  • 您需要具有 Internet 连接，才能完成此教程中包括的若干个步骤。

  • NetBeans IDE Java EE 下载包安装允许您选择性地安装 GlassFish Server Open Source Edition 并在 IDE 中注册。在此教程中，您需要服务器来模拟客户端-服务器通信。

  • 完成的项目如下所示：

dojo tree complete
Figure 2. 在浏览器中查看的已完成练习

打开样例项目

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

  1. 将教程的 Dojo 样例项目下载到计算机上的某个位置。

  2. 单击 IDE 工具栏中的 "Open Project"（打开项目）按钮 (open project btn) 按钮以打开 "Open Project"（打开项目）对话框。

  3. 在 "Open Project"（打开项目）对话框中，定位至计算机上的 Dojo 样例项目并单击 "Open Project"（打开项目）。

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

proj win ref problems
Figure 3. 项目引用问题由红色文本和错误标记指示

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

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

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

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

  • dojo.data.ItemFileReadStore：从 HTTP 端点（在此教程中为 Servlet）读取 JSON 结构化内容并将所有项都存储在内存中，以便简单、快速地进行访问。

  • dijit.Tree：树窗口部件，它提供了从 ItemFileReadStore 中检索的 JSON 数据的视图。

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

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

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

proj win dojo resources
Figure 4. Dojo 和 Dijit 库已添加到项目的 "resources" 文件夹中

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

dojo add server
Figure 5. Dojo 和 Dijit 库已添加到项目的 "resources" 文件夹中

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

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

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

  1. 在“项目”窗口中，双击 dojoDemo.html 文件在编辑器中将其打开。

  2. 在 dojoDemo.html 文件中的 <head> 标记之间添加以下 <script> 标记（以粗体显示）。

<!-- 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>

  • djConfig 允许您覆盖用于控制 Dojo 运行方式的全局设置（例如，使用 parseOnLoad 属性）。

  • parseOnLoad 设置为 true 可确保在加载页面时解析窗口部件和页面标记。

    1. 通过在 <head> 标记之间和添加的 <script> 标记下方添加以下 @import 语句（以粗体显示），可以为工具包中包含的 nihilo 样例主题添加一个链接。

<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 文件夹可以查看默认提供的其他样例主题。

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

<body *class="nihilo"*>

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

添加和配置 Dojo 树窗口部件

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

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

<script type="text/javascript">

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

</script>

  • dojo.data.ItemFileReadStore：从 HTTP 端点读取 JSON 结构化内容（在准备 Servlet 以启动 JSON 响应中，将为此用途实现 servlet。）并将所有项都存储在内存中，以便简单、快速地进行访问。

  • dijit.Tree：树窗口部件，它提供了从 ItemFileReadStore 中检索的 JSON 数据的视图。

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

<!-- 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. 访问 http://json.org/java，并请注意，用于 JSON 转换的 Java 类可以免费使用。单击 "Free source code is available"（提供免费源代码）链接，以下载包含源代码的 JSON-java-master.zip 文件。

  2. 解压缩 JSON-java-master.zip 文件，并请注意，解压缩的文件夹包含在 http://json.org/java 中列出的源代码。

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

  1. 单击工具栏中的 "New Project"（新建项目）按钮 (new project btn) 以便打开 "New Project"（新建项目）向导。

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

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

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

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

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

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

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

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

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

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

proj win json sources
Figure 6. 源文件现已包含在新的 "json" 项目中

  1. 在 "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 文件。

files win compiled classes
Figure 7. 可在项目的 "build" 文件夹中查看已编译源代码

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

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

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

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

libraries json jar
Figure 8. JAR 文件由项目引用

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

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

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

Tribe 类需要以下导入：

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

TribeDataManager 类需要以下导入：

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

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

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

indians.add(new Tribe("Eskimo-Aleut", "Arctic", "Alaska Natives"));

每个 Tribe 对象捕获三个信息点：tribe、category 和 region。此练习中的数据摘自维基百科中有关 Native Americans in the United States 的条目。您可以确定，在一个 category 中可以对多个 tribe __分类，一个大的 region 中可以包含许多 category。

  1. 在编辑器中打开 Tribe 类，并请注意，它基本上是 JavaBean，toJSONObject() 方法除外：

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

    return jo;
}

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

dojo navigator
Figure 9. 使用导航器查看类字段和属性

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

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;
}

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

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

  2. 检查在 Javadoc 中提供的 JSON 数据的示例。请注意，数据格式符合 Dojo 文档中提供的示例。

NetBeans IDE 的 Java 调试器

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

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

debugger breakpoint
Figure 10. 使用 Java 调试器逐步执行代码

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

  2. 运行调试器（在工具栏中单击 "Debug Project"（调试项目）按钮 (debug btn)）。

  3. 使用工具栏中的 "Step Into"（步入）(step into btn) 和 "Step Over"（步过）(step over btn) 按钮。

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

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

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

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

准备 Servlet 以启动 JSON 响应

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

  1. 在 "Projects"（项目）窗口中，右键单击 dojo.indians 源包并选择 "New"（新建）> "Servlet"。

  2. 在 "New Servlet"（新建 Servlet）向导中，键入 TribeServlet 作为类名。确认已将 dojo.indians 指定为包。单击 "Next"（下一步）。

new servlet wizard
Figure 11. 使用新建 Servlet 向导创建 Servlet

  1. 确认默认的 "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> 元素。

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

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

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

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

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"（格式化代码）。

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

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

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

浏览器将打开以显示欢迎页 (dojoDemo.html)，您可以看到 Dojo 数窗口部件正在正确显示 ArrayList 中的数据，如上面的屏幕快照所示。 请将您的反馈意见发送给我们

另请参见

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

有关 netbeans.org 中 JavaScript 和 JavaScript 工具包的更多信息，请参见以下资源：