webentwicklung mit vaadin 7agenda 2 allgemeines architektur client-side server-side vaadin ui...

Christian Dresen, Michael Gerdes, Sergej Schumilo

Webentwicklung mit Vaadin 7

Theoretische und praktische Einführung in Vaadin 7

Agenda

2

Allgemeines

Architektur

Client-Side

Server-Side

Vaadin UI Components

Praktische Einführung

Praktikum

von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Allgemeines

3 von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Allgemeines – Was ist Vaadin?

4

Freies Framework (Apache Lizenz 2.0)

Server-seitige Ausführung

Kein Browser-Plugin notwendig

Client-Seite

Ajax Framework Google Web Toolkit

Java-to-JavaScript Compiler

von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Quelle: http://www.digitalnext.de/wp-content/uploads/

2013/01/top-best-browsers.jpg

Quelle: http://www.have2code.com/wp-content/

uploads/2013/12/gwt1.png

Allgemeines – Was ist Vaadin?

5

Gesamte Anwendung wird in Java implementiert

Ereignisgesteuerte Programmierung

Parallelen zu GUI-Programmierung

Vaadin macht das Design

Verwendung von Themes

von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Quelle: http://www.chip.de/ii/7/8/7/

9/6/2/0fc51f82e036e1d3.jpg

Quelle: https://vaadin.com/demo

Allgemeines – Geschichte I

6

2002: quelloffenes Framework: Millstone 3

Ajax-basierte Client-Kommunikation und Renderengine

2006: Konzept separat als kommerzielles Produkt entwickelt

Serverseitige Vaadin-API kompatibel mit Millstone API

2007: Produktname IT Mill Toolkit

Version 4 freigegeben

Proprietäre Ajax Implementation für die Clientseite

Ende 2007: Proprietäre Ajax Implementation aufgegeben

Google Web Tool Kit integriert für Darstellung von Client-Seitigen Komponenten

Produktlizenz wurde auf die freie Apache 2.0 – Lizenz geändert

von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Quelle: http://de.wikipedia.org/wiki/Vaadin

Allgemeines – Geschichte II

7

März 2009: Veröffentlichung einer Produktionsfähigen Version von IT Mill 5.0

Mai 2009: IT Mill Toolkit wird in Vaadin unbenannt

Vorabfreigabe Version 6

März 2010 Vaadin Directory

Ein Portal zur Verbreitung von kommerziellen und Open-Source Erweiterungen

Februar 2011: Kommerzielles Supportmodell: Vaadin Pro Accounts

März 2013: Vaadin 7 – Erste Hauptversion seit der Umbenennung 2009

von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Quelle: http://de.wikipedia.org/wiki/Vaadin

Allgemeines – Add-On‘s

8

Top Downloads

von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Stand 02. Dezember 2014, Datenquelle: vaadin.com

Allgemeines – Add-On‘s: Vaadin Charts

9 von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Quelle: https://vaadin.com/directory#addon/vaadin-charts

Technischer Hintergrund

10 von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Architektur

11

Strikte Trennung durch MVC-Modell

Webbrowser Content repräsentiert die View

Web Applikation repräsentiert den Controller

Back-end repräsentiert das Modell

Asynchrone JavaScript Kommunikation

In Abhängigkeit der Komponenten, werden

Veränderungen an den Server geschickt

von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Architektur

12

Vaadin Komponenten bestehen aus:

Client-Side Code

JavaScript

Server-Side Code

Java

Entwickelt wird hauptsächlich Java-Code

Abgesehen von CSS / HTML

von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Client-Side (Web Browser)

13

HTML und JavaScript

Client-Side Engine basiert auf JavaScript

Mithilfe des Vaadin Client Compiler übersetzt

Dieser basiert auf dem Google Web Toolkit (GWT) Java-to-JavaScript Compiler

Standardmäßig JSON

Remote Procedure Calls (RPC) bei umfangreichen Übertragungen

von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Client-Side (Web Browser)

14 von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Client-Side (Web Browser)

15 von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

{"syncId":3,

"changes":[[

"change",{"pid":"62"},

["23",{

"id":"62",

"locale":"de",

"format":"dd.MM.yyyy",

"strict":true,

"wn":false,

"parsable":true,

"v":{

"day":10,

"month":12,

"year":2014

}

}

]]],

"state":{

"62":{

"errorMessage":"<div>Datum&#32;muss&#32;vor&#32;aktueller&#32;Zeit&#32;liegen<\/div>\n",

"modified":true

},"54":{

"centered":false,

"positionX":460,

"positionY":25

}

},}

