То, что Google прописал

Николай Байбородин

Хакер, номер #109, стр. 104

(baiborodin@gmail.com)

Создание AJAX-приложений с использованием GWT

С переходом технологии AJAX от стадии «новомодной штуки» к статусу рабочей лошадки веб-программирования стали активно развиваться инструментальные средства, призванные повысить эффективность разработки AJAX-приложений. В частности, это придало импульс проявлению разнообразных фреймворков, основное назначение которых – освободить программиста от необходимости рутинного написания однотипного, многократно повторяющегося программного кода, сосредоточившись на логике веб-приложения. Один из них – Google Web Toolkit.

Патрон в обойме Google

В этой статье мы расскажем об одной технологии, созданной парнями из компании Сереги Брина и Лари Пейджа. Опыт показывает, что все, что делает Google, как минимум достойно пристального внимания. Однако... Все более или менее раскрученные проекты от IT-компании номер один предназначены для конечного пользователя. Что же получается, Google незаслуженно обходит своим вниманием программистов? Отнюдь. И подтверждение тому – фреймворк Google Web Toolkit (GWT).

Проект GWT перешел в публичную стадию в мае 2006 года. Учитывая темпы развития IT-индустрии и более чем полуторалетний возраст технологии, можно констатировать некий показатель зрелости, обязывающий ко многому. Итак. Google Web Toolkit (GWT) представляет собой инструментарий разработки клиентских веб-приложений с использованием технологии AJAX. Ну да, конечно, ты можешь сказать, что AJAX-фреймворков сейчас развелось, как депутатов после выборов. Правильно. Только не торопись делать поспешные выводы – лучше разберемся с основными фишками GWT.

Главное отличие GWT от прочих фреймворков состоит в том, что программный код, реализующий пользовательский интерфейс в окне веб-браузера, пишется не на JavaScript, а на Java. А ты как думал! Если за дело берется Google, проект обязательно будет с изюминкой. А в случае с GWT это целый килограмм изюма!

Зачем понадобилось использовать Java для создания JavaScript-интерфейсов? А много ли ты знаешь действительно серьезных инструментов разработки, заточенных под JavaScript? То-то и оно... Совсем другая ситуация с Java, для которой созданы RAD-системы с функциональностью авианосца. Google Web Toolkit позволяет использовать всю эту мощь для создания клиентских AJAX-приложений.

Я тебе обещал горы изюма? Тогда подставляй свои шаловливые ладошки. GWT - это не только транслятор Java-кода в JavaScript, это еще и набор убойных библиотек, реализующих возможности самых разнообразных виджетов, оконных форм, элементов графического оформления. Вижу, твои глаза загорелись, не иначе ты вспомнил об интерфейсах Google Calendar, Google SpreadShits и Gmail. Да, именно так – все это богатство псевдооконного веб-интерфейса к твоим услугам. Но и это еще не все – GWT умеет формировать из XMLHttpRequest-объектов веб-запросы в формате JSON (JavaScript Object Nation). Знаю, каков твой следующий вопрос, и спешу дать на него ответ: GWT прекрасно уживается с такими серверными технологиями, как JSF, Spring, Struts и EJB.

Test Drive

До того, как ты озаботишься получением и установкой Google Web Toolkit, проверь наличие Java SDK на твоем компе. Если по каким-либо (совершенно непонятным для меня) причинам этот кит у тебя не установлен, сливай последнюю версию с сайта Sun Microsystems (адрес ты найдешь в боковом выносе).

Сам же пакет GWT доступен для скачивания по адресу code.google.com/webtoolkit/download.html. На этой странице ты найдешь версии GWT для всех наиболее распространенных операционных систем: Windows 2000/XP, Linux и Mac OS X. Инсталляционный пакет включает в себя GWT компилятор, браузер, предназначенный для отладки виджетов и пользовательских форм, библиотеку классов GWT плюс несколько демонстрационных примеров.

В процессе установки GWT придется изрядно попотеть! Необходимо выполнить операцию, требующую недюжинных интеллектуальных усилий, сущность которой заключается в распаковке архива в один из каталогов жесткого диска. На этом установку GWT можно будет считать законченной.

