Web-GUIs mit Vaadin

Hendrik Jungnitsch, GEDOPLAN GmbH

Ausblick

Was ist Vaadin ?

Exkurs GWT

Vaadin-Architektur

Hello World mit Vaadin

Vorgehensweise/API

Komponenten

Themes

Binding

Validierung

Browser-Kompatibilität

Fazit

2

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

3

(https://vaadin.com/)

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

Vaadin Architektur - Übersicht

5

Client

(Webbrowser) Java Server

JavaScript-

Engine

(Google-Web-

Toolkit)

Widgets

Servlet

Vaadin

Komponenten

GUI

Anwendung

Business-Logik

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

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

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

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

Ein Vaadin Projekt – 1. Aufbau

Webprojekt

Vaadin-Lib

Deployment-Descriptor

Anwendungsklasse

10

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

Ein Vaadin Projekt – 2. Deployment-Descriptor

12

<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>

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

Ein Vaadin Projekt – 3. Anwendungsklasse

14

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

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

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

UI-Komponenten

17

Clientseitiges Widget

Terminal Adapter

Vaadin Komponente

Component Daten-Modell

Themes

Logik

Events Updates

Binding

Steuerung

UI-Komponenten

Label

Link

TextField

TextArea

PasswordField

RichTextArea

18

DateField

Button

CheckBox

Upload

ProgressIndicator

Slider

UI-Komponenten : Gemeinsame Eigenschaften

Caption (Beschriftung)

Description (Tooltip)

Enabled

Icon

Locale

StyleName

Visible

19

UI-Komponenten - Layouts

Layout-Komponenten

Layout-Managern aus der Desktopentwicklung nachempfunden

Verwendung erfolgt programmatisch

Design-Eigenschaften über Themes

20

VerticalLayout

HorizontalLayout

GridLayout

AbsoluteLayout

CSSLayout

FormLayout

UI Container

Window

Panel

SplitPanel

21

TabSheet

Accordion

Events

Eventgetriebene Verarbeitung von Benutzeraktionen

Listener bei Event-Erzeuger Registrieren

Listenermethode wird gefeuert

Events für:

Eingabekomponenten

Application-, Session-Status

Verarbeitung erfolgt serverseitig

22

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

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

Data-Binding

25

Property

Type Value

Item

Property

PID PID

Property

…

…

Container

Item

IID IID

Item

…

…

FieldGroup (Vaadin 7)

26

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

}

FieldGroup fieldGroup = new FieldGroup();

fieldGroup.setItemDataSource(kundeBeanItem);

fieldGroup.bindMemberFields(myFormLayout);

Public class Kunde {

Private String name;

Private String email;

Validierung

Zuordnung von Validator-Objekten zu Feldern

Vaadin 6

Validierung mit Feld-Typ

Vaadin 7

Validierung mit Model-Typ

Converter vorgeschaltet

27

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

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

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

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

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

Eclipse Plugin

Wizards für Erstellung von

Projekten

Widgets

Themes

Visueller Editor für

„CustomComponents“

33

Dokumentation und Support

Vaadin-Webseite

Book of Vaadin (HTML oder PDF)

Vaadin API-JavaDoc

Forum

Trac

Wiki

34

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

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

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