Joachim Baumann ist Geschäftsführer der codecentric AG in Frankfurt/Main. Er ist unter anderem Autor der Bücher »Groovy« und »Gradle«, die im dpunkt.verlag erschienen.
Daniel Arndt ist Senior IT-Consultant der codecentric AG in Frankfurt/Main. Durch seine Aufgaben als Entwickler, Architekt und Coach verfügt er über eine umfassende Expertise in der Einführung und dem Einsatz von Vaadin.
Frank Engelen ist Senior IT-Consultant der codecentric AG in Solingen. Mit über 15 Jahren IT-Erfahrung berät er in den letzten drei Jahren vornehmlich Kunden beim Einsatz von Vaadin in komplexen Umgebungen.
Frank Hardy ist Senior IT-Consultant der codecentric AG in Frankfurt/Main. Er setzt seit fünf Jahren Vaadin in komplexen Kundenprojekten ein und hat ein besonderes Interesse am Thema Anwendungsarchitektur.
Carsten Mjartan ist Senior IT-Consultant der codecentric AG in Frankfurt/Main. Er ist als Entwickler, Architekt und Coach in vielen agilen Entwicklungsprojekten tätig und setzt dort sehr häufig Vaadin ein.
|
Zu diesem Buch – sowie zu vielen weiteren dpunkt.büchern – können Sie auch das entsprechende E-Book im PDF-Format herunterladen. Werden Sie dazu einfach Mitglied bei dpunkt.plus+: |
Der kompakte Einstieg für Java-Entwickler
Joachim Baumann
Joachim.Baumann@codecentric.de
Daniel Arndt
Daniel.Arndt@codecentric.de
Frank Engelen
Frank.Engelen@codecentric.de
Frank Hardy
Frank.Hardy@codecentric.de
Carsten Mjartan
Carsten.Mjartan@codecentric.de
Lektorat: René Schönfeldt
Copy-Editing: Annette Schwarz, Ditzingen
Satz und Herstellung: Frank Heidt
Umschlaggestaltung: Helmut Kraus, www.exclam.de
Druck und Bindung: M.P. Media-Print Informationstechnologie GmbH, 33100 Paderborn
Bibliografische Information der Deutschen Nationalbibliothek Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.deabrufbar.
ISBN
Buch 978-3-86490-206-2
PDF 978-3-86491-585-7
ePub 978-3-86491-586-4
1. Auflage 2015
Copyright © 2015 dpunkt.verlag GmbH
Wieblinger Weg 17
69123 Heidelberg
Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne die schriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen.
Es wird darauf hingewiesen, dass die im Buch verwendeten Soft- und Hardware-Bezeichnungen sowie Markennamen und Produktbezeichnungen der jeweiligen Firmen im allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz unterliegen.
Alle Angaben und Programme in diesem Buch wurden mit größter Sorgfalt kontrolliert. Weder Autor noch Verlag können jedoch für Schäden haftbar gemacht werden, die in Zusammenhang mit der Verwendung dieses Buches stehen.
5 4 3 2 1 0
Geleitwort
Vorwort
1 Einleitung
1.1 Was ist Vaadin?
1.2 Historie
1.3 Wofür ist Vaadin gut?
1.4 Unsere Erfahrungen mit Vaadin
1.5 Weitergehende Informationen
2 Erste Schritte mit Vaadin
2.1 Einrichten der Entwicklungsumgebung Eclipse
2.2 Erste Schritte
2.3 Verwendung von Maven für Vaadin-Projekte in Eclipse
2.4 Andere Entwicklungsumgebungen
3 Die Vaadin-Architektur
3.1 Einleitung
3.2 Überblick
3.2.1 Serverseitiges Programmiermodell
3.2.2 Clientseitiges Programmiermodell
3.2.3 Push
3.2.4 Themes
3.2.5 Add-ons
3.3 Vaadin unter der Haube
3.3.1 Der Einstiegspunkt
3.3.2 Die Benutzeroberfläche
3.3.3 Der erste Aufruf der UI
3.4 Konsequenzen der Vaadin-Architektur
3.4.1 Serverseitiger Speicherbedarf
3.4.2 Clientseitiger Speicherbedarf und Render-Performance
3.4.3 Netzwerkkommunikation
3.4.4 Latenz
4 UI-Komponenten
4.1 Grundlegende UI-Komponenten
4.1.1 UI als Rahmen für die Applikation
4.1.2 Textausgabe mit Label und Notification
4.1.3 Button
4.1.4 Texteingaben mit TextField, PasswordField und TextArea
4.1.5 Formatierte Texteingabe über RichTextArea
4.1.6 Datumseingabe mit InlineDateField und PopupDateField
4.1.7 Eingabe von Werten über Slider
4.1.8 Auswahlkästchen mit CheckBox
4.1.9 Auswahlboxen mit ListSelect, ComboBox, NativeSelect, OptionGroup und TwinColSel
4.1.10 Hochladen von Dateien mit Upload
4.1.11 Hierarchieanzeige mit der Tree-Komponente
4.1.12 Tabellen mit der Table-Komponente
4.1.13 Menüzeilen mit MenuBar
4.1.14 Fortschrittsanzeige mit der ProgressBar-Komponente
4.1.15 Videos und Animationen mit Link, AbstractMedia und AbstractEmbedded
4.2 Layout-Klassen
4.2.1 Elemente untereinander: VerticalLayout
4.2.2 Elemente nebeneinander: HorizontalLayout
4.2.3 Zwischenbetrachtung: Schachteln von Layouts
4.2.4 GridLayout – Elemente im Gitter
4.2.5 FormLayout
4.2.6 AbsoluteLayout
4.2.7 CssLayout
4.2.8 CustomLayout
4.3 Sonderlayouts
4.3.1 Scrolling mittels Panel
4.3.2 Splitter mit Horizontal- und VerticalSplitPanel
4.3.3 Karteireiter im TabSheet
4.3.4 Accordions
4.3.5 Popup-Fenster mit Window
4.4 Eigene Komponenten und Eingabefelder
4.4.1 CustomComponents mit dem visuellen Editor
5 Data Binding
5.1 Einführung
5.2 Details zum »Data Binding«-Prozess
5.3 Das Vaadin-Container-Datenmodell im Allgemeinen
5.4 Validierung in der GUI
5.4.1 Nutzung von JSR-303-Validatoren
5.4.2 Nutzung Vaadin-spezifischer Validatoren
5.5 Erkennen von Änderungen
6 Real-Time-Webapplikationen mit Vaadin Server Push
6.1 Ein kleines Beispiel
6.2 Ein Mini-Chat
7 Layout und Styling
7.1 Auswahl eines Theme
7.2 Erstellung eines eigenen Theme
7.2.1 Struktur eines Theme
7.2.2 Erstellung eines CSS-basierten Theme
7.2.3 Erstellung eines SCSS-basierten Theme
7.2.4 Theme-Vorlagen
7.2.5 CSS-Selektor-Strategien
7.2.6 SCSS-Sprachkonstrukte nutzen
7.2.7 CSS Injection
8 Navigation in Ajax-Anwendungen
8.1 Einleitung
8.2 URI-Fragmente
8.3 Format der URI-Fragmente
8.4 URI-Fragmente und Applikationszustand
8.5 Manipulation und Überwachung des URI-Fragments
8.6 Die Navigator-API
8.6.1 Der Navigator
8.6.2 Die ViewProvider
8.6.3 Der NavigationStateManager
8.6.4 Ablauf eines View-Wechsels
9 Anwendungsarchitektur mit Vaadin
9.1 Einleitung
9.2 Überblick
9.3 Was verstehen wir unter Architektur?
9.4 Architekturmuster
9.4.1 Ein kurzer Überblick
9.4.2 Die Schichtenarchitektur
9.4.3 Die MVx-Architekturmuster
9.5 Auf in die Praxis
9.5.1 Die Beispielanwendung
9.5.2 Das Beispielprojekt
9.5.3 Das Domänenmodell der Beispielanwendung
9.6 Der Login in der MVP-Passive-View-Variante
9.6.1 Schnittstellendefinition und Implementierung
9.7 Entkopplung mit einem Event-Bus
9.7.1 Der Event-Bus von Guava
9.7.2 Umstellung auf den Event-Bus
9.7.3 Vor- und Nachteile von Event Handling
9.8 Dependency Injection
9.8.1 Die Umstellung auf CDI
9.8.2 Umstellung der Anwendung
9.9 Der Profileditor in der MVP-Variante
9.9.1 Schnittstellendefinition und Implementierung
9.10 MVVM am Beispiel der Anmeldekomponente
9.10.1 Umbau des Presenter in ein Presentation Model
9.10.2 Die View und die Integration in der Anwendung
9.11 Zusammenfassung
10 Add-ons
10.1 Einleitung
10.2 Vaadin-Directory
10.3 Add-on verwenden
11 Vaadin und Maven
11.1 Einleitung
11.2 Überblick Archetypes
11.3 Maven-Projekt erstellen
11.3.1 Kommandozeile
11.3.2 Eclipse
11.4 Projektstruktur im Detail
11.5 Das Vaadin-Maven-Plugin
12 Automatisiertes Testen von Vaadin-Anwendungen
12.1 Einleitung
12.2 Unit-Tests
12.2.1 Interaktion mit Vaadin-Komponenten
12.2.2 Interaktion mit ThreadLocals
12.3 GUI-Tests mit Selenium
12.3.1 Ein erster Test
12.3.2 Locator
12.3.3 Warten will gelernt sein
12.3.4 Das Page-Object-Pattern
12.3.5 Unabhängigkeit von Einzeltests
13 Zusammenfassung
14 Literatur
Index
What makes a developer happy? A big house or winning the lottery might easily do so. That is ambient and long lasting kind of happiness we all search for throughout our lives. Some of us find it and some never do. But what makes a developer happy on a regular Tuesday? It is The Flow. The mystical state of mind called The Flow when you can solve all the problems, fulfill all the tasks and even more. Everything is possible and you know all the answers. Your productivity is over the charts. And when you leave the office on that regular Tuesday you are calm, relaxed and you even start noticing things. Has that wall been red all along? Has there always been so many birds in this park? You might choose to walk back home instead of taking a crowded subway. Finally buying that latte to-go you never did. Simply enjoying all the little things around you with a little smile on your face. That feeling dear reader – that is happiness on a regular Tuesday.
But The Flow doesn’t drop on your table. No, it sure doesn’t. The only way to reach The Flow is to know your stuff. Knowing how a library or an API works. Knowing the best practices. And this requires you to educate yourself. Study, read and learn. And now, good books step into play – like the one you are holding in your hands. This book will give you tools for finding your very own Flow. Fantastic, isn’t it?
I am more than happy to witness the birth of this book for the German audience of Vaadin fanboys and fangirls. This audience is one of the most remarkable and booming regions in the whole Vaadin ecosystem and I’d like to thank and congratulate all the authors for a job well done. Extremely professional and straight to the point. Flow material.
So continue reading – and have a great walk back home on a regular Tuesday.
Ville Ingman
Vaadin Advocate
Vaadin HQ Finland
Dieses Buch ist für Entwickler von Webapplikationen gedacht, die die Programmierung mit Vaadin lernen wollen – laut den Erfindern des Frameworks »ein Java-Framework für die Implementierung moderner Webapplikationen, die fantastisch aussehen, sehr gut performen und die Sie und die Benutzer Ihrer Webapplikationen glücklich machen«. Man kann darüber diskutieren, ob diese Beschreibung hundertprozentig akkurat ist, aber wir, die Autoren, würden zustimmen.
Vaadin unterstützt Sie sehr stark darin, auch komplexe Webapplikationen einfach zu implementieren und sich dabei auf das zu konzentrieren, was uns Entwicklern am leichtesten fällt: die Entwicklung der eigentlichen Funktionalität. Gleichzeitig besteht aber bei Bedarf die Möglichkeit, Layout und Darstellung weitgehend zu beeinflussen, so dass die Flexibilität einer Webapplikation in keiner Weise eingeschränkt ist.
Wenn Sie sich hiervon angesprochen fühlen, dann ist dieses Buch für Sie geeignet.
Sie sollten neben Java auch Vorkenntnisse in der Entwicklung von Webapplikationen mit Java EE haben, um die Beispiele ohne Aufwand nachvollziehen zu können. Dies beinhaltet auch den Umgang mit einem Servlet-Container wie Apache Tomcat oder JBoss von Redhat.
Eclipse-Kenntnisse sind von Vorteil.
Wir verwenden in diesem Buch die Entwicklungsumgebung Eclipse, mit der Sie oberflächlich vertraut sein sollten. Der einfache Grund hierfür ist, dass es für Eclipse ein vom Hersteller unterstütztes Plugin gibt, das die Entwicklung unterstützt. Es ist aber nicht zwingend erforderlich, und natürlich können Sie auch andere Entwicklungsumgebungen für Ihre eigenen Experimente verwenden.
Dieses Buch enthält keine Einführung in Webapplikationen und keine Einführung in die Enterprise-Edition von Java. Es ist auch kein umfassendes Nachschlagewerk für Vaadin, das dessen sämtliche Funktionalität im Detail beschreibt.
Dies hätte in einem Buch mit ca. 1000 Seiten resultiert. Das Book of Vaadin (siehe [Vaadin]) des Herstellers ist eine solche Referenz, die online – allerdings nur auf Englisch – zur Verfügung steht.
Dieses Buch ermöglicht Ihnen einen schnellen Einstieg in die Verwendung von Vaadin für die Entwicklung von Webapplikationen.
Nach der Lektüre werden Sie verstehen, wie Vaadin unter der Haube funktioniert, aus welchen Einzelbausteinen es besteht und wie diese zusammenarbeiten und wie Sie die Funktion mit Add-ons erweitern können. Sie werden Best Practices in der Entwicklung und Ihre Optionen bei der Anwendungsarchitektur kennenlernen und erfahren, wie Sie Ihre Applikation testen können.
Zusammengefasst liefert Ihnen dieses Buch die notwendigen Kenntnisse, um mit Vaadin produktiv sein zu können.
Das Buch ist ganz grob in zwei Teile geteilt. Der erste Teil enthält die Kapitel, die der Einführung in die Konzepte von Vaadin und die zur Verfügung stehenden Komponenten dienen (Kap. 1 bis 7). Nach den ersten Schritten in Vaadin (eine minimale Webanwendung in Eclipse) lernen Sie die Architektur von Vaadin kennen, erhalten einen Überblick über Komponenten, die Vaadin anbietet, bekommen einen Einblick in die Möglichkeit, Modellzustand und Komponenteninhalt miteinander zu verknüpfen (DataBinding), und in die Aktualisierung des Applikationszustands vom Server (ServerPush). Danach beschäftigen wir uns mit Layout- und Stylingfragen, die sich mit CSS sehr elegant lösen lassen.
Der zweite Teil konzentriert sich auf die Verwendung von Vaadin. Hierzu setzen wir uns zuerst praktisch mit möglichen Anwendungsarchitekturen auseinander, werfen dann einen Blick auf die Add-ons, die Vaadin zur Verfügung stellt, und beschäftigen uns dann mit der Einbindung von Vaadin in den Build-Prozess mit Maven. Das letzte Thema, das uns ganz besonders am Herzen liegt und dem deshalb auch ein eigenes Kapitel gewidmet ist, ist das automatisierte Testen von Vaadin-Anwendungen.
Wenn Sie bereits erste Erfahrungen mit Vaadin haben, dann können Sie den ersten Teil überspringen und sofort mit Kapitel 7 beginnen. Die vorherigen Kapitel können Sie dann je nach Bedarf und Interesse lesen.
Wenn Ihnen Vaadin noch neu ist, dann sollten Sie auf jeden Fall die ersten drei Kapitel lesen, um ein erstes Verständnis für das Framework zu entwickeln. Das Buch ist so angelegt, dass es sehr sinnvoll ist, wenn Sie die folgenden Kapitel in der vorgegebenen Reihenfolge lesen. Wenn Sie aber ungeduldig sind, dann können Sie direkt zu Kapitel 7 springen und die vorherigen Kapitel nachholen.
Es ist äußerst ungewöhnlich, dass ein Fachbuch von einer größeren Anzahl von Autoren geschrieben wird, und es war für uns ein Experiment, bei dem wir sehr viel gelernt haben, das aber auch sehr viel Spaß gemacht hat.
Wir haben neben den eigentlichen Inhalten einen starken Fokus darauf gelegt, den Stil der einzelnen Kapitel einander weitgehend anzupassen, um Ihnen ein durchgehendes Leseerlebnis zu ermöglichen. Sollte uns dies an einer Stelle nicht gelungen sein, bitten wir um Entschuldigung und Ihre Nachsicht.
Besonderer Dank geht an die Reviewer, die das Manuskript nicht nur gelesen haben, sondern auch sinnvolle Änderungsvorschläge und Anregungen lieferten. Sie haben dieses Buch deutlich verbessert.
Auch den Kollegen, die mit uns über die Inhalte diskutiert haben, gebührt unser Dank genau wie unserer Firma, die die Weitergabe von Wissen allgemein und unser Engagement im Speziellen unterstützt.
Zum Schluss danken wir natürlich auch unseren Ehefrauen und Kindern, die es akzeptieren, dass wir uns mit etwas Unbedeutendem wie einem Buch beschäftigen, wenn es doch so viel wichtigere und interessantere Dinge gibt.
Vaadin ist ein auf dem Google Web Toolkit (siehe [GWT]) basierendes Open-Source-Framework, das die einfache Erstellung auch komplexer browserbasierter Applikationen ermöglicht.
Vaadin abstrahiert hierbei für die normale Programmierung von HTML, JavaScript, AJAX und browserspezifischen Details und bietet ein javabasiertes Programmiermodell mit Widgets und Events an, das sehr stark an klassische UI-Programmierung in Java angelehnt ist.
Programmierung vollständig in Java
Tatsächlich müssen wir uns in der normalen Programmierung mit Vaadin keine Gedanken über verschiedene Datenmodelle auf Client und Server machen und haben keine Schwierigkeiten mit der Aktualisierung der jeweiligen Daten. Wir können unsere verschiedenen Widgets und ihr Layout mit Java programmieren und kommen mit HTML und JavaScript nicht in Berührung.
Steuerung des Layouts über CSS
Zusätzlich können die Details des Layouts getrennt von der Programmierung beeinflusst und über CSS applikationsweit konsistent gesteuert werden, so dass bei Bedarf auch Look & Feel der gesamten Applikation über Themes ausgetauscht werden kann.
Über einen Erweiterungsmechanismus besteht die Möglichkeit, Widgets von Drittanbietern einfach zu integrieren und zu programmieren. Das Vaadin Directory (siehe [Vaadin]) bietet aktuell mehr als 400 Komponenten und Widgets an, die die Funktionalität von Vaadin erweitern.
Hinter den Kulissen implementiert Vaadin neben dem Framework auf der Serverseite, das wir in der normalen Programmierung benutzen, eine Client-Side Engine, die im Browser läuft und sowohl die Darstellung der Benutzerschnittstelle als auch die Übermittlung der Benutzerinteraktionen an den Server übernimmt und sich dabei auch um browserspezifische Anpassungen kümmert. Diese Client-Side Engine ist in Java geschrieben und wird mit dem GWT-Compiler in JavaScript übersetzt.
Während wir bei der normalen Programmierung nicht viel mit der Client-Side Engine zu tun haben, wird diese interessant, wenn wir eigene Widgets für die Erweiterung von Vaadin programmieren. Dies ist allerdings ein Thema für Fortgeschrittene und wird in diesem Buch nicht weiter betrachtet.
Die Entwicklung an Vaadin wurde bereits im Jahr 2000 gestartet, damals als Adapter für das Framework Millstone der Firma IT Mill Ltd., und die erste Version wurde 2002 veröffentlicht. Die Funktion umfasste damals Kommunikation mittels Ajax und eine eigene, proprietäre Render-Engine für die Darstellung von Widgets.
Ab 2006 wurde das Framework eigenständig kommerziell weiterentwickelt und 2007 umbenannt zu IT Mill Toolkit. Da sich im Lichte des Open-Source-Frameworks GWT die Weiterentwicklung einer eigenen Render-Engine nicht lohnt, wurde der Wechsel zu GWT als Basis für das Rendering gestartet. Ende 2007 wurde die Lizenz in eine Open-Source-Lizenz geändert.
2008 investierte einer der Gründer von MySQL (Monty Widenius) einen Teil seines Vermögens in die Firma und schuf damit die Grundlage für die Entwicklung der ersten Version des IT Mill Toolkit 5, die nach langer Betatestperiode 2009 erschien. Kurz nach Erscheinen wurde das Framework umbenannt in Vaadin (der finnische Name für ein weibliches Rentier) und eine Vorabversion der Version 6 veröffentlicht. Zusätzlich wurde auch IT Mill Ltd. umbenannt zu Vaadin Ltd., um klarzumachen, wie sehr die Firma hinter ihrem Framework steht.
Es dauerte bis März 2013, bis die Version 7 herauskam. Ende Juni 2013 kam die Version 7.1 heraus, die abgesehen von Fehlerkorrekturen als wichtigste Funktionalität Server Push enthielt. Hiermit wird der Server in die Lage versetzt, eigenständig Informationen auf dem Client zu aktualisieren, was das Programmiermodell noch flexibler macht.
Vaadin ist ein typischer Vertreter eines Rich Internet Application Frameworks (RIA Framework), mit dessen Hilfe Webapplikationen implementiert werden, die so weit wie möglich einer klassischen Desktop-Applikation entsprechen. Hierbei zeigt sich als Trend, dass mehr und mehr weggegangen wird von proprietären Lösungen wie zum Beispiel Adobe Flash hin zu HTML5 und JavaScript. GWT und damit auch Vaadin setzen auf diesem Trend auf.
Mit immer größerer Leistungsfähigkeit der unterliegenden Browser und eines Frameworks wie Vaadin wird die Distanz zwischen klassischen Applikationen und Applikationen, die im Browser laufen, immer geringer, und Analysten sagen bereits seit 2007 voraus, dass die Grenzen zwischen diesen Applikationsarten immer mehr verschwimmen werden (siehe [Forrester 2007]).
Damit stellt sich weniger die Frage, was wir mit Vaadin machen können, als was sich nicht machen lässt. Die folgenden beiden Punkte sind problematisch:
Verarbeitung großer Datenmengen auf dem Client
vollständige Funktionalität ohne Netzzugang (Offline-Funktion für mobile Geräte)
Im ersten Fall stellt sich die Frage, warum die Datenverarbeitung auf dem Client durchgeführt werden muss und ob es nicht sinnvoller wäre, die Daten zum Server oder in eine Cloud-Infrastruktur zu bewegen.
Im zweiten Fall haben wir eine Situation, die das Programmiermodell von Vaadin ad absurdum führt. Wenn es hingegen um zeitlich beschränkte Offline-Funktionalität geht, dann gibt es zwei Aspekte: zum einen die Berechnung von Informationen auf dem Server. Dies kann man in den Griff bekommen, indem die entsprechenden Berechnungen lokal durchgeführt werden oder eine Meldung angezeigt wird, dass der Service aktuell nicht zur Verfügung steht. Der andere Aspekt ist die Eingabe von Daten. Hier besteht die Möglichkeit, die Daten lokal zu cachen und zum Server zu übertragen, sobald dieser wieder verfügbar ist.
Die Vaadin-Erweiterung TouchKit für mobile Geräte bietet Unterstützung für diese Vorgehensweisen. In jedem Fall ist es aber sinnvoll, den Nutzer auf die fehlende Verbindung hinzuweisen; das Touchkit ermöglicht, hierfür ein eigenes Theme zu verwenden, um dies sehr deutlich zu signalisieren.
Wir verwenden Vaadin in vielen unserer Projekte und haben die verschiedensten Arten von Anwendungen bereits erfolgreich umgesetzt.
Es gibt prinzipiell keinen Typ Anwendung, bei dem wir sagen würden, dass Vaadin nicht verwendet werden kann – im Gegenteil sind die durch Vaadin zur Verfügung gestellten Abstraktionen und Funktionen so hilfreich, dass wir bei neuen Webapplikationen immer zur Verwendung von Vaadin tendieren. Dies gilt für Anwendungen im Intranet, im Internet, mit wenigen und vielen Benutzern, mit einfachen und komplexen Benutzerschnittstellen. Allerdings muss man bei komplexeren Benutzerschnittstellen darauf achten, dass die Komponenten nicht zu sehr verschachtelt werden (wozu man als unerfahrener Vaadin-Entwickler neigen kann), um die Applikation nicht unnötig zu bremsen.
Ein weiterer wichtiger Punkt ist, wie bei jeder Webapplikation, die Größe der Session. Vaadin legt die Benutzerschnittstellenobjekte (alle Objekte, die an den UI-Objekten hängen) in der Session ab und vergrößert diese damit natürlich (logischerweise umso mehr, je mehr verschachtelte Komponenten die Anwendung enthält). Nach dem Schließen des Browserfensters bleibt die Session so lange erhalten, bis sie vom System abgeräumt wird, und verbraucht damit weiterhin Speicher (sofern sich der Benutzer nicht explizit abmeldet). Wenn zusätzlich die Benutzer die gleiche Applikation mehrfach öffnen, dann legt Vaadin diese Objektbäume natürlich mehrfach in der Session ab. Dies ist aber nichts Ungewöhnliches und wird auch von anderen serverzentrierten Frameworks in gleicher Weise gelöst. In der praktischen Verwendung haben wir noch keine Probleme erlebt, die die Verwendung von Vaadin verhindert hätten, und auch die notwendige Größe der verwendeten Server ist im normalen Bereich. Ob allerdings eine Webapplikation wie Facebook mit Vaadin performant wäre, wagen wir zu bezweifeln.
Die eingebauten Kommunikationsmechanismen erlauben eine gute und reaktionsfähige Interaktion auch mit vergleichsweise niedrigen Datenraten des unterliegenden Netzes, solange die Latenzzeiten nicht zu hoch werden.
CenterDevice
Ein Beispiel, das die Verwendung von Vaadin mit vielen Nutzern und hohen nichtfunktionalen Anforderungen sehr gut demonstriert, ist die Cloud-Anwendung CenterDevice (siehe [CenterDevice]), die von Mitarbeitern der codecentric entwickelt wurde. CenterDevice ist eine Anwendung für Cloud Storage, in der Sie Ihre Daten in einer deutschen Cloud ablegen, automatisch verschlagworten und mit anderen teilen können. Hier haben wir eine komplexe Benutzerschnittstelle kombiniert mit sehr vielen Benutzern und großen Datenmengen, die vom und zum Nutzer transferiert werden müssen und für die auch (zumindest für die gängigsten Formate) eine direkte Darstellung in der Applikation möglich sein muss.
Abb. 1–1 Beispiel einer komplexen Vaadin-Applikation (CenterDevice)
Hier waren tatsächlich einige Iterationen notwendig, bis die Applikation die gewünschte Reaktivität hatte, auch und gerade beim Umgang mit großen Dateien. Aber das Ergebnis spricht für sich, und wir würden uns auch in diesem Fall mit den sehr hohen Anforderungen wieder für Vaadin entscheiden. Holen Sie sich bei Interesse einfach einen Test-Account und urteilen Sie selbst.
Einzig Offline-Applikationen, die ohne Verbindung mit dem Server uneingeschränkt funktionieren, sind mit Vaadin ohne zusätzliche Arbeit nicht möglich. Vaadin bietet zwar rudimentäre Unterstützung, aber für die Offline-Unterstützung ist trotzdem eine Menge an Handarbeit nötig, die die Vorteile von Vaadin einschränkt.
Auf die Website von Vaadin gelangen Sie unter folgender URL:
http://www.vaadin.com
Hier gibt es nicht nur die jeweils aktuelle Version von Vaadin, Add-ons für die Entwicklung und die Integration in verschiedene Entwicklungsumgebungen, sondern auch Tutorials und eine Online-Version des »Book of Vaadin«, der Referenz für die Verwendung von Vaadin.
Außerdem finden Sie dort das Vaadin-Forum, das die direkte Kommunikation mit den Vaadin-Entwicklern ermöglicht. Falls Sie nicht den Umweg über die Vaadin-Website nehmen wollen, folgen Sie einfach der URL:
http://www.vaadin.com/forum
In diesem Kapitel werden wir die Entwicklungsumgebung Eclipse einrichten, unser erstes Vaadin-Projekt aufsetzen und eine einfache Hello-World-Applikation schreiben. Wir werden sehen, wie wir Maven verwenden können, um Vaadin-Projekte zu bauen, und zum Schluss noch einen kurzen Blick auf andere Entwicklungsumgebungen werfen.
Für das einfache Arbeiten mit Vaadin in Eclipse benötigen wir Java und Eclipse, das Eclipse-Plugin für Vaadin-Entwicklung, das von Vaadin selbst zur Verfügung gestellt wird, einen Servlet-Container (wir verwenden der Einfachheit halber Tomcat) und Maven als Build-Werkzeug für unsere Builds außerhalb von Eclipse.
Die neueste Java-Version finden Sie auf der Website von Oracle (siehe [Javasoft]). Wählen Sie einfach die neueste SE-Version (Standard Edition) für Ihr Betriebssystem und Ihre Architektur (32 oder 64 Bit) und installieren Sie diese auf Ihrem System. Hierzu müssen Sie eventuell auch die Pfadinformation anpassen, so dass Ihnen Java auch auf der Kommandozeile zur Verfügung steht. Mit dem Aufruf java –version prüfen Sie, dass Java erfolgreich installiert ist.
Listing 2–1 Java ist erfolgreich installiert.
~ > java -version
java version "1.7.0_51"
Java(TM) SE Runtime Environment (build 1.7.0_51-b13)
Java HotSpot(TM) 64-Bit Server VM (build 24.51-b03, mixed mode)
~ >
Im nächsten Schritt laden wir Eclipse herunter (siehe [Eclipse]). Da wir Webapplikationen entwickeln wollen, wählen wir das Paket Eclipse IDE for Java EE Developers, das alle benötigten Eclipse-eigenen Werkzeuge enthält. Laden Sie die Version herunter, die der Architektur Ihrer installierten Java-Version entspricht (32 oder 64 Bit). Packen Sie das Archiv aus und bewegen Sie das resultierende Verzeichnis eclipse an einen Ort Ihrer Wahl.
Starten Sie nun die im Eclipse-Verzeichnis zu findende Applikation. Beim Start fragt Eclipse nach dem Pfad zu einem Workspace-Verzeichnis, das mehrere Projekte zusammenfasst. Wählen Sie ein Verzeichnis (oder das voreingestellte) und sagen Sie ok. Wenn Eclipse die Willkommensseite präsentiert, dann ist Eclipse erfolgreich installiert.
Abb. 2–1 Willkommensseite der Eclipse-IDE
Nach der Installation von Eclipse können wir das Vaadin-Plugin installieren, das alle benötigten Vaadin-Bibliotheken sowie das Book of Vaadin, die offizielle englische Referenz, für das leichtere Nachschlagen mitbringt.
Mit dem Vaadin-Plugin können wir Vaadin-Projekte anlegen, neue Widgets oder Themes erzeugen, mit einem visuellen Editor, dem Visual Designer, Layouts definieren und unsere erzeugten Widgets debuggen. Deshalb empfehlen wir bei der Verwendung von Eclipse grundsätzlich, das Vaadin-Plugin für die Vaadin-Entwicklung zu verwenden.
Die Installation des Vaadin-Plugin
Das Vaadin-Plugin können Sie über den Eclipse-eigenen Marketplace installieren (hier können Hersteller ihre Plugins registrieren). Hierfür wählen Sie den Menüpunkt Help → Eclipse Marketplace aus und geben im Suchfeld den Text Vaadin ein. Beim nun aufgelisteten Vaadin-Plugin müssen Sie nur noch den Button Install anwählen, und das Plugin wird installiert. Wenn Sie alle Fragen beantwortet haben und Eclipse neu gestartet ist, sollte das Plugin aktiv sein.
Sie können die korrekte Installation verifizieren, indem Sie den Menüpunkt File → New → Other anwählen. In der Liste der Assistenten für neue Artefakte sollten verschiedene Vaadin-Assistenten auftauchen.
Abb. 2–2 Liste der in Eclipse zur Verfügung stehenden Vaadin-Assistenten
Installation des Tomcat
Um unsere Vaadin-Applikationen auszuführen, benötigen wir einen Servlet-Container. Im Rahmen des Buchs verwenden wir Apache Tomcat in der Version 7. Sie können das zugehörige Archiv für Ihr Betriebssystem und Ihre Architektur direkt von der Website herunterladen (siehe [Apache Tomcat]). Packen Sie das Archiv aus und legen Sie es an einem Ort Ihrer Wahl ab.
Im nächsten Schritt konfigurieren wir Eclipse so, dass es den Tomcat kennt. Hierfür gibt es verschiedene Wege, wir gehen den Weg über den Assistenten. Wählen Sie den Menüpunkt File Ý New Ý Other aus. In der aufgeführten Liste gibt es unter dem Punkt Server den gleichnamigen Assistenten. In der folgenden List finden Sie unter Apache die Tomcat-Version, die Sie heruntergeladen haben, und geben im nach dem Klick auf den Next-Button erscheinenden Dialog den Pfad zu Ihrem Tomcat-Verzeichnis an. Der Klick auf den Finish-Button legt Ihre Serverkonfiguration an.
Wenn Sie jetzt den Reiter Servers anwählen, können Sie den Tomcat mit Ihrer Serverkonfiguration starten (grüner Start-Button). Wenn die Installation korrekt ist, dann sollte nach kurzer Zeit der Server als Started, Synchronized markiert sein.
Abb. 2–3 Der gestartete Tomcat-Server in Eclipse
Installation von Maven
Für die Teile des Buchs, die sich mit der Erzeugung von Artefakten mit dem Build-Management-Werkzeug Maven beschäftigen, benötigen wir außerdem eine Maven-Installation und die zugehörige Konfiguration des Plugin M2Eclipse in Eclipse.
Auf der Website von Maven (siehe [Maven]) können Sie ein Archiv mit der aktuellen Version von Maven herunterladen. Packen Sie das Archiv aus, legen Sie das Verzeichnis an einem Ort Ihrer Wahl ab und erweitern Sie den Pfad Ihrer verwendeten Shell oder Kommandozeile um das Unterverzeichnis bin Ihres Maven-Verzeichnisses.
Da das Plugin M2Eclipse in Eclipse bereits enthalten ist, müssen wir ihm nur noch den Ort unserer Maven-Installation bekannt machen. Das Plugin bringt zwar auch eine eigene Maven-Version mit, aber diese ist vergleichsweise alt.
In den allgemeinen Einstellungen von Eclipse (erreichbar unter Eclipse → Einstellungen) gibt es einen eigenen Konfigurationsbereich namens Maven, unter dem sich verschiedene Unterpunkte befinden. Im Unterpunkt Installations können Sie Ihre eigene Maven-Installation eintragen. Klicken Sie auf den Add-Button, tragen Sie das Installationsverzeichnis Ihrer Maven-Version ein und klicken Sie auf den Ok-Button. Damit wird ab jetzt diese Maven-Version verwendet.
Damit sind die Vorarbeiten für die Entwicklung mit Eclipse, dem Vaadin-Plugin, der Tomcat-Installation und Maven beendet, und wir können uns an dem ersten Projekt versuchen.
Wir beginnen damit, ein neues Vaadin-Projekt anzulegen. Über File → New → Project kommen wir zur Liste der Assistenten, aus der wir den Assistenten für ein Vaadin-7-Projekt auswählen. Wir klicken auf den Next-Button und kommen zur Konfiguration des Projekts. Hier sollte bereits unser Tomcat-Server eingetragen und eine Vaadin-7-Version ausgewählt sein. Wir müssen nur noch den Projektnamen VaadinHelloWorld eingeben. Dieser Name taucht später in der URL unseres ersten Servlets auf, weshalb Sie hier einen nicht zu komplizierten Namen wählen sollten. Ein Klick auf den Finish-Button legt unser erstes Vaadin-Projekt an.
Der Vaadin-Assistent fügt alle notwendigen Abhängigkeiten ein und lädt im Zweifelsfall sogar die Vaadin-Bibliotheken herunter. Zu guter Letzt wird auch ein einfaches Vaadin-Beispiel zur Verfügung gestellt, das den Test der korrekten Projektinitialisierung erlaubt. Wählen Sie hierfür im Kontextmenü der Java-Klasse den Menüpunkt Run As → Run on Server aus, und der Tomcat-Server wird gestartet, ein eingebauter Mini-Browser wird in Eclipse mit der richtigen URL geöffnet und eine einfache Vaadin-Applikation wird angezeigt. Nach der Prüfung können wir die vom Vaadin-Plugin erzeugte Beispielklasse (VaadinhelloworldUI.java) löschen.
Abb. 2–4 Das erste Vaadin-Projekt in Eclipse
Sehr kurz gefasst stellt eine Vaadin-Applikation eine Benutzeroberfläche im Browser dar. Die Inhalte der zugehörigen einzelnen Fenster oder Reiter werden durch User-Interface-Klassen (UI-Klassen), abgeleitet von einer Basisklasse com.vaadin.ui.UI, modelliert. Ausgehend von der Initialisierungsmethode UI.init() wird dazu ein Komponentenbaum aufgebaut, der zum Browser übertragen und dort dargestellt wird. Die notwendige Infrastruktur, damit diese UI-Klassen bei Aufrufen der jeweiligen URL korrekt identifiziert und angesprochen werden, wird von der Vaadin-Klasse com.vaadin.server.VaadinServlet implementiert. Diese kann für komplexere Fälle erweitert werden. Wir gehen auf diese Zusammenhänge später noch weiter ein, für unsere erste Applikation genügt diese Detailtiefe.
Das Vaadin-Servlet
Für einfachere Vaadin-Applikationen reicht es aus, wenn wir dem Servlet die zu verwendende UI-Klasse mitteilen. Dies tun wir über eine Annotation @VaadinServletConfiguration. Zusätzlich können wir noch über die Annotation @WebServlet angeben, unter welchem Namen unsere Applikation erreicht werden kann.
Um uns das Leben noch weiter zu erleichtern, bietet Vaadin die Möglichkeit, das Vaadin-Servlet als statische innere Klasse einer UI-Klasse zu definieren. In diesem Fall brauchen wir die UI-Klasse nicht mehr über die Annotation zu definieren. Vaadin verwendet automatisch die umgebende Klasse.
Unser Vaadin-Servlet sieht wie folgt aus:
Listing 2–2 Das Vaadin-Servlet mit den notwendigen Annotationen
@WebServlet("/*")
@VaadinServletConfiguration(ui = HelloWorld.class)
public static class Servlet extends VaadinServlet {
}
Wir beginnen mit der Annotation @WebServlet, der wir ein Muster mitgeben, das beliebige Namen für unsere Applikation erlaubt. Dann verwenden wir die Annotation @VaadinServletConfiguration, um als UI-Klasse die Klasse HelloWorld zu spezifieren. Diese Zeile ist optional, sofern wir das nun folgende VaadinServlet als statische innere Klasse der UI-Klasse HelloWorld definieren.
Die UI-Klasse
In der UI-Klasse HelloWorld definieren wir unsere Benutzeroberfläche, die Komponenten und ihr Layout in der Methode init(), die beim ersten Aufruf der Applikation ausgeführt wird. Als Parameter wird ein VaadinRequest übergeben, der den spezifischeren Request-Typ (ServletRequest oder PortletRequest) kapselt und die Initparameter zur Verfügung stellt.
Listing 2–3 Unsere erste Vaadin-Applikation
package de.vaadinbuch.einfuehrung;
import ...
public class HelloWorld extends UI {
@WebServlet("/*")
public static class Servlet extends VaadinServlet {
}
protected void init(final VaadinRequest request) {
final HorizontalLayout layout = new HorizontalLayout();
setContent(layout);
final TextField name = new TextField
("Geben Sie bitte Ihren Namen ein");
layout.addComponent(name);
name.addTextChangeListener(new TextChangeListener() {
public void textChange(final TextChangeEvent event) {
final String name = event.getText();
Notification.show("Hallo, " + name);
}
});
}
}
Nach der Package-Deklaration folgen die benötigten Import-Statements.
Nun definieren wir die Klasse HelloWorld, die wie beschrieben von com.vaadin.ui.UI abgeleitet ist. In dieser definieren wir unser Vaadin-Servlet als statische innere Klasse. Damit können wir auf die Annotation zur Festlegung der UI-Klasse verzichten und benötigen nur die Annotation zur Festlegung des Zugriffsmusters.
Die Methode init()
Jetzt kommen wir zur eigentlichen Festlegung unserer Benutzerschnittstelle, die wir in der Methode init() durchführen. Dies wird von Vaadin so vorgegeben, da die UIs erst dann erzeugt werden, wenn der erste Zugriff auf sie erfolgt, und damit zum Zeitpunkt der Erzeugung des Objekts nicht grundsätzlich alle benötigten Informationen zur Erzeugung vorhanden sind. Das übergebene Objekt vom Typ VaadinRequest enthält dabei die Parameter dieses ersten Zugriffs.
In unserer init()-Methode erzeugen wir im ersten Schritt ein Objekt vom Typ com.vaadin.ui.HorizontalLayout, das wir mit Aufruf der Methode setContent() zum Inhalt unserer Benutzerschnittstelle machen. Ein Layout ist eine Container-Komponente, die weitere Komponenten unserer Benutzerschnittstelle aufnimmt und nach bestimmten Vorgaben anordnet. Im Falle des HorizontalLayout werden alle enthaltenen Komponenten nebeneinander dargestellt.
Im nächsten Schritt erzeugen wir ein com.vaadin.ui.TextField mit einer Beschriftung und fügen es mit dem Aufruf der Methode addComponent() dem Layout hinzu. Dieses erlaubt uns beliebige Eingaben, die dann in Folge verarbeitet werden können.
Unser Layout ist damit fertig, aber wir wollen noch eine (wenn auch minimale) Reaktion auf unsere Eingaben erhalten. Wir verwenden die minimale Variante und registrieren einen TextChangeListener, der bei jeder Änderung des Eingabefeldes aufgerufen wird. Die zugehörige Methode textChange()show()com.vaadin.ui.Notification