Server-Side (Application Server)

16 von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Quelle: https://vaadin.com/book/-/page/application.html

Vaadin UI Components

17 von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Quelle: https://vaadin.com/book/-/page/components.html

Praktische Einführung

18 von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Konfiguration über Annotationen

19 von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

@Theme("vaadin")

public class VaadintestUI extends UI {

@WebServlet(value = "/*", asyncSupported = true)

@VaadinServletConfiguration(productionMode = false, ui = VaadintestUI.class)

public static class Servlet extends VaadinServlet {

}

@Override

protected void init(VaadinRequest request) {

}

}

View Programmierung

20 von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

GridLayout layout = new GridLayout(3,0);

this.setLayout(layout);

final Label lblAusgabe = new Label();

final TextField txtEingabe = new TextField();

final Button btnSubmit = new Button(“Click Me");

this.add(lblAusgabe);

this.add(txtEingabe);

this.add(btnSubmit);

btnSubmit.addActionListener(new ActionListener() {

@Override

public void actionPerformed(ActionEvent arg0) {

lblAusgabe.setText(txtEingabe.getText());

}

});

Java AWT

final VerticalLayout layout = new VerticalLayout();

this.setContent(layout);

final Label lblAusgabe = new Label();

final TextField txtEingabe = new TextField();

final Button button = new Button("Click Me");

layout.addComponent(lblAusgabe);

layout.addComponent(txtEingabe);

layout.addComponent(button);

button.addClickListener(new Button.ClickListener() {

@Override

public void buttonClick(ClickEvent event) {

lblAusgabe.setValue(txtEingabe.getValue());

}

});

Vaadin 7

Model – Auf Membervariablen zugreifen

21 von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

FormLayout form = new FormLayout();

form.setImmediate(true);

BeanItem<MyBean> item = new BeanItem<MyBean>(myBean);

BeanFieldGroup<MyBean> binder = new BeanFieldGroup<MyBean>(MyBean.class);

binder.setItemDataSource(item);

form.addComponent(binder.buildAndBind("memberVariable","Caption"));

binder.getField("memberVariable").setRequired(true);

binder.getField("memberVariable").setBuffered(false);

BeanItem<MyBean> item = new BeanItem<MyBean>(myBean);

item.getItemProperty("memberVariable")

Model – Auswahlbox erstellen

22 von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

ArrayList<MyBean> myBeanList = new ArrayList<MyBean>();

myBeanList.add(new MyBean());

BeanItemContainer<MyBean> myBeanContainer;

myBeanContainer = new BeanItemContainer<MyBean>(MyBean.class, myBeanList);

ComboBox cmbBoxMyBean = new ComboBox("cmbBoxMyBeanCaption");

cmbBoxMyBean.setContainerDataSource(myBeanContainer);

Session Scopes

23

Zwei Scopes bei Vaadin

UI Session

Pro geöffnetes Fenster eine eigene Session zur Verwaltung des Fensterinhalts

Zugriff mit

VaadinSession

Pro User eine Session, d.h. von allen Tabs und Fenstern eines Browsers

Zugriff Thread-safe über

von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

UI.getCurrent().getSession().setAttribute(MyBean.class, new MyBean());

UI.getCurrent().getSession().setAttribute („ValueID“, Value );

try {

VaadinSession.getCurrent().getLockInstance().lock();

VaadinSession.getCurrent().setAttribute(VALUE_ID, "some value");

} finally {

VaadinSession.getCurrent().getLockInstance().unlock();

}

Praktikumseinführung

24 von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Vorbereitungen

25

Benötigt wird Eclipse Kepler (Link in Praktikumsaufgabe)

Separaten Workspace benutzen

Vaadin Eclipse Plug-In herunterladen

von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Praktikum

26

Vorgegebener Quelltext

Beinhaltet:

das Modell

Modell-Tests

Grundgerüst

Model

Interfaces zur Nutzung

von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014

Praktikumsaufgabe Demo

27 von 27 Dresen, Gerdes, Schumilo | Vaadin 7 03.12.2014