PROMATIS. Interaktive Web-Anwendungen. Echte Rich-Client-Oberflächen mit Adobe Flex, ADF Faces und Web Services. Frank Szilinski PROMATIS, Ettlingen

Transkript

1 PROMATIS Interaktive Web-Anwendungen Echte Rich-Client-Oberflächen mit Adobe Flex, ADF Faces und Web Services 2. Dezember 2008 Frank Szilinski PROMATIS, Ettlingen 1

2 Interaktive Web-Anwendungen Zukunftstrend oder Hype? Web Applications Rich Internet Applications Client/Server Mainframe 2

3 Interaktive Web-Anwendungen Was bedeutet Interaktivität? Interaktivität in Applikationen kennzeichnet die Differenz zu einkanaligen Sendemedien. Das herausragendste Merkmal ist die Rückkanalfähigkeit. Es handelt sich dabei um eine technische Eigenschaft, die einfachen und kontinuierlichen Rollentausch zwischen Sendern und Empfängern ermöglicht. 3

4 Interaktive Web-Anwendungen Gliederung Web Application Framework und Java Server Faces Komplexe Komponenten Rich Internet Application Frameworks Adobe Flex und JEE Kommunikation Integration in Entwicklungsumgebung Demonstration Graph Designer / Metalink Zusammenfassung 4

5 Interaktive Web-Anwendungen Probleme traditioneller Web-Anwendungen I Verarbeitung: Berechnungen, Validierungen und komplexe Prozesse können nur durch ein Response vom Client zum Server durchgeführt werden. Daten: Anzeige von Daten und Datendetails erfordert ein Neuladen der Seite. Interaktive Erforschung ist nahezu unmöglich. Session: Dauerhafte Verbindungen zwischen Client und Server können nur durch ein Sessions-Management erreicht werden. Dies führt zu Sicherheitsproblemen. Webbrowser: Trotz des W3C-Standards werden Web-Seiten unterschiedlich interpretiert und dargestellt. Darstellung: Eine Web-Seite ist immer auf eine Menge von HTML Tags beschränkt. 5

6 Interaktive Web-Anwendungen Probleme traditioneller Web-Anwendungen II Trennung: Vermischen von HTML und Java Code in einer JSP Page führt zu Problemen: Trennung zwischen Anwendungslogik und Darstellung findet nicht statt. Standards: Standards für WEB-GUI-Entwicklung fehlt. Entwicklung: Entwickler denken in Begriffen wie Komponenten, Events, Modell-Objekten und ihre Interaktionen anstelle von Requests, Responses und Markup. Komponenten: Die Anzahl an Komponenten ist sehr begrenzt und Eigenentwicklungen sind nur schwer möglich und erfordern einen Einsatz weiterer Frameworks. 6

7 Interaktive Web-Anwendungen Lösung für einige der Probleme? Web Application Frameworks Die Fähigkeiten eines Web-Frameworks sind darauf ausgelegt, sehr schnell Ergebnisse zu erzielen und lauffähige Web- Anwendungen zu erstellen. 7

8 Web Application Framework JSF Java Server Faces in Kurzversion Der JSF Standard ist das grundlegende Gerüst für eine komponentenbasierende Entwicklung von Web-Anwendungen Angelehnt an traditionellen Fat-Clients bietet JSF ein Event Model Validierungen, Seitennavigation und Fehlerbehandlung sind Bestandteil des Frameworks Oracle ADF Faces ist eine Bibliothek von JSF-konformen UI- Komponenten, die ausreichend für die meisten Web-Anwendungen sind JSF bietet ein erweiterbares UI-Komponenten Model 8

9 Web Application Framework JSF Begrenzte Möglichkeiten UI-Komponenten? Erweiterbares UI-Komponenten Model Aber: Das Design und die Realisierung von komplexeren Komponenten ist nicht trivial, da die Möglichkeiten, komplexere Grafik-Widgets direkt in HTML wiederzugeben, begrenzt sind. 9

10 Komponentenentwicklung Realisierung komplexer Komponenten Was sind komplexe Komponenten? Grafische Editoren (zur Modellierung von Prozessen, Diagrammen, Mind Maps, ) Interaktive Charts, Diagramme oder Geoinformationen (bspw. Reporting und Monitoring) Dem Datenmodel angepasste Visualisierungskomponenten (bspw. Gantt Chart Komponente für Projektplanung) 10

11 Komponentenentwicklung - Beispiele Charting und Reporting Komponenten Organization Chart Komponente Gantt und Resource Chart Komponente 11 Mind Map Manager Komponente Prozess- oder Projekplanungskomponenten

12 Komponentenentwicklung Realisierung komplexer Komponenten Wie realisiert man komplexe Komponenten mit JSF? Generell gibt es fast keine Grenzen! Durch Erzeugung von HTML und CSS Informationen Durch Generierung von DHTML Durch dynamische, serverseitige Bildgenerierung Erweiterte Funktionalität durch Javascript Interaktion durch AJAX 12

