Google Web Toolkit
Введение в средство разработки пользовательского WEB интерфейса
Anton Antonov
2011
Содержание
Трудности
GWT решение
Как работает GWT?
Возможности GWT
Паттерны и библиотеки
WEB приложение: трудности
GWT решение
Дружественная для разработчиков
– Совместимость с IDE, отладка, рефакторинг, строгая типизация…
Не зависит от реализации и платформы сервера
– Java (Tomcat, Jboss, и т.д.)– PHP/CGI (Apache)– .Net (IIS)
GWT: основной принцип
Пишем код на Java
Компилируем Java код в JavaScript
JavaScript выполняется в браузере
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!"); } }); }}
Более полезные приложения
Google Wave– https://wave.google.com
Google AdWords– https://adwords.google.com
А так же много других– http://gwtgallery.appspot.com
GWT Архитектура
http://www.slideshare.net/dgirard/introduction-to-google-web-toolkit
Виджеты
http://gwt.google.com/samples/Showcase/Showcase.html
Поддержка истории (back button)
Одностраничный интерфейс с поддержкой истории
GWT ShowCase - как пример
History.addValueChangeHandler(new ValueChangeHandler<String>() {
public void onValueChange(ValueChangeEvent<String> stringValueChangeEvent) {
//do something on history change
}
});
Декларативный интерфейс (UiBinder)
Разделение Вида от Поведения
XML вместо Java кода
Шаблонизация виджетов и их взаимного расположения
Интеграция с внешними ресурсами (CSS, картинки)
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()); } }); }
Сериализуемые типы
java.io.Serializable совместимая*– Наследник java.io.Serializable– Конструктор без аргументов (или без конструктора) любой видимости– Все non-final и non-transient поля должны быть сериализуемы
Мост из Java в JavaScript (JSNI)
Возможность вызова JS методов из GWT Java кода
private native void someJSFunction(Date value) /*-{
$wnd.someJSFunction(value);
}-*/;
Возможность вызова GWT методов из JS кода– Код на следующем слайде
Существует множество обверток над существующими JS библиотеками (Google Charts, JQuery и т.д.)
Можно легко писать свои обвертки
JavaScript Overlay типы
private native void registerGWTFunction() / *-{ var _ this = this; $wnd.registeredGWTFunction = function (v) { _ [email protected] SNI ::j sAccessibleFunction (Lcom/ sigmaukraine/ jug/ jsni/ client/ overlay/ J SOverlay;) (v); }; }-*/ ; private void jsAccessibleFunction(J SOverlay overlay) { Window.alert("I 'm GWT:\nstr:" + overlay.getStr() + "\nvalue:" + overlay.getValue()); }
Оптимизация
Cross-browser поддержка
Скомпилированный JavaScript оптимизирован
Только необходимое API грузится браузером (пермутация)– IE грузит JS только для IE, FireFox – JS только для FF– Неиспользуемое API исключается из скомпилированного JS
Сборка ресурсов
1 запрос вместо 12
ClientBundle– CSSResource– ImageResource– TextResource– И т.д. (
http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#ClientBundle )
Разделение кода
Отдельные части большого приложения загружаются по требованию
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())); }});
Отладка
Отладка скомпилированного JS
Это возможно!
Достаточно изменить один параметр компилятора– -style pretty
Зачастую в этом нет необходимости*– * это пока единственный способ отладки JSNI методов
JUnit тестирование
Возможность тестирование не «родного» кода непосредственно с помощью JUnit
GWTTestCase в противном случае– Позволяет тестировать логику виджетов, которые используют DOM модель,
DeferredBinding или JSNI.
Интеграция с IDE
MVP (GWT pattern)
Model– Модель данных, бизнес модель
View– Отображение данных (UiBinder widget, GWT plain widget, etc.)
Presenter– Поведение или логика
Activities & Places (GWT pattern)
Место (Place)– Состояние UI конвертируемое в/из URL hash (#...)
Активность (Activity)– Инкапсуляция действия пользователя
• Wake up• Set up• Show up
– Обычно приводит к смене «места»
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
Q&A
Recommended
