Шаблон приложения намеренно краткий, чтобы сделать его легко читать и понимать для новичка. Все «движущиеся части» пользовательского интерфейса собраны в одном классе, MyUI.
Добавление большего количества виджетов и поведения к этому MyUI быстро становится громоздким. Есть много подходов, которые вы можете предпринять, чтобы разбить свое приложение на разные части, так как Ваадин в этом отношении довольно гибкий. Я опишу свой подход.
В настоящей работе я держу класс MyUI как можно короче. В качестве подкласса UI, то MyUI представляет всю область просмотра содержимого, отображаемого либо:
- окно веб-браузера или вкладки (общий способ использования Vaadin)
- Прямоугольник из Portlet зрения (если ваш Vaadin приложение встраиваются в веб-страницы)
другими словами, UI класс является просто пустой холст, который знает, как поместиться внутри прямоугольной области просмотра хозяина. Задача UI заключается в посредничестве между видовым пространством хоста и содержимым Vaadin. Управление деталями этого содержимого Vaadin лучше оставить для отдельного объекта, определенного как подклассы Layout. Таким образом, код UI становится проще, просто перетаскивая один или несколько объектов подкласса Layout.
Например, вы можете отобразить регистрацию в регионе Layout. Затем, если пользователь успешно аутентифицируется, вы отключите его Layout. Это место, где вы создаете новый подклассу Layout, чтобы отобразить основное содержание вашего приложения. Ваш код MyUI будет обрабатывать переключение с объекта макета LoginLayout изначально на замену с помощью объекта макета InvoiceListingLayout.
При запуске нового приложения Vaadin первое, что я делаю, это извлечь код для этого VerticalLayout и кнопку «Click Me» и перенести его в новый файл класса Java. Новый класс является расширением VerticalLayout, с конструктором, который устанавливает поле, кнопку и поведение кнопки.
Ниже приведен исходный код для этого нового класса, ClickMeLayout.Реальные макеты имеют гораздо больше кода, так что я обычно вспыхивают этот метод конструктора в три подпрограммы:
configure()
Установить атрибуты общей компоновки, такие как вызовы setSpacing и setMargins.widgets()
Установите каждое из виджетов на этот макет. Я почти всегда назначаю новые виджеты как частные переменные-члены в классе, а не как локальную переменную, как показано в исходном коде приложения-шаблона, сгенерированном Maven.arrange()
Добавить виджетов на макет в определенном порядке и на порядок. Часто это означает создание вложенных макетов в виде подгрупп виджетов.
Я также четко сформулировал синтаксис this., по своему усмотрению.
Новый класс, ClickMeLayout.java.
package com.example.vaadinlayoutsexample;
import com.vaadin.ui.Button;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;
/**
*
* @author Basil Bourque. Use freely, but only at your own risk entirely.
*/
public class ClickMeLayout extends VerticalLayout {
private TextField name = null;
private Button button = null;
public ClickMeLayout() {
this.configure();
this.widgets();
this.arrange();
}
private void configure() {
this.setMargin (true);
this.setSpacing (true);
}
private void widgets() {
// “Name” field
this.name = new TextField();
this.name.setCaption ("Type your name here:");
// “Click Me” button
this.button = new Button ("Click Me");
this.button.addClickListener (e -> {
this.addComponent (new Label ("Thanks " + this.name.getValue() + ", it works!"));
});
}
private void arrange() {
this.addComponent (this.name);
this.addComponent (this.button);
}
}
С этим классом установлено, мы можем вернуться к сокращению MyUI класса. Метод MyUI::init сжимается до одной строки кода.
@Override
protected void init (VaadinRequest vaadinRequest) {
this.setContent (new ClickMeLayout());
}
Удостоверьтесь, что все работает. Сделайте чистую и строящуюся в своем IDE. Запустите приложение, чтобы узнать, работает ли оно так, как оно было изначально.
Продолжайте строить свое реальное приложение. Скопируйте-вставьте код ClickMeLayout.java, создайте новый класс и вставьте его в качестве прототипа. Начните добавлять виджеты для создания своего нового Layout. Вернитесь к MyUI, чтобы прокомментировать, что одна строка с new ClickMeLayout(), скопировать-вставить эту строку, чтобы дублировать ее, и изменить дубликат, чтобы вызвать новый класс макета вместо ClickMeLayout.
@Override
protected void init (VaadinRequest vaadinRequest) {
// this.setContent (new ClickMeLayout());
this.setContent (new InvoiceListingLayout());
}
Я предложил сохранить ClickMeLayout вокруг постоянно в своем первоначальном состоянии. Я считаю, что это удобная проверка. В конце концов, когда ваше приложение, похоже, сгорит, вы можете не быть уверенным, что проблема в вашем собственном коде или некоторая ошибка с вашей IDE, вашим веб-контейнером (Tomcat, Jetty и т. Д.), Вашим веб-браузером или кто-знает-что , В этой ситуации вы можете вернуться к этому методу MyUI, отключить вызов вашего макета, снова включить линию, вызывающую new ClickMeLayout(), выполнить очистку и перестроить и запустить приложение. Если это выполняется успешно, вы знаете, что ошибка лежит в вашем коде.
Кстати, если этот новый синтаксис лямбда видел в addClickListener линии бросает тебя, вот эквивалентный код, используя старый синтаксис Java в качестве анонимного внутреннего класса.
this.button.addClickListener (new Button.ClickListener() {
@Override
public void buttonClick (Button.ClickEvent e) {
ClickMeLayout.this.addComponent (new Label ("Thanks" + ClickMeLayout.this.name.getValue() + ", it works!"));
}
});
