Your SlideShare is downloading. ×
 Web-GUIs mit Vaadin
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Web-GUIs mit Vaadin

1,244
views

Published on

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

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,244
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Web-GUIs mit VaadinHendrik Jungnitsch, GEDOPLAN GmbH
  • 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. 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. 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. Vaadin Architektur - Übersicht Client (Webbrowser) Java Server JavaScript- Servlet Anwendung Engine (Google-Web- Toolkit) Business-Logik Vaadin GUI Komponenten Widgets 5
  • 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. 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. 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. 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. Ein Vaadin Projekt – 1. Aufbau Webprojekt Vaadin-Lib Deployment-Descriptor Anwendungsklasse 10
  • 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. 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. 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. 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. 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. 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. UI-Komponenten Clientseitiges Widget Terminal Adapter Themes Events Updates Vaadin Komponente Steuerung Logik Component Daten-Modell Binding 17
  • 18. UI-Komponenten Label DateField Link Button TextField CheckBox TextArea Upload PasswordField ProgressIndicator RichTextArea Slider 18
  • 19. UI-Komponenten : Gemeinsame Eigenschaften Caption (Beschriftung) Description (Tooltip) Enabled Icon Locale StyleName Visible 19
  • 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. UI Container Window TabSheet Panel Accordion SplitPanel 21
  • 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. 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. 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. Data-Binding Property Type Value Item PID … PID Property … Property Container IID … IID Item … Item 25
  • 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. Validierung Zuordnung von Validator-Objekten zu Feldern Vaadin 6 Validierung mit Feld-Typ Vaadin 7 Validierung mit Model-Typ Converter vorgeschaltet 27
  • 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. 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. 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. 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. 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. Eclipse Plugin Wizards für Erstellung von Projekten Widgets Themes Visueller Editor für „CustomComponents“ 33
  • 34. Dokumentation und Support Vaadin-Webseite Book of Vaadin (HTML oder PDF) Vaadin API-JavaDoc Forum Trac Wiki 34
  • 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. 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. 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