Присоединение дерева 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 7.2, 7.3 и 7.4

Содержание

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

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

Примечания:

  • Выполнение некоторых из действий, предусмотренных данным руководством, требует подключения к Интернету.
  • Набор загрузки Java EE для среды IDE NetBeans позволяет при желании установить и зарегистрировать в среде IDE сервер приложений GlassFish Server Open Source Edition. Сервер необходим при работе с данным руководством для имитации связи клиент-сервер.
  • Завершенный проект выглядит следующим образом:
    Выполненное упражнение можно просмотреть в браузере

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

Начните с открытия образца проекта в среде IDE. Когда проект открыт, выполните следующие действия, чтобы скопировать ресурсы Dojo напрямую в проект в окне 'Проекты' IDE.

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

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

    В окне "Проекты" отображается проект DojoTreeSample, текст которого выделен красным, с меткой ошибки

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

  4. Щелкните правой кнопкой мыши узел Веб-страница в окне 'Проекты' и выберите 'Создать' > 'Папка', чтобы создать папку, в которой будут содержаться ресурсы Dojo, которые вы собираетесь добавить.
  5. Введите resources в поле 'Имя папки' в мастере создания папок.

    Обратите внимание, что в поле Parent Folder ("Родительская папка") по умолчанию вводится 'web'.

  6. Нажмите кнопку 'Готово', чтобы создать новую папку.

    Вы увидите, что новая папка появится в списке под узлом Веб-страницы в окне 'Проекты'.

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

  7. Загрузите копию набора инструментов Dojo (1.8.x или более поздней версии) на компьютер с сайта http://www.dojotoolkit.org/download.

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

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

    Их можно скопировать в проект, найдя папки в локальной системе и скопировав их (Ctrl-C; ⌘-C в Mac) из их местоположения на компьютере, а затем щелкнув правой кнопкой мыши на новом узле resources в окне 'Проекты' в IDE и выбрав 'Вставить' в контекстном меню (или просто выбрав узел resources и нажав (Ctrl-V; ⌘-V в Mac).

    Примечание. Вам не нужно добавлять библиотеку DojoX к своему проекту.

    После добавления библиотек Dojo и Dijit окно 'Проекты' должно выглядеть следующим образом.

    В окне "Проекты" отображаются ресурсы Dojo

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

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

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

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

  4. Добавьте следующее средство выбора класса к тегу <body> страницы, чтобы указать имя темы, которая теперь используется. Когда мы это делаем, любой элемент оформления Dojo, загруженный на страницу, будет визуализирован с использованием стилей, связанных с заданной темой.
    <body class="nihilo">

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

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

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

  1. Добавьте следующие операторы dojo.require (выделены полужирным шрифтом) к файлу между тегами <body<.
    <script type="text/javascript">
    
        // TODO: add dojo.require statements here
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("dijit.Tree");
    
    </script>
  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 доступны свободно. Нажмите ссылку 'Бесплатный исходный код доступен', чтобы скачать файл JSON-java-master.zip, который содержит источники.
  2. Распакуйте файл JSON-java-master.zip и обратите внимание, что извлеченная папка содержит источники, перечисленные в http://json.org/java.

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

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

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

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

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

    После этого 'json'становится именем пакета, и можно развернуть пакет для просмотра источников json.

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

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

    После сборки проекта json откройте окно 'Файлы' (Ctrl-2; ⌘ -2 в Mac) и разверните папку json. Папка build содержит скомпилированные источники из файла JSON-java-master.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("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. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo