Java-Webanwendungen mit Vaadin 8

36 Aufrufe

Veröffentlicht am

Vortrag auf dem Expertenkreis Java, 14.9.2017m GEDOPLAN GmbH, Bielefeld

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Java-Webanwendungen mit Vaadin 8

  1. 1. Java-Webanwendungen mit Vaadin 8 Expertenkreis Java, 14.09.2017, GEDOPLAN Hendrik Jungnitsch, GEDOPLAN GmbH
  2. 2. Vorteile Webanwendung ggü. Desktop-Anwendungen Desktop-Anwendungen/Clients werden zunehmend von Web-GUIs abgelöst Logik und Daten zentral auf Server Keine Installation von zusätzlicher Client-Software erforderlich Bei Updates, kein Aktualisieren auf Clientseite notwendig 2
  3. 3. Problemstellung Webanwendung für Java-Entwickler Zugrundeliegendes Konzept unterscheidet sich deutlich von Desktop-Entwicklung Zustandslosigkeit des HTTP-Protokolls Nicht komponentenorientiert Nicht eventgetrieben Erfordert Kenntnisse nicht nur in Java, sondern auch Webtechnologien HTML, CSS, JavaScript, Ajax 3
  4. 4. Vaadin Webframework für Java Für JavaScript/Ajax-gestützte Webanwendungen Entwickelt von Vaadin Ltd. Opensource (Apache-Lizenz 2.0) Aktuelle Version 8.x.x 4 (https://vaadin.com/)
  5. 5. Was bietet Vaadin ? Framework für Web-Anwendungen An Desktop-Entwicklung (z. B. Swing) angelehntes Programmiermodell Abstraktion von Webtechnologien Umfangreiches Widgetset an Komponenten Eingabekomponenten, Tabellen, Trees, Menüs, usw. Server- und clientseitige Entwicklung möglich 5
  6. 6. Grundlegende Funktionsweise Besteht aus Clientseitiger Engine mit Widgetset (JavaScript) Serverseitiger Engine UI-Komponenten (Java) UIs werden auf Serverseite mit Java-Objekten aufgebaut Bei Aufruf einer Seite wird zuerst die JavaScript-Engine in den Browser geladen Synchronisation von Komponenten in Client und Server per Ajax Transparent für den Entwickler 6
  7. 7. Vaadin Architektur - Übersicht 7 Client (Webbrowser) Java Server JavaScript- Engine (Google-Web- Toolkit) Widgets Servlet Vaadin Komponenten GUI Anwendung Business-Logik
  8. 8. Vaadin Dependencies 8 <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-server</artifactId> <version>8.0.5</version> </dependency> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-themes</artifactId> <version>8.0.5</version> </dependency> <dependency> <groupId>com.vaadin</groupId> <artifactId>vaadin-client-compiled</artifactId> <version>8.0.5</version> </dependency>
  9. 9. Struktur der Vaadin-Anwendung Aufbau wie Standard-Webanwendung: Deployment-Desriptor WEB-INFweb.xml 9 Uis, Views und sonstige Java-Quellen Konfigurationsdateien für Java-Quellen Webapp-Root, JSP, XHTML, etc. Deployment-Deskriptors
  10. 10. Demo: Eine einfache Vaadin-Anwendung 10 Title("Hello World") // Titel der Seite @Theme("valo") // Theme public class HelloWorld extends UI { @Override protected void init(VaadinRequest request) { // Inhaltsbereich definieren VerticalLayout content = new VerticalLayout(); setContent(content); // Hinzufügen einer einfachen Textausgabe content.addComponent(new Label("Hello World!")); } }
  11. 11. Konfiguration der Anwendung 11 WebServlet(value = "/*", asyncSupported = true) @VaadinServletConfiguration(productionMode=false, ui=HelloWorld.class) public class DemoServlet extends VaadinServlet { } <servlet> <servlet-name>HelloWorld UI</servlet-name> <servlet-class>com.vaadin.server.VaadinServlet</servlet-class> <init-param> <param-name>ui</param-name> <param-value>de.gedoplan.seminar.vaadin.demo.HelloWorld</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>HelloWorld UI</servlet-name> <url-pattern>/*</url-pattern> </servlet-mapping>
  12. 12. Seite im Browser 12
  13. 13. Vaadin Komponenten Label Link TextField TextArea PasswordField RichTextArea 13 DateField Button CheckBox Upload ProgressIndicator Slider
  14. 14. Formulare mit Binder Verknüpft Formulare mit (fachlichen) Java-Objekten Kein HTML-Form Verknüpfung über Zugriffsmethoden möglich = typsicher Alternativ Verknüpfung über Beanproperties binder = new Binder<>(Vortrag.class); binder.bind(titel, Vortrag::getTitel,Vortrag::setTitel); binder.bind(titel, "titel");
  15. 15. Formulare mit Binder Deklaratives Zuordnen über Attribute Zuordnen zu Bean Oder separates Schreiben und Lesen @PropertyId("titel") private TextField titel binder.bindInstanceFields(this); binder.readBean(vortrag); binder.writeBean(vortrag); binder.setBean(vortrag);
  16. 16. Konvertierung Umwandeln von Präsentation <-> Modell über Converter Zuweisen von Converter über Binder als Converter oder in Form von 2 Lambdaausdrücken Builder Pattern Typsicher im Falle von Zugriffsmethoden binder.forField(dauer).withConverter(new StringToLongConverter());
  17. 17. Validierung Validieren über Validators Zuweisen über den Binder Kombinierbar mit Convertern -> Aufbau Converter-Validator- Pipeline Validator für Beanvalidation vorhanden BeanValidationBinder fügt diesen automatisch hinzu binder.forField(dauer).withValidator(...); binder = new BeanValidationBinder<>(Vortrag.class);
  18. 18. Grid Komponente für Darstellen tabellarischer Daten Viele Konfigurationsmöglichkeiten Direktes Hinzufügen einer Collection möglich Zuweisen der Columns über Zugriffsmethoden oder Beanproperties Automatisches Paging beim Scrollen
  19. 19. Grid Erstellen zu Beantyp (Automatisches Einrichten der Spalten) Zugriff auf Columns Hinzufügen einer Collection Auswahl von Items Grid<Vortrag> tabelle = new Grid<>(Vortrag.class); tabelle.getColumn("beschreibung").setHidden(true); tabelle.setItems(list) tabelle.setSelectionMode(SelectionMode.SINGLE); tabelle.addSelectionListener(e -> ...);
  20. 20. DataProvider Definiert das Laden der Daten Erlaubt z. B. datenbankseitiges Paging Implementierung mit Queries für Laden einer Page und Gesamtanzahl Einfache Einbindung bestehender Services tabelle.setDataProvider((f,offset,limit) -> vortragService.load(offset,limit).stream(), vortragService::count);
  21. 21. Layouts Anordnung der Elemente über Layoutmanager Verwendung erfolgt programmatisch VerticalLayou t HorizontalLayou t GridLayout AbsoluteLayou t CssLayout FormLayout
  22. 22. Themes Aussehen bestimmt durch Themes Einfaches Austauschen des Look-and-Feel Arbeiten mit SCSS Aussehen von Standard-Theme Valo ist stark konfigurierbar Eigene Themes einfach als Ableitung eines Standard-Themes
  23. 23. Navigation Einfaches Konzept für Navigation Erlaubt bookmarkable URLs Navigator verwaltet eine Menge von Views für eine UI View gemappt auf URI-Fragment Views werden angezeigt in dafür vorgesehenem Bereich
  24. 24. Deklaratives XML Alternative zum programmatischen Aufbau Definition in HTML File Tags für die Komponenten und Container Beschreibt nur das Layout, keine Funktionalität Verknüpfung mit Komponenten in Java Klasse möglich
  25. 25. Vaadin Designer Grafischer Editor für Vaadin Anwendungen einfaches Zusammenklicken der Oberflächen Arbeitet mit der deklarativen Definition Kostenpflichtig
  26. 26. Erweiterbarkeit Vaadin kann einfach um Komponenten erweitert werden Serverseitige Erweiterungen können in Java geschrieben werden Möglichkeiten für Erweiterungen mit clientseitigem Anteil GWT (Google-Web-Toolkit) Typsicher Muss kompiliert werden JavaScript Ungetyped Schnellerer Entwicklungszyklus Große Auswahl an Widgets
  27. 27. Eigene Vaadin Komponenten 27 Client Server Widget Connector State Component
  28. 28. JavaScript Komponenten Serverseitige Komponente Verknüpfung über Connector-Methode = Einstiegspunkt Vollqualifizierter Klassenname Zustandsobjekt @JavaScript("JsHtml5TextFieldConnector.js") public class JsHtml5TextField extends AbstractJavaScriptComponent { de_gedoplan_demos_vaadin_demo_ui_components_JsHtml5TextField = function() { public class JsHtml5TextFieldState extends JavaScriptComponentState {
  29. 29. Extensions Ähnlich wie eigene Komponente Kann auf bestehende Komponenten angewandt werden Fügt Funktionalität hinzu Ermöglicht es, ohne spezielles Ableiten zu erweitern So kann auch per JavaScript eine Vaadin Komponente erweitert werden TextField textField = new TextField(); JsHtml5TextFieldExtension jsHtml5TextFieldExtension = new JsHtml5TextFieldExtension(); jsHtml5TextFieldExtension.extend(textField);
  30. 30. Webcomponent Addon Experimentelles Addon für einfaches Integrieren von Webcomponents (Vaadin Elements, Polymer, etc.) Eigenen Javascript-Komponenten Auch für Manipulieren der Clientseite bestehender Komponenten Erlaubt einfaches Integrieren von Client- und Serverseite
  31. 31. Vaadin als Frontend für Java EE oder Spring Integration einfach über offizielle Addons Vaadin UIs und Views sind dann gemanaged und können injecten Neue Scopes: UIScoped und ViewScoped Einfaches Bereitstellen Keine Servletkonfiguration notwendig Views werden automatisch angezogen
  32. 32. Vorteile von Vaadin 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 32
  33. 33. Nachteile von Vaadin Webtechnologie für Entwickler transparent Nachteil für Webseiten-Design Serverseitige Steuerung erhöhter Netzwerkverkehr 33
  34. 34. Einsatzbereiche für Vaadin Gut geeignet für Desktopähnliche Business-Applikationen im Browser Programmatisch generierte Web-GUIs Weniger gut geeignet für Webseiten 34
  35. 35. Demoanwendung Sourcecode für die Demoanwendung: https://github.com/GEDOPLAN/vaadin-demo

×