Присоединение дерева Dojo к ArrayList с помощью JSON

Программное обеспечение или материал	Требуемая версия
IDE NetBeans	7.2, 7.3, 7.4, 8.0, Java EE
Комплект для разработчика на языке Java (JDK)	7 или 8
Сервер GlassFish или Контейнер сервлетов Tomcat	Open Source Edition 3.1.x или 4.x _ _ .x или 8.x
Набор средств Dojo	версия 1.8.x или более поздняя
Образец проекта Dojo	неприменимо

Программное обеспечение или материал

Требуемая версия

IDE NetBeans

7.2, 7.3, 7.4, 8.0, Java EE

Комплект для разработчика на языке Java (JDK)

7 или 8

Сервер GlassFish или Контейнер сервлетов Tomcat

Open Source Edition 3.1.x или 4.x _ _

.x или 8.x

Набор средств Dojo

версия 1.8.x или более поздняя

Образец проекта Dojo

неприменимо

Открытие примера проекта

Начните с открытия образца проекта в среде IDE. Откройте проект и разверните узел проекта в окне "Проекты". Изучите ресурсы и библиотеки Dojo, используемые в проекте.

Загрузите прилагающийся к этому руководству образец проекта Dojо в одну из папок на своем компьютере.
Нажмите кнопку 'Открыть проект' ( ) на панели инструментов IDE, чтобы открыть диалоговое окно 'Открыть проект'.
В диалоговом окне 'Открыть проект' найдите образец проекта Dojo на своем компьютере и нажмите 'Открыть проект'.

При открытии проекта DojoTreeSample в IDE вы увидите, что проект отмечен значком ошибки. Это указывает на наличие проблемы со ссылкой.

Figure 3. Ошибки ссылок на проект указываются текстом, выделенным красным и меткой ошибки

Проблема с ссылкой существует, потому что классы Java, используемые в проекте(Tribe и TribeDataManager) ссылаются на классы, находящиеся в файле JAR JSON, которые позже будут добавлены в разделДобавление файлов JAR JSON к проекту.

*Примечание. *Окно 'Проекты' (Ctrl-1; ⌘-1 в Mac) обеспечивает логическое представление содержимого важных проектов и является основной точкой ввода для исходного кода проекта. Окно "Файлы" (Ctrl-2; ⌘-2 в Mac) отображает представление на основе каталогов проектов, включая файлы и папки, не выведенные в окне "Проекты".

Разверните узел Веб-страницы в окне "Проекты".

Вы увидите, что в списке под узлом Веб-страницы в окне "Проекты" появилась папка resources . Папка resources содержит ядро Dojo и библиотеки Dijit из набора инструментов Dojo. В целях реализации виджета дерева Dojo требуется два существенных компонента: модуль ItemFileReadStore из базовой библиотеки и сам виджет`Tree`, содержащийся в библиотеке Dijit.

dojo.data.ItemFileReadStore: считывает содержимое, имеющее структуру JSON, с оконечной точки HTTP (в случае данного руководства это сервлет) и сохраняет все элементы в памяти для простого и быстрого доступа.
dijit.Tree: элемент оформления дерева, выводящий представление данных JSON, полученных от ItemFileReadStore.

Примечание. Библиотека DojoX для данного проекта не требуется.

Разверните узел Библиотеки в окне "Проекты" и убедитесь, что все требуемые библиотеки находятся на пути класса.

Примечание. В зависимости от конфигурации может потребоваться устранить проблему, связанную с отсутствием сервера. Если в списке под узлом Библиотеки присутствует узел <Отсутствующий сервер Java EE> , щелкните правой кнопкой мыши узел проекта и выберите "Устранить проблему отсутствующего сервера".

Figure 4. Библиотеки Dojo и Dijit добавлены в папку 'ресурсов' проекта

В диалоговом окне "Разрешить проблемы со ссылками" выберите GlassFish Server. Нажмите ОК.

Figure 5. Библиотеки Dojo и Dijit добавлены в папку 'ресурсов' проекта

Теперь проект DojoTreeSample открыт в IDE, и все библиотеки Dojo включены в приложение. На следующем шаге вы начнете работать с HTML-файлом, который будет отображать виджет Tree для конечного пользователя.

Создание ссылки на ресурсы набора средств из файла проекта

Чтобы использовать ресурсы из набора инструментов, необходимо создать ссылку на файл dojo.js, который можно найти в библиотеке Core. Файл dojo.js является загрузчиком источников для Dojo и определяет среду размещения, которую следует использовать. В процессе также можно настроить djConfig, добавив параметр parseOnLoad.

