Folien zum Vortrag von Hendrik Jungnitsch, GEDOPLAN GmbH, auf dem Expertenkreis Java am 14.1.2013 in Bielefeld

1. Web-GUIs mit Vaadin
Hendrik Jungnitsch, GEDOPLAN GmbH

2. Ausblick
Was ist Vaadin ?
Exkurs GWT
Vaadin-Architektur
Hello World mit Vaadin
Vorgehensweise/API
Komponenten
Themes
Binding
Validierung
Browser-Kompatibilität
Fazit
2

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

4. Exkurs – GWT (Google Web Toolkit)
Webframework für JavaScript-Anwendungen
GUI-Logik in Java geschrieben
Konvertierung von Java zu JavaScript
Entwicklung hauptsächlich für Clientseite
Serverkommunikation über asynchrone RPC (Remote Procedure
Calls)
4

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

6. Architektur – Client-Seite
JavaScript-Engine
Thin-Client, ist zuständig für:
Rendern der GUI im Browser
Weiterleiten von Benutzeraktionen zum Server
Basiert auf GWT (Google-Web-Toolkit)
Standardkomponenten liegen in kompilierter Form (JavaScript) vor
Clientseitiges Entwickeln mit GWT möglich
6

7. Architektur - Serverseite
Anwendung läuft als Servlet
Entwicklung auf Serverseite
GUI-Aufbau (Vaadin UI-Komponenten)
Steuerungslogik
Verarbeiten von Benutzerevents
Framework auf Serverseite übernimmt
Bearbeiten von Ajax-Anfragen
Rendern zum Client
7

8. Vorteile der serverseitigen Entwicklung
Reine Java-Programmierung
Abstrahierung von Webtechnologien (HTML, CSS, JavaScrip,…)
An Desktopanwendungen (Swing) angelehnte Vorgehensweise
Programmatischer Aufbau
M-V-C
Serverseitige Steuerung/Validierung
8

9. Paketierung und Deployment
Paketierung
standardgemäße JavaEE-Webanwendungen (WAR-Archiv)
Vaadin-Framework als Library eingebunden (jar)
1 monolithisches Archiv bei Vaadin 6
Mehrere Archive bei Vaadin 7
Servlet-Definition, Mapping in „web.xml“
Deployment auf gängigen Application-Server
9

10. Ein Vaadin Projekt – 1. Aufbau
Webprojekt
Vaadin-Lib
Deployment-Descriptor
Anwendungsklasse
10

11. Ein Vaadin Projekt – 2. Deployment-Descriptor
Angabe des Display-Namens
Servlet-Definition
Klasse:
com.vaadin.terminal.gwt.server.ApplicationServlet
Anwendungsklasse als Parameter übergeben
Servlet Mapping auf URL-Pattern
11

