![Angular – Controller, Navigation
Enterprise UI - Wie schlau soll mein Browser sein? 18
angular.module('GedoplanWebClients.login', [])
.controller("login", function (userService,
$translate, $state, $timeout) {
var vm = this;
vm.login = function () {…};
vm.logout = function () {…};
}
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'components/login/login.html',
controller: 'login',
controllerAs: 'vm'
})
gedoplan.de](https://image.slidesharecdn.com/enterpriseui-160916113419/85/Enterprise-UI-18-320.jpg)
Enterprise UI
- 1. Enterprise UI Wie schlau soll mein Browser sein? Dirk Weil, GEDOPLAN GmbH
- 2. Dirk Weil GEDOPLAN GmbH, Bielefeld GEDOPLAN IT Consulting Konzeption, Realisierung von IT-Lösungen GEDOPLAN IT Training Seminare in Berlin, Bielefeld, on-site Java EE seit 1998 Vorträge, Veröffentlichungen Enterprise UI - Wie schlau soll mein Browser sein? 2gedoplan.de
- 3. Ziele / Inhalt Einführung in die Anwendung / Java EE Backend Vorstellung der Frameworks Java Server Faces (JSF) Vaadin AngularJS Check Up Fazit Enterprise UI - Wie schlau soll mein Browser sein? 3gedoplan.de
- 4. Einführung in die Anwendung / Java EE Backend Datenbasis: Microsoft Northwind Technische Basis: Java EE 7 Fachobjekte (Customer, Order, …): JPA DB-Zugriff (CustomerRepository, …): CDI Services (OrderService, …): EJB mit Role based Security Enterprise UI - Wie schlau soll mein Browser sein? 4gedoplan.de
- 5. Einführung in die Anwendung / Java EE Backend Enterprise UI - Wie schlau soll mein Browser sein? 5 Browser JavaServer Faces Webservice (JAX-RS) Vaadin Services Respositories Präsentationsschicht / Schnittstellen Geschäftslogik Datenbank JavaEEServer AngularJS (Browser) Client gedoplan.de
- 6. Java Server Faces (JSF) Model-View-Controller-Pattern Im Java-EE-Standard seit 2004 Komponentenmodell für das GUI von Web-Anwendungen Enterprise UI - Wie schlau soll mein Browser sein? 6gedoplan.de Application-Server Renderer Views, xhtml Browser Controller, CDI Beans HTML, JavaScript Services
- 7. JSF - View Enterprise UI - Wie schlau soll mein Browser sein? 7 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"> <h:form> <h:outputLabel value="#{msg.login_name}"/> <h:inputText value="#{authenticateController.loginname}"/> <h:outputLabel value="#{msg.login_password}"/> <h:inputSecret value="#{authenticateController.password}"/> <h:commandButton action="#{authenticateController.login}" value="#{msg.login_submit}" /> </h:form> </html> gedoplan.de
- 8. JSF - Controller Enterprise UI - Wie schlau soll mein Browser sein? 8 @Named @RequestScoped public class AuthenticateController { private String loginname; private Sring password; public String login() { ... return "home"; } gedoplan.de
- 9. JSF – Vorgehensweise / Besonderheiten Model-Controller als Bindeglied zu Views CDI Beans Diverse Scopes verfügbar (Request, Session, Flow, View, …) Einbindung des Backends mittels Injektion Serverseitige View Definition Facelets (austauschbar) Bindung an Model-Controller mit EL Multipage Navigation mit zentralem Handler, wenn gewünscht Request / Rendering partiell mit AJAX ( auch SPA möglich) Enterprise UI - Wie schlau soll mein Browser sein? 9gedoplan.de
- 10. JSF – Vorgehensweise / Besonderheiten Domänenobjekte können direkt genutzt werden ( DTOs unnötig) Zentrales Error Handling möglich I.d.R. zusätzliche Komponentenbibliotheken nötig Addieren Komplexität Addieren proprietäre Stile, JS, … JS im Browser möglich Nicht speziell unterstützt Enterprise UI - Wie schlau soll mein Browser sein? 10gedoplan.de
- 11. Vaadin Open Source Java Framework für Rich-Internet-Applications Entwickelt von der Firma Vaadin Ltd. Aufbau der Oberflächen auf Serverseite in Java (ähnlich wie Swing) JavaScript-Engine im Browser als Thin-Client Enterprise UI - Wie schlau soll mein Browser sein? 11gedoplan.de Application-Server Services Views, Java Client, Browser JavaScript Engine Widgets Komponenten Daten, Java Beans Synchronisiert durch Framework (JSON)
- 12. Vaadin - UI Enterprise UI - Wie schlau soll mein Browser sein? 12 @CDIUI("login") public class LoginUi extends UI { protected void init(VaadinRequest request) { TextField name = new TextField(…); PasswordField password = new PasswordField(…); Button login = new Button(…, e -> {login… }); FormLayout fieldLayout = new FormLayout(name, password, login); Panel loginPanel = new Panel(…, fieldLayout); VerticalLayout page = new VerticalLayout(); page.addComponent(loginPanel); setContent(page); } } gedoplan.de
- 13. Vaadin – Databinding (optional) Enterprise UI - Wie schlau soll mein Browser sein? 13 public class LoginUi extends UI { @PropertyId("user") private TextField loginUser; @PropertyId("password") private PasswordField loginPassword; private LoginBean loginBean = new LoginBean(); protected void init(VaadinRequest request) { BeanFieldGroup<LoginBean> bfg = new BeanFieldGroup<>(LoginBean.class); bfg.buildAndBindMemberFields(this); bfg.setItemDataSource(loginBean); } } public class LoginBean { private String user; private String password; // Getter + Setter } gedoplan.de
- 14. Vaadin – Vorgehensweise / Besonderheiten UI-Aufbau durch UI-Klassen Aggregation von Widget-Objekten URL-Mapping per Annotation / Servlet Listener-Konzept Service-Einbindung mittels Injektion Direkte Bindung an Domänenobjekte möglich (ohne DTOs) Clientseitiges Rendering auf Basis serverseitiger Präsentationsdaten Widgets werden initial in Browser (Tab) geladen Anschließend nur Aktualisierung von Struktur und Daten Enterprise UI - Wie schlau soll mein Browser sein? 14gedoplan.de
- 15. Vaadin – Vorgehensweise / Besonderheiten SPA im Browser-Tab Navigation zwischen Views mit bookmarkfähigen URLs Error Handling, Converter etc. können zentral registriert werden Erweiterbarkeit über eigene Aggregationen von vorhandenen Komponenten durch Entwurf zusätzliche GWT-basierter Widgets mittels Skripting und HTML-Templates durch Komponentenbibliotheken (teilweise kommerziell) Enterprise UI - Wie schlau soll mein Browser sein? 15gedoplan.de
- 16. Angular JS Open Source JavaScript-Webframework RIA - Rich Internet Application SPA – Single Page Application entwickelt von Google Enterprise UI - Wie schlau soll mein Browser sein? 16gedoplan.de Browser JAX-RS Services Application-Server Views, html Controller, JavaScript JSON
- 17. AngularJS - View Enterprise UI - Wie schlau soll mein Browser sein? 17 <form class="form-signin"> <input type="text" ng-model="vm.username" placeholder="{{'login.username' | translate}}" /> <input type="password" ng-model="vm.password" placeholder="{{'login.password' | translate}}" /> <button ng-click="vm.login()"> {{'actions.login' | translate}} </button> </form> gedoplan.de
- 18. Angular – Controller, Navigation Enterprise UI - Wie schlau soll mein Browser sein? 18 angular.module('GedoplanWebClients.login', []) .controller("login", function (userService, $translate, $state, $timeout) { var vm = this; vm.login = function () {…}; vm.logout = function () {…}; } $stateProvider .state('login', { url: '/login', templateUrl: 'components/login/login.html', controller: 'login', controllerAs: 'vm' }) gedoplan.de
- 19. Angular – Vorgehensweise / Besonderheiten UI-Aufbau durch HTML-Dateien Verwendung von Expressions Aggregation durch Directives Service-Einbindung mittels Schnittstelle (z.B. REST) DTOs oder JSON-Mapper notwendig Clientseitiges Rendering auf Basis statischer HTML-Seiten dynamische Manipulation durch Controller-Bindings Enterprise UI - Wie schlau soll mein Browser sein? 19gedoplan.de
- 20. Angular – Vorgehensweise / Besonderheiten SPA Navigation zwischen Views mit bookmarkfähigen URLs Zustandstandslos Erweiterbarkeit über eigene Aggregationen von vorhandenen Komponenten durch Angular-spezifische Komponenten durch JavaScript-Komponenten Enterprise UI - Wie schlau soll mein Browser sein? 20gedoplan.de
- 21. Technologie-Mix Enterprise UI - Wie schlau soll mein Browser sein? 21 1 2 3 Backend GUI JSF Java EE • HTML-ähnliche Templatesprache, Facelets • CSS-Kenntnisse in aller Regel notwendig Vaadin • Java (ähnlich Swing/JavaFX) • CSS- und JavaScript-Kenntnisse nur optional und für eigene Komponenten AngularJS • tiefe Kenntnisse in JavaScript, CSS, HTML nötig gedoplan.de
- 22. Trennung Design / Präsentationslogik Enterprise UI - Wie schlau soll mein Browser sein? 22 JSF • JSF-eigene Tags • Templates Vaadin • enge Verbindung durch programmatischen Ansatz • Abstraktion durch Vaadin-Designer (kostenpflichtig) AngularJS • reine HTML-Templates mit Angular Markup • Controller der View konfigurierbar • vollständige Projekt-Trennung möglich 1 2 2 gedoplan.de
- 23. Erweiterbarkeit Enterprise UI - Wie schlau soll mein Browser sein? 23 JSF • eigene Composite Components • Komponenten-Frameworks (z.B. PrimeFaces) Vaadin • Komposition durch Erweiterung der Standardklassen • eigene Komponenten bspw. durch JavaScript Extensions AngularJS • beliebige JavaScript-Komponenten (z. B. Bootstrap, JQuery) 1 2 2 gedoplan.de
- 24. Backend Integration Enterprise UI - Wie schlau soll mein Browser sein? 24 JSF • Controller im Backend-Prozess • Zugriff auf Services durch CDI Injection • keine externe Schnittstelle notwendig Vaadin AngularJS • Zugriff über externe Schnittstellen • Datenaustausch z.B. über JAX-RS in JSON 1 1 2 gedoplan.de
- 25. Investitionssicherheit Enterprise UI - Wie schlau soll mein Browser sein? 25 JSF • Standard Java EE • Abwärtskompatibel bis Version 1.0 • Ausgenommen: Komponentenframeworks Vaadin • proprietär • bei großen Versionssprüngen keine stabile APIAngularJS 1 2 2 gedoplan.de
- 26. Kommunikation Enterprise UI - Wie schlau soll mein Browser sein? 26 JSF • Format: HTML / XML • User-Interaktionen lösen Requests aus Vaadin • Format: JSON (inklusive View-Informationen) • User-Interaktionen lösen Requests aus AngularJS • Format: JSON (reine Daten) • keine Requests bei Validierung und GUI-Logik 1 2 2 gedoplan.de
- 27. Ressourcen-Nutzung Enterprise UI - Wie schlau soll mein Browser sein? 27 1 2 2 gedoplan.de JSF • Rendering / View-Aufbau: Serverseitig • Request-Größe ~ HTML-Fragmente Vaadin • View-Aufbau: Server • Rendering: Clientseitig • Request-Größe ~ View-Informationen AngularJS • Rendering / „View-Aufbau“: Clientseitig • JSON Daten-Requests + eigener HTML-Template-Cache
- 28. Build-Prozess Enterprise UI - Wie schlau soll mein Browser sein? 28 JSF • gleiche Build-Tools wie für das Backend • Maven, Gradle, …Vaadin AngularJS • eigenständige Build-Tools / Scripte • größere Anzahl an Möglichkeiten • NPM, Bower, Grunt, Gulp, Webpack, Browsify, … 1 1 2 gedoplan.de
- 29. Lernkurve (on top of Java EE) Enterprise UI - Wie schlau soll mein Browser sein? 29 JSF • Facelets • Komponenten-Bibliotheken Vaadin • Spezifische API AngularJS • JavaScript, HTML, CSS • Build Tools 1 2 3 gedoplan.de
- 30. UI Testing Enterprise UI - Wie schlau soll mein Browser sein? 30 JSF • Deployment auf Application Server notwendig • komplexes Test-Setup (z. B. Arquillian)Vaadin AngularJS • schnelles Setup dank Angular-spezifischem Test Framework • einfaches Mocken von HTTP Requests • HTTP Server reicht 1 2 2 gedoplan.de
- 31. Demo-Projekt https://github.com/GEDOPLAN/webclients-check Enterprise UI - Wie schlau soll mein Browser sein? 31gedoplan.de
- 32. More http://www.slideshare.net/gedoplan/enterprise-ui Präsentation zum Download http://www.gedoplan-it-training.de Seminare in Berlin, Bielefeld, Inhouse http://gedoplan-it-training.de/BEDCON/ Aktion zum Thema http://www.gedoplan-it-consulting.de Reviews, Coaching, … Blog dirk.weil@gedoplan.de @dirkweil Enterprise UI - Wie schlau soll mein Browser sein? 32gedoplan.de