Пример создания приложения Google Web Toolkit (GWT) Hello World Example

Быстрый старт в Google web toolkit. Пример создания простого приложения GWT Hello World Example.

Используемые технологии
  • GWT 2.7.0.
  • IntelliJ IDEA 14
  • Maven 3.2.5

1. Описание задачи

Создать простое веб приложение с использованием фреймворка Google web toolkit версии 2.7.0. Рассмотреть пример взаимодействия клиентской и серверной части. Применить несколько стандартных компонентов GWT и назначить для них обработчики.

2. Структура проекта

GWT project structure

Создана простая базовая структура проекта GWT. Имеется необходимый главный класс GwtApp, а так же необходимые файлы GwtApp.css, GwtApp.html и GwtApp.gwt.xml — все они являются обязательными. Для взаимодействия клиента с серверной частью созданы GwtAppServiceIntfGwtAppServiceIntfAsyncGwtAppServiceImpl — набор так же обязателен. FieldValidator — необязательный класс (создан для проверки длины строки в текстовом поле).

В документации JetBrains есть такая хорошая картинка, описывающая базу GWT:

gwtProjectStructure

  • GWT корневой пакет (1).
  • Client (2). Файлы и ресурсы для клиентской стороны
  • Public (3).  Различные статические ресурсы, которые могут быть сгруппированы и общедоступны.
  • Server (4). Серверная сторона.
  • GWT Module XML descriptor (5) XML описание GWT модуля

Как видите есть некоторые отличия от созданного выше проекта.

3. Создание Google Web Toolkit приложения

Создаем пустой Maven проект.

maven start

3.1 pom.xml

Как видите здесь два определения зависимостей для GWT. Первая указана на сайте GWT проекта, вторая лежит в центральном репозитории. Hello World проект запуститься с любой из них. Посмотрите сами в чем отличие.

3.2 Добавление фреймворков

add GWT framework

Выбираем галочки напротив Web Application и Google Web Toolkit.

3.3. web.xml

Указан сервлет, по какому паттерну он будет мапиться, а так же страница входа после загрузки сервера.

<url-pattern>/gwtApp/gwtAppService</url-pattern> — обратите внимание на эту строчку. gwtAppService — указан в аннотации интерфейса GwtAppServiceIntf, который будет описан ниже.

3.4 GwtApp.gwt.xml

Дескриптор главного модуля GWT приложения. Подписи внутри кода поясняют его назначение. Сам модуль GWT описан чуть ниже.

4. Описание GWT Module. EntryPoint interface

Для загрузки приложения необходимо создать класс, реализующий интерфейс EntryPoint. Это аналог public static void main() в обычном Java приложении. Требуется реализовать только один метод, чтобы увидеть рабочее GWT приложение.

В Idea есть способ создать сразу несколько файлов (html, css, модуль). Для этого нажмите правой кнопкой и выберите необходимый пункт. Например создав модуль, сразу будут созданы html и css с аналогичным названием.

Create GWTModule

GwtApp.class:

  • Вначале определяем компоненты GWT (кнопки, текстовое поле, диалоговое окно и т.д.).
  • С помощью RootPanel.get(«idFromHtmlPage»).add(gwtComponent) — связываем id на html странице с компонентом (виджетом) GWT.
  • Создаем диалоговое окно (его вызов описан в sendInfoToServer()). Добавляем компоненты и различные свойства.
  • Методы addKeyUpHandler и addClickHandler — обработчики событий на нажатие клавиши и щелчка мыши соответственно. Обработчики задаются у текстового поля и кнопки Confirm.
  • Метод sendInfoToServer() позволяет отправить данные на серверную часть приложения. Для этого вначале был создан экземпляр gwtAppService с помощью команды  GWT.create(GwtAppServiceIntf.class); С помощью него выполняется асинхронная обработка данных и необходимо реализовать два метода в случае успешного действия и неудачи.

5. Представление html GWT приложения

Для главного модуля нужно создать html страницу. Именно с ней производится связь компонентов GWT из кода выше.

GwtApp.html

В начале файла идут рекомендуемые настройки\импорты. Т.к. без включенного javascript пользователь ничего не увидит, то рекомендуется так же добавить тег <noscript> где попросить включить поддержку JavaScript в браузере. Далее написана одна таблица с несколькими id. Выше с ними произведена связка с компонентами google web toolkit.

GwtApp.css

Вы можете добавить css стили на своё усмотрение.

6. Классы и интерфейсы для работы клиентской части с серверной

Для работы клиентской и серверной частей вместе, необходимо создать интерфейс, расширяющий интерфейс-маркер RemoteService.

GwtAppServiceIntf:

Обратите внимание на аннотацию и посмотрите еще раз в web.xml.

Для асинхронной работы необходим интерфейс с таким же названием и добавлением Async. GwtAppServiceIntfAsync:

В пакет server необходимо добавить класс, реализующий наш только что созданный интерфейс, а так же расширяющий RemoteServiceServletGwtAppServiceImpl:

7. Вспомогательный класс-валидатор

Был создан необязательный класс-валидатор, который проверяет длину введенной строки в компонент TextBox.

8. Запуск приложения GWT Hello World

Для начала покажу скриншоты настроек в Idea. Может быть кому-то эта информация будет необходима (особенно если не получится запустить с первого раза).

GWT Artifacts GWT Facets

Необходимо добавить в настройках Edit Configuration GWT Configuration (дебаг добавился автоматически после установки чекбокса with JavaScript debugger):

GWT Run_Debug Config

После запуска:

GWT errorLabel

После клика на кнопку:

GWT runApp

Можеть быть интересно

GWT – UIBinder Hello World. Пример использования UIBinder в GWT

Исходные коды

GWT Hello World

Share Button
9
4252 Total Views 2 Views Today

Добавить комментарий