使用 JSON 将 Dojo 树连接至 ArrayList

在当今的应用程序中,Web 2.0 功能变得越来越重要。一个日见重要的功能是使用 JavaScript 工具包(如 Dojo),这使得网页的工作方式更像桌面界面,同时可以克服浏览器不兼容性并利用可维护、可访问且符合标准的代码。

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

此页上的内容适用于 NetBeans IDE 6.7 - 7.1

目录

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

软件或资源 要求的版本
NetBeans IDE,Java EE 包 6.7 或更高版本
Java 开发工具包 (JDK) 6 或 7
GlassFish Server

Tomcat Servlet 容器
Open Source Edition 3.1.x

6.x 或 7.x
Dojo 工具包 版本 1.2.x 或更高版本
Dojo 样例项目 N/A

注:

  • 您需要具有 Internet 连接,才能完成此教程中包括的若干个步骤。
  • IDE 的 Java 下载包安装允许您选择性地下载 GlassFish Server Open Source Edition 并在 IDE 中注册。在此教程中,您需要服务器来模拟客户端-服务器通信。
  • 可将 IDE 的早期版本用于此教程。在版本 6.5 中,IDE 捆绑提供了各种工具包;1.1.0 版的核心 Dojo 库包括在 NetBeans 6.5 中。本教程同时需要 Dojo Core 库和 Dijit 库中的组件。您需要下载工具包的更新版本(1.2.x 或更高版本,其中包含 Core 和 Dijit 库),并使用 IDE 的 JavaScript 库管理器注册它。
  • 完成的项目如下所示:
    在浏览器中查看的已完成练习

将 Dojo 工具包添加到 NetBeans 项目中

首先在 IDE 中打开样例项目。打开项目后,将 Dojo 资源直接复制到 IDE 的 "Projects"(项目)窗口的项目中:

  1. 将教程的 Dojo 样例项目下载到计算机上的某个位置。
  2. 启动 NetBeans 并单击 IDE 工具栏中的 "Open Project"(打开项目)按钮 (Open Project(打开项目)按钮)。
  3. 在所显示的 "Open Project"(打开项目)对话框中,导航至 Dojo 样例项目在计算机上的位置并单击 "Open Project"(打开项目)。

    当您在 IDE 中打开 DojoTreeSample 项目时,项目最初以带有错误标记的红色文本来显示,指示存在引用问题:
    以红色文本显示 DojoTreeSample 项目且具有错误标记的 Projects(项目)窗口
    存在引用问题的原因是项目中使用的 Java 类(TribeTribeDataManager)引用了在 JSON JAR 文件中找到的类,稍后将在将 JSON JAR 文件添加到项目中部分添加这些类。
  4. 在项目中创建一个文件夹,使之包含要添加的 Dojo 资源。为此,请在 "Projects"(项目)窗口中右键单击 Web Pages(Web 页)节点,然后选择 "New"(新建)> "Folder"(文件夹)。在 "New Folder"(新建文件夹)对话框的 "Folder Name"(文件夹名称)字段中键入 'resources'。请注意,默认情况下会在 "Parent Folder"(父文件夹)字段中输入 'web'。单击 "Finish"(完成)以创建新文件夹,并查看它现在是否已列在 "Projects"(项目)窗口中的 Web Pages(Web 页)节点下。

    注:"Projects"(项目)窗口(Ctrl-1 组合键;在 Mac 上为 ⌘-1 组合键)提供了重要项目内容的逻辑视图,也是项目源的主入口点。"Files"(文件)窗口(Ctrl-2 组合键;在 Mac 上为 ⌘-2 组合键)显示基于目录的项目视图,其中包括 "Projects"(项目)窗口中未显示的任何文件和文件夹。在此步骤的 "New Folder"(新建文件夹)对话框中,在从 Web Pages(Web 页)节点创建新项目时,默认情况下会在 "Parent Folder"(父文件夹)字段中输入 'web'。如果打开 "Files"(文件)窗口,现在将会看到在 web 目录下列出了新的 resources 文件夹。
  5. 获取 Dojo 工具包(版本 1.2.x 或更高版本)的副本。可从 http://www.dojotoolkit.org/downloads 中下载 Dojo 工具包。

    请注意,Dojo 工具包的当前版本包括 Dojo CoreDijitDojoX 库。为了实现 Dojo 的树窗口部件,您需要 2 个组件:来自 Core 库的 ItemFileReadStore 模块以及 Dijit 库中包含的 Tree 窗口部件本身。
    • dojo.data.ItemFileReadStore:从 HTTP 端点(在此教程中为 Servlet)读取 JSON 结构化内容并将所有项都存储在内存中,以便简单、快速地进行访问。
    • dijit.Tree:树窗口部件,它提供了从 ItemFileReadStore 中检索的 JSON 数据的视图。
  6. 要将 Dojo 资源添加到项目中,只需从资源在计算机上的位置复制资源(Ctrl-C 组合键;在 Mac 上为 ⌘-C 组合键),然后在 IDE 中右键单击新 resources 节点并选择 "Paste"(粘贴)(或只选择 resources 节点并按(Ctrl-V 组合键;在 Mac 上为 ⌘-V 组合键))。

    回想一下,您只需要 Dojo CoreDijit 库,因此如果您只下载了工具包的最新副本,则请注意,需要将 DojoX 库添加到项目中。

    在添加 Dojo CoreDijit 库之后,"Projects"(项目)窗口应显示如下:
    显示 Dojo 资源的 Projects(项目)窗口

