Webentwicklung mit Vaadin 7 Theoretische und praktische Einführung in Vaadin 7 Christian Dresen, Michael Gerdes, Sergej Schumilo
Agenda Allgemeines Architektur Client-Side Server-Side Vaadin UI Components Praktische Einführung Praktikum 2 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? Freies Framework (Apache Lizenz 2.0) Server-seitige Ausführung Kein Browser-Plugin notwendig Quelle: http://www.digitalnext.de/wp-content/uploads/ 2013/01/top-best-browsers.jpg Client-Seite Ajax Framework Google Web Toolkit Java-to-JavaScript Compiler Quelle: http://www.have2code.com/wp-content/ uploads/2013/12/gwt1.png 4 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
Allgemeines Was ist Vaadin? 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 5 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
Allgemeines Geschichte I 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 6 Quelle: http://de.wikipedia.org/wiki/vaadin von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
Allgemeines Geschichte II 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 7 Quelle: http://de.wikipedia.org/wiki/vaadin von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
Allgemeines Add-On s Top Downloads Stand 02. Dezember 2014, Datenquelle: vaadin.com 8 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
Allgemeines Add-On s: Vaadin Charts Quelle: https://vaadin.com/directory#addon/vaadin-charts 9 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
Technischer Hintergrund 10 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
Architektur 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 11 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
Architektur Vaadin Komponenten bestehen aus: Client-Side Code JavaScript Server-Side Code Java Entwickelt wird hauptsächlich Java-Code Abgesehen von CSS / HTML 12 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
Client-Side (Web Browser) 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 13 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) {"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 } },} 15 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
Server-Side (Application Server) Quelle: https://vaadin.com/book/-/page/application.html 16 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
Vaadin UI Components Quelle: https://vaadin.com/book/-/page/components.html 17 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
Praktische Einführung 18 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
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) { } 19 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
View Programmierung Java AWT Vaadin 7 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()); } }); 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()); } }); 20 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
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") 21 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
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); 22 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
Session Scopes Zwei Scopes bei Vaadin UI Session Pro geöffnetes Fenster eine eigene Session zur Verwaltung des Fensterinhalts Zugriff mit UI.getCurrent().getSession().setAttribute(MyBean.class, new MyBean()); UI.getCurrent().getSession().setAttribute ( ValueID, Value ); VaadinSession Pro User eine Session, d.h. von allen Tabs und Fenstern eines Browsers Zugriff Thread-safe über try { VaadinSession.getCurrent().getLockInstance().lock(); VaadinSession.getCurrent().setAttribute(VALUE_ID, "some value"); } finally { VaadinSession.getCurrent().getLockInstance().unlock(); } 23 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
Praktikumseinführung 24 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
Vorbereitungen Benötigt wird Eclipse Kepler (Link in Praktikumsaufgabe) Separaten Workspace benutzen Vaadin Eclipse Plug-In herunterladen 25 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
Praktikum Vorgegebener Quelltext Beinhaltet: Model das Modell Modell-Tests Grundgerüst Interfaces zur Nutzung 26 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014
Praktikumsaufgabe Demo 27 von 27 Dresen, Gerdes, Schumilo Vaadin 7 03.12.2014