Post on 26-Feb-2021
transcript
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 muss vor aktueller Zeit 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