Web-GUIs mit VaadinHendrik Jungnitsch, GEDOPLAN GmbH
Ausblick  Was ist Vaadin ?  Exkurs GWT  Vaadin-Architektur  Hello World mit Vaadin  Vorgehensweise/API     Komponenten    ...
Vaadin  Webframework für Java  Für JavaScript/Ajax-gestützte Webanwendungen  Entwickelt von Vaadin Ltd.  Opensource (Apach...
Exkurs – GWT (Google Web Toolkit)  Webframework für JavaScript-Anwendungen  GUI-Logik in Java geschrieben  Konvertierung v...
Vaadin Architektur - Übersicht    Client (Webbrowser)                                    Java Server   JavaScript-        ...
Architektur – Client-Seite  JavaScript-Engine  Thin-Client, ist zuständig für:     Rendern der GUI im Browser     Weiterle...
Architektur - Serverseite  Anwendung läuft als Servlet  Entwicklung auf Serverseite     GUI-Aufbau (Vaadin UI-Komponenten)...
Vorteile der serverseitigen Entwicklung  Reine Java-Programmierung  Abstrahierung von Webtechnologien (HTML, CSS, JavaScri...
Paketierung und Deployment  Paketierung     standardgemäße JavaEE-Webanwendungen (WAR-Archiv)     Vaadin-Framework als Lib...
Ein Vaadin Projekt – 1. Aufbau  Webprojekt  Vaadin-Lib  Deployment-Descriptor  Anwendungsklasse                           ...
Ein Vaadin Projekt – 2. Deployment-Descriptor  Angabe des Display-Namens  Servlet-Definition     Klasse:     com.vaadin.te...
Ein Vaadin Projekt – 2. Deployment-Descriptor    <display-name>VaadinBsp</display-name>    <servlet>        <servlet-name>...
Ein Vaadin Projekt – 3. Anwendungsklasse  Basisklasse für eine Vaadin-Anwendung  Ableitung von com.vaadin.Application  Zug...
Ein Vaadin Projekt – 3. Anwendungsklassepublic class VaadinBspApplication extends Application{  @Override  public void ini...
Fenster  Anwendungsfenster (application-level window)    Auf Clientseite = Fenster/Tab/Popup/eingebetteten Element    Mind...
Navigation (Vaadin 7)  Komponenten können View Interface implementieren  Views werden vom Navigator gemanaged     navigato...
UI-Komponenten   Clientseitiges Widget     Terminal Adapter                  Themes      Events   Updates    Vaadin Kompon...
UI-Komponenten  Label           DateField  Link            Button  TextField       CheckBox  TextArea        Upload  Passw...
UI-Komponenten : Gemeinsame Eigenschaften  Caption (Beschriftung)  Description (Tooltip)  Enabled  Icon  Locale  StyleName...
UI-Komponenten - Layouts       Layout-Komponenten       Layout-Managern aus der Desktopentwicklung nachempfunden       Ver...
UI Container  Window       TabSheet  Panel        Accordion  SplitPanel                           21
Events  Eventgetriebene Verarbeitung von Benutzeraktionen     Listener bei Event-Erzeuger Registrieren     Listenermethode...
Themes  Bestimmen Erscheinungsbild der Anwendung  Bestehend aus     HTML-Layouts     CSS     Grafiken  Abzulegen unter „We...
Themes  Erben von einem Standard Theme     @import "../reindeer/styles.css";  CSS-Klasse für jede Darstellungsform einer K...
Data-Binding    Property Type     Value                           Item                     PID     …    PID               ...
FieldGroup (Vaadin 7)Public class Kunde {      FieldGroup fieldGroup = new FieldGroup();                          fieldGro...
Validierung  Zuordnung von Validator-Objekten zu Feldern  Vaadin 6     Validierung mit Feld-Typ  Vaadin 7     Validierung ...
Direkte JavaScript Aufrufe  Aufrufe von Serverseite ( .execute("alert(Hello)"); )     Ausführung nach Abarbeitung des aktu...
Vaadin in JavaEE6 Anwendungen: CDI  Integration nicht speziell vorgesehen, aber möglich, da  Servletanwendung  Möglich dur...
Vaadin in JavaEE6 Anwendungen : Bean Validation  Bean Validation (JSR-303)     Vaadin 6        Add-On (Problematisch, da P...
Add-ons  Erweiterung durch Add-ons möglich  Viele offizielle und 3rd-party Add-ons verfügbar  Beispiele für offizielle Add...
Browserunterstützung (Vaadin 6.x)  Internet Explorer 6, 7, 8, 9  Mozilla Firefox 3, 4, 5 and 6  Safari 4, 5  Opera 10, 11 ...
Eclipse Plugin  Wizards für Erstellung von     Projekten     Widgets     Themes  Visueller Editor für  „CustomComponents“ ...
Dokumentation und Support  Vaadin-Webseite     Book of Vaadin (HTML oder PDF)     Vaadin API-JavaDoc     Forum     Trac   ...
Vorteile  JavaScript basiert (kein Browser Plug-in)  Webtechnologie für Entwickler transparent     Ermöglicht Konzentratio...
Nachteile  Webtechnologie für Entwickler transparent     Nachteil für Webseiten-Design  Serverseitige Steuerung     Viel N...
Fazit  Sehr interessantes Framework  Einfache Konfiguration  Unkomplizierte Einarbeitung  Sehr gut für servergesteuerte We...
Upcoming SlideShare
Loading in...5
×

Web-GUIs mit Vaadin

1,270

Published on

Folien zum Vortrag von Hendrik Jungnitsch, GEDOPLAN GmbH, auf dem Expertenkreis Java am 14.1.2013 in Bielefeld

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,270
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web-GUIs mit Vaadin

  1. 1. Web-GUIs mit VaadinHendrik Jungnitsch, GEDOPLAN GmbH
  2. 2. Ausblick Was ist Vaadin ? Exkurs GWT Vaadin-Architektur Hello World mit Vaadin Vorgehensweise/API Komponenten Themes Binding Validierung Browser-Kompatibilität Fazit 2
  3. 3. Vaadin Webframework für Java Für JavaScript/Ajax-gestützte Webanwendungen Entwickelt von Vaadin Ltd. Opensource (Apache-Lizenz 2.0) Aktuelle Version 6.8.x (https://vaadin.com/) 3
  4. 4. Exkurs – GWT (Google Web Toolkit) Webframework für JavaScript-Anwendungen GUI-Logik in Java geschrieben Konvertierung von Java zu JavaScript Entwicklung hauptsächlich für Clientseite Serverkommunikation über asynchrone RPC (Remote Procedure Calls) 4
  5. 5. Vaadin Architektur - Übersicht Client (Webbrowser) Java Server JavaScript- Servlet Anwendung Engine (Google-Web- Toolkit) Business-Logik Vaadin GUI Komponenten Widgets 5
  6. 6. Architektur – Client-Seite JavaScript-Engine Thin-Client, ist zuständig für: Rendern der GUI im Browser Weiterleiten von Benutzeraktionen zum Server Basiert auf GWT (Google-Web-Toolkit) Standardkomponenten liegen in kompilierter Form (JavaScript) vor Clientseitiges Entwickeln mit GWT möglich 6
  7. 7. Architektur - Serverseite Anwendung läuft als Servlet Entwicklung auf Serverseite GUI-Aufbau (Vaadin UI-Komponenten) Steuerungslogik Verarbeiten von Benutzerevents Framework auf Serverseite übernimmt Bearbeiten von Ajax-Anfragen Rendern zum Client 7
  8. 8. Vorteile der serverseitigen Entwicklung Reine Java-Programmierung Abstrahierung von Webtechnologien (HTML, CSS, JavaScrip,…) An Desktopanwendungen (Swing) angelehnte Vorgehensweise Programmatischer Aufbau M-V-C Serverseitige Steuerung/Validierung 8
  9. 9. Paketierung und Deployment Paketierung standardgemäße JavaEE-Webanwendungen (WAR-Archiv) Vaadin-Framework als Library eingebunden (jar) 1 monolithisches Archiv bei Vaadin 6 Mehrere Archive bei Vaadin 7 Servlet-Definition, Mapping in „web.xml“ Deployment auf gängigen Application-Server 9
  10. 10. Ein Vaadin Projekt – 1. Aufbau Webprojekt Vaadin-Lib Deployment-Descriptor Anwendungsklasse 10
  11. 11. Ein Vaadin Projekt – 2. Deployment-Descriptor Angabe des Display-Namens Servlet-Definition Klasse: com.vaadin.terminal.gwt.server.ApplicationServlet Anwendungsklasse als Parameter übergeben Servlet Mapping auf URL-Pattern 11
  12. 12. Ein Vaadin Projekt – 2. Deployment-Descriptor <display-name>VaadinBsp</display-name> <servlet> <servlet-name>Vaadin Beispiel Anwendung</servlet-name> <servlet-class> com.vaadin.terminal.gwt.server.ApplicationServlet </servlet-class> <init-param> <description>Anwendungsklasse</description> <param-name>application</param-name> <param-value> de.gedoplan.vaadinbsp.VaadinBspApplication </param-value> </init-param> </servlet> <servlet-mapping> <servlet-name> Vaadin Beispiel Anwendung </servlet-name> <url-pattern>/*</url-pattern> </servlet-mapping> 12
  13. 13. Ein Vaadin Projekt – 3. Anwendungsklasse Basisklasse für eine Vaadin-Anwendung Ableitung von com.vaadin.Application Zugeordnet zu Benutzersession Zu implementierende Init-Methode Muss ein Hauptfenster zugeordnet bekommen 13
  14. 14. Ein Vaadin Projekt – 3. Anwendungsklassepublic class VaadinBspApplication extends Application{ @Override public void init() { Window mainWindow = new Window("Vaadin Beispiel Application"); Label label = new Label("Hello World"); mainWindow.addComponent(label); Button button = new Button("Test Button"); mainWindow.addComponent(button); setMainWindow(mainWindow); }} 14
  15. 15. Fenster Anwendungsfenster (application-level window) Auf Clientseite = Fenster/Tab/Popup/eingebetteten Element Mindestens ein Hauptfenster (MainWindow) pro Application Mehrere Fenster per Anwendung möglich (gemapt auf Unterpfad) Unterfenster (sub-window) Innerhalb eines Anwendungsfensters Umgesetzt mit HTML, CSS und JavaScript Verschiebbar, schließbar 15
  16. 16. Navigation (Vaadin 7) Komponenten können View Interface implementieren Views werden vom Navigator gemanaged navigator.addView(„viewName", new CustomView()); Aufrufen eines Views: Programmatisch (navigateTo(„viewName");) Browseraufruf von App-URL + #viewName 16
  17. 17. UI-Komponenten Clientseitiges Widget Terminal Adapter Themes Events Updates Vaadin Komponente Steuerung Logik Component Daten-Modell Binding 17
  18. 18. UI-Komponenten Label DateField Link Button TextField CheckBox TextArea Upload PasswordField ProgressIndicator RichTextArea Slider 18
  19. 19. UI-Komponenten : Gemeinsame Eigenschaften Caption (Beschriftung) Description (Tooltip) Enabled Icon Locale StyleName Visible 19
  20. 20. UI-Komponenten - Layouts Layout-Komponenten Layout-Managern aus der Desktopentwicklung nachempfunden Verwendung erfolgt programmatisch Design-Eigenschaften über ThemesVerticalLayout GridLayout CSSLayout HorizontalLayout AbsoluteLayout FormLayout 20
  21. 21. UI Container Window TabSheet Panel Accordion SplitPanel 21
  22. 22. Events Eventgetriebene Verarbeitung von Benutzeraktionen Listener bei Event-Erzeuger Registrieren Listenermethode wird gefeuert Events für: Eingabekomponenten Application-, Session-Status Verarbeitung erfolgt serverseitig 22
  23. 23. Themes Bestimmen Erscheinungsbild der Anwendung Bestehend aus HTML-Layouts CSS Grafiken Abzulegen unter „WebContent/VAADIN/themes/“ Einbinden programmatisch mit „ setTheme(„name");“ Wechsel zur Laufzeit möglich 23
  24. 24. Themes Erben von einem Standard Theme @import "../reindeer/styles.css"; CSS-Klasse für jede Darstellungsform einer Komponente HTML-Templates für Verwendungen mit Custom Layout 24
  25. 25. Data-Binding Property Type Value Item PID … PID Property … Property Container IID … IID Item … Item 25
  26. 26. FieldGroup (Vaadin 7)Public class Kunde { FieldGroup fieldGroup = new FieldGroup(); fieldGroup.setItemDataSource(kundeBeanItem);Private String name; fieldGroup.bindMemberFields(myFormLayout);Private String email; public class MyFormLayout extends GridLayout { @PropertyId("name") private TextField name = new TextField("Name"); @PropertyId("email") private TextField email = new TextField("Email"); public MyFormLayout() { super(2, 3); setSpacing(true); addComponent(name); addComponent(email); } 26
  27. 27. Validierung Zuordnung von Validator-Objekten zu Feldern Vaadin 6 Validierung mit Feld-Typ Vaadin 7 Validierung mit Model-Typ Converter vorgeschaltet 27
  28. 28. Direkte JavaScript Aufrufe Aufrufe von Serverseite ( .execute("alert(Hello)"); ) Ausführung nach Abarbeitung des aktuellen Requests JavaScript-Callbacks Ermöglicht bearbeiten von JavaScript-Anfragen Erfordert Registrieren von Callback-Methode auf Serverseite 28
  29. 29. Vaadin in JavaEE6 Anwendungen: CDI Integration nicht speziell vorgesehen, aber möglich, da Servletanwendung Möglich durch (Vaadin 6) Application als SessionScoped Servlet als Ableitung von AbstractApplicationServlet ConversationScope nur mit CDI-Erweiterung nutzbar Achtung geboten, da Lebensdauer der Komponenten anders als bei JSF 29
  30. 30. Vaadin in JavaEE6 Anwendungen : Bean Validation Bean Validation (JSR-303) Vaadin 6 Add-On (Problematisch, da Prüfung nicht mit Modeltyp) Implementierung eines eigenen BeanValidators Vaadin 7 addValidator(new BeanValidator(Bean-Type, Property-Name)); 30
  31. 31. Add-ons Erweiterung durch Add-ons möglich Viele offizielle und 3rd-party Add-ons verfügbar Beispiele für offizielle Add-ons Bean Validation (für 6.x) Color-Picker SQL-Container TreeTable 31
  32. 32. Browserunterstützung (Vaadin 6.x) Internet Explorer 6, 7, 8, 9 Mozilla Firefox 3, 4, 5 and 6 Safari 4, 5 Opera 10, 11 Google Chrome 13 iOS 4-5 browser Android 2-3 browser 32
  33. 33. Eclipse Plugin Wizards für Erstellung von Projekten Widgets Themes Visueller Editor für „CustomComponents“ 33
  34. 34. Dokumentation und Support Vaadin-Webseite Book of Vaadin (HTML oder PDF) Vaadin API-JavaDoc Forum Trac Wiki 34
  35. 35. Vorteile JavaScript basiert (kein Browser Plug-in) Webtechnologie für Entwickler transparent Ermöglicht Konzentration auf das Wesentliche Cross-Browser optimiert Serverseitige Steuerung Sicherheit, Kontrolle Von Desktopentwicklung bekannte Vorgehensweise Programmatischer Aufbau der UIs Standard Java-Webprojekt Gute Erweiterbarkeit, viele Add-ons verfügbar 35
  36. 36. Nachteile Webtechnologie für Entwickler transparent Nachteil für Webseiten-Design Serverseitige Steuerung Viel Netzwerkverkehr Databinding (Konvertierung) nicht optimal (6.x) Application ist Session gebunden, Zustand in Session Speicherbedarf 36
  37. 37. Fazit Sehr interessantes Framework Einfache Konfiguration Unkomplizierte Einarbeitung Sehr gut für servergesteuerte Webanwendungen Weniger geeignet für Webseiten Gute Alternative zu JSF (vor allem für programmatischen Aufbau des UI) Gute Alternative zu GWT Falls serverseitige Steuerung kein Problem 37
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×