В окне 'Проекты' дважды щелкните файл dojoDemo.html, чтобы открыть его в редакторе.
В файле dojoDemo.html добавьте следующие теги <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. Добавьте ссылку на nihilo образец темы, который содержится в наборе инструментальных средств путем добавления следующей инструкции @import (выделена полужирным шрифтом) между тегами <заголовков> тегами и ниже добавленных вами тегов <сценария>.

<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, загруженный на страницу, будет визуализирован с использованием стилей, связанных с заданной темой.

<body *class="nihilo"*>

На данном этапе файл dojoDemo.html готов принять любой код, который ссылается на основную библиотеку Dojo и библиотеку Dijit, и будет визуализировать любые виджеты, используя тему nihilo Dojo.

Добавление и настройка элемента оформления дерева Dojo

После создания ссылки на dojo.js можно начать добавлять код для использования модулей и виджетов Dojo. Сперва добавьте код для загрузки элемента оформления dijit.Tree и dojo.data.ItemFileReadStore, используя операторы dojo.require. Затем добавьте на страницу сам элемент оформления и модуль.

Добавьте следующие операторы dojo.require (выделены полужирным шрифтом) к файлу между тегами <body< .

<script type="text/javascript">

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

</script>

dojo.data.ItemFileReadStore: считывает содержимое, имеющее структуру JSON, с оконечной точки HTTP (в разделе Подготовка сервлета для инициализации ответа JSON мы применим сервлет для этого) и сохраняет все элементы в памяти для простого и быстрого доступа.
dijit.Tree: элемент оформления дерева, выводящий представление данных JSON, полученных от ItemFileReadStore.
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 требует указания свойства`url` путем указания ресурса на стороне сервера, возвращающего данные JSON. Как будет показано ниже, это TribeServlet. Свойство jsId можно использовать для назначения полученным данным JSON идентификатора, который элементы управления смогут затем использовать для ссылок на хранилище данных.
Tree использует свойство store для указания на ItemFileReadStore, предоставляющий данные JSON. Свойство query позволяет упорядочить отображение данных, основываясь на ключевом слове, использованном в файле JSON.

Примечание. Вы можете игнорировать предупреждения, которые появляются в редакторе после добавления этого кода.

На этом этапе файл dojoDemo.html и все необходимые изменения, относящиеся к стороне клиента, внесены в проект. На двух следующих этапах мы внесем изменения в поведение проекта на стороне сервера при выполнении запросов дерева.

Добавление источников преобразования JSON к проекту в форме файла JAR

В этом руководстве логика, извлекающая образец данных ArrayList, уже подготовлена в классах Tribe и TribeDataManager. По сути, необходимо лишь включить классы Java от сторонних производителей, выполняющие преобразование JSON, в проект, а затем добавить операторы import для этих классов к классах Tribe и TribeDataManager. Но для выполнения этого сперва необходимо скомпилировать классы Java от сторонних производителей и создать архив Java (файл JAR). Среда IDE может помочь в этом, предоставляя мастер библиотеки классов Java.

Посетите http://json.org/java и обратите внимание, что классы Java для преобразования JSON доступны свободно. Нажмите ссылку 'Бесплатный исходный код доступен', чтобы скачать файл JSON-java-master.zip, который содержит источники.
Распакуйте файл JSON-java-master.zip и обратите внимание, что извлеченная папка содержит источники, перечисленные в http://json.org/java.

На данный момент необходимо скомпилировать эти источники и создать архив Java (файл JAR), который следует добавить к проекту DojoTreeSample.

Нажмите кнопку 'Создать проект' ( ) на панели инструментов, чтобы открыть мастер создания проектов.
В мастере создания проектов выберите шаблон проекта библиотеки классов Java в категории Java. Нажмите кнопку 'Далее'.
На панели 'Имя и местоположение' мастера библиотек классов Java введите json в качестве имени проекта. Нажмите кнопку "Завершить".

После нажатия кнопки 'Готово' новый проект будет создан и открыт в окне 'Проекты'.

Теперь необходимо скопировать исходный код JSON, загруженный в проект json , аналогично копированию ресурсов набора инструментальных средств Dojo в проект DojoTreeSample .

Распакуйте архив JSON-java-master.zip и скопируйте (Ctrl-C; ⌘-C на Mac) исходные файлы Java, находящиеся в корневой папке.

Примечание. Папку zip и ее содержимое копировать не требуется, так как она уже находится в корневой папке распакованного архива.

В окне "Проекты" в IDE щелкните правой кнопкой мыши узел "Исходные пакеты" и выберите пункт меню "Создать > Пакет Java".
В качестве имени пакета укажите json. Нажмите кнопку "Завершить".
Щелкните правой кнопкой мыши исходный пакет json и выберите пункт меню "Вставить".

