Christian Janzchristian.janz@bridging-it.de   bridgingIT / Seite 1
About meChristian Janz   E-Mail: christian.janz@bridging-it.de   Slides: http://de.slideshare.net/cjanz   Consultant im...
AgendaEinführung in VaadinWeiterführende ThemenVergleich mit anderen FrameworksZusammenfassung                            ...
Einführung in VaadinAgendaEinführung in VaadinÜberblickArchitekturWeiterführende ThemenVergleich mit anderen FrameworksZus...
http://pixabay.com/en/moon-card-cartoon-sledge-flying-31665/   bridgingIT / Seite 5
Überblick   Vaadin = finnisch für weibliches Rentier             (wörtlich „Ich beharre“)   RIA-Framework der Vaadin Ltd...
Kein wirklich neues Framework                 Kommerzielle Lizenz                                      Apache License 2   ...
Architektur: Grobe Übersicht                   Vaadin Frameworkhttps://vaadin.com/book/vaadin7/-/page/intro.html#figure.in...
Architektur: Laufzeithttps://vaadin.com/book/vaadin7/-/page/application.html#figure.application.architecture              ...
Event-Handling          VButton        ButtonConnector                ButtonServerRpc                 Button          MyLi...
Getting started•   Voraussetzung      •   Eclipse oder Netbeans      •   Servlet-Container (im Beispiel: Tomcat 7)•   Inst...
Getting started – mit Maven$ mvn archetype:generate        -DarchetypeGroupId=com.vaadin        -DarchetypeArtifactId=vaad...
Visual User Interface Designerhttps://vaadin.com/book/vaadin7/-/page/eclipse.html                                         ...
Hello World public class HelloWorldUI extends UI {     @Override     protected void init(VaadinRequest request) {         ...
Demo: Getting Started                   Demo                          bridgingIT / Seite 15
Weiterführende ThemenAgendaEinführung in VaadinWeiterführende ThemenData BindingNavigationThemesEigene KomponentenVergleic...
Warum Data Binding?•     Vermeidung von Boilerplate-Code        textFieldName.setValue(personEntity.getName());        tex...
Data Binding: Interfaces                                                                String lastName                   ...
Data Binding: Big Picturehttps://vaadin.com/book/vaadin7/-/page/datamodel.html#figure.datamodel.overview.relationships    ...
Formulare in Vaadin 7       (Form)Layout                                    *   1                *   1                    ...
Formulare in Vaadin 7Anwendungsmöglichkeiten der FieldGroup:•   Explizites Binding der Felder•   Erzeugen der Felder via F...
FieldGroup: Explizites Binding   Person bean = new Person("James T Kirk", 50);   BeanItem<Person> item = new BeanItem<Pers...
FieldGroup: FieldFactory   Person bean = new Person("James T Kirk", 50);   BeanItem<Person> item = new BeanItem<Person> (b...
FieldGroup: Automatisches Binding   // A form component that allows editing an item   public class MyForm extends CustomCo...
Validierung•   Hinzufügen von Validatoren via Field.addValidator(Validator validator)•   Eingebaute Validatoren:     •   I...
Demo: Data Binding                     Demo                            bridgingIT / Seite 26
Tabellen in VaadinVerwendung von Table und Container  // Create a container for beans  BeanItemContainer<Bean> beans = new...
Tabellen mit vielen DatenVerwendung von Addon Lazy Query Container•   Implementierung von Container•   Lazy Loading•   Una...
Demo: Lazy Loading         Demo        Demo (Video)                                    bridgingIT / Seite 29
Weiterführende ThemenAgendaEinführung in VaadinWeiterführende ThemenData BindingNavigationThemesEigene KomponentenVergleic...
Navigation             bridgingIT / Seite 31
Navigation: Komponenten                                     1                                           NavigationStateMan...
Navigation: Beispiel   public class NavigationtestUI extends UI {       @Override       public void init(VaadinRequest req...
Demo: Navigation                   Demo                          bridgingIT / Seite 34
Weiterführende ThemenAgendaEinführung in VaadinWeiterführende ThemenData BindingNavigationThemesEigene KomponentenVergleic...
ThemesDas Aussehen der Anwendung wird durch das Theme gesteuert•   Vaadin liefert Themes mit•   Erstellung eigener Themes ...
Sass•   Syntactically Awesome Stylesheets: http://sass-lang.com/•   Erweiterung von CSS3:     •   Variablen     •   Versch...
Beispiel-Theme @import "mytheme.scss";                   styles.scss .mytheme {   @include mytheme; } @import "../reindeer...
Demo: Custom Theme                Demo                       bridgingIT / Seite 39
Weiterführende ThemenAgendaEinführung in VaadinWeiterführende ThemenData BindingNavigationThemesEigene KomponentenVergleic...
Entwicklung von KomponentenGrundsätzlich 3 Arten von Komponenten•   Komplett serverseitig  Composite Components•   Server...
Composite ComponentsUnterklassen von com.vaadin.ui.CustomComponent•   Rein Serverseitig•   Komposition bestehender Kompone...
Composite Components public class LoginForm extends CustomComponent {     private TextField usernameField;     private Pas...
Client-Side Engine                     bridgingIT / Seite 44
Custom Vaadin Widget mit GWT                               bridgingIT / Seite 45
Custom Vaadin Widget mit GWTFolgende Artefakte müssen implementiert werden:•   GWT Modul•   GWT Widget (neu oder bestehend...
Custom Vaadin Widget mit JS                              bridgingIT / Seite 47
Custom Vaadin Widget mit JSFolgende Artefakte müssen implementiert werden:•   Widget in JavaScript (neu oder bestehend)•  ...
Demo: Custom Widget mit JS                  Demo                             bridgingIT / Seite 49
Vergleich mit anderen FrameworksAgendaEinführung in VaadinWeiterführende ThemenVergleich mit anderen FrameworksAspekteUnte...
.equals(aPear)         bridgingIT / Seite 51
Aspekte                              Organisation                              •   Lizenz                              •  ...
Frameworks             bridgingIT / Seite 53
Unterschiede OrganisationAspekt            Vaadin        GWT          Smart GWT     RichFacesLizenz            Apache 2.0 ...
Unterschiede ArchitekturAspekt               Vaadin      GWT         Smart GWT        RichFacesServer-/Client-UI-   Server...
Unterschiede EntwicklungAspekt              Vaadin      GWT           Smart GWT           RichFacesGeringe Lernkurve   ...
ZusammenfassungAgendaEinführung in VaadinWeiterführende ThemenVergleich mit anderen FrameworksZusammenfassung             ...
Vorteile•   Open Source•   Reifes Framework mit guter Community•   Gute Dokumentation•   Kommerzieller Support erhältlich,...
Nachteile•   Bisher nicht so weit verbreitet•   Einige Addons sind kostenpflichtig•   Skaliert nicht beliebig•   Hat Probl...
EinsatzszenarienHauptszenario: Rich Intranet Applications•   Anwendungen mit angemeldeten Benutzern•   Bedienung wie Deskt...
Fragen und Antworten            Fragen?                       bridgingIT / Seite 61
Wir freuen uns auf Sie.Standort Mannheim                    Standort StuttgartN7, 5-6                              Königst...
Upcoming SlideShare
Loading in …5
×

Vaadin - Thinking of U and I (MAJUG 2013)

689 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
689
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Vaadin - Thinking of U and I (MAJUG 2013)

  1. 1. Christian Janzchristian.janz@bridging-it.de bridgingIT / Seite 1
  2. 2. About meChristian Janz E-Mail: christian.janz@bridging-it.de Slides: http://de.slideshare.net/cjanz Consultant im Bereich Softwareentwicklung Java/JEE bei bridgingIT in Mannheim Interesse: Architektur und Entwicklung von Geschäftsanwendungen mit Hilfe moderner Java Frameworks bridgingIT / Seite 2
  3. 3. AgendaEinführung in VaadinWeiterführende ThemenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 3
  4. 4. Einführung in VaadinAgendaEinführung in VaadinÜberblickArchitekturWeiterführende ThemenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 4
  5. 5. http://pixabay.com/en/moon-card-cartoon-sledge-flying-31665/ bridgingIT / Seite 5
  6. 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. 7. Kein wirklich neues Framework Kommerzielle Lizenz Apache License 2 Vaadin 6  Eclipse Plugin Vaadin 6.8.9 Weitere Projekte auf Basis der Millstone Library IT Mill Toolkit Release 5 Vaadin 7.0.3 Millstone Library 1.0 IT Mill Toolkit Release 4 VaadinIT Mill wird  AJAX Directorygegründet 2000 2006 2008 2009 2012 2013http://vaadin.com/book/-/page/intro.overview.background.html bridgingIT / Seite 7
  8. 8. Architektur: Grobe Übersicht Vaadin Frameworkhttps://vaadin.com/book/vaadin7/-/page/intro.html#figure.intro.architecture bridgingIT / Seite 8
  9. 9. Architektur: Laufzeithttps://vaadin.com/book/vaadin7/-/page/application.html#figure.application.architecture bridgingIT / Seite 9
  10. 10. Event-Handling VButton ButtonConnector ButtonServerRpc Button MyListener click onClick() click() Ajax- fireClick() Request buttonClick() Browser Server bridgingIT / Seite 10
  11. 11. Getting started• Voraussetzung • Eclipse oder Netbeans • Servlet-Container (im Beispiel: Tomcat 7)• Installation Vaadin Tools für Eclipse• Neues Projekt via Wizardhttps://vaadin.com/book/vaadin7/-/page/getting-started.first-project.html bridgingIT / Seite 11
  12. 12. 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
  13. 13. Visual User Interface Designerhttps://vaadin.com/book/vaadin7/-/page/eclipse.html bridgingIT / Seite 13
  14. 14. 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
  15. 15. Demo: Getting Started Demo bridgingIT / Seite 15
  16. 16. Weiterführende ThemenAgendaEinführung in VaadinWeiterführende ThemenData BindingNavigationThemesEigene KomponentenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 16
  17. 17. 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 Presenters1 http://martinfowler.com/eaaDev/SupervisingPresenter.html bridgingIT / Seite 17
  18. 18. Data Binding: Interfaces String lastName class Person { } List<Person>https://vaadin.com/book/vaadin7/-/page/datamodel.html#datamodel.overview bridgingIT / Seite 18
  19. 19. Data Binding: Big Picturehttps://vaadin.com/book/vaadin7/-/page/datamodel.html#figure.datamodel.overview.relationships bridgingIT / Seite 19
  20. 20. Formulare in Vaadin 7 (Form)Layout * 1 * 1 (Text)Field FieldGroup Item * 1 Property UI Komponenten Non-UI Komponenten bridgingIT / Seite 20
  21. 21. Formulare in Vaadin 7Anwendungsmöglichkeiten der FieldGroup:• Explizites Binding der Felder• Erzeugen der Felder via FieldFactory• Automatisches Binding bridgingIT / Seite 21
  22. 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. 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. 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. 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
  26. 26. Demo: Data Binding Demo bridgingIT / Seite 26
  27. 27. Tabellen in VaadinVerwendung 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. 28. Tabellen mit vielen DatenVerwendung 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 Speicherhttps://vaadin.com/directory#addon/lazy-query-container bridgingIT / Seite 28
  29. 29. Demo: Lazy Loading Demo Demo (Video) bridgingIT / Seite 29
  30. 30. Weiterführende ThemenAgendaEinführung in VaadinWeiterführende ThemenData BindingNavigationThemesEigene KomponentenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 30
  31. 31. Navigation bridgingIT / Seite 31
  32. 32. Navigation: Komponenten 1 NavigationStateManager 1 1 1 * UI Navigator ViewProvider 1 * ViewChangeListener 1 ViewDisplay UI Komponenten Non-UI Komponenten bridgingIT / Seite 32
  33. 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
  34. 34. Demo: Navigation Demo bridgingIT / Seite 34
  35. 35. Weiterführende ThemenAgendaEinführung in VaadinWeiterführende ThemenData BindingNavigationThemesEigene KomponentenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 35
  36. 36. ThemesDas 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. 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
  38. 38. Beispiel-Theme @import "mytheme.scss"; styles.scss .mytheme { @include mytheme; } @import "../reindeer/reindeer.scss"; mytheme.scss @mixin mytheme { @include reindeer; /* An actual theme rule */ .v-button { color: blue; } } bridgingIT / Seite 38
  39. 39. Demo: Custom Theme Demo bridgingIT / Seite 39
  40. 40. Weiterführende ThemenAgendaEinführung in VaadinWeiterführende ThemenData BindingNavigationThemesEigene KomponentenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 40
  41. 41. Entwicklung von KomponentenGrundsätzlich 3 Arten von Komponenten• Komplett serverseitig  Composite Components• Server- und clientseitig mit GWT• Server- und clientseitig mit Plain JavaScript bridgingIT / Seite 41
  42. 42. Composite ComponentsUnterklassen von com.vaadin.ui.CustomComponent• Rein Serverseitig• Komposition bestehender Komponenten bridgingIT / Seite 42
  43. 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 43
  44. 44. Client-Side Engine bridgingIT / Seite 44
  45. 45. Custom Vaadin Widget mit GWT bridgingIT / Seite 45
  46. 46. Custom Vaadin Widget mit GWTFolgende Artefakte müssen implementiert werden:• GWT Modul• GWT Widget (neu oder bestehend)• Connector-Klasse• SharedState-Klasse• Serverseitige KomponentenklasseSiehe https://vaadin.com/book/vaadin7/-/page/gwt.html bridgingIT / Seite 46
  47. 47. Custom Vaadin Widget mit JS bridgingIT / Seite 47
  48. 48. Custom Vaadin Widget mit JSFolgende Artefakte müssen implementiert werden:• Widget in JavaScript (neu oder bestehend)• Connector-Klasse in JavaScript• Serverseitige Komponentenklasse in JavaSiehe https://vaadin.com/book/vaadin7/-/page/gwt.javascript.html bridgingIT / Seite 48
  49. 49. Demo: Custom Widget mit JS Demo bridgingIT / Seite 49
  50. 50. Vergleich mit anderen FrameworksAgendaEinführung in VaadinWeiterführende ThemenVergleich mit anderen FrameworksAspekteUnterschiedeZusammenfassung bridgingIT / Seite 50
  51. 51. .equals(aPear) bridgingIT / Seite 51
  52. 52. Aspekte Organisation • Lizenz • Firma • Community • Dokumentation Entwicklung • Support Architektur • Server/Client UI • Lernkurve • Anwendungs-/Seitenbasiert • Verwendete Sprachen • Komponenten • Eigene Komponenten • Skalierbarkeit bridgingIT / Seite 52
  53. 53. Frameworks bridgingIT / Seite 53
  54. 54. Unterschiede OrganisationAspekt Vaadin GWT Smart GWT RichFacesLizenz Apache 2.0 Apache 2.0 LGPL/ LGPL KommerziellVerantwortliche Vaadin Ltd. Google Isomorphics JBossOrganisationCommunity    Dokumentation    Kommerzieller Ja Nein Ja JaSupport bridgingIT / Seite 54
  55. 55. Unterschiede ArchitekturAspekt Vaadin GWT Smart GWT RichFacesServer-/Client-UI- Server Client Client/Server* ServerFrameworkAnwendungs- Anwendung Anwendung Anwendung Seiten/SeitenbasiertVerfügbarkeit    KomponentenSkalierbarkeit     bridgingIT / Seite 55
  56. 56. Unterschiede EntwicklungAspekt Vaadin GWT Smart GWT RichFacesGeringe Lernkurve    Verwendete Java, CSS Java 1, CSS Java, JavaScript, Java, JavaScript,Sprachen CSS HTML, XML, CSSEinfachheit    Komponenten-Entwicklung1 nur Teilmenge bridgingIT / Seite 56
  57. 57. ZusammenfassungAgendaEinführung in VaadinWeiterführende ThemenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 57
  58. 58. 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 58
  59. 59. Nachteile• Bisher nicht so weit verbreitet• Einige Addons sind kostenpflichtig• Skaliert nicht beliebig• Hat Probleme bei schlechten Antwortzeiten (Pings) bridgingIT / Seite 59
  60. 60. EinsatzszenarienHauptszenario: Rich Intranet Applications• Anwendungen mit angemeldeten Benutzern• Bedienung wie Desktop-Anwendungen• Verarbeitung von Daten• Komplexere Logik• Schnelle Entwicklung ohne großen VorlaufAlternativ: Rich Internet Applications• Wichtig: Webserver „in der Nähe“ der Anwender bridgingIT / Seite 60
  61. 61. Fragen und Antworten Fragen? bridgingIT / Seite 61
  62. 62. Wir freuen uns auf Sie.Standort Mannheim Standort StuttgartN7, 5-6 Königstraße 4268161 Mannheim 70173 StuttgartStandort Frankfurt Standort KarlsruheSolmsstraße 4 Rüppurrer Straße 460486 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

×