Среда Ajax Toolkit Framework (ATF) является ядром новой инициативы Open Ajax, нацеленной на повышение доступности мощной технологии Web-программирования через Eclipse Foundation. ATF расширяет Eclipse Web Tools Platform (WTP), добавляя среду разработки Ajax (Asynchronous JavaScript and XML) для различных инструментальных пакетов Ajax с открытым исходным кодом, включая Dojo, Zimbra и Rico. В данной статье приведен пример HelloWorld, в котором устанавливается и настраивается ATF, а затем используются Eclipse и Dojo для создания базового Web-приложения.

Тим Макинтайр, инженер-программист и архитектор по кластерам HPC, консультант

Тим Макинтайр (Tim McIntire) работает консультантом по компьютерным дисциплинам. Его исследование по геофизике и дистанционному зондированию было опубликовано в "Concurrency and Computation" и "IEEE Transactions". Он также является соучредителем Cluster Corp., мирового лидера в групповой интеграции Rocks и консалтинге по высокопроизводительным компьютерам. Ранее он возглавлял компьютерные исследования в Лаборатории Анализа Цифрового Изображения Океанографического института (Scripps Institution of Oceanography's Digital Image Analysis Lab), и его работа над спонсируемым НАСА проектом окружения параллельной обработки изображений (PIPE) была отражена в статье по групповому программному обеспечению Rocks в журнале по компьютерным наукам EnVision.



17.05.2007

Это продолжение моего введения в инициативу Open Ajax (май 2006 года) под названием "Два инструмента обеспечивают поддержку Ajax в Eclipse Ajax Toolkit Framework" и готовившуюся ATF (см. раздел "Ресурсы"). По прошествии времени проект развился от анонса версии alphaWorks до действующего Eclipse-проекта версии V0.1.

ATF построен на основе Eclipse WTP, который широко используется сообществом Web-разработчиков. WTP расширяет Eclipse, добавляя инструментальные средства для разработки J2EE (Java™ 2 Platform, Enterprise Edition) Web-приложений.

ATF расширяет WTP, добавляя среду разработки Ajax для разных инструментальных пакетов Ajax с открытым исходным кодом, включая Dojo, Zimbra и Rico. Она развивает функциональные возможности по редактированию JavaScript, предоставляет функцию проверки синтаксиса в редакторе (Document Object Model (DOM) и Cascading Style Sheets (CSS) Inspectors) и интегрированный браузер Mozilla. ATF позволяет разработчикам использовать Eclipse как интегрированную среду разработки (IDE) корпоративного класса для инструментальных пакетов с открытым исходным кодом. Целью инициативы Open Ajax, стоящей за ATF, является повышение доступности технологии Ajax, популярность которой быстро растет, но которая остается непонятной концепцией для новичков.

В данной статье объединены указания по установке ATF и создание примера Ajax-приложения с использованием Eclipse, ATF и Dojo. В статье "Два инструмента обеспечивают поддержку Ajax в Eclipse Ajax Toolkit Framework" приведено введение в Dojo и Zimbra, а также пример "Hello World!", разработанный до интеграции Dojo в Eclipse с ATF. В данной статье используется версия V0.1, позволяющая легкого создать аналогичный, но более мощный проект.

Установка ATF

Начнем с краткого рассмотрения процесса установки в Microsoft® Windows® (ссылки на подробную информацию и файлы для загрузки приведены в разделе "Ресурсы"). Если вы еще не используете Eclipse, загрузите пакет проекта J2EE, который содержит Core Eclipse V3.2.1 и Eclipse WTP (WTP необходим для использования ATF). Если у вас не установлен и не используется Eclipse, это самый простой способ получить все необходимое для ATF.

Для начала работы с ATF:

  1. Загрузите последнюю версию ATF с Eclipse.org. В данной статье используется версия V0.1 (0.1-20060912). Отложите процесс установки до тех пор, пока не загрузите и не установите все необходимые компоненты, указанные ниже.
  2. Загрузите Java Runtime Environment (JRE) V1.4.2, которая необходима для текущей версии V0.1. Можно работать либо c Sun Microsystems, либо IBM® версией.
  3. Загрузите Apache Tomcat V5 для использования в качестве локального Web-сервера и XULRunner, который помогает встроить в Eclipse-интерфейс Mozilla (см. раздел "Ресурсы").
  4. Установите XULRunner, JRE, затем Tomcat V5.

    Примечание: Для Tomcat V5 предпочтительнее JRE V5, поэтому вы можете загрузить ее тоже, чтобы обойти специальные инструкции по установке Tomcat.

  5. Установите Eclipse, если его еще нет на вашей системе.

После установки Eclipse все готово к установке ATF. Ссылка на подробную информацию по установке приведена в разделе "Ресурсы".

Для установки ATF в Eclipse откройте Eclipse и нажмите Help > Software Updates > Find and Install > Search for New Features to Install > New Archived Site. Затем выберите zip-файл, содержащий ATF. Отобразится пара экранов установки, на которых вы должны выбрать все ATF-компоненты. Внимательно прочтите информацию ATF Download. Некоторые версии ATF (включая V0.1) содержат в конце специальные примечания по установке, описывающие процесс установки дополнительных файлов.


Создание Dojo-приложения в ATF

Теперь все готово для создания первого Dojo-приложения. Начните с создания нового проекта. В резделе "Ресурсы" приведена ссылка на флэш-ролик, демонстрирующий начальные действия этого процесса, хотя при создании интерактивного приложения HelloWorld вы пойдете намного дальше. При открытом новом проекте выполните следующие действия:

  1. Откройте Eclipse и выберите File > New > Project.
  2. Выберите Web > Static Web Project, затем нажмите кнопку Next.
    Рисунок 1. Выбор типа проекта
    Рисунок 1. Выбор типа проекта
  3. Введите HelloWorld в поле Project name, затем нажмите кнопку New под Target Runtime. Это имя будет именем всего проекта, в который вы можете включить подкаталоги и Web-приложение с именами по вашему выбору.
    Рисунок 2. Указание имени проекта
    Рисунок 2. Указание имени проекта
  4. Нажмите HTTP > HTTP Server, затем кнопку Next. На данном шаге вы указываете Eclipse, что хотели бы использовать локальный HTTP-сервер в качестве целевой исполняющей системы. Вот почему необходимо установить Tomcat V5 (или другой поддерживаемый HTTP-сервер), что позволит анализировать поведение приложений локально в Eclipse.
    Рисунок 3. Установка ссылки на локальный HTTP-сервер
    Рисунок 3. Установка ссылки на локальный HTTP-сервер
  5. Введите корректный порт для вашего локального HTTP-сервера (возможно 80 или 8080), затем введите имя каталога, который хотите использовать для приложения.
  6. Выберите Publish Projects to this Server, затем нажмите Browse для выбора локального Web-каталога. В примере на моей системе таким путем является C:\Program Files\Apache Software Foundation\Tomcat 5.5\webapps\ROOT\helloworld. Вы должны создать каталог helloworld, но родительские каталоги уже будут присутствовать.
  7. Нажмите кнопку Finish.
    Рисунок 4. Установка локального HTTP-каталога
    Рисунок 4. Установка локального HTTP-каталога
  8. Нажмите кнопку Next, затем ATF > Dojo.
  9. Снимите отметку с флажка Rico, затем нажмите кнопку Finish. Этим вы настроите ваш проект (со всеми необходимыми требованиями) для разработки Ajax-приложения с использованием Dojo Toolkit.
    Рисунок 5. Разрешение Dojo Toolkit
    Рисунок 5. Разрешение Dojo Toolkit

Описанные выше шаги создают скелет Dojo-проекта в Eclipse. Теперь вы должны создать приложение, чтобы начать с ним работать.

Создание приложения

В панели Navigator разверните HelloWorld. Затем нажмите правой кнопкой мыши на WebContent и выберите New > Other.

Рисунок 6. Создание нового Web-содержимого
Рисунок 6. Создание нового Web-содержимого

Теперь разверните Dojo и выберите Dojo Application > Next. Описанные выше шаги устанавливают интегрированную среду для вашего приложения, а этот шаг фактически создает файлы, которые вы будете использовать в процессе редактирования и компоновки одного Dojo-приложения в вашем проекте. Вы можете создать много приложений в одном проекте.

Рисунок 7. Создание Dojo-приложения
Рисунок 7. Создание Dojo-приложения

Введите helloworldapp в поле Name, затем нажмите кнопку Finish. Название каждого приложения должно несколько отличаться (как минимум) от названия вашего проекта, для того чтобы видеть, что предоставляет данный набор файлов.

Рисунок 8. Именование Dojo-приложения
Рисунок 8. Именование Dojo-приложения

Этот шаг загружает helloworldapp.html в центральный фрейм Eclipse. В этом фрейме измените helloworldapp.html, чтобы превратить его из скелетного приложения в работающее приложение HelloWorld.

Рисунок 9. Панель редактирования
Рисунок 9. Панель редактирования

Генерирование работающего приложения HelloWorld

Начните с изменения заголовка на Hello World. Это обычный HTML-файл, поддерживающий такой же синтаксис и HTML, к которым вы привыкли, но он также содержит JavaScript-код, использующий Dojo и Dojo-виджеты. Вы можете работать с базовыми HTML-элементами так же, как и на любой другой Web-странице.

Рисунок 10. Измените HTML для включения названия проекта
Рисунок 10. Измените HTML для включения названия проекта

Теперь добавьте код для вашего приложения HelloWorld. Фрагменты этого кода были также использованы в предыдущем примере HelloWorld, но в данном случае, интегрированная среда для приложения была установлена Eclipse за вас. Вставьте этот сценарий в конец раздела head вашего кода helloworldapp.html. Используйте этот фрагмент кода для создания кнопки, которую может нажать пользователь, чтобы отобразить "Hello World!" в отладочном окне.

Рисунок 11. Добавление в код виджета Button
Рисунок 11. Добавление в код виджета Button

Наконец, в верхней части раздела body добавьте код, помещающий кнопку на пользовательский экран. Поскольку виджет Dojo Button уже загружен, на него можно сослаться в теле HTML. Обратите внимание на то, что это несколько более развитое приложение, чем типичное приложение HelloWorld, которое отображает сообщение, не взаимодействуя с пользователем (сообщение выводится для отладки).

Рисунок 12. Добавление кнопки в область содержимого
Рисунок 12. Добавление кнопки в область содержимого

Сохранение, компиляция и выполнение приложения

Теперь можно сохранить, откомпилировать и запустить созданное вами приложение HelloWorld:

  1. Выберите File > Save.
  2. Разверните HelloWorld, WebContent и helloworldapp в панели Navigator в Eclipse.
  3. Нажмите правой кнопкой мыши на helloworldapp.html, затем выберите Run As > Run in Mozilla.
  4. Нажмите кнопку Finish для активизации интегрированного браузера Mozilla, выполняющего ваше приложение HelloWorld.
    Рисунок 13. Проверка вывода Dojo-приложения
    Рисунок 13. Проверка вывода Dojo-приложения

Нажмите кнопку Press Me и увидите сообщение "Hello World!", выводимое в консоль отладки. Если оно выводится правильно (какие-либо другие сообщения отсутствуют), вы можете быть уверены, что ваша ATF и код проекта функционируют корректно.

Рисунок 14. Попробуйте нажать на кнопку
Рисунок 14. Попробуйте нажать на кнопку

Расширение функциональности приложения

Теперь, когда у нас есть базовое работающее приложение, давайте расширим его функциональность, используя фрагменты кода, включенные в ATF. Если у вас еще нет Snippets в Eclipse, нажмите Window > Show View > Other. Разверните General, выберите Snippets, затем нажмите кнопку OK. В правой части окна Eclipse должна появиться панель Snippets.

Рисунок 15. Готовые фрагменты кода
Рисунок 15. Готовые фрагменты кода

Разверните Dojo в панели Snippets, затем перетащите dojo.require в блок JavaScript на панели редактирования helloworldapp.html. Отобразится диалоговое окно, запрашивающее имя пакета. Для данного примера введите dojo.widget.Tree. При этом добавится строка, которая загружает виджет Tree, что позволит вам использовать этот виджет в области содержимого вашего кода.

Рисунок 16. Загрузка виджета Tree
Рисунок 16. Загрузка виджета Tree

Выполните прокрутку страницы вниз до раздела body helloworldapp.html и перетащите Tree с панели Snippet на панель редактора. Eclipse запросит вас, включать ли данные примера. Очистите этот флажок, для того чтобы добавлялся только внешний код Tree. Затем перетащите фрагмент Tree Node из панели Snippet на панель редактора вовнутрь тегов Tree и назовите узел Hello. Потом добавьте еще три узла Tree в узел Hello.

Рисунок 17. Создание узлов Tree с данными HelloWorld
Рисунок 17. Создание узлов Tree с данными HelloWorld

Сохраните, откомпилируйте и запустите созданное вами приложение HelloWorld. Выберите File > Save. Затем разверните HelloWorld, WebContent и helloworldapp в панели Navigator в Eclipse. Нажмите правой кнопкой мыши на helloworldapp.html и выберите Run As > Run in Mozilla. Нажмите кнопку Finish для активации интегрированного браузера Mozilla, выполняющего ваше приложение HelloWorld. Вы должны быть способны развернуть и свернуть узел Hello, показывая и скрывая его дочерние узлы.


Заключение

Теперь вы имеете общее представление о создании компонентов Dojo-проекта с использованием ATF в Eclipse. Чтобы стать более опытным пользователем, полностью изучите инструментальный пакет Ajax, выбранный вами для использования в Eclipse. Также исследуйте продвинутые функциональные возможности, используемые в Eclipse ATF, такие как DOM Inspector, CSS Inspector и JavaScript-отладчик. Создание простого приложения HelloWorld с использованием Dojo значительно упрощается в Eclipse, а по мере усложнения вашего проекта все больше проявляются преимущества создания полнофункциональных Web-приложений в этой среде. В последующих статьях будут представляться новые версии и их функциональные возможности, а также более подробная информация о компонентах ATF и других инструментальных наборах программ, таких как Zimbra и Rico.

Ресурсы

Научиться

Получить продукты и технологии

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Open source
ArticleID=223649
ArticleTitle=Ajax Toolkit Framework для Eclipse
publish-date=05172007