Это продолжение моего введения в инициативу 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. Выбор типа проекта
   
   
   
3. Введите HelloWorld в поле Project name, затем нажмите кнопку New под Target Runtime. Это имя будет именем всего проекта, в который вы можете включить подкаталоги и Web-приложение с именами по вашему выбору.
   
   Рисунок 2. Указание имени проекта
   
   
   
4. Нажмите HTTP > HTTP Server, затем кнопку Next. На данном шаге вы указываете Eclipse, что хотели бы использовать локальный HTTP-сервер в качестве целевой исполняющей системы. Вот почему необходимо установить Tomcat V5 (или другой поддерживаемый HTTP-сервер), что позволит анализировать поведение приложений локально в Eclipse.
   
   Рисунок 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-каталога
   
   
   
8. Нажмите кнопку Next, затем ATF > Dojo.
9. Снимите отметку с флажка Rico, затем нажмите кнопку Finish. Этим вы настроите ваш проект (со всеми необходимыми требованиями) для разработки Ajax-приложения с использованием Dojo Toolkit.
   
   Рисунок 5. Разрешение Dojo Toolkit
   
   
   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сохраните, откомпилируйте и запустите созданное вами приложение 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.

Ресурсы

Научиться

• Оригинал статьи "Discover the Ajax Toolkit Framework for Eclipse".
  
  
• "Tech Titans Contribute Browser-Boosting Ajax Technologies to Open Source Community": В этом февральском пресс-релизе за 2006 год IBM предоставляет подробную информацию об инициативе Open Ajax.
  
  
• На сайте Eclipse.org размещена подробная информация по Eclipse IDE.
  
  
• "Два инструмента обеспечивают поддержку Ajax в Eclipse Ajax Toolkit Framework" - введение в ATF.
  
  
• Флэш-ролик Dojo Project Cycle Demo по созданию Dojo-проекта в Ajax. Воспользуйтесь этой информацией для некоторых шагов, описанных в данной статье.
  
  
• Документация по Dojo Toolkit - дополнительная информация о Dojo.
  
  
• Подробный пример HelloWorld на JotSpot wiki.
  
  
• Отличное введение в платформу Eclipse - статья "Начало работы с платформой Eclipse".
  
  
• Ресурсы проекта Eclipse на IBM developerWorks - дополнительные материалы по Eclipse.
  
  
• Следите за текущими техническими событиями и web-трансляциями на developerWorks.
  
  
• В разделе developerWorks Open source размещена исчерпывающая информация, статьи how-to, инструментальные программы и обновления проектов, полезные для разработки с использованием технологий с открытыми исходными кодами и применения этих технологий с продуктами IBM.
  
  

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

• Проект ATF.
  
  
• Проект Eclipse WTP.
  
  
• Загрузите пакет Eclipse Callisto, чтобы получить базовые компоненты, требующиеся для установки ATF.
  
  
• Загрузите последнюю версию ATF с Eclipse.
  
  
• Загрузите JRE, необходимую для использования ATF.
  
  
• Загрузите Apache Tomcat V5, совместимый Web-сервер, интегрируемый в ATF.
  
  
• Последние версии загружаемых файлов технологии Eclipse на IBM alphaWorks.
  
  
• Разработайте следующий проект с открытыми исходными кодами, используя пробное программное обеспечение IBM, доступное для загрузки или на DVD.
  
  

Обсудить

• Примите участие в обсуждении материала на форуме.
  
  
• Новостные группы Eclipse с разными ресурсами для всех интересующихся вопросами использования и расширения Eclipse.
  
  
• Примите участие в форуме по Opensource;
  
  
• Примите участие в блогах developerWorks и подключайтесь к сообществу developerWorks.
  
  

Об авторе

Оценить эту статью

Комментарии

В начало

Содержание

• Установка ATF
• Создание Dojo-приложения в ATF
• Заключение
• Ресурсы
• Об авторе
• Комментарии