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

Функциональные возможности Web 2.0 становятся все более важными для современных приложений. Одной из перспективных функций является использование наборов средств JavaScript, таких как Dojo, позволяющих веб-страницам вести себя подобно интерфейсам рабочей среды, в то же время избавляясь от проблем совместимости с браузерами и используя удобный в сопровождении, доступный и соответствующий стандартам код.

Данное руководство является адаптацией курса JavaOne Hands-On Lab: Leveraging JavaScript Toolkits for End-to-End Connectivity in Web Applications ("Лабораторные работы по JavaOne: использование набора средств JavaScript для обеспечения сквозного соединения в веб-приложениях"; в нем показаны добавление и настройка элемента оформления дерева Dojo на веб-странице с последующим приданием стороне сервера возможности отвечать на запросы в формате JSON. В процессе мы используем набор свободно распространяемых классов Java, доступных на http://json.org, чтобы преобразовать данные из ArrayList в формат JSON.

Содержимое на этой странице применимо к IDE NetBeans 6.7 - 7.1

Содержание

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

Программное обеспечение или материал Требуемая версия
IDE NetBeans, комплект Java EE Версия 6.7 или более поздние
Комплект для разработчика на языке Java (JDK) Версия 6 или 7
Сервер GlassFish
или
Контейнер сервлетов Tomcat
Open Source Edition 3.1.x
 
Версия 6.x или 7.x
Набор средств Dojo Версия 1.2.x или более поздние
Образец проекта Dojo неприменимо

Примечания:

  • Выполнение некоторых из действий, предусмотренных данным руководством, требует подключения к Интернету.
  • Набор загрузки Java для среды IDE позволяет при желании установить и зарегистрировать в среде IDE сервер приложений GlassFish Server Open Source Edition. Сервер необходим при работе с данным руководством для имитации связи клиент-сервер.
  • В целях данного руководства можно использовать более раннюю версию среды IDE. В версии 6.5 различные инструментарии входили в комплект с IDE; основная библиотека Dojo версии 1.1.0 включена в NetBeans 6.5. Для этого учебного курса требуются компоненты из библиотеки Dojo Core, а также из библиотеки Dijit. Необходимо будет загрузить обновленную версию набора средств (1.2.x или более позднюю), в которой имеются и Core, и Dijit, после чего зарегистрировать ее с помощью диспетчера библиотек JavaScript среды IDЕ.
  • Завершенный проект выглядит следующим образом:
    Выполненное упражнение можно просмотреть в браузере

Добавление набора средств Dojo к проекту NetBeans

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

  1. Загрузите прилагающийся к этому руководству образец проекта Dojо в одну из папок на своем компьютере.
  2. Запустите NetBeans и нажмите кнопку 'Открыть проект' ( Кнопка 'Открыть проект' ) на панели инструментов IDE.
  3. В отобразившемся диалоговом окне открытия проекта перейдите к образцу проекта Dojo у себя на компьютере и щелкните Open Project ("Открыть проект").

    При открытии проекта DojoTreeSample в среде IDE первоначально он отображается красным текстом и с меткой ошибки, указывая на проблему со ссылками.
    В окне "Проекты" отображается проект DojoTreeSample, текст которого выделен красным, с меткой ошибки
    Проблема со ссылками существует из-за того, что классы Java, использованные в проекте (Tribe и TribeDataManager), ссылаются на классы, которые можно найти в файле JAR JSON и которые мы добавим позже, в разделе Добавление файлов JAR JSON к проекту.
  4. Создайте внутри проекта папку для ресурсов Dojo, которые мы сейчас добавим. Для этого щелкните правой кнопкой мыши узел Веб-страницы в окне 'Проекты' и выберите 'Создать' > 'Папка'. В открывшемся диалоговом окне создания папки введите 'resources' в поле Folder Name ("Имя папки"). Обратите внимание, что в поле Parent Folder ("Родительская папка") по умолчанию вводится 'web'. Нажмите кнопку Finish ("Готово") для создания новой папки, которую можно будет увидеть под узлом Web Pages в окне проектов.

    Примечание. Окно 'Проекты' (Ctrl-1; ⌘-1 в Mac) обеспечивает логическое представление содержимого важных проектов и является основной точкой ввода для исходного кода проекта. Окно "Файлы" (Ctrl-2; ⌘-2 в Mac) отображает представление на основе каталогов проектов, включая файлы и папки, не выведенные в окне "Проекты". В диалоговом окне New Folder ("Создание папки") на этом этапе 'web' по умолчанию вводится в поле Parent Folder ("Родительская папка") при создании нового элемента из узла Web Pages. Если открыть окно Files, то можно будет увидеть новую папку resources в каталоге web.
  5. Получите копию набора средств Dojo (версию 1.2.x или более поздние). Набор средств Dojo можно загрузить с http://www.dojotoolkit.org/downloads.

    Обратите внимание, что в состав текущей версии набора средств Dojo входят библиотеки Dojo Core, Dijit и DojoX. Для применения элемента оформления дерева Dojo нужны, по сути дела, 2 компонента: модуль ItemFileReadStore из библиотеки Core и сам элемент оформления дерева Tree, содержащийся в библиотеке Dijit.
    • dojo.data.ItemFileReadStore: считывает содержимое, имеющее структуру JSON, с оконечной точки HTTP (в случае данного руководства это сервлет) и сохраняет все элементы в памяти для простого и быстрого доступа.
    • dijit.Tree: элемент оформления дерева, выводящий представление данных JSON, полученных от ItemFileReadStore.
  6. Для добавления ресурсов Dojo к проекту просто скопируйте их (Ctrl-C; ⌘-C в Mac) из их местоположения на компьютере, а затем в среде IDE, щелкните правой кнопкой мыши новый узел resources и выберите 'Вставить' (или просто выберите узел resources и нажмите (Ctrl-V; ⌘-V в Mac).

    Помните, что нам необходимы только библиотеки Dojo Core и Dijit, поэтому в случае загрузки свежей копии пакета средств библиотеку DojoXне нужно добавлять к проекту.

    После добавления библиотек Dojo Core и Dijit окно Projects ("Проекты") должно выглядеть следующим образом:
    В окне "Проекты" отображаются ресурсы Dojo

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


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

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

  1. В окне 'Проекты' дважды щелкните файл 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 предоставляется три образца тем: tundra, soria и nihilo. Они содержатся в папке dijit/themes, которую можно проверить из окна проектов:
    Папки тем 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, и визуализирует все элементы оформления, используя тему nihilo Dojo.


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

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

  1. Замените
    // TODO: add dojo.require statements here
    comment (строка 8) на следующие операторы dojo.require:
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dijit.Tree");
  2. Добавьте 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.

  1. Посетите http://json.org/java и обратите внимание, что классы Java для преобразования JSON доступны свободно. Щелкните ссылку 'Free source code is available' для загрузки файла json.zip, содержащего источники.
  2. Разархивируйте файл json.zip и обратите внимание, что извлеченная папка содержит источники, перечисленные на http://json.org/java.

    Сейчас нам нужно скомпилировать эти источники и создать архив Java (файл JAR), который мы сможем добавить к проекту DojoTreeSample.
  3. На главной панели инструментов IDE нажмите кнопку 'Создать проект' ( Кнопка 'Создать проект' ).
  4. В отобразившемся мастере выберите Java в Categories ("Категории") и Java Class Library ("Библиотека классов Java") в Projects ("Проекты"), после чего нажмите кнопку Next ("Далее").
  5. На панели Name and Location ("Имя и местоположение") мастера создания библиотеки классов Java назовите новый проект 'json', после чего нажмите кнопку Finish ("Готово"). Новый проект будет создан и откроется в окне Projects ("Проекты").

    Тем же способом, которым ресурсы набора средств Dojo копировались в папку resources окна проектов среды IDE, мы скопируем только что загруженные источники прямо в новый проект json.
  6. Перейдите к папке на компьютере, где хранится извлеченный файл json.zip и скопируйте (Ctrl-C; ⌘-C в Mac) папку json. Папка json содержит файлы исходного кода.
  7. В окне 'Проекты' в среде IDE щелкните правой кнопкой мыши узел <default package> в проекте json и выберите 'Вставить'.

    В результате этого 'json' становится именем пакета, и все исходные коды будут там перечислены.
    Окно 'Проекты' - источники хранятся в новом проекте 'json'
  8. Выполните сборку проекта json. Для этого щелкните правой кнопкой мыши узел json в окне 'Проекты' и выберите 'Очистка и сборка'.

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

    После сборки проекта json откройте окно 'Файлы' (Ctrl-2; ⌘-2 в Mac) и разверните папку json. Папка build содержит скомпилированные исходные коды из файла json.zip, а папка dist содержит файл JAR, на который нужно сослаться проекту DojoTreeSample.
    Окно 'Файлы' - скомпилированные источники, отображенные в папке 'сборки' проекта
    Теперь, когда у нас есть файл json.jar, можно разрешить проблему со ссылками, которая имелась у проекта DojoTreeSample с момента его открытия.
  9. В окне 'Проекты' щелкните правой кнопкой мыши узел Libraries DojoTreeSample и выберите 'Добавить файл JAR/папку'. Затем в диалоговом окне перейдите к местоположению папки dist проекта json и выберите файл json.jar.

    После выхода из диалогового окна файл json.jar появится в узле Libraries проекта.
    Окно 'Проекты' - файл JAR добавлен к узлу 'Библиотеки'
    Примечание. Хотя файл json.jar указан в узле проекта Библиотеки, ссылка на него находится в исходном местоположении - она не скопирована и добавлена к проекту (например, она отсутствует в проекте DojoTreeSample в окне 'Файлы'). Поэтому в случае изменения местоположения файла JAR ссылка будет нарушена.
  10. Разверните Source Packages ("Пакеты исходного кода") > пакет dojo.indians и дважды щелкните классы Tribe и TribeDataManager, чтобы открыть их в редакторе.
  11. Добавьте к обоим классам необходимые операторы импорта. Во всех классах щелкните правой кнопкой мыши в редакторе и выберите 'Исправить выражения импорта'.

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

  12. Рассмотрение ArrayList в TribeDataManager. ArrayList является коллекцией объектов Tribe. Взглянув на первый элемент ArrayList, можно увидеть, что новый объект Tribe создан и добавлен к списку:
    indians.add(new Tribe("Eskimo-Aleut", "Arctic", "Alaska Natives"));
    Каждый объект Tribe записывает три точки данных: tribe ("племя"), category ("группа") и region ("регион"). Данные для этого упражнения взяты из статьи Википедии по коренным народам США. Как можно увидеть, племена разбиваются на группы, и несколько категорий могут быть охвачены более крупным регионом.
  13. Откройте класс Tribe в редакторе и обратите внимание, что он, по сути, является компонентом JavaBean, за исключением метода toJSONObject():
    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; ⌘-7 в Mac), чтобы просмотреть список полей и свойств, содержащихся в классе.
    Класс TribeDataManager просматривается в навигаторе
    Наиболее важным методом здесь является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;
    }
  15. Откройте документацию Javadoc по методу getIndiansAsJSONObject(). Для этого вернитесь в навигатор (Ctrl-7; ⌘-7 в Mac) и подведите курсор к методу. В ином случае выберите Window ("Окно") > Other ("Прочие") > Javadoc ("Документация Java") из основного меню и щелкните сигнатуру метода в редакторе.
    Окно Javadoc, открытое в классе TribeDataManager
  16. Изучите образец данных JSON, предоставленный документацией Javadoc. Обратите внимание, что формат данных соответствует примерам, предоставленным в документации Dojo.


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

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


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

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

  1. В окне 'Проекты' щелкните правой кнопкой мыши исходный пакет dojo.indians и выберите 'Создать' > 'Сервлет'.
  2. В диалоговом окне создания сервлета введите TribeServlet как имя класса. Кроме того, сервлет следует создать в пакете dojo.indians.
    Мастер создания сервлетов

    Нажмите кнопку "Далее".
  3. Обратите внимание, что на этапе Configure Servlet Deployment ("Настройка развертывания сервлета") работы мастера параметр "Add information to deployment descriptor" ("Добавить информацию к дескриптору развертывания") выбран по умолчанию, а это значит, что имя сервлета и шаблон URL по умолчанию будут автоматически добавлены к web.xml. Как следствие, все запросы к домену размещения (т. е., http://localhost:8080/DojoTreeSample/) для TribeServlet будут обрабатываться классом dojo.indians.TribeServlet.
  4. Нажмите кнопку "Завершить". Заготовка класса для нового сервлета будет создана и открыта в редакторе.

    Функция сервлета состоит в вызове метода getIndiansAsJSONObject() и использовании данных из этого метода для ответа на запрос клиента. Чтобы подготовить ответ в формате JSON, нам сперва надо установить формат JSON как тип MIME ответа.
  5. Найдите метод processRequest() и измените
    response.setContentType("text/html;charset=UTF-8");
    на:
    response.setContentType("application/json");
    В результате в заголовке Content-Type ответа HTTP будет установлено указание на то, что всё возвращаемое содержимое имеет формат JSON.
  6. Замените закомментированный код внутри блока 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();
    }

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

  7. Используйте подсказки IDE для добавления необходимы операторов импорта. Это:
    import dojo.org.json.JSONException;
    import dojo.org.json.JSONObject;
  8. Для запуска проекта выберите узел проекта DojoTreeSample в окне 'Проекты', затем нажмите кнопку 'Запустить проект' ( кнопка 'Выполнить основной проект' ) на панели инструментов IDE.

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

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

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

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

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