GWT, использование UIBinder и истории просмотра страниц

В самом простом варианте создания пользовательского интерфейса google предлагает создавать панели и кнопки программно. А человеческая мысль вообще-то уже давненько пришла к тому, что интерфейс надо отделять от кода. Но гугл подготовился и упрекнуть его не в чем. Он подготовился настолько хорошо, что не нужно даже подключать никаких дополнительных библиотек. Технология UIBinder уже встроена в базовую библиотеку gwt-servlet.jar. И одним из бонусов её использования является готовая русификация. Весь текст, введённый на русском языке в ресурсных файлах, такими же буквами будет показан пользователю.

Англоязычный источник от самого гугла находится здесь.

Для примера создадим пару страниц:

1. страница авторизации с полями ввода логина и пароля и кнопкой входа.
2. главная страница, откуда будет простор для перехода во все закаулки сайта.

В папке client нужно создать пару шаблонов и соответствующих им java-файлов (соответствие заключается в одинаковости имён без расширений)
LoginPage.ui.xml

<?xml version="1.0" encoding="UTF-8"?>
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g="urn:import:com.google.gwt.user.client.ui">

<g:HorizontalPanel width="100%" height="100%">
<g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">

<g:VerticalPanel spacing="10">
<g:TextBox ui:field="login" styleName="input"/>
<g:PasswordTextBox ui:field="password" styleName="input"/>
<g:Button ui:field="signin" text="войти" styleName="button"/>
</g:VerticalPanel>

</g:cell>
</g:HorizontalPanel>

</ui:UiBinder>

Первым вложенным в главный тег <ui:UiBinder> является тег <g:HorizontalPanel>, поэтому соответствующий java-класс должен содержать интерфейс, расширяющий UiBinder с параметрами HorizontalPanel, LoginPage.

Также в шаблоне упомянуты:

• TextBox с именем login
• PasswordTextBox с именем password
• Button с именем signin

поэтому все они и только они должны быть использованы в соответствующем java-классе. У всех этих элементов есть параметр styleName. Это чтобы всё было красиво. Соответствующие стили надо описывать в файле стилей css, лежащем в папке /war/WEB-INF и имеющем имя созданного проекта.

LoginPage.java

package ru.andrew.smsbinder.client;

import com.google.gwt.core.shared.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.History;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.PasswordTextBox;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;

public class LoginPage extends Composite {
interface LoginUiBinder extends UiBinder<HorizontalPanel, LoginPage> {
};

private static LoginUiBinder uiBinder = GWT.create(LoginUiBinder.class);

@UiField
TextBox login;
@UiField
PasswordTextBox password;
@UiField
Button signin;

public LoginPage() {
super();
initWidget(uiBinder.createAndBindUi(this));
login.getElement().setAttribute("placeHolder", "логин");
password.getElement().setAttribute("placeHolder", "пароль");

signin.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
History.newItem("mainPage");
RootPanel.get().clear();
RootPanel.get().add(new MainPage());
}
});
}
}

Этот класс содержит, повторюсь, описание интерфейса LoginUiBinder, который:

• расширяет стандартный интерфейс UiBinder
• в качестве параметров принимает
• HorizontalPanel - имя первого тега, вложенного в главный тег соответствующего шаблона
• LoginPage - имя нашего класса

В следующей строке создаётся экземпляр этого интерфейса uiBinder, который инстанциируется с помощью команды GWT.create().
Также в этом классе есть три вышеобозначеных поля, помеченных аннотациями @UiField.

И последнее, что есть в этом классе - его конструктор. Его существенными строками являются:

• вызов super-конструктора
• магическая строка initWidget(uiBinder.createAndBindUi(this));, без которой ничего не будет работать
• работа с элементами интерфейса. Здесь, например, мы присвоили полям логина и пароля так называемые плейсхолдеры, которые будут появляться в этих полях, когда они пусты. Также мы прикрепили к кнопке обработчик её нажатия. При нажатии на кнопку будет происходить переход на вторую страницу нашего приложения, и в стек истории будет занесена запись о посещении этой второй страницы.

MainPage.ui.xml
<?xml version="1.0" encoding="UTF-8"?>
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g="urn:import:com.google.gwt.user.client.ui">

<g:HorizontalPanel width="100%" height="100%">
<g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">

<g:VerticalPanel spacing="10">
<g:TextBox ui:field="phone" styleName="input" />
<g:TextBox ui:field="name" styleName="input" />
<g:Button ui:field="saveContact" text="сохранить" styleName="button" />
<g:TextArea ui:field="message" styleName="input" visibleLines="5" characterWidth="50" />
<g:Button ui:field="sendMessage" text="отправить" styleName="button" />
</g:VerticalPanel>

</g:cell>
</g:HorizontalPanel>

</ui:UiBinder>

Ничего нового здесь, кажется, нет. Просто новый шаблон с пятью новыми полями.

MainPage.java

package ru.andrew.smsbinder.client;

import com.google.gwt.core.shared.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.History;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextArea;
import com.google.gwt.user.client.ui.TextBox;

public class MainPage extends Composite {

interface MainPageUiBinder extends UiBinder<HorizontalPanel, MainPage>{};
private static MainPageUiBinder uiBinder = GWT.create(MainPageUiBinder.class);

@UiField
TextBox phone;
@UiField
TextBox name;
@UiField
Button saveContact;
@UiField
TextArea message;
@UiField
Button sendMessage;

public MainPage(){
super();
initWidget(uiBinder.createAndBindUi(this));
phone.getElement().setAttribute("placeHolder", "телефон");
name.getElement().setAttribute("placeHolder", "имя контакта");
message.getElement().setAttribute("placeHolder", "сообщение");

sendMessage.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
History.newItem("loginPage");
RootPanel.get().clear();
RootPanel.get().add(new LoginPage());
}
});

}
}

Вообще-то, опять вся та же структура, переменная uiBinder, являющаяся экземпляром класса MainPageUiBinder, 5 полей, описанных в шаблоне, и конструктор, в котором к полям прикреплены плейсхолдеры, а по кнопке происходит переход на страницу логина и в стек истории будет занесена запись о посещении страницы логина.

Последним действием надо отредактировать файл - точку входа в наше приложение. По умолчанию он лежит в пакете client, называется также как ваш проект и имеет расширение java. Вычищаем всё в методе и заменяем его кодом:

public void onModuleLoad(){
RootPanel.get().add(new LoginPage());
History.newItem("loginPage");

History.addValueChangeHandler(new ValueChangeHandler<String>() {
public void onValueChange(ValueChangeEvent<String> event) {
String historyToken = event.getValue();
System.out.println("call for history" + historyToken);
try {
if("mainPage".equals(historyToken)){
RootPanel.get().clear();
RootPanel.get().add(new MainPage());
}else if("loginPage".equals(historyToken)){
RootPanel.get().clear();
RootPanel.get().add(new LoginPage());
}else{
throw new IndexOutOfBoundsException("no! " + historyToken);
}
} catch (IndexOutOfBoundsException e) {
e.printStackTrace();
}
}
});
}

В этом коде первая строка говорит, какую страницу загружать, вторая добавляет в стек истории запись об этой странице, а весь последующий код ответственен за работу историю в браузере - какую страницу и с какими данными следует отображать, когда пользователь жмёт в браузере кнопки Back / Forward.

Ну всё, можно запускать, кликать на кнопки и любоваться.

Run As > Web Application