Vortrag auf dem Expertenkreis Java, 14.9.2017m GEDOPLAN GmbH, Bielefeld

1. Java-Webanwendungen mit Vaadin 8
Expertenkreis Java, 14.09.2017, GEDOPLAN
Hendrik Jungnitsch, GEDOPLAN GmbH

2. Vorteile Webanwendung ggü. Desktop-Anwendungen
Desktop-Anwendungen/Clients werden zunehmend von Web-GUIs
abgelöst
Logik und Daten zentral auf Server
Keine Installation von zusätzlicher Client-Software erforderlich
Bei Updates, kein Aktualisieren auf Clientseite notwendig
2

3. Problemstellung Webanwendung für Java-Entwickler
Zugrundeliegendes Konzept unterscheidet sich deutlich von
Desktop-Entwicklung
Zustandslosigkeit des HTTP-Protokolls
Nicht komponentenorientiert
Nicht eventgetrieben
Erfordert Kenntnisse nicht nur in Java, sondern auch
Webtechnologien
HTML, CSS, JavaScript, Ajax
3

4. Vaadin
Webframework für Java
Für JavaScript/Ajax-gestützte Webanwendungen
Entwickelt von Vaadin Ltd.
Opensource (Apache-Lizenz 2.0)
Aktuelle Version 8.x.x
4
(https://vaadin.com/)

5. Was bietet Vaadin ?
Framework für Web-Anwendungen
An Desktop-Entwicklung (z. B. Swing) angelehntes Programmiermodell
Abstraktion von Webtechnologien
Umfangreiches Widgetset an Komponenten
Eingabekomponenten, Tabellen, Trees, Menüs, usw.
Server- und clientseitige Entwicklung möglich
5

6. Grundlegende Funktionsweise
Besteht aus
Clientseitiger Engine mit Widgetset (JavaScript)
Serverseitiger Engine UI-Komponenten (Java)
UIs werden auf Serverseite mit Java-Objekten aufgebaut
Bei Aufruf einer Seite wird zuerst die JavaScript-Engine in den
Browser geladen
Synchronisation von Komponenten in Client und Server per Ajax
Transparent für den Entwickler
6

7. Vaadin Architektur - Übersicht
7
Client
(Webbrowser)
Java Server
JavaScript-
Engine
(Google-Web-
Toolkit)
Widgets
Servlet
Vaadin
Komponenten
GUI
Anwendung
Business-Logik

8. Vaadin Dependencies
8
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-server</artifactId>
<version>8.0.5</version>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-themes</artifactId>
<version>8.0.5</version>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-client-compiled</artifactId>
<version>8.0.5</version>
</dependency>

9. Struktur der Vaadin-Anwendung
Aufbau wie Standard-Webanwendung:
Deployment-Desriptor
WEB-INFweb.xml
9
Uis, Views und sonstige Java-Quellen
Konfigurationsdateien für Java-Quellen
Webapp-Root, JSP, XHTML, etc.
Deployment-Deskriptors

10. Demo: Eine einfache Vaadin-Anwendung
10
Title("Hello World") // Titel der Seite
@Theme("valo") // Theme
public class HelloWorld extends UI {
@Override
protected void init(VaadinRequest request) {
// Inhaltsbereich definieren
VerticalLayout content = new VerticalLayout();
setContent(content);
// Hinzufügen einer einfachen Textausgabe
content.addComponent(new Label("Hello World!"));
}
}

11. Konfiguration der Anwendung
11
WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode=false, ui=HelloWorld.class)
public class DemoServlet extends VaadinServlet {
}
<servlet>
<servlet-name>HelloWorld UI</servlet-name>
<servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
<init-param>
<param-name>ui</param-name>
<param-value>de.gedoplan.seminar.vaadin.demo.HelloWorld</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>HelloWorld UI</servlet-name>
<url-pattern>/*</url-pattern>
</servlet-mapping>

12. Seite im Browser
12

13. Vaadin Komponenten
Label
Link
TextField
TextArea
PasswordField
RichTextArea
13
DateField
Button
CheckBox
Upload
ProgressIndicator
Slider

14. Formulare mit Binder
Verknüpft Formulare mit (fachlichen) Java-Objekten
Kein HTML-Form
Verknüpfung über Zugriffsmethoden möglich = typsicher
Alternativ Verknüpfung über Beanproperties
binder = new Binder<>(Vortrag.class);
binder.bind(titel, Vortrag::getTitel,Vortrag::setTitel);
binder.bind(titel, "titel");

15. Formulare mit Binder
Deklaratives Zuordnen über Attribute
Zuordnen zu Bean
Oder separates Schreiben und Lesen
@PropertyId("titel")
private TextField titel
binder.bindInstanceFields(this);
binder.readBean(vortrag);
binder.writeBean(vortrag);
binder.setBean(vortrag);

16. Konvertierung
Umwandeln von Präsentation <-> Modell über Converter
Zuweisen von Converter über Binder
als Converter oder in Form von 2 Lambdaausdrücken
Builder Pattern
Typsicher im Falle von Zugriffsmethoden
binder.forField(dauer).withConverter(new StringToLongConverter());

17. Validierung
Validieren über Validators
Zuweisen über den Binder
Kombinierbar mit Convertern -> Aufbau Converter-Validator-
Pipeline
Validator für Beanvalidation vorhanden
BeanValidationBinder fügt diesen automatisch hinzu
binder.forField(dauer).withValidator(...);
binder = new BeanValidationBinder<>(Vortrag.class);

18. Grid
Komponente für Darstellen tabellarischer Daten
Viele Konfigurationsmöglichkeiten
Direktes Hinzufügen einer Collection möglich
Zuweisen der Columns über Zugriffsmethoden oder Beanproperties
Automatisches Paging beim Scrollen

19. Grid
Erstellen zu Beantyp (Automatisches Einrichten der Spalten)
Zugriff auf Columns
Hinzufügen einer Collection
Auswahl von Items
Grid<Vortrag> tabelle = new Grid<>(Vortrag.class);
tabelle.getColumn("beschreibung").setHidden(true);
tabelle.setItems(list)
tabelle.setSelectionMode(SelectionMode.SINGLE);
tabelle.addSelectionListener(e -> ...);

20. DataProvider
Definiert das Laden der Daten
Erlaubt z. B. datenbankseitiges Paging
Implementierung mit Queries für Laden einer Page und
Gesamtanzahl
Einfache Einbindung bestehender Services
tabelle.setDataProvider((f,offset,limit) ->
vortragService.load(offset,limit).stream(),
vortragService::count);

21. Layouts
Anordnung der Elemente über Layoutmanager
Verwendung erfolgt programmatisch
VerticalLayou
t
HorizontalLayou
t
GridLayout
AbsoluteLayou
t
CssLayout
FormLayout

22. Themes
Aussehen bestimmt durch Themes
Einfaches Austauschen des Look-and-Feel
Arbeiten mit SCSS
Aussehen von Standard-Theme Valo ist stark konfigurierbar
Eigene Themes einfach als Ableitung eines Standard-Themes

23. Navigation
Einfaches Konzept für Navigation
Erlaubt bookmarkable URLs
Navigator verwaltet eine Menge von Views für eine UI
View gemappt auf URI-Fragment
Views werden angezeigt in dafür vorgesehenem Bereich

24. Deklaratives XML
Alternative zum programmatischen Aufbau
Definition in HTML File
Tags für die Komponenten und Container
Beschreibt nur das Layout, keine Funktionalität
Verknüpfung mit Komponenten in Java Klasse möglich

25. Vaadin Designer
Grafischer Editor für Vaadin Anwendungen
einfaches Zusammenklicken der Oberflächen
Arbeitet mit der deklarativen Definition
Kostenpflichtig

26. Erweiterbarkeit
Vaadin kann einfach um Komponenten erweitert werden
Serverseitige Erweiterungen können in Java geschrieben werden
Möglichkeiten für Erweiterungen mit clientseitigem Anteil
GWT (Google-Web-Toolkit)
Typsicher
Muss kompiliert werden
JavaScript
Ungetyped
Schnellerer Entwicklungszyklus
Große Auswahl an Widgets

27. Eigene Vaadin Komponenten
27
Client
Server
Widget
Connector
State
Component

28. JavaScript Komponenten
Serverseitige Komponente
Verknüpfung über Connector-Methode = Einstiegspunkt
Vollqualifizierter Klassenname
Zustandsobjekt
@JavaScript("JsHtml5TextFieldConnector.js")
public class JsHtml5TextField extends AbstractJavaScriptComponent {
de_gedoplan_demos_vaadin_demo_ui_components_JsHtml5TextField
= function() {
public class JsHtml5TextFieldState extends JavaScriptComponentState {

29. Extensions
Ähnlich wie eigene Komponente
Kann auf bestehende Komponenten angewandt werden
Fügt Funktionalität hinzu
Ermöglicht es, ohne spezielles Ableiten zu erweitern
So kann auch per JavaScript eine Vaadin Komponente erweitert
werden
TextField textField = new TextField();
JsHtml5TextFieldExtension jsHtml5TextFieldExtension = new
JsHtml5TextFieldExtension();
jsHtml5TextFieldExtension.extend(textField);

30. Webcomponent Addon
Experimentelles Addon für einfaches Integrieren von
Webcomponents (Vaadin Elements, Polymer, etc.)
Eigenen Javascript-Komponenten
Auch für Manipulieren der Clientseite bestehender Komponenten
Erlaubt einfaches Integrieren von Client- und Serverseite

31. Vaadin als Frontend für Java EE oder Spring
Integration einfach über offizielle Addons
Vaadin UIs und Views sind dann gemanaged und können injecten
Neue Scopes: UIScoped und ViewScoped
Einfaches Bereitstellen
Keine Servletkonfiguration notwendig
Views werden automatisch angezogen

32. Vorteile von Vaadin
JavaScript basiert (kein Browser Plug-in)
Webtechnologie für Entwickler transparent
Ermöglicht Konzentration auf das Wesentliche
Cross-Browser optimiert
Serverseitige Steuerung
Sicherheit, Kontrolle
Von Desktopentwicklung bekannte Vorgehensweise
Programmatischer Aufbau der UIs
Standard Java-Webprojekt
Gute Erweiterbarkeit, viele Add-ons verfügbar
32

33. Nachteile von Vaadin
Webtechnologie für Entwickler transparent
Nachteil für Webseiten-Design
Serverseitige Steuerung
erhöhter Netzwerkverkehr
33

34. Einsatzbereiche für Vaadin
Gut geeignet für
Desktopähnliche Business-Applikationen im Browser
Programmatisch generierte Web-GUIs
Weniger gut geeignet für
Webseiten
34

35. Demoanwendung
Sourcecode für die Demoanwendung:
https://github.com/GEDOPLAN/vaadin-demo