Если развернуть пакет, будут видны исходные файлы json .

Figure 6. Источники теперь хранятся в новом проекте 'json'

Щелкните правой кнопкой мыши узел проекта json в окне 'Проекты' и выберите 'Очистить' и 'Построить' для сборки проекта.

При построении проекта все классы Java компилируются в файлы .class. Среда IDE создает папку build, содержащую скомпилированные классы, а также папку dist, содержащую файл JAR для проекта. Эти папки можно просматривать в окне Files ("Файлы") среды IDE.

После сборки проекта json откройте окно 'Файлы' (Ctrl-2; ⌘ -2 в Mac) и разверните папку json. Папка build содержит скомпилированные источники из файла JSON-java-master.zip и папки dist. Папка содержит JAR-файл, на который должен ссылаться проект DojoTreeSample.

Figure 7. Скомпилированные источники можно просмотреть в папке 'сборки' проекта

Теперь, когда у нас есть файл json.jar, можно разрешить проблему со ссылками, которая имелась у проекта DojoTreeSample с момента его открытия.

В окне 'Проекты' щелкните правой кнопкой мыши узел Libraries DojoTreeSample и выберите 'Добавить файл JAR/папку'. Затем в диалоговом окне перейдите к местоположению папки dist проекта json и выберите файл json.jar.

Также можно щелкнуть правой кнопкой мыши узел "Библиотеки", выбрать пункт меню "Добавить проект" и выбрать проект json в диалоговом окне "Добавить проект".

После выхода из диалогового окна файл json.jar появится в узле Libraries проекта.

Figure 8. В проекте содержится ссылка на файл JAR

*Примечание. *Хотя файл json.jar указан в узле проекта Библиотеки, ссылка на него находится в исходном местоположении - она не скопирована и добавлена к проекту (например, она отсутствует в проекте DojoTreeSample в окне 'Файлы'). Поэтому в случае изменения местоположения файла JAR ссылка будет нарушена.

Разверните Source Packages ("Пакеты исходного кода") > пакет dojo.indians и дважды щелкните классы Tribe и TribeDataManager, чтобы открыть их в редакторе.
Добавьте к обоим классам необходимые операторы импорта. Во всех классах щелкните правой кнопкой мыши в редакторе и выберите 'Исправить выражения импорта'.

Классу 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;

Обратите внимание, что интерфейсы API для классов JSON также предоставлены на http://json.org/java – эту страницу может быть желательно оставить открытой, так как ниже мы рассмотрим код в Tribe и TribeDataManager.

Рассмотрение ArrayList в TribeDataManager. ArrayList является коллекцией объектов Tribe. Взглянув на первый элемент ArrayList, можно увидеть, что новый объект Tribe создан и добавлен к списку:

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

Каждый объект Tribe записывает три точки данных: tribe ("племя"), category ("группа") и region ("регион"). Данные для этого упражнения взяты из статьи Википедии по коренным народам США. Как можно увидеть, племена разбиваются на группы, и несколько категорий могут быть охвачены более крупным регионом.

Откройте класс Tribe в редакторе и обратите внимание, что он, по сути, является компонентом JavaBean, за исключением метода toJSONObject():

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; ⌘-7 в Mac), чтобы просмотреть список полей и свойств, содержащихся в классе.

Figure 9. "Навигатор компонентов" обеспечивает просмотр полей и свойств классов.

Наиболее важным методом здесь является`getIndiansAsJSONObject(). Этот метод просматривает ArrayList, обрабатывает данные и возвращает их в форме `JSONObject. Форма String JSONObject и является тем, что нужно модулю ItemFileReadStore Dojo.

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

Откройте документацию Javadoc по методу getIndiansAsJSONObject(). Для этого вернитесь в навигатор (Ctrl-7; ⌘-7 в Mac) и подведите курсор к методу. В ином случае выберите Window ("Окно") > Other ("Прочие") > Javadoc ("Документация Java") из основного меню и щелкните сигнатуру метода в редакторе.
```
image::images/javadoc-window.png[title="Javadoc для TribeDataManager обеспечивает пример данных JSON"]
```
Изучите образец данных JSON, предоставленный документацией Javadoc. Обратите внимание, что формат данных соответствует примерам, предоставленным в документации Dojo.

Отладчик Java IDE NetBeans

На следующем этапе мы реализуем сервлет, вызывающий метод getIndiansAsJSONObject(). После этого можно выполнять следующие действия, чтобы использовать отладчик Java IDE для пошагового использования метода и анализа формата JSONObject.