Для того чтобы убедиться в прямоте своих рук, можно запустить одно из приложений, выбрав его среди тех, что идут в комплекте с GWT в качестве примеров. Наиболее эффектная демонстрация возможностей фреймворка – веб-интерфейс клиента электронной почты. Для того чтобы впасть в нирвану от созерцания этого чуда, нужно в каталоге GWT зайти в подкаталог samples/Mail и запустить на выполнение файл Mail-shell.cmd. Пара секунд - и у тебя на экране появятся два окна: окно GWT Development Shell, предназначенное для администрирования приложений, запускаемых под управлением фреймворка, и окно с самим приложением. Ну как? Оценил? То-то и оно, Google веников не вяжет. Пора научиться управлять этой адской машинкой!

Архитектура GWT

Фреймворк, к которому ты уже проникся определенной долей уважения, призван решить проблему переноса desktop-приложений в веб-среду и включает в себя помимо набора виджетов массу других компонентов. Сюда входит собственный XML-парсер, средства взаимодействия с серверными приложениями, средства интернационализации и инструменты конфигурирования создаваемых приложений. Посмотрев на рисунок, ты можешь получить примерное представление об архитектуре GWT.

Думаю, что с первого взгляда на схематичное изображение архитектуры GWT ты понял, что ядром фреймворка является компилятор, генерирующий JavaScript-код. Вторым по значимости можно назвать модуль, реализующий удаленный вызов процедур – RPC. Именно он отвечает за взаимодействие с серверной частью приложения. И для того чтобы окончательно убедить тебя в том, что это серьезная игрушка для реальных проектов, хочу обратить твое внимание на модуль, обеспечивающий тесную интеграцию с JUnit (на всякий случай, как говорится, special for beginners, напомню, что JUnit является мощнейшим средством тестирования Java-приложений).

И завершает эту полную гармонии картину модуль JSNI – Java Script Native Interface. По его названию легко догадаться, что это и есть тот самый мостик между Java и JavaScript.

Загуглись нежно

Пора испытать чудо-миелофон в действии! Сегодня мы остановимся на базовых концепция работы GWT. Так сказать, это будет наша матчасть.

Для начала познакомимся с одним из скриптов, входящих в комплект GWT. Назначение этих скриптов – сделать нашу жизнь столь же лучезарной, как улыбка Юрия Гагарина. GWT-скрипты позволяют автоматически создавать разнообразные каркасы приложений, на которые веб-разработчик уже наращивает мускулатуру в соответствии со своим замыслом. Этот каркас включает в себя необходимую структуру каталогов и файлы инициализации приложения.

Несмотря на то что фреймворк поставляется с несколькими скриптами, реально тебе пригодится (по крайней мере на этапе освоения фреймворка) скрипт applicationCreator.

Для начала было бы неплохо создать каталог для приложения, в который скрипт поместит результат своей работы. К примеру, пусть это будет каталог HelloGWT. В корневом каталоге GWT есть файл applicationCreator.cmd. Запускай его через консоль со следующими параметрами:

applicationCreator.cmd -out <путь к каталогу проекта>HelloGWT org.nab.HelloGWT.clent.HelloGWT

Здесь параметр out задает целевой каталог, в котором должны храниться создаваемые скриптом артефакты, а также определяет структуру Java-пакетов. Если теперь заглянуть в каталог, который еще мгновение назад был пуст, то в нем обнаружится определенная структура каталогов и скрипты для компиляции и запуска проекта.

По доброте душевной программистов из Google созданный каркас – это уже полноценно работающее AJAX-приложение. Правда, не думаю, что для его функциональности получится найти какое-то применение. В любом случае можешь полюбоваться на свое творение, открыв каталог приложения и запустив скрипт <бла-бла>-shell.cmd.

Основу каркаса приложения составляет файл heloGWT.java, структуру которого ты можешь увидеть в любом редакторе кода с поддержкой Java-синтаксиса или в соответствующей врезке в статье (в сжатом виде).

Шаблон основного файла GWT-проекта

package com.packtpub.helloGWT.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.user.client.ui.Button;

import com.google.gwt.user.client.ui.ClickListener;

import com.google.gwt.user.client.ui.Label;

import com.google.gwt.user.client.ui.RootPanel;

import com.google.gwt.user.client.ui.Widget;

