Das Dokument bietet eine Einführung in das Vaadin-Framework, einschließlich seiner Architektur, Datenbindung und der Entwicklung von Komponenten. Es vergleicht Vaadin mit anderen Frameworks, hebt seine Vor- und Nachteile hervor und skizziert mögliche Einsatzszenarien, insbesondere für Rich Intranet Applications. Vaadin wird als ein reifes, Open-Source-Framework mit guter Dokumentation und kommerziellem Support beschrieben, das allerdings in Bezug auf Verbreitung und Skalierbarkeit Einschränkungen hat.

1. Yet another Java Web Framework?
Christian Janz
christian.janz@bridging-it.de
bridgingIT / Seite 1

2. Agenda
Einführung in Vaadin
Überblick
Architektur
Databinding
Entwicklung von Komponenten
Vergleich mit anderen Frameworks
Aspekte
Unterschiede
Zusammenfassung
bridgingIT / Seite 2

3. Einführung in Vaadin
Agenda
Einführung in Vaadin
Überblick
Architektur
Databinding
Entwicklung von Komponenten
Vergleich mit anderen Frameworks
Aspekte
Unterschiede
Zusammenfassung
bridgingIT / Seite 3

4. bridgingIT / Seite 4

5. Überblick
 Vaadin = finnisch für weibliches Rentier
(wörtlich „Ich beharre“)
 RIA-Framework der Vaadin Ltd. aus Finnland
 www.vaadin.com
 Showcase: http://demo.vaadin.com/sampler
 Framework steht unter Apache License 2
 Viele kostenlose Addons
 Kostenpflichtiger Pro Account
 Feature Voting, Bug-Fix Priority
 Pro Addons
 Support
 Kein wirklich neues Framework
bridgingIT / Seite 5

6. Geschichte
Kommerzielle Lizenz Apache License 2
Vaadin 6
 Eclipse Plugin
Vaadin 6.8.5
Weitere Projekte auf Basis der
Millstone Library IT Mill Toolkit Vaadin 7
Release 5 Beta 7
Millstone
Library 1.0
IT Mill Toolkit
Release 4 Vaadin
IT Mill wird
 AJAX Directory
gegründet
2000 2006 2008 2009 2012 2013
http://vaadin.com/book/-/page/intro.overview.background.html
bridgingIT / Seite 6

7. bridgingIT / Seite 7

8. Architektur: Grobe Übersicht
Vaadin Framework
https://vaadin.com/book/-/page/intro.html#figure.intro.architecture
bridgingIT / Seite 8

9. Vergleich mit Plain GWT
Vaadin
Plain GWT
bridgingIT / Seite 9

10. Demo Hello World
• Voraussetzung
• Eclipse oder Netbeans
• Servlet-Container (im Beispiel: Tomcat 7)
• Installation Vaadin Tools von http://vaadin.com/eclipse
• Siehe https://vaadin.com/book/-/page/getting-started.package.html
bridgingIT / Seite 10

11. Demo: Hello World
Wichtige Punkte in dieser Demo
• Eclipse-Integration: Projekt Wizard
• Projekt-Layout
• Einfachheit der Entwicklung
• Debuggen in Eclipse
• Debuggen im Browser
• Inhalt der XHR-Anfragen
• Debug-Console (?debug)
bridgingIT / Seite 11

12. Databinding
Agenda
Einführung in Vaadin
Überblick
Architektur
Databinding
Entwicklung von Komponenten
Vergleich mit anderen Frameworks
Aspekte
Unterschiede
Zusammenfassung
bridgingIT / Seite 12

13. Interfaces
String lastName
class Person {
}
List<Person>
bridgingIT / Seite 13

14. Databinding: Big Picture
bridgingIT / Seite 14

15. Databinding: Feature-Demos
• Mehrere Views synchronisieren
• Konvertierung Model  View
• Bean Validation (JSR-303)
• Tabelle und Formular synchronisieren
• Weitere Demos siehe: http://demo.vaadin.com/book-examples-vaadin7/book/
bridgingIT / Seite 15

16. Entwicklung von Komponenten
Agenda
Einführung in Vaadin
Überblick
Architektur
Databinding
Entwicklung von Komponenten
Vergleich mit anderen Frameworks
Aspekte
Unterschiede
Zusammenfassung
bridgingIT / Seite 16

17. Entwicklung von Komponenten
Grundsätzlich 3 Arten von Komponenten
• Komplett serverseitig  Composite Components
• Server- und clientseitig mit GWT
• Server- und clientseitig mit Plain JavaScript
bridgingIT / Seite 17

18. Composite Components
• Unterklassen von com.vaadin.ui.CustomComponent
• Rein Serverseitig
• Komposition bestehender Komponenten
public class LoginForm extends CustomComponent {
private TextField usernameField;
private PasswordField passwordField;
public LoginForm() {
VerticalLayout verticalLayout = new VerticalLayout();
setCompositionRoot(verticalLayout);
usernameField = new TextField("Username");
usernameField.setRequired(true);
verticalLayout.addComponent(usernameField);
passwordField = new PasswordField("Password");
verticalLayout.addComponent(passwordField);
}
}
bridgingIT / Seite 18

19. Client-Side Engine
bridgingIT / Seite 19

20. Custom Vaadin Widget mit GWT
bridgingIT / Seite 20

21. Custom Vaadin Widget mit GWT
Folgende Artefakte müssen implementiert werden:
• GWT Modul
• GWT Widget (neu oder bestehend)
• Connector-Klasse
• SharedState-Klasse
• Serverseitige Komponentenklasse
Siehe https://vaadin.com/book/vaadin7/-/page/gwt.html
bridgingIT / Seite 21

22. Custom Vaadin Widget mit JS
bridgingIT / Seite 22

23. Custom Vaadin Widget mit JS
Folgende Artefakte müssen implementiert werden:
• Widget in JavaScript (neu oder bestehend)
• Connector-Klasse in JavaScript
• Serverseitige Komponentenklasse in Java
Siehe https://vaadin.com/book/vaadin7/-/page/gwt.javascript.html
bridgingIT / Seite 23

24. Vergleich mit anderen
Frameworks
Agenda
Einführung in Vaadin
Überblick
Architektur
Databinding
Entwicklung von Komponenten
Vergleich mit anderen Frameworks
Aspekte
Unterschiede
Zusammenfassung
bridgingIT / Seite 24

25. .equals(aPear)
bridgingIT / Seite 25

26. Aspekte
Organisation
• Lizenz
• Firma
• Community
• Dokumentation
Entwicklung • Support Architektur
• Lernkurve • Server/Client UI
• Verwendete • Anwendungs-
Sprachen /Seitenbasiert
• Eigene • Komponenten
Komponenten • Skalierbarkeit
bridgingIT / Seite 26

27. Frameworks
bridgingIT / Seite 27

28. Unterschiede Organisation
Aspekt Vaadin GWT Smart GWT RichFaces
Lizenz Apache 2.0 Apache 2.0 LGPL/ LGPL
Kommerziell
Verantwortliche Vaadin Ltd. Google Isomorphics JBoss
Organisation
Community    
Dokumentation    
Kommerzieller Ja Nein Ja Ja
Support
bridgingIT / Seite 28

29. Unterschiede Architektur
Aspekt Vaadin GWT Smart GWT RichFaces
Server-/Client- Server Client Client/Server* Server
UI-Framework
Anwendungs- Anwendung Anwendung Anwendung Seiten
/Seitenbasiert
Verfügbarkeit    
Komponenten
Skalierbarkeit    
bridgingIT / Seite 29

30. Unterschiede Entwicklung
Aspekt Vaadin GWT Smart GWT RichFaces
Geringe    
Lernkurve
Verwendete Java, CSS Java 1, CSS Java, JavaScript, Java, JavaScript,
Sprachen CSS HTML, XML, CSS
Einfachheit    
Komponenten-
Entwicklung
1 nur Teilmenge
bridgingIT / Seite 30

31. Zusammenfassung
Agenda
Einführung in Vaadin
Überblick
Architektur
Databinding
Entwicklung von Komponenten
Vergleich mit anderen Frameworks
Aspekte
Unterschiede
Zusammenfassung
bridgingIT / Seite 31

32. Vorteile
• Open Source
• Reifes Framework mit guter Community
• Gute Dokumentation
• Kommerzieller Support erhältlich, falls gewünscht
• Viele Komponenten und Addons
• Einfache Entwicklung
• Gutes Theming-Konzept
• Einfaches Deployment
• Verwendung von GWT auf Clientseite
bridgingIT / Seite 32

33. Nachteile
• Bisher nicht so weit verbreitet
• Einige Addons sind kostenpflichtig
• Skaliert nicht beliebig
• Hat Probleme bei schlechten Antwortzeiten (Pings)
bridgingIT / Seite 33

34. Einsatzszenarien
Hauptszenario: Rich Intranet Applications
• Anwendungen mit angemeldeten Benutzern
• Bedienung wie Desktop-Anwendungen
• Verarbeitung von Daten
• Komplexere Logik
• Schnelle Entwicklung ohne großen Vorlauf
Alternativ: Rich Internet Applications
• Wichtig: Webserver „in der Nähe“ der Anwender
bridgingIT / Seite 34

35. Fragen und Antworten
Fragen?
bridgingIT / Seite 35

36. Wir freuen uns auf Sie.
Standort Mannheim Standort Stuttgart
N7, 5-6 Königstraße 42
68161 Mannheim 70173 Stuttgart
Standort Frankfurt Standort Karlsruhe
Solmsstraße 4 Rüppurrer Straße 4
60486 Frankfurt 76137 Karlsruhe
Standort Köln
Richmodstraße 6
50667 Köln
Alle Rechte vorbehalten. Die Weitergabe oder Vervielfältigung ist ohne vorherige
schriftliche Zustimmung der BridgingIT GmbH nicht erlaubt.
Copyright © BridgingIT GmbH