Установите точку останова на методе (нажмите номер строки (например, строка 99) в левом поле редактора).

Figure 10. Используйте отладчик Java для перехода по коду

Выберите проект DojoTreeSample в окне 'Проекты'.
Запустите отладчик (нажмите кнопку 'Отладка проекта' ( ) на панели инструментов).
Используйте кнопки 'С заходом' ( ) и 'Без захода' ( ) на панели инструментов.
Изучите значения переменных и выражений в окне 'Локальные переменные' ('Окно' > 'Отладка' > 'Переменные').

Дополнительные сведения об отладчике Java приведены в следующих экранных демонстрациях:

На данном этапе мы скомпилировали исходные коды от сторонних производителей, взятые с http://json.org, и добавили их как файл JAR к проекту DojoTreeSample. Затем мы добавили операторы импорта к классам из файла JAR в классах Tribe и TribeDataManager. Наконец, мы изучили некоторые из методов, содержащихся в TribeDataManager, и использовали их для преобразования данных ArrayList в строку JSON.

На следующем этапе мы создадим сервлет, который будет обрабатывать входящие запросы, вызывая метод getIndiansAsJSONObject() класса TribeDataManager, и отправлять получающуюся строку JSON в качестве ответа клиенту.

Подготовка сервлета для инициирования ответа JSON

Вспомним, что мы указали ‘TribeServlet’ в качестве значения свойства url при добавлении ItemFileReadStore к нашей веб-странице. Это сервлет назначения на стороне сервера, где осуществляется обработка данных JSON и возвращение их клиенту. Давайте создадим этот сервлет.

В окне 'Проекты' щелкните правой кнопкой мыши исходный пакет dojo.indians и выберите 'Создать' > 'Сервлет'.
В мастере создания сервлетов введите TribeServlet в качестве имени класса. Убедитесь, что dojo.indians указан как пакет. Нажмите кнопку 'Далее'.

Figure 11. Используйте мастер создания сервлетов для создания сервлетов

Проверьте значения по умолчанию в полях "Имя сервлета" и "Шаблоны URL". Нажмите "Готово", чтобы создать класс skeleton для сервлета.

Функция сервлета состоит в вызове метода getIndiansAsJSONObject() и использовании данных из этого метода для ответа на запрос клиента. Чтобы подготовить ответ в формате JSON, нам сперва надо установить формат JSON как тип MIME ответа.

Примечание. Мастер автоматически добавит имя сервлета и шаблон URL в файл web.xml. Как следствие, все запросы к домену размещения (т. е., http://localhost:8080/DojoTreeSample/) для TribeServlet будут обрабатываться классом dojo.indians.TribeServlet. Если открыть файл web.xml в редакторе, можно увидеть, что в этом файле появились элементы <servlet> и <servlet-mapping>.

Измените метод processRequest(), внеся следующие изменения (выделены полужирным шрифтом).

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

Это изменение устанавливает заголовок Content-Type для отклика HTTP, чтобы указать, что все возвращаемое содержимое имеет формат JSON.

Замените закомментированный код внутри блока try метода processRequest() на следующий код (изменения выделены жирным шрифтом):

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

Чтобы изменить формат кода, щелкните правой кнопкой мыши в редакторе и выберите 'Формат'.

Используйте подсказки IDE, чтобы добавить следующие операторы импорта.

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

Для запуска проекта выберите узел проекта DojoTreeSample в окне 'Проекты', затем нажмите кнопку 'Запустить проект' ( ) на панели инструментов IDE.

Браузер откроется на странице приветствия (dojoDemo.html), и можно будет увидеть, что элемент оформления Dojo Tree правильно отображает данные из ArrayList, как показано на снимке экрана выше. Мы ждем ваших отзывов

Дополнительные сведения

Дополнительные сведения о Dojo приведены в официальной документации:

Справочное руководство по набору средств Dojo: Справочное руководство
Интерактивная справка по интерфейсу API: http://api.dojotoolkit.org/
Демонстрация Dojo: http://demos.dojotoolkit.org/demos/

Дополнительные сведения о JavaScript и функциях набора средств JavaScript на netbeans.org приведены в следующих материалах:

Использование jQuery для улучшения внешнего вида веб-страницы и упрощения работы с ней. Дано введение в jQuery, показаны действия по применению элемента оформления "гармошки" jQuery к разметке HTML на веб-странице.
Введение в Ajax (Java). Описана сборка простого приложения с использованием технологии сервлетов, в то же время показан внутренний процесс обработки запроса Ajax.
Создание файлов JavaScript в документе Разработка приложений в IDE NetBeans

Apache NetBeans 12.2