1. Überblick
Vaadin ist ein serverseitiges Java-Framework zum Erstellen von Web-Benutzeroberflächen.
Damit können wir unser Frontend mit Java-Funktionen erstellen.
2. Abhängigkeiten und Setup von Maven
Beginnen wir mit dem Hinzufügen der folgenden Abhängigkeiten zu unserer 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>Die neuesten Versionen der Abhängigkeiten finden Sie hier:
-
vaadin-server package - enthält Klassen zur Behandlung aller Server
Details wie Sitzungen, Client-Kommunikation usw.
-
vaadin-client-compiled - basiert auf GWT und beinhaltet notwendigerweise
Pakete zum Kompilieren des Clients ** vaadin-themes - enthält einige vorgefertigte Themen und alle Hilfsprogramme für
machen unsere themen
Um unsere Vaadin-Widgets zu kompilieren, müssen Sie das https://search.maven.org/classic/#search%7Cgav%7C1%7Cg%3A%22org.apache.maven.plugins%22%20a%3A% konfigurieren. 22maven-war-plugin% 22[maven-war-plugin], https://search.maven.org/classic/#search%7Cgav%7C1%7Cg%3A%22com.vaadin%22%20a%3a%3A% 22vaadin-maven-plugin% 22[Vaadin-maven-plugin]und das https://search.maven.org/classic/#search%7Cgav%7C1%7Cg%3A%22org.apache.maven.plugins%22% 20AND% 20a% 3A% 22maven-clean-plugin% 22[maven-clean-plugin].
Überprüfen Sie für das vollständige Pom die POM-Datei im Quellcode - am Ende des Lernprogramms.
Außerdem müssen wir das Vaadin-Repository und das Abhängigkeitsmanagement hinzufügen:
<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>Das DependencyManagement -Tag steuert die Versionen aller Vaadin- abhängigkeiten.
Um die Anwendung schnell auszuführen, verwenden wir das Jetty-Plugin:
<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>Die neueste Version des Plugins finden Sie hier:
Mit diesem Plugin können wir unser Projekt mit dem Befehl ausführen:
mvn jetty:run3. Was ist Vaadin?
-
Einfach ausgedrückt: Vaadin ist ein Java-Framework zum Erstellen von Benutzeroberflächen ** mit Designs und Komponenten sowie vielen Erweiterungsoptionen.
-
Das Framework deckt auch die Serverseite ab ** , was bedeutet, dass jede Änderung, die Sie an der Benutzeroberfläche vornehmen, sofort an den Server gesendet wird - die Back-End-Anwendung weiß also in jedem Moment, was im Front-End passiert.
-
Vaadin besteht aus einer Client- und einer Serverseite ** - wobei die Clientseite auf dem bekannten Google Widget Toolkit-Framework aufgebaut ist und die Serverseite vom VaadinServlet verwaltet wird.
** 4. Das Servlet
**
Normalerweise verwendet eine Vaadin-Anwendung keine web.xml -Datei. Stattdessen definiert es sein servlet mit Hilfe von Anmerkungen:
@WebServlet(urlPatterns = "/** ", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = VaadinUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {}In diesem Fall stellt dieses Servlet Inhalt aus dem Stammpfad 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.
Im nächsten Schritt erstellen Sie ein Layout und fügen es zu einem Hauptlayout der Anwendung hinzu:
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 zuerst hinzugefügte und die neueste unten befindet:
VerticalLayout verticalLayout = new VerticalLayout();
verticalLayout.setSpacing(true);
verticalLayout.setMargin(true);
setContent(verticalLayout);Beachten Sie, wie die Eigenschaften hier aus der typischen CSS-Terminologie entlehnt werden.
6.2. HorizontalLayout
Bei diesem Layout ist jede Komponente nebeneinander von links nach rechts ähnlich wie das vertikale 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 teilt die Beschriftung und die Komponente in zwei verschiedenen Spalten auf und kann optionale Indikatoren für erforderliche Felder enthalten:
FormLayout formLayout = new FormLayout();** 7. Vaadin-Komponenten
**
Nun, da das Layout verarbeitet ist, werfen wir einen Blick auf einige der gebräuchlichsten Komponenten für den Aufbau unserer Benutzeroberfläche.
** 7.1. Etikette
**
Das Etikett ist natürlich gut 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, um sie dem Layout hinzuzufügen.
** 7.2. Verknüpfung
**
Das link -Widget ist im Wesentlichen ein einfacher Hyperlink:
Link link = new Link("Baeldung",
new ExternalResource("http://www.baeldung.com/"));
link.setTargetName("__blank");Beachten Sie, wie die typischen HTML-Werte eines <a> -Elements hier sind.
** 7.3. Textfeld
**
Dieses Widget wird zur Eingabe von Text verwendet:
TextField textField = new TextField();
textField.setIcon(FontAwesome.USER);Wir können die Elemente weiter anpassen. Beispielsweise können wir den Widgets schnell Bilder über die setIcon () -API hinzufügen.
Beachten Sie auch, dass Font Awesome mit dem Framework aus der Box geliefert wird. Es ist als Enum definiert und wir können es leicht nutzen.
** 7.4. TextArea
**
Wie erwartet, steht TextArea neben den übrigen traditionellen HTML-Elementen zur Verfügung:
TextArea textArea = new TextArea();** 7.5. DateField und InlineDateField
**
Diese leistungsstarke Komponente wird zur Datumsauswahl verwendet. Der Datumsparameter ist das aktuelle Datum, das im Widget ausgewählt werden soll:
DateField dateField = new DateField("DateField", new Date(0));
Wir können weitergehen und es in einem combo box Steuerelement verschachteln, um Platz zu sparen:
InlineDateField inlineDateField = new InlineDateField();** 7.6. PasswordField
**
Dies ist die standardmäßige maskierte Passworteingabe:
PasswordField passwordField = new PasswordField();** 7.7. RichTextArea
**
Mit dieser Komponente können wir formatierten Text anzeigen und er bietet eine Schnittstelle, mit der dieser Text mit Schaltflächen bearbeitet werden kann, um Schriftarten, Größe, Ausrichtung usw. zu steuern.
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
**
Schaltflächen werden zur Erfassung von Benutzereingaben verwendet und sind in verschiedenen Größen und Farben erhältlich.
Um eine Schaltfläche zu erstellen, wird die Widget-Klasse wie üblich instanziiert:
Button normalButton = new Button("Normal Button");Beim Ändern des Stils können wir verschiedene Schaltflächen verwenden:
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");Wir können eine deaktivierte Schaltfläche erstellen:
Button disabledButton = new Button("Disabled Button");
disabledButton.setDescription("This button cannot be clicked");
disabledButton.setEnabled(false);
buttonLayout.addComponent(disabledButton);Eine native Schaltfläche, die das Aussehen des Browsers verwendet:
NativeButton nativeButton = new NativeButton("Native Button");
buttonLayout.addComponent(nativeButton);Und eine Schaltfläche mit einem Symbol:
Button iconButton = new Button("Icon Button");
iconButton.setIcon(FontAwesome.ALIGN__LEFT);
buttonLayout.addComponent(iconButton);
** 7.9.
CheckBox
**
Das Kontrollkästchen ist ein Änderungsstatuselement, das markiert ist oder nicht markiert ist:
CheckBox checkbox = new CheckBox("CheckBox");
checkbox.setValue(true);
checkbox.addValueChangeListener(e ->
checkbox.setValue(!checkbox.getValue()));
formLayout.addComponent(checkbox);** 7.10. Listen
**
Vaadin hat einige nützliche Widgets für den Umgang mit Listen.
Zuerst erstellen wir eine Liste unserer Elemente, die im Widget platziert werden sollen:
List<String> numbers = new ArrayList<>();
numbers.add("One");
numbers.add("Ten");
numbers.add("Eleven");Die ComboBox ist eine Dropdown-Liste:
ComboBox comboBox = new ComboBox("ComboBox");
comboBox.addItems(numbers);
formLayout.addComponent(comboBox);Die ListSelect platziert Elemente vertikal und verwendet bei Überlauf eine Bildlaufleiste:
ListSelect listSelect = new ListSelect("ListSelect");
listSelect.addItems(numbers);
listSelect.setRows(2);
formLayout.addComponent(listSelect);Der NativeSelect ist wie der ComboBox , aber der Browser sieht aus und fühlt sich an:
NativeSelect nativeSelect = new NativeSelect("NativeSelect");
nativeSelect.addItems(numbers);
formLayout.addComponent(nativeSelect);Die TwinColSelect ist eine doppelte Liste, in der die Elemente zwischen diesen beiden Bereichen geändert werden können. Jeder Gegenstand kann nur in einer der Fenster gleichzeitig leben:
TwinColSelect twinColSelect = new TwinColSelect("TwinColSelect");
twinColSelect.addItems(numbers);** 7.11. Gitter
**
Das Raster wird verwendet, um Daten rechteckig darzustellen. Sie haben Zeilen und Spalten, können Kopf- und Fußzeile für die Daten definieren:
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. Server-Push
**
Eine weitere interessante Funktion ist die Möglichkeit, Nachrichten vom Server an die Benutzeroberfläche zu senden.
Um Server-Push zu verwenden, müssen wir unserer pom.xml die folgende Abhängigkeit hinzufügen:
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-push</artifactId>
<versionId>8.0.7</versionId>
</dependency>Die neueste Version der Abhängigkeit finden Sie hier:
Außerdem müssen wir unserer Klasse, die die Benutzeroberfläche darstellt, die @ Push -Anmerkung hinzufügen:
@Push
@Theme("mytheme")
public class VaadinUI extends UI {...}Wir erstellen ein Label, um die Server-Push-Nachricht zu erfassen:
private Label currentTime;Dann erstellen wir einen ScheduledExecutorService , der die Zeit vom Server an das label sendet:
ScheduledExecutorService scheduleExecutor = Executors.newScheduledThreadPool(1);
Runnable task = () -> {
currentTime.setValue("Current Time : " + Instant.now());
};
scheduleExecutor.scheduleWithFixedDelay(task, 0, 1, TimeUnit.SECONDS);Der ScheduledExecutorService wird auf der Serverseite der Anwendung ausgeführt. Bei jeder Ausführung wird die Benutzeroberfläche aktualisiert.
** 9. Datenbindung
**
Wir können unsere Benutzeroberfläche an unsere Business-Klassen binden.
Zuerst erstellen wir eine Java-Klasse:
public class BindData {
private String bindName;
public BindData(String bindName){
this.bindName = bindName;
}
//getter & setter
}Dann binden wir unsere Klasse, die ein einzelnes Feld enthält, an ein TextField in unserer Benutzeroberfläche:
BindData bindData = new BindData("BindData");
BeanFieldGroup beanFieldGroup = new BeanFieldGroup(BindData.class);
beanFieldGroup.setItemDataSource(bindData);
TextField bindedTextField
= (TextField) beanFieldGroup.buildAndBind("BindName", "bindName");Zuerst erstellen wir ein BindData -Objekt mit der zuvor erstellten Klasse. Dann bindet die BeanFieldGroup das Feld an das TextField.
** 10. Validatoren
**
Wir können Validators erstellen, um die Daten in unseren Eingabefeldern zu überprüfen. Dazu fügen wir den Validator an das Feld an, das wir validieren möchten:
TextField stringValidator = new TextField();
stringValidator.addValidator(
new StringLengthValidator("String must have 2-5 characters lenght", 2, 5, true));
stringValidator.setValidationVisible(false);Dann validieren wir unsere Daten, bevor wir sie verwenden:
Button buttonStringValidator = new Button("Validate String");
buttonStringValidator.addClickListener(e -> {
try {
stringValidator.setValidationVisible(false);
stringValidator.validate();
} catch (InvalidValueException err) {
stringValidator.setValidationVisible(true);
}
});In diesem Fall verwenden wir den StringLengthValidator , der die Länge eines String überprüft, Vaadin stellt jedoch andere nützliche Validatoren bereit und ermöglicht uns auch die Erstellung unserer benutzerdefinierten Validatoren.
11. Zusammenfassung
Natürlich zerkratzte dieses schnelle Schreiben die Oberfläche kaum; Das Framework ist viel mehr als nur Widgets für Benutzeroberflächen. Vaadin bietet alles, was Sie zum Erstellen moderner Webanwendungen mit Java benötigen.
Und wie immer ist der Code über Github zu finden .