public class helloGWT implements EntryPoint {

public void onModuleLoad() {

final Button button = new Button("Click me");

final Label label = new Label();

button.addClickListener(new ClickListener() {

public void onClick(Widget sender) {

if (label.getText().equals(""))

label.setText("Hello World!");

else

label.setText("");

}

});

RootPanel.get("slot1").add(button);

RootPanel.get("slot2").add(label);

}

}

Другой важный файл проекта – helloGWT.gwt.xml. Он содержит информацию, необходимую GWT для конфигурирования нашего проекта, и имеет достаточно простую структуру.

<module>

<!-- Inherit the core Web Toolkit stuff.-->

<inherits name='com.google.gwt.user.User'/>

<!-- Specify the app entry point class.-->

<entry-point class='com.packtpub.helloGWT.client.helloGWT'/>

</module>

В этом файле тэг inherits определяет модули, от которых создаваемое приложение будет наследовать структуру и внешние интерфейсы. В этом случае мы наследуем только функциональность, определяемую модулем User, который входит в библиотеку модулей GWT. В реальных проектах тебе понадобится организовать наследование и от многих других модулей (какие именно модули входят в состав GWT, а также их назначение смотри в документации - не маленький уже). Тэг EntryPoint указывает на класс, экземпляр которого будет создаваться в момент загрузки модуля фреймворком. Название этого класса, как ты уже, наверное, заметил, мы указывали в качестве параметра команды applicationCreator во время создания шаблона будущего приложения.

Вопросы интеграции

Пора нарастить на голый GWT-скелет немного мяса :). Будем действовать поэтапно. Можешь запускать свою любимую Java IDE или открывать многострадальный Notepad (если ты сторонник минимализма и нетрадиционного секса). Если ты все-таки решил использовать одну из сред Java-разработки, для начала было бы неплохо из шаблона нашего приложения сформировать проект, который можно загрузить в эту IDE. В настоящее время реализован импорт шаблона только в IDE Eclipse, так что если ты, как и я, являешься сторонником NetBeans, то тебе придется сначала сформировать проект для Eclipse, а затем импортировать его в NetBeans с помощью специального плагина.

Во-первых, нужно создать файлы проекта, необходимые для Eclipse IDE. Вводи в консоль следующую команду:

projectCreator.cmd -out <путь к каталогу проекта> -eclipse HelloGWT

Скрипт projectCreator, в отличие от applicationCreator, позволяет создать не просто AJAX- приложение, а проект для IDE Eclipse.

Пока у нас есть всего лишь пустой проект. Теперь необходимо его наполнить файлами шаблона приложения. Запускай уже знакомый тебе скрипт applicationCreator:

applicationCreator.cmd -out <путь к каталогу проекта> -eclipse HelloGWT -overwrite name.baiborodin.hellogwt.client.HelloGWT

Теперь можно забыть про неуютную консоль (ну конечно, я в курсе, что для тебя консоль – дом родной, так что этот пассаж я отношу исключительно на свой счет :)) и перейти к разработке с помощью Eclipse. Для этого выбирай в главном меню пункт «Файл -> Импорт» и указывай в стандартном диалоге путь к каталогу с файлами проекта.

Кстати говоря, скрипт projectCreator имеет и другие ключи запуска, помогающие при создании GWT-проектов. Среди них имеются:

• ‘-ant’ - генерирует билд-файл для самого популярного сборщика Java-проектов;
• ‘-eclipse’ - уже знакомый ключ, формирующий проект для IDE Eclipse;
• ‘-out’ - служит для спецификации директории проекта;
• ‘-overwrite’ - позволяет повторно создать структуру проекта, перезаписав уже существующие файлы;
• ‘-ignore’ - используется так же, как и предыдущий, при повторном построении проекта, с той лишь разницей, что существующие файлы не переписываются, а просто игнорируются.

Когда приходит время действовать

Знакомство с базовыми принципами фреймворка GWT было бы неполным без обсуждения такого важного вопроса, как находящиеся в распоряжении разработчика способы запуска приложений. Начнем с тех, что имеют отношение к HostedMode, то есть к локальному запуску.

Во-первых, через консоль можно запустить на выполнение специальный cmd’шник. В каталоге любого GWT-проекта всегда присутствует файл вида <имя_проекта>-shell.cmd, инициализирующий рабочую среду фреймворка и разворачивающий в ней приложение.