在此阶段,您已成功在 IDE 中打开 DojoTreeSample 项目,并向项目中添加了必要的 Dojo 资源。在下一步中,您将开始在 HTML 文件中工作,该文件将向最终用户显示树窗口部件。


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

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

  1. 在 "Projects"(项目)窗口中,双击 dojoDemo.html 文件在编辑器中将其打开。
  2. dojoDemo.html 文件中,将
    <!-- TODO: link to Dojo resources here -->
    注释替换为以下 <script> 标记:
    <script type="text/javascript"
        src="resources/dojo/dojo.js"
        djConfig="parseOnLoad: true">
    </script>
    • djConfig 允许您覆盖用于控制 Dojo 运行方式的全局设置(例如,使用 parseOnLoad 属性)。
    • parseOnLoad 设置为 true 可确保在加载页面时解析窗口部件和页面标记。
  3. 链接到工具包中包含的样例主题。Dijit 提供三个样例主题:tundrasorianihilo。这三个主题包含在 dijit/themes 文件夹中,从 "Projects"(项目)窗口中可以验证这一点:
    Projects(项目)窗口中显示的 Dijit 主题文件夹
    要链接到 nihilo 主题,请将以下 @import 语句添加到页面中。可在页面的 <head> 标记之间添加该语句,例如,恰好添加到您刚添加的 <script> 标记下面(更改以粗体显示):
    <script type="text/javascript"
        src="resources/dojo/dojo.js"
        djConfig="parseOnLoad: true">
    </script>
    
    <style type="text/css">
        @import "resources/dijit/themes/nihilo/nihilo.css";
    </style>
  4. 向页面的 <body> 标记中添加一个类,以指定要使用的主题的名称。当您执行此操作时,加载到页面中的任何 Dojo 窗口部件都将使用与主题关联的样式来呈现。
    <body class="nihilo">

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


