Vaadin - Thinking of U and I (MAJUG 2013)

  • Published on
    25-May-2015

  • View
    323

  • Download
    0

Embed Size (px)

Transcript

<ul><li> 1. Christian Janzchristian.janz@bridging-it.de bridgingIT / Seite 1</li></ul> <p> 2. About meChristian Janz E-Mail: christian.janz@bridging-it.de Slides: http://de.slideshare.net/cjanz Consultant im Bereich Softwareentwicklung Java/JEEbei bridgingIT in Mannheim Interesse: Architektur und Entwicklung vonGeschftsanwendungen mit Hilfe moderner JavaFrameworks bridgingIT / Seite 2 3. AgendaEinfhrung in VaadinWeiterfhrende ThemenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 3 4. Einfhrung in VaadinAgendaEinfhrung in VaadinberblickArchitekturWeiterfhrende 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 fr weibliches Rentier (wrtlich 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 SupportbridgingIT / Seite 6 7. Kein wirklich neues Framework Kommerzielle LizenzApache License 2Vaadin 6 Eclipse PluginVaadin 6.8.9 Weitere Projekte auf Basis der Millstone Library IT Mill Toolkit Release 5Vaadin 7.0.3Millstone Library 1.0 IT Mill Toolkit Release 4VaadinIT Mill wird AJAX Directorygegrndet 2000 20062008 20092012 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.architecturebridgingIT / Seite 8 9. Architektur: Laufzeithttps://vaadin.com/book/vaadin7/-/page/application.html#figure.application.architecturebridgingIT / Seite 9 10. Event-HandlingVButtonButtonConnectorButtonServerRpc ButtonMyListenerclickonClick() 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 fr Eclipse Neues Projekt via Wizardhttps://vaadin.com/book/vaadin7/-/page/getting-started.first-project.htmlbridgingIT / 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.htmlbridgingIT / 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 DemobridgingIT / Seite 15 16. Weiterfhrende ThemenAgendaEinfhrung in VaadinWeiterfhrende ThemenData BindingNavigationThemesEigene KomponentenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 16 17. Warum Data Binding? Vermeidung von Boilerplate-CodetextFieldName.setValue(personEntity.getName());textFieldPhoneNumber.setValue(personEntity.getPhoneNumber());... Generischer Ansatz zur Datensynchronisation Weniger Fehler Validierung inklusive Design Pattern: Supervising Presenter1 Trennung von View, Presenter und Model Logik in Presenter auslagern Einfach Testbarkeit des Presenters1 http://martinfowler.com/eaaDev/SupervisingPresenter.htmlbridgingIT / Seite 17 18. Data Binding: InterfacesString lastNameclass Person {}Listhttps://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.relationshipsbridgingIT / Seite 19 20. Formulare in Vaadin 7 (Form)Layout* 1* 1(Text)Field FieldGroupItem* 1 Property UI Komponenten Non-UI Komponenten bridgingIT / Seite 20 21. Formulare in Vaadin 7Anwendungsmglichkeiten 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 item = new BeanItem (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.htmlbridgingIT / Seite 22 23. FieldGroup: FieldFactory Person bean = new Person("James T Kirk", 50); BeanItem item = new BeanItem (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.htmlbridgingIT / 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.htmlbridgingIT / Seite 24 25. Validierung Hinzufgen von Validatoren via Field.addValidator(Validator validator) Eingebaute Validatoren: IntegerValidator DateRangeValidator RegexpValidator BeanValidator (Validierung via Bean Validation API JSR-303) BeanValidator automatisch hinzugefgt bei BeanFieldGroup bridgingIT / Seite 25 26. Demo: Data Binding DemobridgingIT / Seite 26 27. Tabellen in VaadinVerwendung von Table und Container// Create a container for beansBeanItemContainer beans = new BeanItemContainer(Bean.class);// Add some beans to itbeans.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 Unabhngig von Datenanbindung durch Query Interface Kann anwendungsspezifisch implementiert werden Implementierung fr JPA eingebaut Client hat nur sichtbare Zeilen im Speicherhttps://vaadin.com/directory#addon/lazy-query-containerbridgingIT / Seite 28 29. Demo: Lazy Loading DemoDemo (Video)bridgingIT / Seite 29 30. Weiterfhrende ThemenAgendaEinfhrung in VaadinWeiterfhrende 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 ViewDisplayUI 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%20supportbridgingIT / Seite 33 34. Demo: Navigation DemobridgingIT / Seite 34 35. Weiterfhrende ThemenAgendaEinfhrung in VaadinWeiterfhrende 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 mglich Technologie: CSS Sass (Syntactically Awesome Stylesheets)https://vaadin.com/book/vaadin7/-/page/themes.htmlbridgingIT / 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 untersttzt 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 ThemeDemo bridgingIT / Seite 39 40. Weiterfhrende ThemenAgendaEinfhrung in VaadinWeiterfhrende ThemenData BindingNavigationThemesEigene KomponentenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 40 41. Entwicklung von KomponentenGrundstzlich 3 Arten von Komponenten Komplett serverseitig Composite Components Server- und clientseitig mit GWT Server- und clientseitig mit Plain JavaScriptbridgingIT / 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 mssen implementiert werden: GWT Modul GWT Widget (neu oder bestehend) Connector-Klasse SharedState-Klasse Serverseitige KomponentenklasseSiehe https://vaadin.com/book/vaadin7/-/page/gwt.htmlbridgingIT / Seite 46 47. Custom Vaadin Widget mit JSbridgingIT / Seite 47 48. Custom Vaadin Widget mit JSFolgende Artefakte mssen 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 JSDemo bridgingIT / Seite 49 50. Vergleich mit anderen FrameworksAgendaEinfhrung in VaadinWeiterfhrende ThemenVergleich mit anderen FrameworksAspekteUnterschiedeZusammenfassung bridgingIT / Seite 50 51. .equals(aPear) bridgingIT / Seite 51 52. AspekteOrganisation 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 OrganisationAspektVaadinGWTSmart GWT RichFacesLizenzApache 2.0Apache 2.0 LGPL/ LGPL KommerziellVerantwortliche Vaadin Ltd. Google Isomorphics JBossOrganisationCommunity Dokumentation Kommerzieller JaNein JaJaSupportbridgingIT / Seite 54 55. Unterschiede ArchitekturAspekt VaadinGWT Smart GWTRichFacesServer-/Client-UI- ServerClientClient/Server* ServerFrameworkAnwendungs-Anwendung Anwendung AnwendungSeiten/SeitenbasiertVerfgbarkeit KomponentenSkalierbarkeit bridgingIT / Seite 55 56. Unterschiede EntwicklungAspektVaadinGWT Smart GWT RichFacesGeringe Lernkurve VerwendeteJava, CSS Java 1, CSS Java, JavaScript, Java, JavaScript,SprachenCSS HTML, XML, CSSEinfachheit Komponenten-Entwicklung1 nur TeilmengebridgingIT / Seite 56 57. ZusammenfassungAgendaEinfhrung in VaadinWeiterfhrende ThemenVergleich mit anderen FrameworksZusammenfassung bridgingIT / Seite 57 58. Vorteile Open Source Reifes Framework mit guter Community Gute Dokumentation Kommerzieller Support erhltlich, falls gewnscht Viele Komponenten und Addons Einfache Entwicklung Gutes Theming-Konzept Einfaches Deployment Verwendung von GWT auf ClientseitebridgingIT / 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 groen VorlaufAlternativ: Rich Internet Applications Wichtig: Webserver in der Nhe der AnwenderbridgingIT / Seite 60 61. Fragen und AntwortenFragen? bridgingIT / Seite 61 62. Wir freuen uns auf Sie.Standort MannheimStandort StuttgartN7, 5-6Knigstrae 4268161 Mannheim 70173 StuttgartStandort Frankfurt Standort KarlsruheSolmsstrae 4Rppurrer Strae 460486 Frankfurt76137 Karlsruhe Standort Kln Richmodstrae 6 50667 KlnAlle Rechte vorbehalten. Die Weitergabe oder Vervielfltigung ist ohne vorherigeschriftliche Zustimmung der BridgingIT GmbH nicht erlaubt.Copyright BridgingIT GmbH</p>