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


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


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


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


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

Allgemeines – Add-On‘s

8

Top Downloads


Stand 02. Dezember 2014, Datenquelle: vaadin.com

Allgemeines – Add-On‘s: Vaadin Charts


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

Technischer Hintergrund


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


Architektur

12

Vaadin Komponenten bestehen aus:

Client-Side Code

JavaScript

Server-Side Code

Java

Entwickelt wird hauptsächlich Java-Code

Abgesehen von CSS / HTML


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




{"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 muss vor aktueller Zeit liegen<\/div>\n",

"modified":true

},"54":{

"centered":false,

"positionX":460,

"positionY":25

}

},}

Server-Side (Application Server)


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

Vaadin UI Components


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

Praktische Einführung


Konfiguration über Annotationen


@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


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


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


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


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


Vorbereitungen

25

Benötigt wird Eclipse Kepler (Link in Praktikumsaufgabe)

Separaten Workspace benutzen

Vaadin Eclipse Plug-In herunterladen


Praktikum

26

Vorgegebener Quelltext

Beinhaltet:

das Modell

Modell-Tests

Grundgerüst

Model

Interfaces zur Nutzung


Praktikumsaufgabe Demo


Webentwicklung mit Vaadin 7Agenda 2 Allgemeines Architektur Client-Side Server-Side Vaadin UI...

Documents

Transcript of Webentwicklung mit Vaadin 7Agenda 2 Allgemeines Architektur Client-Side Server-Side Vaadin UI...