SlideShare ist ein Scribd-Unternehmen logo
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




                                   bridgingIT / Seite 3
Einführung in Vaadin

Agenda

Einführung in Vaadin
Überblick
Architektur

Weiterführende Themen

Vergleich mit anderen Frameworks

Zusammenfassung




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


                                                    bridgingIT / Seite 6
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
                                                                                             bridgingIT / Seite 7
Architektur: Grobe Übersicht




                   Vaadin Framework




https://vaadin.com/book/vaadin7/-/page/intro.html#figure.intro.architecture
                                                                              bridgingIT / Seite 8
Architektur: Laufzeit




https://vaadin.com/book/vaadin7/-/page/application.html#figure.application.architecture
                                                                                          bridgingIT / Seite 9
Event-Handling

          VButton        ButtonConnector                ButtonServerRpc                 Button          MyListener

  click
                    onClick()
                                           click()


                                                      Ajax-               fireClick()
                                                     Request                                     buttonClick()




               Browser                                                         Server
                                                                                                 bridgingIT / Seite 10
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
                                                                            bridgingIT / Seite 11
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
Visual User Interface Designer




https://vaadin.com/book/vaadin7/-/page/eclipse.html
                                                      bridgingIT / Seite 13
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
Demo: Getting Started




                   Demo




                          bridgingIT / Seite 15
Weiterführende Themen

Agenda

Einführung in Vaadin

Weiterführende Themen
Data Binding
Navigation
Themes
Eigene Komponenten

Vergleich mit anderen Frameworks

Zusammenfassung

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

                                                                        bridgingIT / Seite 17
Data Binding: Interfaces

                                                                String lastName

                                                                class Person {

                                                                }



                                                                List<Person>



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

                                                                               bridgingIT / Seite 18
Data Binding: Big Picture




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

                                                                                      bridgingIT / Seite 19
Formulare in Vaadin 7


       (Form)Layout


                                    *   1                *   1
                      (Text)Field           FieldGroup                  Item
                            *




                                                             1
                                                                     Property


     UI Komponenten                               Non-UI Komponenten


                                                                 bridgingIT / Seite 20
Formulare in Vaadin 7
Anwendungsmöglichkeiten der FieldGroup:

•   Explizites Binding der Felder

•   Erzeugen der Felder via FieldFactory

•   Automatisches Binding




                                           bridgingIT / Seite 21
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
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
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
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
Demo: Data Binding




                     Demo




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




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


                                                          bridgingIT / Seite 28
Demo: Lazy Loading




         Demo        Demo (Video)




                                    bridgingIT / Seite 29
Weiterführende Themen

Agenda

Einführung in Vaadin

Weiterführende Themen
Data Binding
Navigation
Themes
Eigene Komponenten

Vergleich mit anderen Frameworks

Zusammenfassung

                                   bridgingIT / Seite 30
Navigation




             bridgingIT / Seite 31
Navigation: Komponenten

                                     1
                                           NavigationStateManager

                                     1
                       1                       1   *
              UI               Navigator               ViewProvider
                                     1


                                           *
                                               ViewChangeListener
                                 1
                           ViewDisplay

      UI Komponenten                 Non-UI Komponenten




                                                               bridgingIT / Seite 32
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
Demo: Navigation




                   Demo




                          bridgingIT / Seite 34
Weiterführende Themen

Agenda

Einführung in Vaadin

Weiterführende Themen
Data Binding
Navigation
Themes
Eigene Komponenten

Vergleich mit anderen Frameworks

Zusammenfassung

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

                                                            bridgingIT / Seite 36
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
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
Demo: Custom Theme




                Demo




                       bridgingIT / Seite 39
Weiterführende Themen

Agenda

Einführung in Vaadin

Weiterführende Themen
Data Binding
Navigation
Themes
Eigene Komponenten

Vergleich mit anderen Frameworks

Zusammenfassung

                                   bridgingIT / Seite 40
Entwicklung von Komponenten

Grundsätzlich 3 Arten von Komponenten

•   Komplett serverseitig  Composite Components

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




                                                    bridgingIT / Seite 41
Composite Components

Unterklassen von com.vaadin.ui.CustomComponent

•   Rein Serverseitig
•   Komposition bestehender Komponenten




                                                 bridgingIT / Seite 42
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
Client-Side Engine




                     bridgingIT / Seite 44
Custom Vaadin Widget mit GWT




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

                                                        bridgingIT / Seite 46
Custom Vaadin Widget mit JS




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

                                                                   bridgingIT / Seite 48
Demo: Custom Widget mit JS




                  Demo




                             bridgingIT / Seite 49
Vergleich mit anderen Frameworks

Agenda

Einführung in Vaadin

Weiterführende Themen

Vergleich mit anderen Frameworks
Aspekte
Unterschiede