添加和配置 Dojo 树窗口部件

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

  1. // TODO: add dojo.require statements here
    注释(第 8 行)替换为以下 dojo.require 语句:
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.Tree");
  2. 向页面中添加 ItemFileReadStoreTree 窗口部件。将
    <!-- 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 文件添加到项目中

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

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

    现在,我们要编译这些源代码并创建将来能够添加到 DojoTreeSample 项目中的 Java 档案(JAR 文件)。
  3. 在 IDE 主工具栏中,单击 "New Project"(新建项目)按钮 (New Project(新建项目)按钮)。
  4. 在显示的向导中的 "Categories"(类别)下,选择 "Java",并在 "Projects"(项目)下选择 "Java Class Library"(Java 类库),然后单击 "Next"(下一步)。
  5. 在 Java 类库向导的 "Name and Location"(名称和位置)面板中,将新项目命名为 "json",然后单击 "Finish"(完成)。将创建新项目并在 "Projects"(项目)窗口中将其打开。

    按照复制 Dojo 工具包资源并将其粘贴到 IDE "Projects"(项目)窗口的 resources 文件夹中的相同方式,复制刚刚下载的源代码并将其直接粘贴到新的 json 项目中。
  6. 转到解压缩的 json.zip 文件在计算机上的位置并复制(Ctrl-C 组合键;在 Mac 上为 ⌘-C 组合键)json 文件夹。json 文件夹包含源文件。
  7. 在 IDE 的 "Projects"(项目)窗口中,右键单击 json 项目中的 <默认包> 节点并选择 "Paste"(粘贴)。

    当您执行此操作时,"json" 将变为包名称,并列出其中的所有源代码。
    Projects(项目)窗口 - 包含在 json 项目中的源文件
  8. 构建 json 项目。要执行此操作,请在 "Projects"(项目)窗口中右键单击 json 项目节点,并选择 "Clean and Build"(清理并构建)。

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

    在构建 json 项目后,打开 "Files"(文件)窗口(Ctrl-2 组合键;在 Mac 上为 ⌘-2 组合键)并展开 json 文件夹。build 文件夹包含 json.zip 文件中的已编译源代码,dist 文件夹包含 DojoTreeSample 项目需要引用的 JAR 文件。
    Files(文件)窗口 - build 文件夹中显示的已编译源代码
    现在,您已具有 json.jar 文件,因此可以解决 DojoTreeSample 项目自打开以来显现的引用问题。
  9. 在 "Projects"(项目)窗口中,右键单击 DojoTreeSample 的 "Libraries"(库)节点并选择 "Add JAR/Folder"(添加 JAR/文件夹)。然后,在对话框中,导航至 json 项目的 dist 文件夹的位置并选择 json.jar 文件。

    退出该对话框时,将在 Libraries 节点下列出 json.jar 文件。
    Projects(项目)窗口 - 添加到 Libraries(库)节点的 JAR 文件
    注:尽管 json.jar 文件列在项目的 Libraries 节点下,但该文件却是从原始位置引用的,而不是复制并添加到项目中的(例如,您将无法在 "Files"(文件)窗口中的 DojoTreeSample 项目下找到它)。因此,如果更改 JAR 文件的位置,引用将中断。
  10. 展开 Source Packages(源包)> dojo.indians 包并双击 TribeTribeDataManager 类,以便在编辑器中将其打开。
  11. 向两个类中添加必要的 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 - 以后检查 TribeTribeDataManager 中的代码时,可能要使此页保持打开状态。

  12. 检查 TribeDataManager 中的 ArrayList。ArrayList 是 Tribe 对象的集合。查看 ArrayList 的第一个元素,您可以看到创建了一个新 Tribe 对象并将其添加到了列表中:
    indians.add(new Tribe("Eskimo-Aleut", "Arctic", "Alaska Natives"));
    每个 Tribe 对象捕获三个信息点:tribecategoryregion。此练习中的数据摘自维基百科中有关 Native Americans in the United States 的条目。您可以确定,在一个 category 中可以对多个 tribe 分类,一个大的 region 中可以包含许多 category。
  13. 在编辑器中打开 Tribe 类,并请注意,它基本上是 JavaBeantoJSONObject() 方法除外:
    public JSONObject toJSONObject() throws JSONException {
        JSONObject jo = new JSONObject();
        jo.put("name", this.name);
        jo.put("type", "tribe");
    
        return jo;
    }
  14. 切换回 TribeDataManager(Ctrl-Tab 组合键)并检查该类中包括的方法。打开导航器(Ctrl-7 组合键;在 Mac 上为 ⌘-7 组合键),以查看该类中包含的字段和属性的列表。
    在导航器中查看的 TribeDataManager 类
    其中包含的最重要方法是 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;
    }
  15. getIndiansAsJSONObject() 方法中打开 Javadoc。通过返回到导航器(Ctrl-7 组合键;在 Mac 上为 ⌘-7 组合键)并将光标悬停于方法上方可以执行此操作。否则,请从主菜单中选择 "Window"(窗口)> "Other"(其他)> "Javadoc",然后在编辑器中单击方法签名。
    打开到 TribeDataManager 类的 Javadoc 窗口
  16. 检查在 Javadoc 中提供的 JSON 数据的示例。请注意,数据格式符合 Dojo 文档中提供的示例。


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

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


准备 Servlet 以启动 JSON 响应

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

  1. 在 "Projects"(项目)窗口中,右键单击 dojo.indians 源包并选择 "New"(新建)> "Servlet"。
  2. 在 "New Servlet"(新建 Servlet)对话框中,键入 TribeServlet 作为类名。而且,还要在 dojo.indians 包中创建 Servlet。
    新建 Servlet 向导

    单击 "Next"(下一步)。
  3. 请注意,在向导的 "Configure Servlet Deployment"(配置 Servlet 部署)步骤中,默认情况下会选择 "Add information to deployment descriptor"(将信息添加到部署描述符)选项,这意味着会自动将默认的 Servlet 名称和 URL 模式添加到 web.xml 中。因此,对用于 TribeServlet 的主机域的任何请求(即 http://localhost:8080/DojoTreeSample/)都将由 dojo.indians.TribeServlet 类来处理。
  4. 单击 "Finish"(完成)。将生成用于新 Servlet 的框架类并在编辑器中打开该类。

    Servlet 的功能是调用 getIndiansAsJSONObject() 方法,并使用来自此方法的数据响应客户端请求。为了准备 JSON 格式的响应,必须首先将响应的 MIME 类型设置为 JSON 格式。
  5. 查找 processRequest() 方法,并将
    response.setContentType("text/html;charset=UTF-8");
    更改为:
    response.setContentType("application/json");
    此代码将设置 HTTP 响应的 Content-Type 头,以指示任何返回的内容均为 JSON 格式。
  6. 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"(格式化代码)。

  7. 使用 IDE 的提示添加必要的 import 语句。它们是:
    import dojo.org.json.JSONException;
    import dojo.org.json.JSONObject;
  8. 要运行项目,请在 "Projects"(项目)窗口中选择 DojoTreeSample 项目节点,然后单击 IDE 工具栏中的 "Run Project"(运行项目)(Run Main Project(运行主项目)按钮) 按钮。

    浏览器将打开以显示欢迎页 (dojoDemo.html),您可以看到 Dojo 数窗口部件正在正确显示 ArrayList 中的数据,如上面的屏幕快照所示。

另请参见

有关 Dojo 的更多信息,请参见官方文档:

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

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2018, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo