Einführung in Vaadin

1. Übersicht

Vaadin ist ein serverseitiges Java-Framework zum Erstellen von Webbenutzeroberflächen. Damit können wir unser Front-End mithilfe von Java-Funktionen erstellen.

2. Maven-Abhängigkeiten und Setup

Beginnen wir mit dem Hinzufügen der folgenden Abhängigkeiten zu unserer pom.xml :

 com.vaadin vaadin-server   com.vaadin vaadin-client-compiled   com.vaadin vaadin-themes  

Die neuesten Versionen der Abhängigkeiten finden Sie hier: Vaadin-Server, Vaadin-Client-kompiliert, Vaadin-Themes.

  • Vaadin-Server- Paket - Enthält Klassen für die Verarbeitung aller Serverdetails wie Sitzungen, Client-Kommunikation usw.
  • vaadin-client-compiled - basiert auf GWT und enthält die erforderlichen Pakete zum Kompilieren des Clients
  • Vaadin-Themen - Enthält einige vorgefertigte Themen und alle Dienstprogramme zum Erstellen unserer Themen

Um unsere Vaadin-Widgets zu kompilieren, müssen wir das Maven-War-Plugin, das Vaadin-Maven-Plugin und das Maven-Clean-Plugin konfigurieren. Überprüfen Sie für den vollständigen POM die POM-Datei im Quellcode - am Ende des Tutorials.

Außerdem müssen wir das Vaadin-Repository und das Abhängigkeitsmanagement hinzufügen:

  vaadin-addons //maven.vaadin.com/vaadin-addons      com.vaadin vaadin-bom 13.0.9 pom import   

Das DependencyManagement- Tag steuert Versionen aller Vaadin- Abhängigkeiten.

Um die Anwendung schnell auszuführen, verwenden wir das Jetty-Plugin:

 org.eclipse.jetty jetty-maven-plugin 9.3.9.v20160517  2 true  

Die neueste Version des Plugins finden Sie hier: jetty-maven-plugin.

Mit diesem Plugin können wir unser Projekt mit dem folgenden Befehl ausführen:

mvn jetty:run

3. Was ist Vaadin?

Einfach ausgedrückt ist Vaadin ein Java-Framework zum Erstellen von Benutzeroberflächen mit Themen und Komponenten sowie vielen Erweiterungsoptionen.

Das Framework deckt auch die Serverseite ab. Das bedeutet, dass jede Änderung, die Sie an der Benutzeroberfläche vornehmen, sofort an den Server gesendet wird. Die Backend-Anwendung weiß also in jedem Moment, was im Frontend passiert.

Vaadin besteht aus einer Client- und einer Serverseite. Die Clientseite basiert auf dem bekannten Google Widget Toolkit-Framework und die Serverseite wird vom VaadinServlet verwaltet .

4. Das Servlet

Normalerweise verwendet eine Vaadin-Anwendung keine web.xml- Datei. Stattdessen definiert es sein Servlet mithilfe von Anmerkungen:

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

In diesem Fall stellt dieses Servlet Inhalte aus dem Pfad / VAADIN bereit .

5. Die Hauptklasse

Die VaadinUI- Klasse, auf die im Servlet verwiesen wird, muss die UI-Klasse aus dem Framework erweitern und die init- Methode überschreiben , um das Bootstrapping der Anwendung mit aktiviertem Vaadin abzuschließen.

Der nächste Schritt besteht darin, ein Layout zu erstellen und es einem Hauptlayout der Anwendung hinzuzufügen:

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 Manager

Das Framework enthält eine Reihe vordefinierter Layout-Manager.

6.1. VerticalLayout

Stapeln Sie die Komponenten in einer Spalte, in der sich die erste hinzugefügte oben und die letzte unten befindet:

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

Beachten Sie, wie die Eigenschaften hier lose aus der typischen CSS-Terminologie entlehnt sind.

6.2. HorizontalLayout

Bei diesem Layout wird jede Komponente von links nach rechts nebeneinander platziert. Dies ähnelt dem vertikalen Layout:

HorizontalLayout horizontalLayout = new HorizontalLayout();

6.3. Gitterstruktur

Dieses Layout platziert jedes Widget in einem Raster. Sie müssen die Spalten und Zeilen des Rasters als Parameter übergeben:

GridLayout gridLayout = new GridLayout(3, 2);

6.4. FormLayout

Das Formularlayout fügt die Beschriftung und die Komponente in zwei verschiedene Spalten ein und kann optionale Indikatoren für erforderliche Felder enthalten:

FormLayout formLayout = new FormLayout();

7. Vaadin-Komponenten

Nachdem das Layout behandelt wurde, werfen wir einen Blick auf einige der gängigsten Komponenten für die Erstellung unserer Benutzeroberfläche.

7.1. Etikette

Das Etikett ist natürlich auch bekannt - und wird einfach zur Anzeige von Text verwendet:

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

Beachten Sie nach dem Erstellen der Komponente den entscheidenden Schritt zum Hinzufügen zum Layout.

7.2. Verknüpfung

Das Link- Widget ist im Wesentlichen ein grundlegender Hyperlink:

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

Beachten Sie, wie die typischen HTML-Werte eines Element sind alle hier.

7.3. Textfeld

This widget is used to input text:

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

We can further customize the elements; for example, we can quickly add images to the widgets via the setIcon() API.

Also, note that Font Awesome is shipped out of the box with the framework; it's defined as an Enum, and we can easily make use of it.

7.4. TextArea

As you'd expect, TextArea is available next to the rest of the traditional HTML elements:

TextArea textArea = new TextArea();

7.5. DateField and InlineDateField

This powerful component is used to pick dates; the date parameter is the current date to be selected in the widget:

DateField dateField = new DateField("DateField", LocalDate.ofEpochDay(0));

We can go further and nest it inside a combo box control to save space:

InlineDateField inlineDateField = new InlineDateField();

7.6. PasswordField

This is the standard masked password input:

PasswordField passwordField = new PasswordField();

7.7. RichTextArea

With this component, we can show formatted text, and it provides an interface to manipulate such text with buttons to control the fonts, size, alignment, etc.are:

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

7.8. Button

Buttons are used for capturing user input and come in a variety of sizes and colors.

To create a button we instantiate the widget class as usual:

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

Changing the style we can have some different buttons:

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");

We can create a disabled button:

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

A native button that uses the browser's look:

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

And a button with an icon:

Button iconButton = new Button("Icon Button"); iconButton.setIcon(VaadinIcons.ALIGN_LEFT); buttonLayout.addComponent(iconButton);

7.9. CheckBox

The check box is a change state element, is checked or is unchecked:

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

7.10. Lists

Vaadin has some useful widgets to handle lists.

First, we create a list of our items to be placed in the widget:

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

The ComboBox is a drop down list:

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

The ListSelect vertically places items and uses a scroll bar in case of overflow:

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

The NativeSelect is like the ComboBox but have the browser look and feel:

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

The TwinColSelect is a dual list where we can change the items between these two panes; each item can only live in one of the panes at a time:

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

7.11. Grid

The grid is used to show data in a rectangular way; you have rows and columns, can define header and foot for the data:

Grid grid = new Grid(Row.class); grid.setColumns("column1", "column2", "column3"); Row row1 = new Row("Item1", "Item2", "Item3"); Row row2 = new Row("Item4", "Item5", "Item6"); List rows = new ArrayList(); rows.add(row1); rows.add(row2); grid.setItems(rows);

The Row class above is a simple POJO we've added to represent a row:

public class Row { private String column1; private String column2; private String column3; // constructors, getters, setters }

8. Server Push

Another interesting feature is an ability to send messages from the server to the UI.

To use server push, we need to add the following dependency to our pom.xml:

 com.vaadin vaadin-push 8.8.5 

The latest version of the dependency can be found here: vaadin-push.

Also, we need to add the @Push annotation to our class representing UI:

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

We create a label to capture the server push message:

private Label currentTime;

We then create a ScheduledExecutorService that sends the time from the server to the label:

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

The ScheduledExecutorService is running on the server side of the application and every time it runs, the user interface gets updated.

9. Data Binding

We can bind our user interface to our business classes.

First, we create a Java class:

public class BindData { private String bindName; public BindData(String bindName){ this.bindName = bindName; } // getter & setter }

Then we bind our class that has a single field to a TextField in our user interface:

Binder binder = new Binder(); BindData bindData = new BindData("BindData"); binder.readBean(bindData); TextField bindedTextField = new TextField(); binder.forField(bindedTextField).bind(BindData::getBindName, BindData::setBindName);

First, we create a BindData object using the class we created before, then the Binder binds the field to the TextField.

10. Validators

We can create Validators to validate the data in our input fields. To do that, we attach the validator to the field we want to validate:

BindData stringValidatorBindData = new BindData(""); TextField stringValidator = new TextField(); Binder stringValidatorBinder = new Binder(); stringValidatorBinder.setBean(stringValidatorBindData); stringValidatorBinder.forField(stringValidator) .withValidator(new StringLengthValidator("String must have 2-5 characters lenght", 2, 5)) .bind(BindData::getBindName, BindData::setBindName);

Then we validate our data before we use it:

Button buttonStringValidator = new Button("Validate String"); buttonStringValidator.addClickListener(e -> stringValidatorBinder.validate());

In this case, we are using the StringLengthValidator that validates the length of a String but Vaadin provides other useful validators and also allows us to create our custom validators.

11. Summary

Of course, this quick writeup barely scratched the surface; the framework is much more than user interface widgets, Vaadin provides all you need for creating modern web applications using Java.

Und wie immer ist der Code auf Github zu finden.