Your SlideShare is downloading. ×
  • Like
Vaadin - Thinking of U and I (MAJUG 2013)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Vaadin - Thinking of U and I (MAJUG 2013)

  • 284 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
284
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Christian Janzchristian.janz@bridging-it.de bridgingIT / Seite 1
  • 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. AgendaEinführung in VaadinWeiterführende ThemenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 3
  • 4. Einführung in VaadinAgendaEinführung in VaadinÜberblickArchitekturWeiterführende ThemenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 4
  • 5. http://pixabay.com/en/moon-card-cartoon-sledge-flying-31665/ bridgingIT / Seite 5
  • 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.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. Architektur: Grobe Übersicht Vaadin Frameworkhttps://vaadin.com/book/vaadin7/-/page/intro.html#figure.intro.architecture bridgingIT / Seite 8
  • 9. Architektur: Laufzeithttps://vaadin.com/book/vaadin7/-/page/application.html#figure.application.architecture bridgingIT / Seite 9
  • 10. Event-Handling VButton ButtonConnector ButtonServerRpc Button MyListener click onClick() click() Ajax- fireClick() Request buttonClick() Browser Server bridgingIT / Seite 10
  • 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. 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. Visual User Interface Designerhttps://vaadin.com/book/vaadin7/-/page/eclipse.html bridgingIT / Seite 13
  • 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. Demo: Getting Started Demo bridgingIT / Seite 15
  • 16. Weiterführende ThemenAgendaEinführung in VaadinWeiterführende ThemenData BindingNavigationThemesEigene KomponentenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 16
  • 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. 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 Picturehttps://vaadin.com/book/vaadin7/-/page/datamodel.html#figure.datamodel.overview.relationships bridgingIT / Seite 19
  • 20. Formulare in Vaadin 7 (Form)Layout * 1 * 1 (Text)Field FieldGroup Item * 1 Property UI Komponenten Non-UI Komponenten bridgingIT / Seite 20
  • 21. Formulare in Vaadin 7Anwendungsmö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
  • 26. Demo: Data Binding Demo bridgingIT / Seite 26
  • 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. 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. Demo: Lazy Loading Demo Demo (Video) bridgingIT / Seite 29
  • 30. Weiterführende ThemenAgendaEinführung in VaadinWeiterführende ThemenData BindingNavigationThemesEigene KomponentenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 30
  • 31. Navigation bridgingIT / Seite 31
  • 32. Navigation: Komponenten 1 NavigationStateManager 1 1 1 * UI Navigator ViewProvider 1 * ViewChangeListener 1 ViewDisplay UI Komponenten Non-UI Komponenten bridgingIT / Seite 32
  • 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. Demo: Navigation Demo bridgingIT / Seite 34
  • 35. Weiterführende ThemenAgendaEinführung in VaadinWeiterführende ThemenData BindingNavigationThemesEigene KomponentenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 35
  • 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. 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. 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. Demo: Custom Theme Demo bridgingIT / Seite 39
  • 40. Weiterführende ThemenAgendaEinführung in VaadinWeiterführende ThemenData BindingNavigationThemesEigene KomponentenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 40
  • 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. Composite ComponentsUnterklassen von com.vaadin.ui.CustomComponent• Rein Serverseitig• Komposition bestehender Komponenten bridgingIT / Seite 42
  • 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. Client-Side Engine bridgingIT / Seite 44
  • 45. Custom Vaadin Widget mit GWT bridgingIT / Seite 45
  • 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. Custom Vaadin Widget mit JS bridgingIT / Seite 47
  • 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. Demo: Custom Widget mit JS Demo bridgingIT / Seite 49
  • 50. Vergleich mit anderen FrameworksAgendaEinführung in VaadinWeiterführende ThemenVergleich mit anderen FrameworksAspekteUnterschiedeZusammenfassung bridgingIT / Seite 50
  • 51. .equals(aPear) bridgingIT / Seite 51
  • 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. Frameworks bridgingIT / Seite 53
  • 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. 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. 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. ZusammenfassungAgendaEinführung in VaadinWeiterführende ThemenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 57
  • 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. Nachteile• Bisher nicht so weit verbreitet• Einige Addons sind kostenpflichtig• Skaliert nicht beliebig• Hat Probleme bei schlechten Antwortzeiten (Pings) bridgingIT / Seite 59
  • 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. Fragen und Antworten Fragen? bridgingIT / Seite 61
  • 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