2. About me
Christian Janz
E-Mail: christian.janz@bridging-it.de
Consultant im Bereich Softwareentwicklung Java/JEE
bei bridgingIT GmbH in Mannheim
Interesse: Architektur und Entwicklung von
Geschäftsanwendungen mit Hilfe moderner Java
Frameworks
bridgingIT / Seite 2
4. Einführung in Vaadin
Agenda
Einführung in Vaadin
Überblick
Architektur
Weiterführende Themen
Vergleich mit anderen Frameworks
Zusammenfassung
bridgingIT / Seite 4
6. Überblick
Vaadin = finnisch für weibliches Rentier
(wörtlich „Ich beharre“)
RIA-Framework der Vaadin Ltd. aus Finnland
Pure Java, kein JavaScript, kein XML
Umfangreiches Widget Set
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
bridgingIT / Seite 6
7. Kein wirklich neues Framework
Kommerzielle Lizenz Apache License 2
Vaadin 6
Eclipse Plugin
Vaadin 6.8.7
Weitere Projekte auf Basis der
Millstone Library IT Mill Toolkit
Release 5 Vaadin 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 7
10. Getting started
• Voraussetzung
• Eclipse oder Netbeans
• Servlet-Container (im Beispiel: Tomcat 7)
• Installation Vaadin Tools für Eclipse
• Neues Projekt via Wizard
https://vaadin.com/book/vaadin7/-/page/getting-started.first-project.html
bridgingIT / Seite 10
11. Getting started – mit Maven
$ mvn archetype:generate
-DarchetypeGroupId=com.vaadin
-DarchetypeArtifactId=vaadin-archetype-application
-DarchetypeVersion=7.x.x
-DgroupId=your.company
-DartifactId=project-name
-Dversion=1.0
-Dpackaging=war
$ mvn package
$ mvn jetty:run
bridgingIT / Seite 11
12. Visual User Interface Designer
https://vaadin.com/book/vaadin7/-/page/eclipse.html
bridgingIT / Seite 12
13. Hello World
public class HelloWorldUI extends UI {
@Override
protected void init(VaadinRequest request) {
VerticalLayout content = new VerticalLayout();
content.setSizeFull(); // Use entire window
setContent(content); // Attach to the UI
// Add some component
content.addComponent(new Label("Hello!"));
}
}
bridgingIT / Seite 13
15. Weiterführende Themen
Agenda
Einführung in Vaadin
Weiterführende Themen
Data Binding
Navigation
Themes
Eigene Komponenten
Vergleich mit anderen Frameworks
Zusammenfassung
bridgingIT / Seite 15
16. Warum Data Binding?
• Vermeidung von Boilerplate-Code
textFieldName.setValue(personEntity.getName());
textFieldPhoneNumber.setValue(personEntity.getPhoneNumber());
...
• Generischer Ansatz zur Datensynchronisation
• Weniger Fehler
• Validierung inklusive
• Design Pattern: Supervising Presenter 1
• Trennung von View, Presenter und Model
• Logik in Presenter auslagern
• Einfach Testbarkeit des Presenters
1 http://martinfowler.com/eaaDev/SupervisingPresenter.html
bridgingIT / Seite 16
18. Data Binding: Interfaces
String lastName
class Person {
}
List<Person>
https://vaadin.com/book/vaadin7/-/page/datamodel.html#datamodel.overview
bridgingIT / Seite 18
19. Data Binding: Big Picture
https://vaadin.com/book/vaadin7/-/page/datamodel.html#figure.datamodel.overview.relationships
bridgingIT / Seite 19
21. Formulare in Vaadin 7
Anwendungsmöglichkeiten der FieldGroup:
• Explizites Binding der Felder
• Erzeugen der Felder via FieldFactory
• Automatisches Binding
bridgingIT / Seite 21
22. FieldGroup: Explizites Binding
Person bean = new Person("James T Kirk", 50);
BeanItem<Person> item = new BeanItem<Person> (bean);
// Have some layout and create the fields
FormLayout form = new FormLayout();
TextField nameField = new TextField(“Nachname");
form.addComponent(nameField);
TextField ageField = new TextField(“Alter");
form.addComponent(ageField);
// Now create the binder and bind the fields
FieldGroup binder = new FieldGroup(item);
binder.bind(nameField, "name");
binder.bind(ageField, "age");
https://vaadin.com/book/vaadin7/-/page/datamodel.itembinding.html
bridgingIT / Seite 22
23. FieldGroup: FieldFactory
Person bean = new Person("James T Kirk", 50);
BeanItem<Person> item = new BeanItem<Person> (bean);
// Have some layout
FormLayout form = new FormLayout();
// Now create a binder that can also create the fields
// using the default field factory
FieldGroup binder = new FieldGroup(item);
form.addComponent(binder.buildAndBind(“Nachname", "name"));
form.addComponent(binder.buildAndBind(“Alter", "age"));
https://vaadin.com/book/vaadin7/-/page/datamodel.itembinding.html
bridgingIT / Seite 23
24. FieldGroup: Automatisches Binding
// A form component that allows editing an item
public class MyForm extends CustomComponent {
TextField name = new TextField(“Nachname");
@PropertyId("age")
TextField ageField = new TextField(“Alter");
public MyForm(Item item) {
FormLayout layout = new FormLayout();
layout.addComponent(name);
layout.addComponent(ageField);
// Now use a binder to bind the members
FieldGroup binder = new FieldGroup(item);
binder.bindMemberFields(this);
setCompositionRoot(layout);
}
}
// And the form can be used as a component
layout.addComponent(new MyForm(item));
https://vaadin.com/book/vaadin7/-/page/datamodel.itembinding.html
bridgingIT / Seite 24
25. Validierung
• Hinzufügen von Validatoren via Field.addValidator(Validator validator)
• Eingebaute Validatoren:
• IntegerValidator
• DateRangeValidator
• RegexpValidator
• …
• BeanValidator (Validierung via Bean Validation API JSR-303)
• BeanValidator automatisch hinzugefügt bei BeanFieldGroup
bridgingIT / Seite 25
27. Tabellen in Vaadin
Verwendung von Table und Container
// Create a container for beans
BeanItemContainer<Bean> beans = new BeanItemContainer<Bean>(Bean.class);
// Add some beans to it
beans.addBean(new Bean("Mung bean", 1452.0));
beans.addBean(new Bean("Chickpea", 686.0));
Table table = new Table("Beans of All Sorts", beans);
table.setVisibleColumns(new Object[] { "name", "energy" });
bridgingIT / Seite 27
28. Tabellen mit vielen Daten
Verwendung von Addon Lazy Query Container
• Implementierung von Container
• Lazy Loading
• Unabhängig von Datenanbindung durch Query Interface
• Kann anwendungsspezifisch implementiert werden
• Implementierung für JPA eingebaut
• Client hat nur sichtbare Zeilen im Speicher
https://vaadin.com/directory#addon/lazy-query-container
bridgingIT / Seite 28
30. Weiterführende Themen
Agenda
Einführung in Vaadin
Weiterführende Themen
Data Binding
Navigation
Themes
Eigene Komponenten
Vergleich mit anderen Frameworks
Zusammenfassung
bridgingIT / Seite 30
33. Navigation: Beispiel
public class NavigationtestUI extends UI {
@Override
public void init(VaadinRequest request) {
// Create Navigator, use the UI content layout to display the views
Navigator navigator = new Navigator(this, this);
// Add some Views
navigator.addView(MainView.NAME, new MainView());
// #count will be a new instance each time we navigate to it, counts:
navigator.addView(CountView.NAME, CountView.class);
// The Navigator attached to the UI will automatically navigate to the
// initial fragment once the UI has been initialized.
}
}
https://vaadin.com/wiki/-/wiki/Main/Creating%20a%20bookmarkable%20application%20with%20back%20button%20support
bridgingIT / Seite 33
35. Weiterführende Themen
Agenda
Einführung in Vaadin
Weiterführende Themen
Data Binding
Navigation
Themes
Eigene Komponenten
Vergleich mit anderen Frameworks
Zusammenfassung
bridgingIT / Seite 35
36. Themes
Das Aussehen der Anwendung wird durch das Theme gesteuert
• Vaadin liefert Themes mit
• Erstellung eigener Themes möglich
• Technologie:
• CSS
• Sass (Syntactically Awesome Stylesheets)
https://vaadin.com/book/vaadin7/-/page/themes.html
bridgingIT / Seite 36
37. Sass
• Syntactically Awesome Stylesheets: http://sass-lang.com/
• Erweiterung von CSS3:
• Variablen
• Verschachtelte Regeln
• Mixins
• Kann in Standard CSS kompiliert werden
• Mehrere Syntaxvarianten
• SCSS (Sassy CSS): *.scss
• „Intended Syntax“: *.sass
• Vaadin unterstützt nur SCSS
bridgingIT / Seite 37
40. Weiterführende Themen
Agenda
Einführung in Vaadin
Weiterführende Themen
Data Binding
Navigation
Themes
Eigene Komponenten
Vergleich mit anderen Frameworks
Zusammenfassung
bridgingIT / Seite 40
41. 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 41
48. 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 48
49. Vergleich mit anderen Frameworks
Agenda
Einführung in Vaadin
Weiterführende Themen
Vergleich mit anderen Frameworks
Aspekte
Unterschiede
Zusammenfassung
bridgingIT / Seite 49
57. 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 57
58. Nachteile
• Bisher nicht so weit verbreitet
• Einige Addons sind kostenpflichtig
• Skaliert nicht beliebig
• Hat Probleme bei schlechten Antwortzeiten (Pings)
bridgingIT / Seite 58
59. 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 59