Во-вторых, если это проект для IDE Eclipse, то в проводнике проектов, раскрыв дерево любого из импортированных GWT-проектов, среди прочих файлов нельзя не заметить тот же скриптовый файл. Что с ним делать, ты уже знаешь.

И наконец, в-третьих, как и любой другой проект Eclipse, GWT-приложение можно запустить из IDE с помощью стандартной команды Run.

Хочешь спросить, а как же с уже готовым проектом? Как его опубликовать на сервере и запустить в серверном режиме, а не в HostedMode? Вспомни о ключах, влияющих на сборку проекта. Как ты думаешь, зачем там предусмотрен вариант ant-сборки? Именно для возможности автоматического развертывания. Ну а если тебе необходимо обойтись без ant-скриптов, такое тоже возможно.

Сначала нужно скомпилировать проект. В процессе компиляции будут созданы файлы JavaScript. Ты наверняка уже давно заметил, что в каталоге проекта присутствует скрипт <имя_проекта>-compile.cmd. Его запуск без каких-либо параметров выполнит компиляцию всего проекта. В результате в каталоге проекта среди файлов и каталогов появится новый каталог – www, содержащий файловую структуру веб-приложения. В нем находится все, что необходимо для публикации проекта на сервере. Основным файлом проекта будет файл <имя_проекта> с расширением html. Теперь можно просто скопировать содержимое каталога www в соответствующую директорию веб-сервера и наслаждаться работой своего крутейшего, не к ночи будет сказано, приложения web 2.0. Просто и со вкусом. Согласен?

To be continued?

Ну что, man, пора заканчивать наше первое знакомство с меганавороченным фреймворком от одного симпатичного мне поисковика. Как видишь, мы не написали ни одной строчки кода и не создали (возможно, вопреки твоим ожиданиям) ни одной ацкой проги. Связано это с тем, что, прежде чем садиться за руль гоночного болида, не мешало бы предварительно выяснить, где у него педаль тормоза. Именно этим мы сегодня с тобой и занимались – избавлялись, так сказать, от страха первого свидания, снимали внутренние зажимы и комплексы :). Если тема создания веб-приложений с помощью GWT тебя серьезно вставила, то мы обязательно ее продолжим и в следующий раз немного похулиганим на просторах необъятной Сети, написав что-нибудь эдакое, GWT-ориентированное. Самое главное – изъяви свою демократическую волю мне или редактору рубрики с помощью электронной почты.

И, конечно же, ничто не мешает тебе слить все доки с веб-ресурса проекта GWT и продолжить свое дальнейшее развитие именно в том направлении, которое тебя особенно интересует.

JSNI

JavaScript Native Interface (JSNI) позволяет легко осуществлять вызов как объектов JavaScript из Java-классов, так и наоборот. Это возможно благодаря GWT-компилятору, который может интегрировать в чистый JavaScript-код фрагменты кода, сгенерированные Java-классами. Ниже представлен пример такой интеграции.

public native int addTwoNumbers(int x, int y)

/*-{

var result = x + y;

return result;

}-*/;

Интеграция с JUnit

Для интеграции GWT-приложения с JUnit и создания тестов достаточно просто сделать так, чтобы создаваемый класс расширял TestCase. Класс также должен иметь метод getModuleName(), за которым могут следовать сами тесты. Например:

public class MathTest extends GWTTestCase{

public String getModuleName(){

return "org.comp.app";

}

public void testAbsoluteValue(){

int absVal = Math.abs(-5);

assertWquals(5, absVal);

}

}

CD

Да! Мы выложили GWT на наш диск, и у тебя теперь нет необходимости тянуть его из сети.

WWW

• java.sun.com/javase/downlads - отсюда сливай Java SDK.
• code.google.com/webtoolkit - по этому адресу находится домашняя страница проекта GWT, на которой можно найти не только сам фреймворк, но и разнообразную документацию к нему.
• googlewebtoolkit.blogspot.com - у проекта Google Web Toolkit есть свой блог, из которого можно узнать много интересных подробностей о развитии проекта.

INFO

Существуют и другие AJAX-фреймворки, позволяющие генерировать JavaScript-приложения с помощью «взрослых» языков программирования (PHP, Ruby, Java). Прежде всего это AjaxOnRails. Что касается AJAX-фреймворков, основанных на Java, то здесь можно отметить такие решения, как Echo, Dojo, Prototype.