Zusammenfassung



                                   bridgingIT / Seite 50
.equals(aPear)
         bridgingIT / Seite 51
Aspekte

                              Organisation

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

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




                                                                   bridgingIT / Seite 52
Frameworks




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




                                                                bridgingIT / Seite 54
Unterschiede Architektur

Aspekt               Vaadin      GWT         Smart GWT        RichFaces
Server-/Client-UI-   Server      Client      Client/Server*   Server
Framework

Anwendungs-          Anwendung   Anwendung   Anwendung        Seiten
/Seitenbasiert

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

Skalierbarkeit                                        




                                                                   bridgingIT / Seite 55
Unterschiede Entwicklung

Aspekt              Vaadin      GWT           Smart GWT           RichFaces
Geringe Lernkurve                                         



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

Einfachheit                                                 
Komponenten-
Entwicklung


1   nur Teilmenge




                                                                      bridgingIT / Seite 56
Zusammenfassung

Agenda

Einführung in Vaadin

Weiterführende Themen

Vergleich mit anderen Frameworks

Zusammenfassung




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

•   Bisher nicht so weit verbreitet

•   Einige Addons sind kostenpflichtig

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




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




                                                    bridgingIT / Seite 60
Fragen und Antworten




            Fragen?

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

Weitere ähnliche Inhalte

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

OC|Webcast "Java heute" vom 24.08.2021
OC|Webcast "Java heute" vom 24.08.2021OC|Webcast "Java heute" vom 24.08.2021
OC|Webcast "Java heute" vom 24.08.2021
OPITZ CONSULTING Deutschland
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
Cenarion Information Systems GmbH
 
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1
Manfred Steyer
 
Architekturen für .NET Core-Anwendungen
Architekturen für .NET Core-AnwendungenArchitekturen für .NET Core-Anwendungen
Architekturen für .NET Core-Anwendungen
Robin Sedlaczek
 
2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache
Daniel Fisher
 
Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?
gedoplan
 
Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“
Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“
Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“
OPEN KNOWLEDGE GmbH
 
Java EE Microservices ohne Server
Java EE Microservices ohne ServerJava EE Microservices ohne Server
Java EE Microservices ohne Server
gedoplan
 
Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?
Digicomp Academy AG
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
Patric Boscolo
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das web
gedoplan
 
B1 Lotusday 2008 Vortrag X Forms Rapid Development
B1 Lotusday 2008 Vortrag X Forms Rapid DevelopmentB1 Lotusday 2008 Vortrag X Forms Rapid Development
B1 Lotusday 2008 Vortrag X Forms Rapid Development
Andreas Schulte
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im VergleichWie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
gedoplan
 
Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1
Manfred Steyer
 
Präsentation webservices
Präsentation webservicesPräsentation webservices
Präsentation webservices
xxtesaxx
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIA
Thomas Christinck
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
gedoplan
 
Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?
GFU Cyrus AG
 
20150611 track3 2_bp22_ibm_connections_ist_keine_insel
20150611 track3 2_bp22_ibm_connections_ist_keine_insel20150611 track3 2_bp22_ibm_connections_ist_keine_insel
20150611 track3 2_bp22_ibm_connections_ist_keine_insel
DNUG e.V.
 

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

OC|Webcast "Java heute" vom 24.08.2021
OC|Webcast "Java heute" vom 24.08.2021OC|Webcast "Java heute" vom 24.08.2021
OC|Webcast "Java heute" vom 24.08.2021
 
GWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der PraxisGWT – Google Web Toolkit in der Praxis
GWT – Google Web Toolkit in der Praxis
 
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1
 
Architekturen für .NET Core-Anwendungen
Architekturen für .NET Core-AnwendungenArchitekturen für .NET Core-Anwendungen
Architekturen für .NET Core-Anwendungen
 
2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache2009 - DNC: Silverlight ohne UI - Nur als Cache
2009 - DNC: Silverlight ohne UI - Nur als Cache
 
Elsholz stoll js_03_10
Elsholz stoll js_03_10Elsholz stoll js_03_10
Elsholz stoll js_03_10
 
Wieviel Client braucht das Web?
Wieviel Client braucht das Web?Wieviel Client braucht das Web?
Wieviel Client braucht das Web?
 
Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“
Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“
Auf gehts in die Cloud: „Das kann doch nicht so schwer sein!“
 
Java EE Microservices ohne Server
Java EE Microservices ohne ServerJava EE Microservices ohne Server
Java EE Microservices ohne Server
 
Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?Was ist neu in .NET 4.5?
Was ist neu in .NET 4.5?
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
 
Wieviel client braucht das web
Wieviel client braucht das webWieviel client braucht das web
Wieviel client braucht das web
 
