Документ представляет собой введение в Google Web Toolkit (GWT) как средство разработки пользовательских веб-интерфейсов, описывая его возможности, архитектуру и примеры использования. Основное внимание уделяется принципам работы GWT, включая компиляцию Java-кода в JavaScript и поддержку AJAX и RPC. Также рассматриваются паттерны проектирования, такие как MVP (Model-View-Presenter), и интеграция с внешними ресурсами и библиотеками.

1. Google Web Toolkit
Введение в средство разработки
пользовательского WEB интерфейса
Anton Antonov
anton.antonov@sigmaukraine.com
2011

2. Содержание
Трудности
GWT решение
Как работает GWT?
Возможности GWT
Паттерны и библиотеки

3. WEB приложение: трудности

4. GWT решение
Дружественная для
разработчиков
– Совместимость с IDE,
отладка, рефакторинг,
строгая типизация…
Не зависит от
реализации и платформы
сервера
– Java (Tomcat, Jboss, и т.д.)
– PHP/CGI (Apache)
– .Net (IIS)

5. GWT: основной принцип
Пишем код на Java
Компилируем Java код в JavaScript
JavaScript выполняется в браузере

6. GWT: HelloWorld
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
RootPanel panel = RootPanel.get();
Label message = new Label("Hello World!!!");
panel.add(message);
Button button = new Button("Click ME");
panel.add(button);
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
Window.alert("Hello World!");
}
});
}
}

7. Более полезные приложения
Google Wave
– https://wave.google.com
Google AdWords
– https://adwords.google.com
А так же много других
– http://gwtgallery.appspot.com

8. GWT Архитектура
http://www.slideshare.net/dgirard/introduction-to-google-web-toolkit

9. Виджеты
http://gwt.google.com/samples/Showcase/Showcase.html

10. Поддержка истории (back button)
Одностраничный интерфейс с поддержкой истории
GWT ShowCase - как пример
History.addValueChangeHandler(new ValueChangeHandler<String>() {
public void onValueChange(ValueChangeEvent<String>
stringValueChangeEvent) {
//do something on history change
}
});

11. Декларативный интерфейс (UiBinder)
Разделение Вида от Поведения
XML вместо Java кода
Шаблонизация виджетов и их взаимного расположения
Интеграция с внешними ресурсами (CSS, картинки)

12. AJAX: RPC это просто
private void getData() {
DataServiceAsync rpc = (DataServiceAsync) GWT.create(DataService.class);
rpc.getDataModel(5, 6, new AsyncCallback<DataModel>() {
public void onFailure(Throwable throwable) {
Window.alert("Unable get data from server"
+ throwable);
}
public void onSuccess(DataModel dataModel) {
Window.alert("Server response:n"
+ dataModel.getDataString()
+ dataModel.getDataInt());
}
});
}

13. Сериализуемые типы
java.io.Serializable совместимая*
– Наследник java.io.Serializable
– Конструктор без аргументов (или без конструктора) любой видимости
– Все non-final и non-transient поля должны быть сериализуемы

14. Мост из Java в JavaScript (JSNI)
Возможность вызова JS методов из GWT Java кода
private native void someJSFunction(Date value) /*-{
$wnd.someJSFunction(value);
}-*/;
Возможность вызова GWT методов из JS кода
– Код на следующем слайде
Существует множество обверток над существующими JS
библиотеками (Google Charts, JQuery и т.д.)
Можно легко писать свои обвертки

15. JavaScript Overlay типы
private native void registerGWTFunction() /*-{
var _this = this;
$wnd.registeredGWTFunction = function (v) {
_this.@com.sigmaukraine.jug.jsni.client.JSNI
::jsAccessibleFunction
(Lcom/sigmaukraine/jug/jsni/client/overlay/JSOverlay;)
(v);
};
}-*/;
private void jsAccessibleFunction(JSOverlay overlay) {
Window.alert("I'm GWT:nstr:"
+ overlay.getStr() + "nvalue:"
+ overlay.getValue());
}

17. Оптимизация

18. Cross-browser поддержка
Скомпилированный JavaScript оптимизирован
Только необходимое API грузится браузером (пермутация)
– IE грузит JS только для IE, FireFox – JS только для FF
– Неиспользуемое API исключается из скомпилированного JS

19. Сборка ресурсов
1 запрос вместо 12
ClientBundle
– CSSResource
– ImageResource
– TextResource
– И т.д.
(http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#ClientBundle )

20. Разделение кода
Отдельные части большого приложения загружаются по
требованию
GWT.runAsync(new RunAsyncCallback() {
public void onFailure(Throwable reason) {
Window.alert("Can't load script part");
}
public void onSuccess() {
//The following code will be loaded on demand
root.add(new HelloWorldPanel(textCell.getValue()));
}
});

22. Отладка

23. Отладка скомпилированного JS
Это возможно!
Достаточно изменить один параметр компилятора
– -style pretty
Зачастую в этом нет необходимости*
– * это пока единственный способ отладки JSNI методов

24. JUnit тестирование
Возможность тестирование не «родного» кода
непосредственно с помощью JUnit
GWTTestCase в противном случае
– Позволяет тестировать логику виджетов, которые используют DOM модель,
DeferredBinding или JSNI.
Интеграция с IDE

26. MVP (GWT pattern)
Model
– Модель данных, бизнес модель
View
– Отображение данных (UiBinder widget, GWT plain widget, etc.)
Presenter
– Поведение или логика

27. Activities & Places (GWT pattern)
Место (Place)
– Состояние UI конвертируемое в/из URL hash (#...)
Активность (Activity)
– Инкапсуляция действия пользователя
• Wake up
• Set up
• Show up
– Обычно приводит к смене «места»

28. GWT паттерны и библиотеки
MVP (Model View Presenter) GWT-Platform
– http://code.google.com/webtoolkit/articles/mvp-architecture.html
– http://code.google.com/p/gwt-platform/
Activities & Places
– http://code.google.com/webtoolkit/doc/latest/DevGuideMvpActivitiesAndPlaces.html
Gin (Dependency injection for GWT, based on Guice)
– http://code.google.com/p/google-gin/
Spring MVC RPC integration (gwt-widget SL)
– http://gwt-widget.sourceforge.net/gwt-sl/reference-1.0/index.html

29. Q&A