13 Komponentenentwicklung Realisierung komplexer Komponenten Wo liegen die Probleme beim Erzeugen von JSF Komponenten? Verständnis JSF Laufzeit-Framework und Rendering Phasen Begrenzte Möglichkeit Widgets direkt in HTML wiederzugeben Interaktionsfähigkeit mit einfachen HTML Komponenten und Bildern Expertenwissen in vielen Fachgebieten notwendig (JSP, TLD, JSF, HTML, CSS, JavaScript, DHTML, AJAX, ) Lange Testzyklen auf unterschiedlichen Browsern Darstellung in Browsern variiert und wird unterschiedlich interpretiert IDE Integration der Custom Komponente 13

14 JavaScript DHTML CSS HTML AJAX JSF JSP TLD That s easy! 14

15 Komponentenentwicklung Wie realisiert man kosteneffizient und ohne Technologie-Mix-Expertenwissen solche komplexen Komponenten? Mit Technologien und Frameworks, die in einer Browser-unabhängigen Umgebung ausgeführt werden und die alte bewährte Konzepte mit neuen Charakteristiken erweitern, um eine reichhaltige Interaktion zu garantieren. 15

16 Rich Internet Applications Technologien und Frameworks Microsoft Silverlight: - Microsoft positioniert Silverlight als Konkurrenzprodukt zu Adobes Flash-Player - Ist eine abgespeckte Version der Windows Presentation Foundation OpenLaszlo: - Server-basierte deklarative Entwicklungsumgebung, die es dem Entwickler ermöglicht, RIAs on-the-fly zu erzeugen - Verfolgt das gleiche Prinzip wie Flex von Adobe Systems - War bereits Jahre vor Adobe mit der Produktidee auf dem Markt Sun s JavaFX: - Wurden für die Entwicklung RIAs entworfen - JavaFX hat sich noch nicht etabliert und hat massive Performanceprobleme Adobe Flex: - Besteht aus mehreren Komponenten (Flex Builder, Flex LiveCycle, ) - Schon vor der Veröffentlichung von Flex war es möglich mit Adobe Flash RIAs zu realisieren 16

17 17 Rich Internet Applications Warum Adobe Flex? Adobe Flash Player auf über 89% aller Rechner weltweit installiert Umfangreiche Werkzeuge, Bibliotheken und Komponenten Einfach zu erlernen und ähnlich zur Java Programmiersprache Starke Integrationsmöglichkeit mit Remote Object Calls (RPCs), Web Services Stubs und anderen interessanten Möglichkeiten Reichhaltige Dokumentationen und Anleitungen werden nicht nur von Adobe, sondern auch von vielen Communities angeboten Mischung von mehreren Sprachen für ein optimales Ergebnis (MXML, AS3, Java) Vielfältiges Angebot von Open-Source Komponenten Open-Source MVC Framework für die Realisierung von komplexen Enterprise Anwendungen Erweiterte Kommunikationsmöglichkeiten mit LiveCycleDS, BlazeDS, GraniteDS,

18 Rich Internet Applications Was ist Adobe Flex? Flex 3 Anwendungen Basieren auf das Flex Framework 3 Oberflächen werden mit MXML definiert Logik wird mit Action Script 3 implementiert Client Rechner startet vorkompilierte.swf Datei Benötigt Flash Player 9 Look and Feel wird durch CSS oder erweiterten Skins definiert 18

19 Rich Internet Applications Was ist Adobe Flex? Flex Framework 3 MXML (Macromedia XML): - Deklarative Sprache für die Definition von Benutzeroberflächen - Vergleichbar mit XHTML Action Script 3: - Vergleichbar mit Java - Implementierung von Events, Models und Value Objects Benutzeroberflächen Komponenten: - Buttons, ComboBoxes, Layout Managers, Containers, Effects, Custom Components, Klassenbibliotheken: - Alle Bibliotheken in dem mx.* packages - Validierungsroutienen, Web Services, Datentypen, 19

20 Rich Internet Applications Adobe Flex Produkte MXML and ActionScript 3.0 Flex Framework and Class Library Command-line Compiler & Debugger Erweiterbare Charting Komponenten Visual Layout Code Hinting Debugging Skinning and Styling Message Service Data Management Service RPC Services 20

21 Rich Internet Applications Nachteile von Rich Internet Applications Etwas längerer Download beim Starten einer RIA Anwendung Höhere Belastung des Client Rechners Nicht jeder Client hat u.u. die notwendige Umgebung installiert 21

22 Rich Internet Applications Vorteile von Rich Internet Applications Benutzerfreundlich, da moderne Oberflächentechniken wie bei traditionellen Anwendungen möglich sind. Genaue Darstellung von Oberflächen (im Vergleich zu HTML). Können auch "offline" funktionieren und brauchen daher keine dauernde Verbindung Intelligent, da Logik auch lokal verfügbar ist Weniger Anfragen an den Server durch optimierte und komprimierte Protokolle Können auf das lokale Dateisystem zugreifen Entlastet die Rechenleistung des Server Realisierung komplexer Komponenten ohne komplizierte Konstrukte oder andere Technologien möglich 22

