TOC

Введение в Ваадин

1. Обзор

Vaadin - это серверная Java-инфраструктура для создания веб-пользовательских интерфейсов.

Используя его, мы можем создать наш интерфейс, используя функции Java.

2. Зависимости и настройки Maven

Давайте начнем с добавления следующих зависимостей в наш pom.xml : 

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-server</artifactId>
</dependency>
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-client-compiled</artifactId>
</dependency>
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-themes</artifactId>
</dependency>

Последние версии зависимостей можно найти здесь:

vaadin-server , vaadin-client-compiled , vaadin-themes .

  • vaadin-server package - включает в себя классы для обработки всего сервера

такие детали, как сеансы, общение с клиентами и т. д.

  • vaadin-client-compiled - основан на GWT и включает в себя необходимые

пакеты для компиляции клиента ** vaadin-themes - включает некоторые готовые темы и все утилиты для

делая наши темы

Чтобы скомпилировать наши виджеты Vaadin, нам нужно настроить https://search.maven.org/classic/#search%7Cgav%7C1%7Cg%3A%22org.apache.maven.plugins%22%20AND%20a%3A% 22maven-war-plugin% 22[maven-war-plugin], https://search.maven.org/classic/#search%7Cgav%7C1%7Cg%3A%22com.vaadin%22%20AND%20a%3A% 22vaadin-maven-plugin% 22[vaadin-maven-plugin]и https://search.maven.org/classic/#search%7Cgav%7C1%7Cg%3A%22org.apache.maven.plugins%22% 20and% 20a% 3A% 22maven-чистые плагины% 22[Maven-плагин очистки].

Для полной pom, обязательно проверьте файл pom в исходном коде - в конце учебника.

Также нам необходимо добавить репозиторий Vaadin и управление зависимостями: 

<repositories>
    <repository>
        <id>vaadin-addons</id>
        <url>http://maven.vaadin.com/vaadin-addons</url>
    </repository>
</repositories>
<dependencyManagement>
    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-bom</artifactId>
            <version>8.0.7</version>
            <type>pom</type>
            <scope>import</scope>
        </dependency>
    </dependencies>
</dependencyManagement>

Тег DependencyManagement контролирует версии всех Vaadin dependencies.

Чтобы быстро запустить приложение, мы будем использовать плагин Jetty: 

<plugin>
    <groupId>org.eclipse.jetty</groupId>
    <artifactId>jetty-maven-plugin</artifactId>
    <version>9.2.22.v20170606</version>
    <configuration>
        <scanIntervalSeconds>2</scanIntervalSeconds>
        <skipTests>true</skipTests>
    </configuration>
</plugin>

Последнюю версию плагина можно найти здесь:

jetty-maven-plugin .

С помощью этого плагина мы можем запустить наш проект с помощью команды: 

mvn jetty:run

3. Что такое Ваадин?

Проще говоря, Vaadin - это инфраструктура Java для создания пользовательских интерфейсов ** , с темами и компонентами, а также множеством возможностей расширения.

  • Фреймворк распространяется и на серверную сторону ** , что означает, что каждое изменение, которое вы вносите в пользовательский интерфейс, немедленно отправляется на сервер - так что в любой момент бэкэнд-приложение знает, что происходит во внешнем интерфейсе.

  • Vaadin состоит из клиентской и серверной части ** - со стороны клиента, построенной поверх хорошо известной платформы Google Widget Toolkit, а со стороны сервера - VaadinServlet .

** 4. Сервлет

**

Обычно приложение Vaadin не использует файл web.xml ; вместо этого он определяет свой servlet с помощью аннотаций: 

@WebServlet(urlPatterns = "/** ", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = VaadinUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {}

В этом случае этот сервлет обслуживает контент из корневого пути.

** 5. Основной класс

**

Класс VaadinUI , на который ссылается сервлет, должен расширять класс пользовательского интерфейса из инфраструктуры и должен переопределять метод init для завершения начальной загрузки приложения с включенным Vaadin.

Следующим шагом является создание макета и добавление его в основной макет приложения: 

public class VaadinUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        VerticalLayout verticalLayout = new VerticalLayout();
        verticalLayout.setSpacing(true);
        verticalLayout.setMargin(true);
        setContent(verticalLayout);
}

** 6. Vaadin Layout Managers

**

Фреймворк поставляется с несколькими предопределенными менеджерами компоновки.

6.1. VerticalLayout

Сложите компоненты в столбец, где первый добавленный находится сверху, а последний - снизу: 

VerticalLayout verticalLayout = new VerticalLayout();
verticalLayout.setSpacing(true);
verticalLayout.setMargin(true);
setContent(verticalLayout);

Обратите внимание, что свойства здесь свободно заимствованы из типичной терминологии CSS.

6.2. HorizontalLayout

Эта компоновка размещает каждый компонент рядом слева направо аналогично вертикальной компоновке: 

HorizontalLayout horizontalLayout = new HorizontalLayout();

6.3. Макет сетки

Этот макет помещает каждый виджет в сетку, вам нужно передать в качестве параметра столбцы и строки сетки: 

GridLayout gridLayout = new GridLayout(3, 2);

6.4. FormLayout

Макет формы помещает заголовок и компонент в два разных столбца и может иметь дополнительные индикаторы для обязательных полей: 

FormLayout formLayout = new FormLayout();

** 7. Ваадин Компоненты

**

Теперь, когда макет обработан, давайте рассмотрим некоторые наиболее распространенные компоненты для создания нашего пользовательского интерфейса.

** 7.1. Этикетка

**

ссылка:/uploads/label.png[]

Метка, конечно, также хорошо известна - и просто используется для отображения текста: 

Label label = new Label();
label.setId("LabelID");
label.setValue("Label Value");
label.setCaption("Label");
gridLayout.addComponent(label);

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

** 7.2. Ссылка на сайт

**

ссылка:/uploads/link.png[]

Виджет link по сути является базовой гиперссылкой: 

Link link = new Link("Baeldung",
  new ExternalResource("http://www.baeldung.com/"));
link.setTargetName("__blank");

Обратите внимание, как все типичные значения HTML элемента <a> находятся здесь.

** 7.3. TextField

**

ссылка:/uploads/textfield.png[]

Этот виджет используется для ввода текста: 

TextField textField = new TextField();
textField.setIcon(FontAwesome.USER);

Мы можем дополнительно настроить элементы; Например, мы можем быстро добавить изображения в виджеты через API setIcon () .

Также обратите внимание, что Font Awesome поставляется из коробки с рамкой ; он определен как Enum, и мы можем легко его использовать.

** 7.4. TextArea

**

ссылка:/uploads/textarea.png[]

Как и следовало ожидать, TextArea доступен рядом с остальными традиционными элементами HTML: 

TextArea textArea = new TextArea();

** 7.5. DateField и InlineDateField

**

ссылка:/uploads/datefield.png[]

Этот мощный компонент используется для выбора даты; Параметр даты - это текущая дата, которая будет выбрана в виджете: 

DateField dateField = new DateField("DateField", new Date(0));

ссылка:/uploads/inlinedatefield-277x300.png%20277w[]

Мы можем пойти дальше и вложить его в combo box элемент управления для экономии места 

InlineDateField inlineDateField = new InlineDateField();

** 7.6. PasswordField

**

ссылка:/uploads/passwordfield.png[]

Это стандартный ввод маскированного пароля: 

PasswordField passwordField = new PasswordField();

** 7.7. RichTextArea

**

ссылка:/uploads/richtextarea-300x174.png%20300w[]

С помощью этого компонента мы можем отображать форматированный текст, и он предоставляет интерфейс для управления таким текстом с помощью кнопок для управления шрифтами, размером, выравниванием и т. Д. 

RichTextArea richTextArea = new RichTextArea();
richTextArea.setCaption("Rich Text Area");
richTextArea.setValue("<h1>RichTextArea</h1>");
richTextArea.setSizeFull();
Panel richTextPanel = new Panel();
richTextPanel.setContent(richTextArea);

** 7.8. Button

**

ссылка:/uploads/buttons-300x162.png%20300w[]

Кнопки используются для захвата пользовательского ввода и бывают разных размеров и цветов.

Чтобы создать кнопку, мы создаем класс виджета как обычно: 

Button normalButton = new Button("Normal Button");

Изменяя стиль, мы можем использовать несколько разных кнопок: 

tinyButton.addStyleName("tiny");
smallButton.addStyleName("small");
largeButton.addStyleName("large");
hugeButton.addStyleName("huge");
dangerButton.addStyleName("danger");
friendlyButton.addStyleName("friendly");
primaryButton.addStyleName("primary");
borderlessButton.addStyleName("borderless");
linkButton.addStyleName("link");
quietButton.addStyleName("quiet");

Мы можем создать отключенную кнопку: 

Button disabledButton = new Button("Disabled Button");
disabledButton.setDescription("This button cannot be clicked");
disabledButton.setEnabled(false);
buttonLayout.addComponent(disabledButton);

Собственная кнопка, которая использует внешний вид браузера: 

NativeButton nativeButton = new NativeButton("Native Button");
buttonLayout.addComponent(nativeButton);

И кнопка со значком: 

Button iconButton = new Button("Icon Button");
iconButton.setIcon(FontAwesome.ALIGN__LEFT);
buttonLayout.addComponent(iconButton);

** 7.9. CheckBox

**

ссылка:/uploads/checkbox.png[]

Флажок является элементом изменения состояния, установлен или не установлен: 

CheckBox checkbox = new CheckBox("CheckBox");
checkbox.setValue(true);
checkbox.addValueChangeListener(e ->
  checkbox.setValue(!checkbox.getValue()));
formLayout.addComponent(checkbox);

** 7.10. Lists

**

Vaadin имеет несколько полезных виджетов для обработки списков.

Сначала мы создаем список наших элементов для размещения в виджете: 

List<String> numbers = new ArrayList<>();
numbers.add("One");
numbers.add("Ten");
numbers.add("Eleven");

ComboBox - это выпадающий список:

ссылка:/uploads/combobox-300x168.png%20300w[] 

ComboBox comboBox = new ComboBox("ComboBox");
comboBox.addItems(numbers);
formLayout.addComponent(comboBox);

ListSelect размещает элементы по вертикали и использует полосу прокрутки в случае переполнения:

ссылка:/uploads/listselect.png[] 

ListSelect listSelect = new ListSelect("ListSelect");
listSelect.addItems(numbers);
listSelect.setRows(2);
formLayout.addComponent(listSelect);

NativeSelect похож на ComboBox , но имеет внешний вид браузера:

ссылка:/uploads/nativeselect.png[] 

NativeSelect nativeSelect = new NativeSelect("NativeSelect");
nativeSelect.addItems(numbers);
formLayout.addComponent(nativeSelect);

TwinColSelect - это двойной список, в котором мы можем изменять элементы между этими двумя панелями; каждый элемент может жить только на одной из панелей за раз:

ссылка:/uploads/twincolselect-300x206.png%20300w[] 

TwinColSelect twinColSelect = new TwinColSelect("TwinColSelect");
twinColSelect.addItems(numbers);

** 7.11. Grid

**

Сетка используется для отображения данных в прямоугольной форме; у вас есть строки и столбцы, вы можете определить заголовок и ногу для данных:

ссылка:/uploads/grid-300x261.png%20300w[] 

Grid grid = new Grid("Grid");
grid.setColumns(new Object[]{"Column1", "Column2", "Column3"});
grid.addRow(new Object[]{"Item1", "Item2", "Item3"});
grid.addRow(new Object[]{"Item4", "Item5", "Item6"});

** 8. Сервер Push

**

Еще одна интересная особенность - возможность отправлять сообщения с сервера на пользовательский интерфейс.

Чтобы использовать push-сервер, нам нужно добавить следующую зависимость в наш __pom.xml: 

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-push</artifactId>
    <versionId>8.0.7</versionId>
</dependency>

Последнюю версию зависимости можно найти здесь:

vaadin-push .

Также нам нужно добавить аннотацию @ Push в наш класс, представляющий пользовательский интерфейс: 

@Push
@Theme("mytheme")
public class VaadinUI extends UI {...}

Мы создаем метку для захвата push-сообщения сервера: 

private Label currentTime;

Затем мы создаем ScheduledExecutorService , который отправляет время с сервера на label : 

ScheduledExecutorService scheduleExecutor = Executors.newScheduledThreadPool(1);
Runnable task = () -> {
    currentTime.setValue("Current Time : " + Instant.now());
};
scheduleExecutor.scheduleWithFixedDelay(task, 0, 1, TimeUnit.SECONDS);

ScheduledExecutorService работает на стороне сервера приложения, и каждый раз, когда он запускается, пользовательский интерфейс обновляется.

** 9. Привязка данных

**

Мы можем связать наш пользовательский интерфейс с нашими бизнес-классами.

Сначала мы создаем класс Java: 

public class BindData {

    private String bindName;

    public BindData(String bindName){
        this.bindName = bindName;
    }

   //getter & setter
}

Затем мы связываем наш класс с единственным полем с TextField в нашем пользовательском интерфейсе: 

BindData bindData = new BindData("BindData");
BeanFieldGroup beanFieldGroup = new BeanFieldGroup(BindData.class);
beanFieldGroup.setItemDataSource(bindData);
TextField bindedTextField
  = (TextField) beanFieldGroup.buildAndBind("BindName", "bindName");

Сначала мы создаем объект BindData , используя класс, который мы создали ранее, затем BeanFieldGroup связывает поле с TextField.

** 10. Validators

**

Мы можем создать Validators для проверки данных в наших полях ввода. Для этого мы присоединяем валидатор к полю, которое мы хотим проверить: 

TextField stringValidator = new TextField();
stringValidator.addValidator(
  new StringLengthValidator("String must have 2-5 characters lenght", 2, 5, true));
stringValidator.setValidationVisible(false);

Затем мы проверяем наши данные, прежде чем использовать их: 

Button buttonStringValidator = new Button("Validate String");
buttonStringValidator.addClickListener(e -> {
    try {
        stringValidator.setValidationVisible(false);
        stringValidator.validate();
    } catch (InvalidValueException err) {
        stringValidator.setValidationVisible(true);
    }
});

В этом случае мы используем StringLengthValidator, который проверяет длину String , но Vaadin предоставляет другие полезные валидаторы, а также позволяет нам создавать наши собственные валидаторы.

11. Резюме

Конечно, эта быстрая рецензия едва царапала поверхность; Фреймворк гораздо больше, чем виджеты пользовательского интерфейса, Vaadin предоставляет все необходимое для создания современных веб-приложений с использованием Java.

И, как всегда, код можно найти over на Github .

Related