Vaadin - Thinking of U and I (MAJUG 2013)

Christian Janz
christian.janz@bridging-it.de bridgingIT / Seite 1

About me

Christian 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

Agenda

Einführung in Vaadin

Weiterführende Themen

Vergleich mit anderen Frameworks

Zusammenfassung



Agenda

Überblick
Architektur



Zusammenfassung


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


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 Vaadin
IT Mill wird
 AJAX Directory
gegründet

2000 2006 2008 2009 2012 2013

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

Architektur: Grobe Übersicht

Vaadin Framework

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

Architektur: Laufzeit

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

Event-Handling

VButton ButtonConnector ButtonServerRpc Button MyListener

click
onClick()
click()

Ajax- fireClick()
Request buttonClick()

Browser Server

Getting started

• Voraussetzung
• Eclipse oder Netbeans
• Servlet-Container (im Beispiel: Tomcat 7)

• Installation Vaadin Tools für Eclipse

• Neues Projekt via Wizard

https://vaadin.com/book/vaadin7/-/page/getting-started.first-project.html

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


Visual User Interface Designer

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

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


Demo: Getting Started

Demo



Agenda


Data Binding
Navigation
Themes
Eigene Komponenten


Zusammenfassung


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 Presenters

1 http://martinfowler.com/eaaDev/SupervisingPresenter.html


Data Binding: Interfaces

String lastName

class Person {

}

List<Person>

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


Data Binding: Big Picture

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


Formulare in Vaadin 7

(Form)Layout

* 1 * 1
(Text)Field FieldGroup Item
*

1
Property

UI Komponenten Non-UI Komponenten


Formulare in Vaadin 7
Anwendungsmöglichkeiten der FieldGroup:

• Explizites Binding der Felder

• Erzeugen der Felder via FieldFactory

• Automatisches Binding


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

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
form.addComponent(binder.buildAndBind(“Nachname", "name"));
form.addComponent(binder.buildAndBind(“Alter", "age"));


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
binder.bindMemberFields(this);

setCompositionRoot(layout);
}
}

// And the form can be used as a component
layout.addComponent(new MyForm(item));


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


Demo: Data Binding

Demo


Tabellen in Vaadin
Verwendung 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" });


Tabellen mit vielen Daten

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


Demo: Lazy Loading

Demo Demo (Video)



Agenda


Data Binding
Navigation
Themes
Eigene Komponenten


Zusammenfassung


Navigation


Navigation: Komponenten

1
NavigationStateManager

1
1 1 *
UI Navigator ViewProvider
1

*
ViewChangeListener
1
ViewDisplay

UI Komponenten Non-UI Komponenten


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


Demo: Navigation

Demo



Agenda


Data Binding
Navigation
Themes
Eigene Komponenten


Zusammenfassung


Themes

Das 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


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


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


Demo: Custom Theme

Demo



Agenda


Data Binding
Navigation
Themes
Eigene Komponenten


Zusammenfassung


Entwicklung von Komponenten

Grundsätzlich 3 Arten von Komponenten

• Komplett serverseitig  Composite Components

• Server- und clientseitig mit GWT
• Server- und clientseitig mit Plain JavaScript


Composite Components

Unterklassen von com.vaadin.ui.CustomComponent

• Rein Serverseitig
• Komposition bestehender Komponenten


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

Client-Side Engine


Custom Vaadin Widget mit GWT


Custom Vaadin Widget mit GWT

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 JS


Custom Vaadin Widget mit JS

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


Demo: Custom Widget mit JS

Demo



Agenda



Aspekte
Unterschiede

Zusammenfassung


.equals(aPear)

Aspekte

Organisation

• Lizenz
• Firma
• Community
• Dokumentation
Entwicklung • Support Architektur

• Server/Client UI
• Lernkurve
• Anwendungs-/Seitenbasiert
• Verwendete Sprachen
• Komponenten
• Eigene Komponenten • Skalierbarkeit


Frameworks


Unterschiede Organisation

Aspekt Vaadin GWT Smart GWT RichFaces
Lizenz Apache 2.0 Apache 2.0 LGPL/ LGPL
Kommerziell

Verantwortliche Vaadin Ltd. Google Isomorphics JBoss
Organisation

Community    

Dokumentation    

Kommerzieller Ja Nein Ja Ja
Support


Unterschiede Architektur

Server-/Client-UI- Server Client Client/Server* Server
Framework

Anwendungs- Anwendung Anwendung Anwendung Seiten
/Seitenbasiert

Verfügbarkeit    
Komponenten

Skalierbarkeit    


Unterschiede Entwicklung

Geringe Lernkurve    

Verwendete Java, CSS Java 1, CSS Java, JavaScript, Java, JavaScript,
Sprachen CSS HTML, XML, CSS

Einfachheit    
Komponenten-
Entwicklung

1 nur Teilmenge


Zusammenfassung

Agenda




Zusammenfassung


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


Nachteile

• Bisher nicht so weit verbreitet

• Einige Addons sind kostenpflichtig

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


Einsatzszenarien

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


Fragen und Antworten

Fragen?


Wir freuen uns auf Sie.
Standort Mannheim Standort Stuttgart
N7, 5-6 Königstraße 42
68161 Mannheim 70173 Stuttgart

Standort Frankfurt Standort Karlsruhe
Solmsstraße 4 Rüppurrer Straße 4
60486 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

Vaadin - Thinking of U and I (MAJUG 2013)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Vaadin - Thinking of U and I (MAJUG 2013)

Ähnlich wie Vaadin - Thinking of U and I (MAJUG 2013) (20)

Vaadin - Thinking of U and I (MAJUG 2013)