| // |
| // 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 库已添加到项目的 "resources" 文件夹中"] |
| |
| 在 "Resolve References"(解决引用)对话框中选择 "GlassFish Server"。单击 "OK"(确定)。 |
| |
| image::images/dojo-add-server.png[title="Dojo 和 Dijit 库已添加到项目的 "resources" 文件夹中"] |
| |
| 在此阶段,您已成功在 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="源文件现已包含在新的 "json" 项目中"] |
| |
| |
| . 在 "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="可在项目的 "build" 文件夹中查看已编译源代码"] |
| |
| 现在,您已具有 `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 文件+]。 |