Vaadin - Thinking of U and I (MAJUG 2013)

  • View
    323

  • Download
    0

Embed Size (px)

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/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 Kom