Transcript
Page 1: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 1

Christian [email protected]

Page 2: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 2

Christian Janz E-Mail: [email protected]

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

About me

Page 3: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 3

Agenda

Einführung in Vaadin

Vergleich mit anderen Frameworks

Zusammenfassung

Weiterführende Themen

Page 4: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 4

Agenda

Einführung in Vaadin

Einführung in Vaadin

Vergleich mit anderen Frameworks

Überblick

Architektur

Zusammenfassung

Weiterführende Themen

Page 5: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 5http://pixabay.com/en/moon-card-cartoon-sledge-flying-31665/

Page 6: Vaadin - Thinking of U and I (MAJUG 2013)

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

Page 7: Vaadin - Thinking of U and I (MAJUG 2013)

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.9

http://vaadin.com/book/-/page/intro.overview.background.html

20132008

 IT Mill Toolkit Release 5 Vaadin 7.0.3

Page 8: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 8

Vaadin Framework

Architektur: Grobe Übersicht

https://vaadin.com/book/vaadin7/-/page/intro.html#figure.intro.architecture

Page 9: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 9

Architektur: Laufzeit

https://vaadin.com/book/vaadin7/-/page/application.html#figure.application.architecture

Page 10: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 10

Event-Handling

VButton

click

ButtonConnector

onClick()

ButtonServerRpc

click()

Button

fireClick()

MyListener

buttonClick()

Browser Server

Ajax-Request

Page 11: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 11

• 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

Page 12: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 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

Page 13: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 13

Visual User Interface Designer

https://vaadin.com/book/vaadin7/-/page/eclipse.html

Page 14: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 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!")); } }

Page 15: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 15

Demo: Getting Started

Demo

Page 16: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 16

Weiterführende Themen

Agenda

Einführung in Vaadin

Vergleich mit anderen Frameworks

Data Binding

Navigation

Zusammenfassung

Weiterführende Themen

Themes

Eigene Komponenten

Page 17: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 17

• 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()); ...

Page 18: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 18

Data Binding: Interfaces

String lastName

class Person {

}

List<Person>

https://vaadin.com/book/vaadin7/-/page/datamodel.html#datamodel.overview

Page 19: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 19

Data Binding: Big Picture

https://vaadin.com/book/vaadin7/-/page/datamodel.html#figure.datamodel.overview.relationships

Page 20: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 20

Formulare in Vaadin 7

(Form)Layout

(Text)Field FieldGroup1*

Item* 1

Property1

*

UI Komponenten Non-UI Komponenten

Page 21: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 21

Anwendungsmöglichkeiten der FieldGroup:

• Explizites Binding der Felder

• Erzeugen der Felder via FieldFactory

• Automatisches Binding

Formulare in Vaadin 7

Page 22: Vaadin - Thinking of U and I (MAJUG 2013)

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

Page 23: Vaadin - Thinking of U and I (MAJUG 2013)

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

Page 24: Vaadin - Thinking of U and I (MAJUG 2013)

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

Page 25: Vaadin - Thinking of U and I (MAJUG 2013)

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

Page 26: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 26

Demo: Data Binding

Demo

Page 27: Vaadin - Thinking of U and I (MAJUG 2013)

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

Page 28: Vaadin - Thinking of U and I (MAJUG 2013)

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

Page 29: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 29

Demo: Lazy Loading

Demo Demo (Video)

Page 30: Vaadin - Thinking of U and I (MAJUG 2013)

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

Page 31: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 31

Navigation

Page 32: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 32

Navigation: Komponenten

Navigator1

ViewProvider*1

UI Komponenten Non-UI Komponenten

ViewChangeListener

UI

NavigationStateManager

ViewDisplay

1

1

1

*

1

Page 33: Vaadin - Thinking of U and I (MAJUG 2013)

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

Page 34: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 34

Demo: Navigation

Demo

Page 35: Vaadin - Thinking of U and I (MAJUG 2013)

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

Page 36: Vaadin - Thinking of U and I (MAJUG 2013)

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

Page 37: Vaadin - Thinking of U and I (MAJUG 2013)

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

Page 38: Vaadin - Thinking of U and I (MAJUG 2013)

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

Page 39: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 39

Demo: Custom Theme

Demo

Page 40: Vaadin - Thinking of U and I (MAJUG 2013)

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

Page 41: Vaadin - Thinking of U and I (MAJUG 2013)

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

Page 42: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 42

Unterklassen von com.vaadin.ui.CustomComponent

• Rein Serverseitig• Komposition bestehender Komponenten

Composite Components

Page 43: Vaadin - Thinking of U and I (MAJUG 2013)

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);

} }

Page 44: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 44

Client-Side Engine

Page 45: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 45

Custom Vaadin Widget mit GWT

Page 46: Vaadin - Thinking of U and I (MAJUG 2013)

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

Page 47: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 47

Custom Vaadin Widget mit JS

Page 48: Vaadin - Thinking of U and I (MAJUG 2013)

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

Page 49: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 49

Demo: Custom Widget mit JS

Demo

Page 50: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 50

Agenda

Vergleich mit anderen Frameworks

Einführung in Vaadin

Vergleich mit anderen Frameworks

Zusammenfassung

Aspekte

Unterschiede

Weiterführende Themen

Page 51: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 51.equals(aPear)

Page 52: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 52

Aspekte

• Server/Client UI

• Anwendungs-/Seitenbasiert

• Komponenten

• Skalierbarkeit

Architektur

Organisation

• Lizenz

• Firma

• Community

• Dokumentation

• SupportEntwicklung

• Lernkurve

• Verwendete Sprachen

• Eigene Komponenten

Page 53: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 53

Frameworks

Page 54: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 54

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

Page 55: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 55

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 «« ««« ««« ««

Page 56: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 56

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

Page 57: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 57

Zusammenfassung

Agenda

Einführung in Vaadin

Vergleich mit anderen Frameworks

Zusammenfassung

Weiterführende Themen

Page 58: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 58

• 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

Page 59: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 59

• Bisher nicht so weit verbreitet

• Einige Addons sind kostenpflichtig

• Skaliert nicht beliebig• Hat Probleme bei schlechten Antwortzeiten (Pings)

Nachteile

Page 60: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 60

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

Page 61: Vaadin - Thinking of U and I (MAJUG 2013)

bridgingIT / Seite 61

Fragen und Antworten

Fragen?

Page 62: Vaadin - Thinking of U and I (MAJUG 2013)

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


Recommended