Desktop Feeling auch im Web - Forms Modernisierung mit Adobe Flex

Robert Szilinski, esentri consulting GmbH

2

Agenda

•  Vorstellung esentri

•  Forms Modernisierung (vs. Migration)

•  Das Frontend als entscheidender Faktor?

•  Rich Internet Applications – ein Überblick

•  Architektur und Funktionsweise Adobe Flex

•  Live Demo Flex Komponenten

•  Forms2Flex Strategien

•  Fazit & Empfehlungen für die Praxis

3

esentri = easy entry

Strategieberatung Projektmanagement Technologie

Finalist 2010

•  IT-Business-Alignment •  Geschäftsprozessoptimierung •  Enterprise 2.0

•  GPM zertifizierte Berater •  Agile IT-Projekte •  Social Project Management

•  IT-Consulting •  SOA •  Web Solutions

Legende

4

Technologiepartner Oracle

5

Schwerpunkte Oracle Technologiepartnerschaft

•  Webanwendungen –  Oracle Application Express

–  Oracle Application Development Framework (ADF)

–  Oracle WebCenter und Enterprise 2.0

–  Java Enterprise Edition (JEE)

•  SOA –  Geschäftsprozessoptimierung

–  Aufbau und Planung Service-orientierter Architekturen

–  Mitglied in der Partner Solution Community SOA

6

Weitere technische Schwerpunkte esentri

•  Rich Internet Applications –  Adobe Flex

•  Rapid Application Development –  Spring Roo

–  Grails

•  Open Source Frameworks & Software –  Spring

–  Web- und Application Server (Jetty, Tomcat, Glassfish, JBoss)

–  Open Source Sponsorship

•  Optimierung Softwareentwicklungsprozesse

•  Schulungen & Workshops

7

Forms Modernisierung

8

Verbreitete Ausgangssituation (vereinfacht)

Web Forms Applikation

PL/SQL Logik & Views Oracle Database

Forms Client

Forms mit z.T. stateful PL/SQL, physischen DB-Connections und pessimistischem Locking

9

Häufige Ziele einer Modernisierung

•  Bestehende Forms Masken in neuer Technologie

•  Schrittweise weg von alten Technologien

•  Geschäftslogik beibehalten

•  Neue Anforderungen umsetzen

•  Gute Usability

•  Webfähigkeit

•  Unterstützung mobiler Endgeräte

•  Zukunftsfähigkeit / Investitionssicherheit

à kritisches Hinterfragen bisher gelebter Prozesse und

Architekturen?

10

Frontend

Zielbild – moderne GUI mit Middlewareansatz

(Web) Client

JEE Middleware

Web Forms Applikation

Connection Manager

SOA

Web

Ser

vice

s

PL/SQL Logik & Views Oracle Database

Adobe Flex

Business Logic

O-R Mapper

Eclipse RCP

JSF/ADF

Forms Client

Legende

11

Forms != Webanwendungen

Quelle: pixelio.de, Ernst Rose

12

Die Qual der Wahl bei der Technologieauswahl

Welche Technologie ist die richtige für die Forms Modernisierung?

13

Beobachtung: Diskussion vor allem Frontend-getrieben

14

Frontend

Forms Frontend Alternativen mit Java Backend

JEE Middleware

Rich Internet Applications (Adobe Flex, Silverlight,

JavaFX)

Business Logic

Fat Client (Eclipse RCP, .NET, Java Webstart)

Web Frameworks (JSF/ADF Faces,

GWT, ZK, ...)

15

Was sind Rich Internet Applications?

Das Beste aus beiden Welten!

16

Vergleich der RIA-Technologien: JavaFX

17

Vergleich der RIA-Technologien: Microsoft Silverlight

18

Vergleich der RIA-Technologien: Adobe Flex

19

HTML 5 = RIA?

20

Frontend

Forms Frontend Alternativen mit Java Backend

JEE Middleware

Rich Internet Applications ADOBE FLEX

Business Logic

Web Frameworks (JSF/ADF Faces,

GWT, ZK, ...)

Fat Client (Eclipse RCP, .NET, Java Webstart)

21

Beispiel das jeder kennt: Oracle Support

22

Vor- und Nachteile der Technologien

Vergleich Adobe Flex mit Web Frameworks

RIA mit ADOBE FLEX JSF 2.0

Web Frameworks

ADF Faces 11g

+ Echtes Desktop Feeling (Drag & Drop, ...) + Keine große Umstellung für Benutzer + Hoher Bedienkomfort (F-Tasten Nutzung...) + Browserunabhängigkeit, Debugging + Möglichkeit von Echtzeit-Kommunikation + Integration von Chat, Screensharing + Offline Funktionalität z.B. für Außendienst + Sehr gute Anbindung an Java Middleware - Browser-Plugin notwendig - Abhängigkeit von Adobe, kleine Community - Keine Portlet Integration (JEE Standard) - anspruchsvolle Technologie, z.T. sehr aufwendig - Komplexität durch „Low Level“ Development

+ Entwicklung komplett im JEE Standard + Perfekt für beliebige Endgeräte/Frontends + Große weltweite Community + Open Source Lösungen möglich + Portlet Integration im JEE Standard + ADF Hervorragende SOA-Integration + ADF Strategisches Produkt im Oracle-Stack + ADF Hohe Entwicklungsgeschwindigkeit