12. Ein Vaadin Projekt – 2. Deployment-Descriptor
<display-name>VaadinBsp</display-name>
<servlet>
<servlet-name>Vaadin Beispiel Anwendung</servlet-name>
<servlet-class>
com.vaadin.terminal.gwt.server.ApplicationServlet
</servlet-class>
<init-param>
<description>Anwendungsklasse</description>
<param-name>application</param-name>
<param-value>
de.gedoplan.vaadinbsp.VaadinBspApplication
</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name> Vaadin Beispiel Anwendung </servlet-name>
<url-pattern>/*</url-pattern>
</servlet-mapping>
12

13. Ein Vaadin Projekt – 3. Anwendungsklasse
Basisklasse für eine Vaadin-Anwendung
Ableitung von com.vaadin.Application
Zugeordnet zu Benutzersession
Zu implementierende Init-Methode
Muss ein Hauptfenster zugeordnet bekommen
13

14. Ein Vaadin Projekt – 3. Anwendungsklasse
public class VaadinBspApplication extends Application
{
@Override
public void init()
{
Window mainWindow = new Window("Vaadin Beispiel Application");
Label label = new Label("Hello World");
mainWindow.addComponent(label);
Button button = new Button("Test Button");
mainWindow.addComponent(button);
setMainWindow(mainWindow);
}
}
14

15. Fenster
Anwendungsfenster (application-level window)
Auf Clientseite = Fenster/Tab/Popup/eingebetteten Element
Mindestens ein Hauptfenster (MainWindow) pro Application
Mehrere Fenster per Anwendung möglich (gemapt auf
Unterpfad)
Unterfenster (sub-window)
Innerhalb eines Anwendungsfensters
Umgesetzt mit HTML, CSS und JavaScript
Verschiebbar, schließbar
15

16. Navigation (Vaadin 7)
Komponenten können View Interface implementieren
Views werden vom Navigator gemanaged
navigator.addView(„viewName", new CustomView());
Aufrufen eines Views:
Programmatisch (navigateTo(„viewName");)
Browseraufruf von App-URL + #viewName
16

17. UI-Komponenten
Clientseitiges Widget
Terminal Adapter Themes
Events Updates
Vaadin Komponente Steuerung Logik
Component
Daten-Modell
Binding
17

18. UI-Komponenten
Label DateField
Link Button
TextField CheckBox
TextArea Upload
PasswordField ProgressIndicator
RichTextArea Slider
18

19. UI-Komponenten : Gemeinsame Eigenschaften
Caption (Beschriftung)
Description (Tooltip)
Enabled
Icon
Locale
StyleName
Visible
19

20. UI-Komponenten - Layouts
Layout-Komponenten
Layout-Managern aus der Desktopentwicklung nachempfunden
Verwendung erfolgt programmatisch
Design-Eigenschaften über Themes
VerticalLayout GridLayout CSSLayout
HorizontalLayout AbsoluteLayout FormLayout
20

21. UI Container
Window TabSheet
Panel Accordion
SplitPanel
21

22. Events
Eventgetriebene Verarbeitung von Benutzeraktionen
Listener bei Event-Erzeuger Registrieren
Listenermethode wird gefeuert
Events für:
Eingabekomponenten
Application-, Session-Status
Verarbeitung erfolgt serverseitig
22

23. Themes
Bestimmen Erscheinungsbild der Anwendung
Bestehend aus
HTML-Layouts
CSS
Grafiken
Abzulegen unter „WebContent/VAADIN/themes/“
Einbinden programmatisch mit „ setTheme(„name");“
Wechsel zur Laufzeit möglich
23

24. Themes
Erben von einem Standard Theme
@import "../reindeer/styles.css";
CSS-Klasse für jede Darstellungsform einer Komponente
HTML-Templates für Verwendungen mit Custom Layout
24

25. Data-Binding
Property
Type Value
Item
PID … PID
Property … Property
Container
IID … IID
Item … Item
25

26. FieldGroup (Vaadin 7)
Public class Kunde { FieldGroup fieldGroup = new FieldGroup();
fieldGroup.setItemDataSource(kundeBeanItem);
Private String name; fieldGroup.bindMemberFields(myFormLayout);
Private String email;
public class MyFormLayout extends GridLayout {
@PropertyId("name")
private TextField name = new TextField("Name");
@PropertyId("email")
private TextField email = new TextField("Email");
public MyFormLayout() {
super(2, 3);
setSpacing(true);
addComponent(name);
addComponent(email);
}
26

27. Validierung
Zuordnung von Validator-Objekten zu Feldern
Vaadin 6
Validierung mit Feld-Typ
Vaadin 7
Validierung mit Model-Typ
Converter vorgeschaltet
27

28. Direkte JavaScript Aufrufe
Aufrufe von Serverseite ( .execute("alert('Hello')"); )
Ausführung nach Abarbeitung des aktuellen Requests
JavaScript-Callbacks
Ermöglicht bearbeiten von JavaScript-Anfragen
Erfordert Registrieren von Callback-Methode auf Serverseite
28

29. Vaadin in JavaEE6 Anwendungen: CDI
Integration nicht speziell vorgesehen, aber möglich, da
Servletanwendung
Möglich durch (Vaadin 6)
Application als SessionScoped
Servlet als Ableitung von AbstractApplicationServlet
ConversationScope nur mit CDI-Erweiterung nutzbar
Achtung geboten, da Lebensdauer der Komponenten anders als bei
JSF
29

30. Vaadin in JavaEE6 Anwendungen : Bean Validation
Bean Validation (JSR-303)
Vaadin 6
Add-On (Problematisch, da Prüfung nicht mit Modeltyp)
Implementierung eines eigenen BeanValidators
Vaadin 7
addValidator(new BeanValidator(Bean-Type, Property-Name));
30

31. Add-ons
Erweiterung durch Add-ons möglich
Viele offizielle und 3rd-party Add-ons verfügbar
Beispiele für offizielle Add-ons
Bean Validation (für 6.x)
Color-Picker
SQL-Container
TreeTable
31

32. Browserunterstützung (Vaadin 6.x)
Internet Explorer 6, 7, 8, 9
Mozilla Firefox 3, 4, 5 and 6
Safari 4, 5
Opera 10, 11
Google Chrome 13
iOS 4-5 browser
Android 2-3 browser
32

33. Eclipse Plugin
Wizards für Erstellung von
Projekten
Widgets
Themes
Visueller Editor für
„CustomComponents“
33

34. Dokumentation und Support
Vaadin-Webseite
Book of Vaadin (HTML oder PDF)
Vaadin API-JavaDoc
Forum
Trac
Wiki
34

35. Vorteile
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
35

36. Nachteile
Webtechnologie für Entwickler transparent
Nachteil für Webseiten-Design
Serverseitige Steuerung
Viel Netzwerkverkehr
Databinding (Konvertierung) nicht optimal (6.x)
Application ist Session gebunden, Zustand in Session
Speicherbedarf
36

37. Fazit
Sehr interessantes Framework
Einfache Konfiguration
Unkomplizierte Einarbeitung
Sehr gut für servergesteuerte Webanwendungen
Weniger geeignet für Webseiten
Gute Alternative zu JSF
(vor allem für programmatischen Aufbau des UI)
Gute Alternative zu GWT
Falls serverseitige Steuerung kein Problem
37