B1 Lotusday 2008 Vortrag X Forms Rapid Development
B1 Lotusday 2008 Vortrag X Forms Rapid DevelopmentB1 Lotusday 2008 Vortrag X Forms Rapid Development
B1 Lotusday 2008 Vortrag X Forms Rapid Development
 
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im VergleichWie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
Wie viel Client braucht das Web?JSF, Vaadin und AngularJS im Vergleich
 
Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1Web APIs mit ASP.NET MVC Core 1
Web APIs mit ASP.NET MVC Core 1
 
Präsentation webservices
Präsentation webservicesPräsentation webservices
Präsentation webservices
 
Browserbasiertes computing, RIA
Browserbasiertes computing, RIABrowserbasiertes computing, RIA
Browserbasiertes computing, RIA
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
 
Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?Java oberflächlich betrachtet - Welche GUI ist die richtige?
Java oberflächlich betrachtet - Welche GUI ist die richtige?
 
20150611 track3 2_bp22_ibm_connections_ist_keine_insel
20150611 track3 2_bp22_ibm_connections_ist_keine_insel20150611 track3 2_bp22_ibm_connections_ist_keine_insel
20150611 track3 2_bp22_ibm_connections_ist_keine_insel
 

Vaadin - Thinking of U and I (MAJUG 2013)

  • 2. 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
  • 3. Agenda Einführung in Vaadin Weiterführende Themen Vergleich mit anderen Frameworks Zusammenfassung bridgingIT / Seite 3
  • 4. Einführung in Vaadin Agenda Einführung in Vaadin Überblick Architektur Weiterführende Themen Vergleich mit anderen Frameworks Zusammenfassung bridgingIT / Seite 4
  • 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 Vaadin IT Mill wird  AJAX Directory gegründet 2000 2006 2008 2009 2012 2013 http://vaadin.com/book/-/page/intro.overview.background.html bridgingIT / Seite 7
  • 8. Architektur: Grobe Übersicht Vaadin Framework https://vaadin.com/book/vaadin7/-/page/intro.html#figure.intro.architecture bridgingIT / Seite 8
  • 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 Wizard https://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 Designer https://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 Themen Agenda Einführung in Vaadin Weiterführende Themen Data Binding Navigation Themes Eigene Komponenten Vergleich mit anderen Frameworks Zusammenfassung 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 Presenters 1 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 Picture https://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 7 Anwendungsmö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 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" }); bridgingIT / Seite 27
  • 28. 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 bridgingIT / Seite 28
  • 29. Demo: Lazy Loading Demo Demo (Video) bridgingIT / Seite 29
  • 30. Weiterführende Themen Agenda Einführung in Vaadin Weiterführende Themen Data Binding Navigation Themes Eigene Komponenten Vergleich mit anderen Frameworks Zusammenfassung 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 Themen Agenda Einführung in Vaadin Weiterführende Themen Data Binding Navigation Themes Eigene Komponenten Vergleich mit anderen Frameworks Zusammenfassung bridgingIT / Seite 35
  • 36. 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 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 Themen Agenda Einführung in Vaadin Weiterführende Themen Data Binding Navigation Themes Eigene Komponenten Vergleich mit anderen Frameworks Zusammenfassung bridgingIT / Seite 40
  • 41. Entwicklung von Komponenten Grundsä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 Components Unterklassen 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 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 bridgingIT / Seite 46
  • 47. Custom Vaadin Widget mit JS bridgingIT / Seite 47
  • 48. 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 bridgingIT / Seite 48
  • 49. Demo: Custom Widget mit JS Demo bridgingIT / Seite 49
  • 50. Vergleich mit anderen Frameworks Agenda Einführung in Vaadin Weiterführende Themen Vergleich mit anderen Frameworks Aspekte Unterschiede Zusammenfassung 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 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 bridgingIT / Seite 54
  • 55. Unterschiede Architektur Aspekt Vaadin GWT Smart GWT RichFaces Server-/Client-UI- Server Client Client/Server* Server Framework Anwendungs- Anwendung Anwendung Anwendung Seiten /Seitenbasiert Verfügbarkeit     Komponenten Skalierbarkeit     bridgingIT / Seite 55
  • 56. Unterschiede Entwicklung Aspekt Vaadin GWT Smart GWT RichFaces Geringe Lernkurve     Verwendete Java, CSS Java 1, CSS Java, JavaScript, Java, JavaScript, Sprachen CSS HTML, XML, CSS Einfachheit     Komponenten- Entwicklung 1 nur Teilmenge bridgingIT / Seite 56
  • 57. Zusammenfassung Agenda Einführung in Vaadin Weiterführende Themen Vergleich mit anderen Frameworks Zusammenfassung 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. 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 bridgingIT / Seite 60
  • 61. Fragen und Antworten Fragen? bridgingIT / Seite 61
  • 62. 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