- Hoher Aufwand bei speziellen Anforderungen - Viele Open Source Frameworks zur Auswahl - z.T. fehlender Komfort verglichen mit Forms - größere Umstellung der Endbenutzer - viele Experten notwendig (CSS, HTML, JSF,...)

23

Frontend Technologien im Vergleich

Entwicklungsgeschwindkeit

Komplexität Flexibilität

gering

hoch

schnell langsam

gering

hoch

JSF 2.0

Adobe Flex

ADF Faces

Apex

24

Some Facts you should know about Adobe Flex

•  Adobe Flash Player ist weltweit auf über 98% aller Rechner installiert

•  Flex SDK ist Open Source, Flex ist kostenlos

•  Vielfältiges Angebot von Open-Source Komponenten

•  Einfach zu erlernen und ähnlich zur Java Programmiersprache

•  Open-Source MVC Framework für die Realisierung von komplexen Business Anwendungen...

...oder einfachen Webanwendungen

25

Adobe Flex Produkte

Visual Layout

Flash Builder 4

Code Hinting

Debugging

Skinning and Styling

LiveCycle Data Services (LCDS)

Message Service

Data Management Service

RPC Services

Flex SDK

Command-line Compiler & Debugger

MXML and ActionScript 3.0

Flex Framework and Class Library

Flex Charting Erweiterbare Charting Komponenten

Flex Software Development Kit (SDK) - Die Hauptkomponente mit Programmier-sprachen, Komponentenbibliotheken und Compiler für Flex Anwendungen. Flex Charting - Bibliothek mit erweiterbaren Charting Komponenten die eine schnelle Realisierung von Daten-Visualisierenden Anwendungen ermöglicht. LiveCycle Data Services - Ein JEE basierendes Framework welches die Entwicklungen von hoch performanten, vielschichtigen, synchronisierten Anwen-dungen mit Konfliktmanagement und Echtzeit-Messaging ermöglicht.

Flash Builder 4 - Eine Eclipse basierende Entwicklungsumgebung mit Code Editor, Visuellen Layout und Projekt Management Werkzeugen und ein integrierten Debugger.

26

Live Demo Adobe Flex Komponenten

27

Adobe Flex - Ablauf Entwicklung Flex Applikation (ohne JEE)

1. RIA Anwendung mit Eclipse designen

Benutzer Passwort

Anmelden Durch Klicken wird eine swf. Datei

erzeugt.

Erzeugte Datei kann im Browser geöffnet

werden.

2. Flex Anwendung kompilieren und .swf Datei erzeugen 3. Die neu erzeugte Datei im Browser öffnen

28

Adobe Flex - Entwicklungsablauf Abstrakt (ohne JEE)

Flex Builder IDE

Flex SDK

MXML Action-Script 3

Flex Klassenbibliotheken

Flex Anwendung wird kompiliert & dann auf

einen Web Server deployt

Web Server

--+ context-root +-- WEB-INF +-- flex +-+ classes | +-- com.esentri.bl | +-- com.esentri.view +-- lib

Client ruft URL auf und empfängt die Flex Anwendung

(HTTP://host:port/context-root/helloWorld.html)

Flex Anwendung wird mit Flash Player gestartet...

29

Adobe Flex und JEE – Kommunikation mit Flex Data Services

Flash Player

Flex UI Komponenten und clientseitige Logik Framework Anwendung und Service Locator

Application Server

SOA

Flex Data Daten Management und offene Services Adapterschnittstellen zur Kommunikation

Business- EJB, POJO, Schicht Webservices, ...

Integrations- Konnektoren, Toplink, schicht Hibernate, ...

DMS File Server LDAP Webservice

HTTP/S AMF ATMP/S

30

Forms2Flex Strategien

31

Forms2Flex mit der Developer Suite

frmf2xml Flex MXML

XML Transformation

32

Halbautomatische Erstellung von Flex Anwendungen

•  Forms Maskendefinitionen (fmbs, mmbs, ...) können mit XML-Technologien transformiert werden

•  Möglichkeit der Übernahme von Logik

•  Manuelle Nacharbeiten notwendig

•  Nur für einfache Masken geeignet

àelegante Möglichkeit auch umfangreiche Anwendung zu migrieren ohne den kompletten Code neu schreiben zu müssen

33

Fazit & Empfehlungen für die Praxis

•  Flex ist je nach Komplexität der Anwendung eine Alternative Forms zu modernisieren

•  Offline-Mode und Echtzeit-Features

•  Entwicklung von Flex ist z.T. technologisch nicht trivial

•  Flex ist für spezielle Use-Cases hervorragend geeignet

•  Technologische Neuausrichtung im Rahmen der Modernisierung bedenken – nicht nur Frontend!

•  Flex ist „sexy“ und kommt gut an!

34

Fazit: Rich Internet Applications

RIAs mit Adobe Flex, JEE und Oracle sind eine echte Alternative für die Forms Modernisierung...und machen Entwicklern und Endanwendern Spaß!

35

esentri consulting GmbH Pforzheimer Straße 132 Tel +49 (0) 7243 / 354 90 0 info@esentri.com

76275 Ettlingen Fax +49 (0) 7243 / 354 90 99 www.esentri.com

Robert Szilinski

Geschäftsführer der esentri consulting GmbH

robert.szilinski@esentri.com

Vielen Dank für Ihre Aufmerksamkeit!

Desktop Feeling auch im Web - Forms Modernisierung mit Adobe Flex