T.M. SoftStudio

feci quod potui, faciant meliora potentes

Купить полную версию книги "Среда разработки Eclipse 4: Руководство разработчика"

  • Создание GWT-приложений

    Платформа Google Web Toolkit (GWT) (https://developers.google.com/web-toolkit/) обеспечивает создание RIA (Rich Internet Application) Ajax приложений на основе Java-кода. В этом смысле GWT-платформа является альтернативой платформе Remote Application Platform (RAP).

    Архитектура GWT-платформы существенно отличается от архитектуры RAP-платформы.

    RAP-платформа основывается на системе RWT, Java-код которой исполняется в среде выполнения Equinox в Servlet-контейнере на стороне сервера, а на стороне клиента работает JavaScript-код Web-страницы, основанный на переработанном JavaScript-фреймворке qooxdoo. Java-код серверной части полностью содержит определение GUI-интерфейса, обработку его событий и работу с данными.

    GWT-приложение разрабатывается на языке Java и его код на стадии разработки содержит определение GUI-интерфейса, обработку его событий и работу с данными. Затем Java-код GWT-приложения, содержащий определение GUI-интерфейса и обработку его событий, компилируется в JavaScript-код Web-страницы клиента, а на стороне сервера остается лишь Java-код Web-сервисов, отвечающих за работу с данными. При этом JavaScript-код Web-страницы содержит Ajax-клиентов Web-сервисов.

    Платформа Google Web Toolkit (GWT) содержит:

    • GWT SDK – включает в себя Java-библиотеки программного интерфейса GWT-платформы, GWT-компилятор Java-кода в JavaScript-код, локальный сервер разработки, позволяющий запускать и отлаживать Java-код приложения без его компиляции в JavaScript-код.

    • Speed Tracer – расширение Web-браузера Chrome, позволяющее анализировать производительность GWT-приложения.

    • Google Plugin for Eclipse (GPE) – плагин, обеспечивающий разработку GWT-приложений в среде Eclipse.

    • GWT Designer – плагин, обеспечивающий визуальное редактирование GUI-интерфейса GWT-приложения в среде Eclipse.

    Для начала работы с GWT-платформой в среде Eclipse необходимо установить плагины GWT SDK, GPE и GWT Designer.

    Откроем среду Eclipse IDE for Java EE Developers (http://www.eclipse.org/downloads/) и в меню Help выберем команду Install New Software, нажмем кнопку Add поля Work with: и введем адрес инсталляции, указанный на странице https://developers.google.com/eclipse/docs/download?hl=ru-RU, отметим флажки GWT-плагинов и нажмем кнопку Next.

    После установки GWT-плагинов и перезагрузки среды Eclipse в меню File выберем команду New | Other | Google | Web Application Project, нажмем кнопку Next, введем имя проекта и имя пакета приложения, уберем галочку с флажка Use Google App Engine и нажмем кнопку Finish (рис. 10.1).

    Рис. 10.1 Мастер создания проекта GWT-прилложения

    Примечание

    Google App Engine позволяет создавать Web-приложения для развертывания в облачной инфраструктуре Google (см. http://code.google.com/intl/ru-RU/appengine/docs/whatisgoogleappengine.html).

    В результате будет создан проект GWT-приложения.

    Папка пакета каталога src проекта будет содержать файл .gwt.xml, описывающий конфигурацию GWT-модуля в XML-формате с корневым тэгом <module>.

    Каждое GWT-приложение организовано в виде модулей, представляющих определенную функциональность.

    GWT-платформа предоставляет набор стандартных GWT-модулей, которые необходимо наследовать GWT-модулю приложения.

    GWT-модуль приложения как минимум должен наследовать модуль com.google.gwt.user.User, содержащий базовую функциональность GWT-платформы. Кроме того, GWT-модуль приложения может наследовать модуль темы, например com.google.gwt.user.theme.clean.Clean, обеспечивающий стили для GUI-компонентов приложения. Наследование объявляется в конфигурационном файле GWT-модуля приложения с помощью тэга <inherits>.

  • Также конфигурационный файл GWT-модуля содержит объявление точки входа в GWT-модуль – класса, реализующего интерфейс com.google.gwt.core.client.EntryPoint и определяющего его метод public void onModuleLoad(), который вызывается при загрузке GWT-модуля. Точка входа объявляется с помощью тэга <entry-point>.

    Тэг <source> конфигурационного файла GWT-модуля объявляет пакеты, содержащие Java-код, предназначенный для компиляции в JavaScript-код для выполнения на стороне клиента.

    Имя модуля объявляется с помощью атрибута rename-to корневого тэга <module>.

    Пакет с расширением .client проекта GWT-приложения содержит код, выполняемый на стороне клиента. Сгенерированный средой Eclipse код папки .client состоит из главного класса приложения и интерфейсов – интерфейса Web-сервиса, поставляющего данные клиенту, и интерфейса, обеспечивающего асинхронный вызов Web-сервиса на стороне клиента.

    Главный класс GWT-приложения, точка входа в приложение, реализует интерфейс com.google.gwt.core.client.EntryPoint и определяет в его методе onModuleLoad() GUI-интерфейс приложения.

    GUI-интерфейс GWT-приложения конструируется из объектов классов, базовым классом которых является класс com.google.gwt.user.client.ui.Widget, при этом их компоновка осуществляется с помощью панелей, базовым классом которых является класс com.google.gwt.user.client.ui.Panel.

    Внешний вид по умолчанию Widget-компонентов может переопределяться с помощью CSS-стилей, которые связываются с Widget-компонентами, используя метод addStyleName() суперкласса com.google.gwt.user.client.ui.UIObject.

    GUI-интерфейс GWT-приложения имеет основную корневую панель компоновки, представленную классом com.google.gwt.user.client.ui.RootPanel, экземпляр которого получается статическим методом RootPanel.get(). Такая основная корневая панель связана с тэгом <body> Web-страницы GWT-приложения.

    Основная корневая RootPanel-панель может содержать другие корневые RootPanel-панели, связанные с элементами Web-страницы GWT-приложения и экземпляры которых получаются с помощью статического метода RootPanel.get(String id), где id – идентификатор HTML-элемента. Widget-компоненты и Panel-панели добавляются в RootPanel-панели с помощью метода add() класса Panel.

    Главный класс GWT-приложения обеспечивает взаимодействие с Web-сервисом сервера с помощью Proxy-объекта, создаваемого с помощью статического метода create() класса com.google.gwt.core.client.GWT.

    Интерфейс Web-сервиса, определенный на стороне клиента, расширяет интерфейс com.google.gwt.user.client.rpc.RemoteService и объявляет методы Web-сервиса, вызываемые клиентом. Аннотация com.google.gwt.user.client.rpc.RemoteServiceRelativePath используется для указания относительного пути сервлета на стороне сервера, реализующего интерфейс Web-сервиса.

    Интерфейс, определенный на стороне клиента и обеспечивающий асинхронный вызов Web-сервиса, создан на основе интерфейса Web-сервиса и дополняет методы Web-сервиса аргументом – объектом com.google.gwt.user.client.rpc.AsyncCallback. Интерфейс AsyncCallback предоставляет методы onSuccess() и onFailure(), автоматически вызываемые в случае успешного завершения асинхронного вызова Web-сервиса и в случае возникновения ошибки соответственно. Результат вызова Web-сервиса содержится как аргумент метода onSuccess().

    Пакет с расширением .server проекта GWT-приложения содержит код, выполняемый на стороне сервера. Сгенерированный средой Eclipse код папки .server состоит из сервлета, расширяющего класс com.google.gwt.user.server.rpc.RemoteServiceServlet и реализующего интерфейс Web-сервиса. Класс RemoteServiceServlet обеспечивает десериализацию входящих клиентских запросов и сериализацию ответов клиенту.

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

    Каталог war проекта GWT-приложения содержит папку WEB-INF, а также файлы CSS-стилей и HTML-страницы приложения.

    CSS-стили связываются с HTML-страницей GWT-приложения с помощью HTML-тэга <link> и содержат определение общего стиля HTML-страницы, а также переопределение внешнего вида по умолчанию GWT-компонентов GUI-интерфейса приложения.

    HTML-страница GWT-приложения содержит элементы, идентификаторы которых связаны с RootPanel-панелями.

    Папка WEB-INF содержит дескриптор web.xml развертывания GWT-приложения на стороне сервера, а также папку lib с библиотекой gwt-servlet.jar, обеспечивающей классы механизма GWT RPC удаленного вызова процедур.

    Дескриптор web.xml содержит объявления сервлета, представляющего Web-сервис GWT-приложения, относительного пути сервлета и главной Web-страницы GWT-приложения.

    Визуальное редактирование GUI-интерфейса GWT-приложения обеспечивает инструмент GWT Designer GWT-платформы.

  • Для того чтобы воспользоваться инструментом GWT Designer в окне Project Explorer среды Eclipse нажмем правой кнопкой мышки на узле главного класса GWT-приложения пакета .client и в контекстном меню выберем команду Open With | GWT Designer – в результате главный класс откроется в графическом визуальном GWT-редакторе, вкладка Source которого отображает исходный Java-код класса, а вкладка Design позволяет визуальное редактирование GUI-интерфейса GWT-приложения (рис. 10.2).

    Рис. 10.2. GWT-редактор GUI-интерфейса GWT-приложения

    Palette-палитра GWT-редактора обеспечивает наполнение GUI-интерфейса GWT-компонентами, а окно Properties – редактирование их свойств.

    Для запуска GWT-приложения в отладочном режиме без компиляции Java-кода в JavaScript-код в окне Project Explorer нажмем правой кнопкой мышки на узле проекта и в контекстном меню выберем команду Run As | Web Application. В результате откроется представление Development Mode с URL-адресом загрузки GWT-приложения (рис. 10.3).

    Рис. 10.3. Загрузка GWT-приложения в режиме отладки

    В представлении Development Mode нажмем правой кнопкой мышки на URL-адресе загрузки GWT-приложения и выберем Web-браузер. В первый раз Web-браузер отобразит запрос на загрузку GWT-плагина, который обеспечивает связь между Java-байт кодом в отладчике и JavaScript-кодом Web-браузера (рис. 10.4).

    Рис. 10.4. Установка плагина GWT developer plugin

    После установки GWT-плагина Web-браузер отобразит Web-страницу GWT-приложения (рис. 10.5).

    Рис. 10.5. Web-страница GWT-приложения

    Для компиляции Java-кода GWT-приложения в JavaScript-код в окне Project Explorer нажмем правой кнопкой мышки на узле проекта и в контекстном меню выберем команду Google | GWT Compile. В результате откроется диалоговое окно мастера GWT-компиляции (рис. 10.6).

    Рис. 10.6. Мастер компиляции Java-кода GWT-приложения в JavaScript-код

    Список Output style: GWT-компилятора предлагает выбрать способ генерации JavaScript-кода:

    • Obfuscated – нечитаемый, сжатый код.

    • Pretty – JavaScript-код с осмысленными именами.

    • Detailed – JavaScript-код с полными именами.

    После нажатия кнопки Compile мастера GWT-компиляции будет запущен процесс компиляции Java-to-JavaScript, отображаемый в представлении Console среды Eclipse. По завершению процесса компиляции в каталоге war GWT-проекта появится папка с именем GWT-модуля, содержащая HTML и JavaScript код, а также сопутствующие ресурсы стороны клиента.

    Для развертывания GWT-приложения в сервере Tomcat скопируем каталог war GWT-проекта в папку webapps каталога сервера Tomcat, запустим сервер с помощью инструмента startup.bat папки bin и в адресной строке Web-браузера введем адрес http://127.0.0.1:8080/war/ - в результате откроется Web-страница GWT-приложения.

    Инструмент Speed Tracer представляет собой расширение Web-браузера Chrome, позволяющее анализировать производительность GWT-приложения.

    Для установки инструмента Speed Tracer в Web-браузере Chrome откроем страницу по адресу https://developers.google.com/web-toolkit/speedtracer/get-started#downloading и нажмем кнопку Install Speed Tracer.

    После инсталляции расширения Speed Tracer в Web-браузере Chrome в меню Настройки выберем команду Инструменты | Расширения и для расширения Speed Tracer отметим флажок Разрешить открывать файлы по ссылкам для разрешения доступа к GWT-приложению.

    В меню Window среды Eclipse отметим флажок Enable Speed Tracer раздела Google | Speed Tracer команды Preferences.

    В окне Project Explorer среды Eclipse нажмем правой кнопкой мышки на узле GWT-проекта и в контекстном меню выберем команду Google | Profile Using Speed Tracer. В появившемся диалоговом окне нажмем кнопку Profile. В результате в Web-браузере Chrome откроется Web-страница GWT-приложения и Web-страница инструмента Speed Tracer с анализом работы GWT-приложения (рис. 10.7).

    Рис. 10.7. Анализ работы GWT-приложения инструментом Speed Tracer

Пример. Создание GWT приложения Content Delivery Node для платформы Google App Engine