1. введение
GWT или Google Web Toolkit-это фреймворк для создания высокопроизводительных веб-приложений на Java .
В этом уроке мы сосредоточимся на некоторых его ключевых возможностях и функциях и рассмотрим их.
2. GWT SDK
SDK содержит библиотеки API Java, компилятор и сервер разработки.
2.1. Java API
GWT API имеет классы для построения пользовательских интерфейсов, выполнения вызовов сервера, интернационализации, выполнения модульных тестов. Чтобы узнать больше, ознакомьтесь с документацией java здесь .
2.2. Компилятор
Проще говоря, компилятор GWT-это исходный переводчик кода Java в Javascript . Результатом компиляции является приложение Javascript.
Логика его работы включает в себя удаление неиспользуемых классов, методов, полей из кода и сокращение имен Javascript.
Из-за этого преимущества нам больше не нужно включать библиотеки Ajax в наш проект Javascript. Конечно, также можно задавать подсказки при компиляции кода.
Вот некоторые полезные GWT-компилятор параметры:
- -Уровень журнала – для установки одного из уровней ошибок, ПРЕДУПРЕЖДЕНИЙ, ИНФОРМАЦИИ, ТРАССИРОВКИ, ОТЛАДКИ, СПАМА, ВСЕХ уровней ведения журнала
- -workdir – рабочий каталог компилятора
- -gen – каталог для записи сгенерированных файлов
- -out – каталог выходных файлов
- -оптимизация – Устанавливает уровень оптимизации компилятора от 0 до 9
- -стиль – стиль вывода скрипта OBF, ДОВОЛЬНО или ПОДРОБНО
- -модуль[ы] – имя модулей для компиляции
3. Настройка
Последняя версия SDK доступна на странице download . Остальная часть настройки доступна на странице начало работы .
3.1. Maven
Чтобы настроить проект с помощью Maven, нам нужно добавить следующие зависимости в pom.xml :
com.google.gwt gwt-servlet runtime com.google.gwt gwt-user provided com.google.gwt gwt-dev provided
Библиотека gwt-сервлетов поддерживает серверные компоненты для вызова конечной точки GWT-RPC. gwt-user содержит Java API, который мы будем использовать для создания нашего веб-приложения . gwt-dev содержит код для компилятора, развертывания или размещения приложения.
Чтобы убедиться, что все зависимости используют одну и ту же версию, нам нужно включить родительскую зависимость GWT:
com.google.gwt gwt 2.8.2 pom import
Все артефакты доступны для загрузки на Maven Central .
4. Применение
Давайте создадим простое веб-приложение. Он отправит сообщение на сервер и отобразит ответ.
В общем случае приложение GWT состоит из серверной и клиентской частей . Клиентская сторона делает HTTP-запрос для подключения к серверу. Чтобы сделать это возможным, GWT использует удаленный вызов процедуры или просто механизм RPC.
5. GWT и RPC
Возвращаясь к нашему приложению, давайте посмотрим, как осуществляется связь RPC. Для этой цели мы создаем службу для получения сообщения с сервера.
Давайте сначала создадим интерфейс:
@RemoteServiceRelativePath("greet")
public interface MessageService extends RemoteService {
String sendMessage(String message) throws IllegalArgumentException;
}Аннотация @RemoteServiceRelativePath сопоставляет службу с относительным URL-адресом модуля /message . Служба сообщений должна расширяться от Удаленной службы интерфейса маркера для выполнения связи RPC .
Реализация Службы сообщений находится на стороне сервера:
public class MessageServiceImpl extends RemoteServiceServlet
implements MessageService {
public String sendMessage(String message)
throws IllegalArgumentException {
if (message == null) {
throw new IllegalArgumentException("message is null");
}
return "Hello, " + message + "!
Time received: "
+ LocalDateTime.now();
}
}Наш класс сервера простирается от RemoteServiceServlet базового класса сервлетов . Он автоматически десериализует входящие запросы от клиента и сериализует исходящие ответы от сервера .
Теперь давайте посмотрим, как мы используем его со стороны клиента. Служба сообщений является только окончательной версией нашей службы .
Для работы на стороне клиента нам необходимо создать асинхронную версию нашего сервиса:
public interface MessageServiceAsync {
void sendMessage(String input, AsyncCallback callback)
throws IllegalArgumentException;
} Здесь мы видим дополнительный аргумент в методе GetMessage () . Нам нужно async уведомить пользовательский интерфейс о завершении асинхронного вызова . Таким образом, мы предотвращаем блокировку рабочего потока пользовательского интерфейса.
6. Компоненты и их жизненный цикл
SDK предлагает некоторые элементы пользовательского интерфейса и макеты для проектирования графических интерфейсов.
В общем случае все компоненты пользовательского интерфейса расширяются из класса Widget . Визуально у нас есть виджеты элементов, которые мы можем видеть, нажимать или перемещать по экрану:
- виджеты компонентов – Текстовое поле , Текстовая область , Кнопка , РадиоБуттон , Флажок и т. Д…
и есть виджеты макета или панели, которые составляют и организуют экран:
- виджеты панели – HorizontalPanel , VerticalPanel , PopupPanel , TabPanel и т. Д…
Каждый раз, когда мы добавляем виджет или любой другой компонент в код, GWT усердно работает, чтобы связать элемент представления с DOM браузера .
Конструктор всегда инициализирует корневой элемент DOM. Когда мы прикрепляем дочерний виджет к родительскому компоненту, он также вызывает привязку на уровне DOM . Класс точки входа содержит функцию загрузки, которая будет вызвана первой. Именно здесь мы определяем наши виджеты.
7. Точка входа
Давайте внимательно рассмотрим основную точку входа приложения:
public class Google_web_toolkit implements EntryPoint {
private MessageServiceAsync messageServiceAsync = GWT.create(MessageService.class);
public void onModuleLoad() {
Button sendButton = new Button("Submit");
TextBox nameField = new TextBox();
nameField.setText("Hi there");
sendButton.addStyleName("sendButton");
RootPanel.get("nameFieldContainer").add(nameField);
RootPanel.get("sendButtonContainer").add(sendButton);
}
}Каждый класс пользовательского интерфейса реализует com.google.gwt.core.client.EntryPoint интерфейс, чтобы пометить его как основную запись для модуля . Он подключается к соответствующему HTML-документу, в котором выполняется код java.
Мы можем определить компоненты пользовательского интерфейса GWT и назначить их HTML-тегам с тем же заданным идентификатором. Класс точки входа переопределяет метод точки входа onModuleLoad () , который вызывается автоматически при загрузке модуля .
Здесь мы создаем компоненты пользовательского интерфейса, регистрируем обработчики событий, изменяем DOM браузера.
Теперь давайте посмотрим, как мы создадим наш экземпляр удаленного сервера. Для этой цели мы используем GWT.create(MessageService.class) статический метод.
Он определяет запрошенный тип во время компиляции. Видя этот метод, компилятор GWT генерирует множество версий кода во время компиляции, только одна из которых должна быть загружена конкретным клиентом во время начальной загрузки во время выполнения . Эта функция широко используется в вызовах RPC.
Здесь мы также определяем Кнопку и Текстовое поле виджеты. Чтобы добавить их в дерево DOM, мы используем RootPanel класс . Это корневая панель и возвращает одноэлементное значение для привязки элементов виджета:
RootPanel.get("sendButtonContainer").add(sendButton);Во-первых, он получает корневой контейнер, помеченный sendButtonContainer id. После того, как мы прикрепим кнопку отправить к контейнеру.
8. HTML
Внутри папки /webapp у нас есть Google_web_toolkit.html файл.
Мы можем пометить элементы тегов конкретными идентификаторами, чтобы фреймворк мог связать их в объекты Java :
Sample GWT Application
| Please enter your message: | |
Теги с идентификаторами nameFieldContainer и sendButtonContainer будут сопоставлены компонентам Button и TextBox .
9. Дескриптор основного модуля
Давайте посмотрим на типичную конфигурацию Google_web_toolkit.gwt.xml файл дескриптора основного модуля:
Мы делаем основные материалы GWT доступными, включая пользователя com.google.gwt.Пользователь интерфейс . Кроме того, мы можем выбрать таблицу стилей по умолчанию для нашего приложения. В этом случае это *.clean.Чистый .
Другие доступные варианты укладки: *. dark.Темный , *.стандарт.Стандартный , *.chrome.Хром . Клиент com.baeldung.Google_web_toolkit также отмечен здесь тегом <точка входа/> .
10. Добавление Обработчиков Событий
Для управления событиями ввода с помощью мыши или клавиатуры GWT будет использовать некоторые обработчики. Все они расширяются из интерфейса EventHandler и имеют метод с аргументом типа события .
В нашем примере мы регистрируем обработчик событий щелчка мыши.
Это приведет к срабатыванию метода onClick() при каждом нажатии кнопки :
closeButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
vPanel.hide();
sendButton.setEnabled(true);
sendButton.setFocus(true);
}
});Здесь мы можем изменить состояние и поведение виджета. В нашем примере мы скрываем панель | и включаем кнопку отправить .
Другой способ-определить внутренний класс и реализовать необходимые интерфейсы:
class MyHandler implements ClickHandler, KeyUpHandler {
public void onClick(ClickEvent event) {
// send message to the server
}
public void onKeyUp(KeyUpEvent event) {
if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
// send message to the server
}
}
}В дополнение к clickHandler , мы также включаем здесь интерфейс KeyUpHandler для отслеживания событий нажатия клавиш. Здесь внутри метода onKeyUp() мы можем использовать событие KeyUp , чтобы проверить, нажал ли пользователь клавишу Enter .
И вот как мы используем класс MyHandler для регистрации обоих обработчиков событий:
MyHandler handler = new MyHandler(); sendButton.addClickHandler(handler); nameField.addKeyUpHandler(handler);
11. Вызов сервера
Теперь мы готовы отправить сообщение на сервер. Мы выполним удаленный вызов процедуры с помощью асинхронного метода send Message () .
Вторым параметром метода является AsyncCallback interface, где String – тип возвращаемого значения соответствующего синхронного метода :
messageServiceAsync.sendMessage(textToServer, new AsyncCallback() { public void onFailure(Throwable caught) { serverResponseLabel.addStyleName("serverResponseLabelError"); serverResponseLabel.setHTML("server error occurred"); closeButton.setFocus(true); } public void onSuccess(String result) { serverResponseLabel.setHTML(result); vPanel.setVisible(true); } });
Как мы видим, приемник реализует |/onSuccess(строковый результат) | и OnFailure(выбрасываемый) |/метод для каждого типа ответа .
В зависимости от результата ответа мы либо устанавливаем сообщение об ошибке “произошла ошибка сервера”, либо отображаем значение результата в контейнере.
12. Стиль CSS
При создании проекта с помощью плагина eclipse он автоматически сгенерирует файл Google_web_toolkit.css в каталоге /webapp и свяжет его с основным HTML-файлом.
Конечно, мы можем программно определить пользовательские стили для конкретных компонентов пользовательского интерфейса:
sendButton.addStyleName("sendButton");Здесь мы назначаем стиль CSS с именем класса sendButton нашему компоненту send Button :
.sendButton {
display: block;
font-size: 16pt;
}13. Результат
В результате у нас есть это простое веб-приложение:
Здесь мы отправляем сообщение “Привет” на сервер и печатаем ответ “Привет, привет!” на экране.
14. Заключение
В этой краткой статье мы узнали об основах GWT Framework . После этого мы обсудили архитектуру, жизненный цикл, возможности и различные компоненты его SDK.
В результате мы узнали, как создать простое веб-приложение.
И, как всегда, полный исходный код учебника доступен на GitHub .