Interaktive Webanwendungen PROMATIS Interaktive Webanwendungen ! Echte Rich-Client-Oberflächen mit Adobe Flex, ADF Faces und Web Services 27. März 2009 Frank Szilinski PROMATIS, Ettlingen

Interaktive Webanwendungen Zukunftstrend oder Hype? Rich Internet Applications 2005 ? Mainframe Client/Server Web Applications 1992 1998

Interaktive Webanwendungen 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.

Interaktive Webanwendungen Gliederung Web Application Framework und JSF Komplexe Komponenten Rich Internet Application Frameworks Adobe Flex und JEE Kommunikation Demonstration Zusammenfassung

Interaktive Webanwendungen Probleme traditioneller Webanwendungen 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 (URL-Tampering, Session Hijacking,…). Webbrowser: Trotz des W3C Standards werden Webseiten unterschiedlich Interpretiert und Dargestellt. Darstellung: Eine Webseite ist immer auf eine Menge von HTML Tags beschränkt.

Interaktive Webanwendungen Probleme traditioneller Webanwendungen 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, Patterns und ihre Interaktionen anstelle von Requests, Responses und Markup. Komponenten: Die Anzahl an Komponenten ist sehr begrenzt und Eigenentwicklungen nur schwer möglich und erfordert einen Einsatz weiterer Frameworks.

Interaktive Webanwendungen 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 Webanwendungen zu erstellen.

Web Application Framework JSF Java Server Faces in Kurzversion Der JSF Standard ist das grundlegende Gerüst für eine komponentenbasierende Entwicklung von Webanwendungen 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 Webanwendungen sind JSF bietet ein erweiterbares UI-Komponenten Model

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.

Komponentenentwicklung Realisierung komplexer Komponenten Was sind komplexe Komponenten? Grafische Editoren (Modellierung von Petri-Netze, Prozessen, Diagrammen, Mind Maps, …) Interaktive Charts, Diagramme oder Geoinformationen (Transportlogistik, Reporting, Monitoring, …) Dem Datenmodel angepasste Visualisierungskomponenten (Gantt Chart, Graphen, Kalender, Timelines, Menüs…)

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

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 Erweiterter Funktionalität durch JavaScript Interaktion durch AJAX

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

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

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

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: Serverbasierte 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

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 Service 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 Frameworks für die Realisierung von komplexen Enterprise Anwendungen Erweiterte Kommunikationsmöglichkeiten mit LiveCycleDS, BlazeDS, GraniteDS, …

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

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, …

Rich Internet Applications Adobe Flex Produkte Flex SDK 3 Command-line Compiler & Debugger MXML and ActionScript 3.0 Flex Framework and Class Library Visual Layout Flex Builder 3 Code Hinting Debugging Skinning and Styling Flex Builder 3 (ab 220$, Eclipse Plugin) Eine Eclipse basierende Entwicklungsumgebung mit Code Editor, Visuellen Layout und Projekt Management Werkzeugen und ein integrierten Debugger LiveCycle Data Services (lizenzpflichtig) alternativ BlazeDS (Open Source) Ein JEE basierendes Framework welches die Entwicklungen von hoch performanten, vielschichtigen, synchronisierten Anwendungen mit Konfliktmanagement und Echtzeit-Messaging ermöglicht (und vieles mehr…) Flex Charting 3 Erweiterbare Charting Komponenten Flex Software Development Kit (Open Source) Die Hauptkomponente mit Programmiersprachen, Komponentenbibliotheken und Compiler für Flex Anwendungen Flex LiveCycle Data Services Message Service Data Management Service RPC Services Flex Charting (lizenzpflichtig) Bibliothek mit erweiterbaren Charting Komponenten die eine schnelle Realisierung von Daten-visualisierenden Anwendungen ermöglicht.

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

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 Flex in JSF mit Exadel Fiji integrieren (oder „zu Fuß”) JSF Controller xxx JSF Seiten <f:jsp> <….> </…> </f:jsp> class XXX { public void abc(); public void xyz(); } Backing Beans <xml> <abc>function </abc> </xml> Data Bindings und Data Controls Präsentationsschicht mit Java Server Faces Wie kommuniziert eine Flex Komponente oder Anwendung mit der Business Logik ? JSP HTML Business Logik Web Services EJB Session Beans Java Beans

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

Flex RIA Kommunikation mit JEE Kommunikation ohne Data Services

Flex RIA Kommunikation mit JEE Kommunikation mit LiveCycleDS oder BlazeDS

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

Rich Internet Applications Nachteile von RIAs mit Adobe Flex 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

Rich Internet Applications Vorteile von RIAs mit Adobe Flex 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

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, bietet jedoch den größten Umfang an Werkzeugen und Frameworks an (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)

RIA mit JEE und Flex Zusammenfassung RIAs mit Adobe Flex sind voll in eine Service-orientierte Architektur integrierbar (Web Service Komponente und vollem 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…

Interaktive Webanwendungen Fragen? Anlaufstellen im Internet Apache Trinidad: http://myfaces.apache.org/trinidad/index.html Flash JSF Integration: http://www.exadel.com/web/portal/fiji Cairngorm: http://opensource.adobe.com/wiki/display/cairngorm/Cairngorm Adobe Flex SDK: http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK Flex Documentation: http://livedocs.adobe.com/flex/3/html/help.html LiveCycleDS: http://www.adobe.com/products/livecycle/dataservices/ BlazeDS: http://opensource.adobe.com/wiki/display/blazeds/BlazeDS