gwt jug basic

Google Web Toolkit

Введение в средство разработки пользовательского WEB интерфейса

Anton Antonov

anton.antonov@sigmaukraine.com

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) { _ this.@com.sigmaukraine.jug.jsni.client.J 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