23 Rich Internet Application mit Flex Flex Komponenten realisieren (Crash Kurs) 1. Schritt Mit Eclipse RIA Anwendung entwerfen 2. Schritt Flex Anwendung kompilieren und.swf Datei erzeugen 3. Schritt Erzeugte Datei im Browser öffnen 23

24 Rich Internet Application mit Flex Flex Komponenten in JSF integrieren Client ruft URL mit eingebetteter Flex Komponente auf die dann im Flash Player dargestellt wird JSF Controller xxx xxx xxx xxx 24 <f:jsp> <.> <f:jsp> </ > <.> <f:jsp> </f:jsp> </ > <.> </f:jsp> </ > </f:jsp> class XXX { public classvoid XXX abc(); { JSF Seiten public public class void void XXX xyz(); abc(); { } public public void void xyz(); abc(); } public void xyz(); } xxx Backing Beans xxx xxx <xml> <abc>function <xml> </abc> <abc>function <xml> </xml> </abc> <abc>function </xml> </abc> </xml> Data Bindings und Data Controls

25 Rich Internet Application mit Flex Flex Komponenten in JSF integrieren Client ruft URL mit eingebetteter Flex Komponente auf die dann im Flash Player dargestellt wird JSP HTML Präsentationsschicht mit Java Server Faces Web Services EJB Session Beans Java Beans Business Logik 25

26 Flex RIA Kommunikation mit JEE Kommunikationsmöglichkeiten 1. HTTPService Komponente Request, Response XML-RPC, JSP, APEX etc. mittels Representational State Transfer 2. Web Services Komponente Kommunikation mittels SOAP-konforme Web Services 3. Remote Object Services Kommunikation über das binäre AMF Protokoll 4. Message Service Publish and subscribe messaging Standard Konzepte und Terminologie 5. Data Management Service Innovatives Modell zur Verwaltung der Client-Server Synchronisation 6. Collaboration Neuartige Konzepte wie co-browsing und synchronisierte Kollaboration 26

27 Flex RIA Kommunikation mit JEE Kommunikation ohne Data Services Business Schicht RPC Service Implementierungen Java Objekte, Webservices, Servlets,... Integrationsschicht Konnektoren, Toplink, Hibernate, DMS File Server LDAP Webservices

28 Flex RIA Kommunikation mit JEE Kommunikation mit LiveCycleDS oder BlazeDS 28

29 Kommunikation Übersicht Frameworks Ohne DataServices HTTP, SOAP, RPC Data Synchronization Off-line Applications Data Paging LicyCycle ColdFusion Mit Adobe BlazeDS (Open Source) RPC Services, Messaging, Proxy Service, JMS-Adapter, Java-Adapter Web Service HTTP Service Remote Object Service Hibernate SQL JMS Mit Adobe LiveCycleDS (lizenzpflichtig) DataService, RPC Services, Messaging, Adapter Services für unterschiedliche Umgebungen, Proxy Services, Web-tier Compiler, Portal Deployment, RIA-PDF Generator Publish & Subscribe Collaboration Real Time Data Push Proxy Service Web-tier Compiler Java Custom 29 Portal Deployment RIA-PDF Generation

30 RIA mit JEE und Flex Zusammenfassung RIAs sind keine neue Erfindung sind aber durch neue Technologien und Konzepte sicherer und besser realisierbar (ähnlich: Java Applets) Adobe Flex ist nur eine Technologie, die die Realisierung von RIAs ermöglicht, jedoch den größten Umfang an Werkzeugen und Frameworks anbietet (andere: JavaFX, OpenLaszlo, ) RIAs ermöglichen datenintensive und multimediale Anwendungen mit einem hohen Anspruch auf Interaktivität und Datenaustausch (Binäre Protokolle zum Austausch von Daten und hoch flexibles User Interface) RIAs sind performancestarke Anwendungen mit Echtzeitfähigkeiten (Echtzeit Kollaboration und Publish and subscribe messaging) RIAs sind Intelligente Anwendungen (Validierungen, Zustände und eigenes angepasstes Datenmodell) 30

31 RIA mit JEE und Flex Zusammenfassung RIAs mit Adobe Flex sind voll in eine Service-orientierte Architektur integrierbar (Web Service Komponente und voller XML Support) RIAs mit Adobe Flex sind im vollen Umfang in die Projektlandschaft integrierbar (Volle Integration in JEE Webprojekte, Build-Prozess mit vollem Ant und Maven Support, JUnit, Logging und anderes wie in Java Projekten) Adobe Flex bietet bewährte und moderne Konzepte zur Oberflächengestaltung und eröffnen dem Entwickler neue Möglichkeiten, wirkliche Benutzerfreundlichkeit an den Anwender weiter zu geben (Einfaches, leistungsstarkes und vielfältiges Framework mit normalen Komponenten bis hin zu komplexen Animationen und Benutzerinteraktionen) RIAs werden uns in Zukunft alltäglich begegnen 31

32 Interaktive Web-Anwendungen Anlaufstellen im Internet Apache Trinidad: Flash JSF Integration: Cairngorm: Adobe Flex SDK: Flex Documentation: LiveCycleDS: BlazeDS: