Всем хабражителям доброго времени суток!
Я начинающий Java-программист и так уж получилось, что свою карьеру я начинаю с разработки серьезного приложения на GWT. На хабре довольно много статей на тему GWT, однако почему-то совсем нет информации о замечательном фреймворке GWT-Platform. Подробно познакомиться с данным фреймворком можно тут, а я расскажу вкратце об основах работы на примере простого приложения.
Наше приложение будет содержать в себе навигационную панель, на которой расположены кнопки для переключения текущего вида. А также две колонки, в которые мы будем вставлять нужный контент в зависимости от ситуации. Две колонки я сделал для наглядности. В реальной жизни понадобилась бы одна конечно.
Если нажать на кнопку в навбаре, то откроется либо левая часть приложения, либо правая с бессмысленным текстом.
По умолчанию открывается левая колонка, на которой находится кнопка вызова диалогового окна для ввода имени и фамилии. После нажатия кнопки подтверждения эти данные передаются в правую колонку и отображаются.
Итак, для начала нам нужно создать GWT проект в IDE. Для работы с GWTP нам потребуется добавить в проект библиотеки: guice-2.0.jar, guice-3.0.jar, gwtp-all-1.0.jar, aopalliance.jar, guice-assistedinject-3.0.jar. Также я добавил gwt-bootstrap-2.2.2.0-SNAPSHOT.jar чтобы добавить “красоты” приложению.
Можно установить в Eclipse gwt-platform плагин. Он сильно облегчает жизнь. С его помощью можно создавать как новые проекты, так и связки презентер-вью. Качается по этой ссылке: plugin.gwt-platform.googlecode.com/hg/update
Приступим:
Нужно создать клиентский модуль и Ginjector. Если приложение создавать с помощью плагина, то они будут созданы автоматически:
В методе configure () мы будем биндить наши презентеры с интерфейсами и имплементацией их вью.
public class ClientModule extends AbstractPresenterModule {
@Override
protected void configure() {
install(new DefaultModule(ClientPlaceManager.class));
bindPresenter(MainPagePresenter.class, MainPagePresenter.MyView.class,
MainPageView.class, MainPagePresenter.MyProxy.class);
bindConstant().annotatedWith(DefaultPlace.class).to(NameTokens.main);
}
}
@GinModules({ DispatchAsyncModule.class, ClientModule.class })
public interface ClientGinjector extends Ginjector {
EventBus getEventBus();
PlaceManager getPlaceManager();
Provider<MainPagePresenter> getMainPagePresenter();
}
Далее наша точка входа: Тут мы говорим нашему placemanager перейти на текущую страницу (place). То есть если у нас в адресной строке браузера был введен какой-то токен, определяющий необходимый place, то мы попадем туда. Конечно при условии что мы имеем доступ. (За это может отвечать например GateKeeper).
public class HabraTest implements EntryPoint {
private final ClientGinjector ginjector = GWT.create(ClientGinjector.class);
@Override
public void onModuleLoad() {
DelayedBindRegistry.bind(ginjector);
ginjector.getPlaceManager().revealCurrentPlace();
}
}
Не буду заострять внимание на работе с place. На хабре уже было много замечательных статей по GWT. Например эта.
Я же покажу как можно создавать небольшие GWT приложения без использования place (точнее с одним place).
Для начала создадим главный презентер нашего приложения:
public class MainPagePresenter extends
Presenter<MainPagePresenter.MyView, MainPagePresenter.MyProxy> implements MainPageUiHandlers, FirstPageEvent.Handler{
public interface MyView extends View, HasUiHandlers<MainPageUiHandlers> {
}
// идентификаторы слотов для вставки соответствующего презентера
public final static Object SLOT_FIRST_PAGE = new Object();
public final static Object SLOT_SECOND_PAGE = new Object();
//вложенные презентеры
private FirstPagePresenter firstPagePresenter;
private SecondPagePresenter secondPagePresenter;
@ProxyStandard
@NameToken(NameTokens.main)
public interface MyProxy extends ProxyPlace<MainPagePresenter> {
}
private EventBus eventBus;
private final PlaceManager placeManager;
// инжектим вложенные презентеры
@Inject
public MainPagePresenter(final EventBus eventBus, final MyView view,
FirstPagePresenter firstPagePresenter,
SecondPagePresenter secondPagePresenter,
final MyProxy proxy, final PlaceManager placeManager) {
super(eventBus, view, proxy);
this.placeManager = placeManager;
this.firstPagePresenter = firstPagePresenter;
this.secondPagePresenter = secondPagePresenter;
this.eventBus = eventBus;
// назначаем себя обработчиком событий вью
getView().setUiHandlers(this);
eventBus.addHandler(FirstPageEvent.getType(), this);
}
// внедряем себя в главный презентер приложения
@Override
protected void revealInParent() {
RevealRootContentEvent.fire(this, this);
}
@Override
protected void onBind() {
super.onBind();
// по умолчанию будет загружена первая страница
getView().setInSlot(SLOT_FIRST_PAGE, firstPagePresenter);
}
// вызывается при нажатии левой кнопки в MainPageView
@Override
public void onRightBtnClicked() {
showRightContent();
MainPageEvent mainPageEvent = new MainPageEvent( MainPageEvent.Action.SHOW_LOREM_IPSUM);
eventBus.fireEvent(mainPageEvent);
}
// аналогично при нажатии правой
@Override
public void onLeftBtnClicked() {
showLeftContent();
}
public void showLeftContent() {
removeFromSlot(SLOT_SECOND_PAGE, secondPagePresenter);
getView().setInSlot(SLOT_FIRST_PAGE, firstPagePresenter);
}
public void showRightContent() {
removeFromSlot(SLOT_FIRST_PAGE, firstPagePresenter);
getView().setInSlot(SLOT_SECOND_PAGE, secondPagePresenter);
}
@Override
public void onFirstPageEvent(FirstPageEvent event) {
// закрываем левый контент и открываем правый, в который через эвент передаем имя и фамилию
showRightContent();
MainPageEvent mainPageEvent = new MainPageEvent( MainPageEvent.Action.SHOW_FORM_RESULT, event.getFirstName(), event.getLastName());
eventBus.fireEvent(mainPageEvent);
}
}
Обратите внимание на то что мы заинжектили в конструкторе FirstPagePresenter firstPagePresenter, SecondPagePresenter secondPagePresenter.
Это будут presenter — виджеты представляющие левую и правую часть приложения (то есть в теории отдельные страницы);
В GWTP есть три основных типа презентеров:
- Перезентеры, которые являются еще и place
- Перезентеры-виджеты(PresenterWidget)
- Презентеры-виджеты, представляющие собой Popup окно
Presenter-place испульзуются для создания отдельных страниц приложения, для навигации по которым можно использовать так называемые токены, добавленые в адрессной строке браузера.
Каждый такой презентер должен содержать аннотацию, которая указывает какой токен привязан к презентеру.
В нашем случае мы используем только один такой презентер.
Для смены «страниц» мы будем использовать систему слотов и презентер-виджеты помещенные в слоты.
Презентер-виджет это презентер который не обязательно является синглтоном. Он может имет множество независимых instance.
Благодаря системе слотов мы можем бесконечно вкладывать презентеры внутри других презентеров. Чтобы поместить презентер-виджет в другой презентер, нам необходимо определить слоты в родительском презентере и переопределить метод setInSlot() во вью родительского презентера.
В классе MainPagePresenter видно что слот это просто Object:
public final static Object SLOT_FIRST_PAGE = new Object();
public final static Object SLOT_SECOND_PAGE = new Object();
В соответствующем вью определяем правила вставки презентеров в слот:
public class MainPageView extends ViewWithUiHandlers<MainPageUiHandlers> implements MainPagePresenter.MyView {
// главная панель приложения
@UiField HTMLPanel main;
// навигационная панель
@UiField ResponsiveNavbar navbar;
// кнопки навигации
@UiField Button firstPageBtn, secondPageBtn;
private static MainPageViewUiBinder uiBinder = GWT
.create(MainPageViewUiBinder.class);
interface MainPageViewUiBinder extends UiBinder<Widget, MainPageView> {
}
// колонки для вставки контента
@UiField Column leftColumn, rightColumn;
@Inject
public MainPageView() {
uiBinder.createAndBindUi(this);
navbar.setInverse(true);
//обработчики для кнопок
firstPageBtn.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
getUiHandlers().onLeftBtnClicked();
}
});
secondPageBtn.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
getUiHandlers().onRightBtnClicked();
}
});
}
@Override
public Widget asWidget() {
return main;
}
// переопределяем метод вставки презентеров в слот
@Override
public void setInSlot(Object slot, IsWidget content) {
if(slot == MainPagePresenter.SLOT_FIRST_PAGE ) {
leftColumn.add(content);
}
else if(slot == MainPagePresenter.SLOT_SECOND_PAGE ){
rightColumn.add(content);
}
else {
super.setInSlot(slot, content);
}
}
// аналогично переопределяем метод удаления из слота
@Override
public void removeFromSlot(Object slot, IsWidget content) {
if(slot == MainPagePresenter.SLOT_FIRST_PAGE ) {
leftColumn.remove(content);
}
else if(slot == MainPagePresenter.SLOT_SECOND_PAGE ){
rightColumn.remove(content);
}
else {
super.removeFromSlot(slot, content);
}
}
}
Все довольно просто: setInSlot() принимает в себя презентер и соответствующий ему слот.
Мы просто указываем в какой виджет поместить этот презентер. В данном случае это две бутстраповские колонки leftColumn и rightColumn.
Хотя я повторюсь в данном случае уместней было бы помещать все в одну колонку, чтобы имитировать переход по страницам.
Далее наши презентер-виджеты и их вью:
public class FirstPagePresenter extends
PresenterWidget<FirstPagePresenter.MyView> implements FirstPageUiHandlers, PopupEvent.Handler{
public interface MyView extends View, HasUiHandlers<FirstPageUiHandlers> {
}
// попап с формой
FirstPagePopupPresenter firstPagePopupPresenter;
EventBus eventBus;
@Inject
public FirstPagePresenter(final EventBus eventBus, final MyView view,
FirstPagePopupPresenter firstPagePopupPresenter ) {
super(eventBus, view);
this.firstPagePopupPresenter = firstPagePopupPresenter;
this.eventBus = eventBus;
getView().setUiHandlers(this);
// назначаем себя хендлером PopupEvent
eventBus.addHandler(PopupEvent.getType(), this);
}
@Override
public void onShowFormBtnClicked() {
// показываем всплывающее окно с формой
showForm(true);
}
private void showForm(boolean show) {
if(show){
addToPopupSlot(firstPagePopupPresenter, true);
firstPagePopupPresenter.getView().show();
}
else {
removeFromPopupSlot(firstPagePopupPresenter);
}
}
@Override
public void onPopupEvent(PopupEvent event) {
showForm(false);
eventBus.fireEvent(new FirstPageEvent(event.getFirstName(), event.getLastName()));
}
}
Обратите внимание что я заинжектил некий FirstPagePopupPresenter firstPagePopupPresenter.(код будет ниже). Это наше всплывающее окно с формой. Аналогично можно инжектить любые презентер-виджеты в любом количестве и с любой вложенностью. Главное не нарушать иерархию.
public class FirstPageView extends ViewWithUiHandlers<FirstPageUiHandlers> implements
FirstPagePresenter.MyView {
private final Widget widget;
@UiField Button showFormBtn;
public interface Binder extends UiBinder<Widget, FirstPageView> {
}
@Inject
public FirstPageView(final Binder binder) {
widget = binder.createAndBindUi(this);
showFormBtn.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
getUiHandlers().onShowFormBtnClicked();
}
});
}
@Override
public Widget asWidget() {
return widget;
}
}
Во вью особо ничего интересного, кроме того, что оно наследует типизированный класс ViewWithUiHandlers.
Так как мы не хотим нарушать принципов MVP, то и не можем обращаться к презентеру напрямую из вью( наоборот можем). Для этого мы используем интерфейсы. О нажатии кнопки мы сообщаем с помощью getUiHandlers().onShowFormBtnClicked();
public interface FirstPageUiHandlers extends UiHandlers{
void onShowFormBtnClicked();
}
getUiHandlers() возвращает нам интерфейс FirstPageUiHandlers, в котором мы указываем методы, которые должны быть реализованы в соответствующем презентере. Естественно что презентер должен имплементировать данный интерфейс, а вложенный в него интерфейс MyView должен наследовать типизированный интерфейс HasUiHandlers. И главное не забыть в презентере назначить себя обработчиком для событий вью — getView().setUiHandlers(this);
Далее презентер и соответствующий вью второй страницы:
public class SecondPagePresenter extends
PresenterWidget<SecondPagePresenter.MyView> implements MainPageEvent.Handler {
public interface MyView extends View {
void showLoremIpsum();
void showFormInfo(String firstName, String lastName);
}
EventBus eventBus;
@Inject
public SecondPagePresenter(final EventBus eventBus, final MyView view) {
super(eventBus, view);
this.eventBus = eventBus;
eventBus.addHandler(MainPageEvent.getType(), this);
}
@Override
public void onMainPageEvent(MainPageEvent event) {
switch(event.getAction()) {
case SHOW_FORM_RESULT:
showFormInfoWidget(event.getFirstName(), event.getLastName());
break;
case SHOW_LOREM_IPSUM:
showLoremIpsumWidget();
break;
default:
break;
}
}
private void showLoremIpsumWidget() {
getView().showLoremIpsum();
}
private void showFormInfoWidget(String firstName, String lastName) {
getView().showFormInfo( firstName, lastName);
}
public class SecondPageView extends ViewImpl implements
SecondPagePresenter.MyView {
private final Widget widget;
@UiField FlowPanel contentPanel;
public interface Binder extends UiBinder<Widget, SecondPageView> {
}
@Inject
public SecondPageView(final Binder binder) {
widget = binder.createAndBindUi(this);
}
@Override
public Widget asWidget() {
return widget;
}
@Override
public void showLoremIpsum() {
contentPanel.clear();
contentPanel.add(new LoremIpsumWidget());
}
@Override
public void showFormInfo(String firstName, String lastName) {
contentPanel.clear();
contentPanel.add(new FormInfoWidget(firstName, lastName));
}
}
Тут особо ничего интересного и нового для разработчика на GWT. Общение между презентерами происходит посредством стандартных эвентов ( GwtEvent ).
И наконец попап с формой:
public class FirstPagePopupPresenter extends
PresenterWidget<FirstPagePopupPresenter.MyView> implements PopupUiHandlers {
public interface MyView extends PopupView , HasUiHandlers<PopupUiHandlers>{
}
EventBus eventBus;
@Inject
public FirstPagePopupPresenter(final EventBus eventBus, final MyView view) {
super(eventBus, view);
this.eventBus = eventBus;
getView().setUiHandlers(this);
}
@Override
public void onSubmitBtnClicked(String firstName, String lastName) {
eventBus.fireEvent(new PopupEvent(firstName, lastName));
}
}
public class FirstPagePopupView extends PopupViewWithUiHandlers<PopupUiHandlers> implements
FirstPagePopupPresenter.MyView {
@UiField PopupPanel main;
@UiField Button submitBtn;
@UiField TextBox firstName, lastName;
public interface Binder extends UiBinder<Widget, FirstPagePopupView> {
}
@Inject
public FirstPagePopupView(final EventBus eventBus, final Binder binder) {
super(eventBus);
binder.createAndBindUi(this);
main.setAnimationEnabled(true);
main.setModal(true);
main.setGlassEnabled(true);
submitBtn.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
getUiHandlers().onSubmitBtnClicked(firstName.getValue(), lastName.getValue());
}
});
}
@Override
public Widget asWidget() {
return main;
}
}
Как видно попап тоже является презентер-виджетом, но интерфейс его вью должен наследовать PopupView. И еще главная панель вью должна быть обязательно PopupPanel, ну или наследником данного класса. Еще одно отличие от обычных презентер-виджетов — чтобы показать попап на странице не нужен слот и панель для вставки. Достаточно использовать метод addToPopupSlot();
Также во всех связках презентер-вью использован uibinder. Соответствующие *ui.xml файлы я не выкладываю. Там в принципе ничего для GWT-разработчиков интересного нет.
Сам проект будет доступен некоторое время по этому адресу
И так а сейчас пробежимся по проекту что бы описать что происходит и как связаны презентеры между собой:
При загрузке MainPagePresenter в переопределенном методе onBind() мы сразу же ставим в слот презентер первой страницы:
@Override
protected void onBind() {
super.onBind();
getView().setInSlot(SLOT_FIRST_PAGE, firstPagePresenter);
}
(Про жизненный цикл презентеров и методы onBind(), onUnbind, onReveal(), onReset(), onHide() я бы хотел рассказать в следующей статье.)
Соответственно в левой части экрана появляется вью FirstPagePresenter'a. При клике на кнопку мы вызываем имплементацию метода onShowFormBtnClicked() в FirstPagePresenter описанного в интерфейсе FirstPageUiHandlers
Вызов:
showFormBtn.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
getUiHandlers().onShowFormBtnClicked();
}
});
в FirstPagePresenter' e происходит следующее:
addToPopupSlot(firstPagePopupPresenter, true);
Мы сетим презентер попапа в слот. Как я уже упоминал, для попапов слот не нужно определять. Единственное условие, что презентер из которого вызывается попап должен сам находится в слоте родителя и так далее по цепочке. Второй параметр в методе addToPopupSlot() указывает центровать ли попап в окне приложения(метод имеет несколько перегрузок и данный параметр в общем-то необязателен).
После того как попап появляется в окне, мы можем ввести туда какие-то данные и нажать кнопку подтверждения. Далее по аналогичной схеме вью попапа через getUiHandlers() вызывает обработчик в своем презентере, а тот в свою очередь кидает через EventBus эвент, на который подписан FirstPagePresenter (если кому-то интересно, то про эвенты в GWT я бы мог рассказать в следующей заметке):
@Override
public void onPopupEvent(PopupEvent event) {
showForm(false);
eventBus.fireEvent(new FirstPageEvent(event.getFirstName(), event.getLastName()));
}
Сначала в методе showForm() мы удаляем попап из слота:
removeFromPopupSlot(firstPagePopupPresenter);
Затем кидаем новый эвент ( теперь это FirstPageEvent) дальше. На него подписан наш MainPagePresenter:
@Override
public void onFirstPageEvent(FirstPageEvent event) {
// закрываем левый контент и открываем правый , в который через эвент передаем имя и фамилию
showRightContent();
MainPageEvent mainPageEvent = new MainPageEvent( MainPageEvent.Action.SHOW_FORM_RESULT, event.getFirstName(), event.getLastName());
eventBus.fireEvent(mainPageEvent);
}
Получив его MainPagePresenter удаляет из слота первую страницу и вставляет вторую:
public void showRightContent() {
removeFromSlot(SLOT_FIRST_PAGE, firstPagePresenter);
getView().setInSlot(SLOT_SECOND_PAGE, secondPagePresenter);
}
Далее он полылает уже MainPageEvent дальше. В него сетит не только имя и фамилию, но и Action.
Наш SecondPagePresenter получив эвент в методе onMainPageEvent() решает что показать на странице. В данном случае это обычные виджеты без презентеров.
@Override
public void onMainPageEvent(MainPageEvent event) {
switch(event.getAction()) {
case SHOW_FORM_RESULT:
showFormInfoWidget(event.getFirstName(), event.getLastName());
break;
case SHOW_LOREM_IPSUM:
showLoremIpsumWidget();
break;
default:
break;
}
}
Вот собственно и все. Наверное, некоторым может показаться что для таких простых действий слишком много кода, но:
- Мы не нарушаем принципов MVP — вью ничего не должно знать о своем презентере
- Разделив приложение на модули код становится reusable и более гибким
Также наверняка некоторые возмутятся — зачем такие длинные цепочки передачи эвентов? Однако можно заметить, что получив эвент, презентер, перед отправкой следующего, делает какие-либо операции. Например, удаляет ненужные более презентеры или обрабатывает как-то полученные данные.
В общем надеюсь данная заметка окажется кому-либо полезной и он обратит свой взор в сторону GWT-Platform.
PS: Прошу прощения за некую сумбурность повествования и возможные ошибки. Это мой первый пост на IT-тематику. Обоснованная критика и советы очень приветствуются.
Автор: timych
