vaadin - thinking of u and i (jug ka 2013)
Post on 25-May-2015
1.090 Views
Preview:
TRANSCRIPT
bridgingIT / Seite 1
Christian Janzchristian.janz@bridging-it.de
bridgingIT / Seite 2
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
About me
bridgingIT / Seite 3
Agenda
Einführung in Vaadin
Vergleich mit anderen Frameworks
Zusammenfassung
Weiterführende Themen
bridgingIT / Seite 4
Agenda
Einführung in Vaadin
Einführung in Vaadin
Vergleich mit anderen Frameworks
Überblick
Architektur
Zusammenfassung
Weiterführende Themen
bridgingIT / Seite 5http://pixabay.com/en/moon-card-cartoon-sledge-flying-31665/
bridgingIT / Seite 6
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
Überblick
bridgingIT / Seite 7
Kein wirklich neues Framework
2000 2006 2009 2012
IT Mill wird gegründet
Millstone Library 1.0
IT Mill Toolkit Release 4
AJAX
Weitere Projekte auf Basis der Millstone Library
Kommerzielle Lizenz Apache License 2Vaadin 6
Eclipse Plugin
Vaadin Directory
Vaadin 6.8.7
http://vaadin.com/book/-/page/intro.overview.background.html
20132008
IT Mill Toolkit Release 5 Vaadin 7
bridgingIT / Seite 8
Vaadin Framework
Architektur: Grobe Übersicht
https://vaadin.com/book/vaadin7/-/page/intro.html#figure.intro.architecture
bridgingIT / Seite 9
Architektur: Laufzeit
https://vaadin.com/book/vaadin7/-/page/application.html#figure.application.architecture
bridgingIT / Seite 10
• Voraussetzung • Eclipse oder Netbeans• Servlet-Container (im Beispiel: Tomcat 7)
• Installation Vaadin Tools für Eclipse
• Neues Projekt via Wizard
Getting started
https://vaadin.com/book/vaadin7/-/page/getting-started.first-project.html
bridgingIT / Seite 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 12
Visual User Interface Designer
https://vaadin.com/book/vaadin7/-/page/eclipse.html
bridgingIT / Seite 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 14
Demo: Getting Started
Demo
bridgingIT / Seite 15
Weiterführende Themen
Agenda
Einführung in Vaadin
Vergleich mit anderen Frameworks
Data Binding
Navigation
Zusammenfassung
Weiterführende Themen
Themes
Eigene Komponenten
bridgingIT / Seite 16
• Vermeidung von Boilerplate-Code
• 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
Warum Data Binding?
1 http://martinfowler.com/eaaDev/SupervisingPresenter.html
textFieldName.setValue(personEntity.getName()); textFieldPhoneNumber.setValue(personEntity.getPhoneNumber()); ...
bridgingIT / Seite 17
Exkurs: Supervising Presenter
http://msdn.microsoft.com/en-us/library/ff648921.aspx
bridgingIT / Seite 18
Data Binding: Interfaces
String lastName
class Person {
}
List<Person>
https://vaadin.com/book/vaadin7/-/page/datamodel.html#datamodel.overview
bridgingIT / Seite 19
Data Binding: Big Picture
https://vaadin.com/book/vaadin7/-/page/datamodel.html#figure.datamodel.overview.relationships
bridgingIT / Seite 20
Formulare in Vaadin 7
(Form)Layout
(Text)Field FieldGroup1*
Item* 1
Property1
*
UI Komponenten Non-UI Komponenten
bridgingIT / Seite 21
Anwendungsmöglichkeiten der FieldGroup:
• Explizites Binding der Felder
• Erzeugen der Felder via FieldFactory
• Automatisches Binding
Formulare in Vaadin 7
bridgingIT / Seite 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 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 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 25
• 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
Validierung
bridgingIT / Seite 27
Tabellen in Vaadin
// 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" });
Verwendung von Table und Container
bridgingIT / Seite 28
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
Tabellen mit vielen Daten
bridgingIT / Seite 30
Weiterführende Themen
Agenda
Einführung in Vaadin
Vergleich mit anderen Frameworks
Data Binding
Navigation
Zusammenfassung
Weiterführende Themen
Themes
Eigene Komponenten
bridgingIT / Seite 31
Navigation
bridgingIT / Seite 32
Navigation: Komponenten
Navigator1
ViewProvider*1
UI Komponenten Non-UI Komponenten
ViewChangeListener
UI
NavigationStateManager
ViewDisplay
1
1
1
*
1
bridgingIT / Seite 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 35
Weiterführende Themen
Agenda
Einführung in Vaadin
Vergleich mit anderen Frameworks
Data Binding
Navigation
Zusammenfassung
Weiterführende Themen
Themes
Eigene Komponenten
bridgingIT / Seite 36
Das Aussehen der Anwendung wird durch das Theme gesteuert
• Vaadin liefert Themes mit• Erstellung eigener Themes möglich• Technologie:
• CSS• Sass (Syntactically Awesome Stylesheets)
Themes
https://vaadin.com/book/vaadin7/-/page/themes.html
bridgingIT / Seite 37
• 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
Sass
bridgingIT / Seite 38
Beispiel-Theme
@import "mytheme.scss"; .mytheme { @include mytheme; }
@import "../reindeer/reindeer.scss";
@mixin mytheme { @include reindeer;
/* An actual theme rule */ .v-button { color: blue; } }
styles.scss
mytheme.scss
bridgingIT / Seite 40
Weiterführende Themen
Agenda
Einführung in Vaadin
Vergleich mit anderen Frameworks
Data Binding
Navigation
Zusammenfassung
Weiterführende Themen
Themes
Eigene Komponenten
bridgingIT / Seite 41
Grundsätzlich 3 Arten von Komponenten
• Komplett serverseitig Composite Components
• Server- und clientseitig mit GWT• Server- und clientseitig mit Plain JavaScript
Entwicklung von Komponenten
bridgingIT / Seite 42
Unterklassen von com.vaadin.ui.CustomComponent
• Rein Serverseitig• Komposition bestehender Komponenten
Composite Components
bridgingIT / Seite 43
Composite Components
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 44
Client-Side Engine
bridgingIT / Seite 45
Custom Vaadin Widget mit GWT
bridgingIT / Seite 46
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
Custom Vaadin Widget mit GWT
bridgingIT / Seite 47
Custom Vaadin Widget mit JS
bridgingIT / Seite 48
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
Custom Vaadin Widget mit JS
bridgingIT / Seite 49
Agenda
Vergleich mit anderen Frameworks
Einführung in Vaadin
Vergleich mit anderen Frameworks
Zusammenfassung
Aspekte
Unterschiede
Weiterführende Themen
bridgingIT / Seite 50.equals(aPear)
bridgingIT / Seite 51
Aspekte
• Server/Client UI
• Anwendungs-/Seitenbasiert
• Komponenten
• Skalierbarkeit
Architektur
Organisation
• Lizenz
• Firma
• Community
• Dokumentation
• SupportEntwicklung
• Lernkurve
• Verwendete Sprachen
• Eigene Komponenten
bridgingIT / Seite 52
Frameworks
bridgingIT / Seite 53
Unterschiede Organisation
Aspekt Vaadin GWT Smart GWT RichFaces
Lizenz Apache 2.0 Apache 2.0 LGPL/Kommerziell
LGPL
Verantwortliche Organisation
Vaadin Ltd. Google Isomorphics JBoss
Community «« ««« « ««
Dokumentation ««« «« « «««
Kommerzieller Support
Ja Nein Ja Ja
bridgingIT / Seite 54
Unterschiede Architektur
Aspekt Vaadin GWT Smart GWT RichFaces
Server-/Client-UI-Framework
Server Client Client/Server* Server
Anwendungs-/Seitenbasiert
Anwendung Anwendung Anwendung Seiten
Verfügbarkeit Komponenten
««« «« ««« «««
Skalierbarkeit «« ««« ««« ««
bridgingIT / Seite 55
Unterschiede Entwicklung
Aspekt Vaadin GWT Smart GWT RichFaces
Geringe Lernkurve ««« ««« «« «
Verwendete Sprachen
Java, CSS Java 1, CSS Java, JavaScript, CSS Java, JavaScript, HTML, XML, CSS
Einfachheit Komponenten-Entwicklung
«« ««« « «
1 nur Teilmenge
bridgingIT / Seite 56
Zusammenfassung
Agenda
Einführung in Vaadin
Vergleich mit anderen Frameworks
Zusammenfassung
Weiterführende Themen
bridgingIT / Seite 57
• 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
Vorteile
bridgingIT / Seite 58
• Bisher nicht so weit verbreitet
• Einige Addons sind kostenpflichtig
• Skaliert nicht beliebig• Hat Probleme bei schlechten Antwortzeiten (Pings)
Nachteile
bridgingIT / Seite 59
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
Einsatzszenarien
bridgingIT / Seite 60
Fragen und Antworten
Fragen?
Copyright © BridgingIT GmbH
Alle Rechte vorbehalten. Die Weitergabe oder Vervielfältigung ist ohne vorherige schriftliche Zustimmung der BridgingIT GmbH nicht erlaubt.
Wir freuen uns auf Sie.Standort MannheimN7, 5-668161 Mannheim
Standort FrankfurtSolmsstraße 460486 Frankfurt
Standort StuttgartKönigstraße 4270173 Stuttgart
Standort KarlsruheRüppurrer Straße 476137 Karlsruhe
Standort KölnRichmodstraße 650667 Köln
top related