Rich Internet Applications mit Adobe Flex 3

Transkript

1 Simon Widjaja Rich Internet Applications mit Adobe Flex 3 ISBN-10: ISBN-13: Vorwort Weitere Informationen oder Bestellungen unter sowie im Buchhandel.

2 Vorwort Flex 3 ist ein Framework zur Erstellung von innovativen Webanwendungen, die durch den Flash Player auf allen gängigen Browserplattformen und als Desktopanwendung auf den wichtigsten Betriebssystem laufen. Flex 3 ist nicht nur produktivitätssteigernd, sondern auch kostenlos und open-source (lediglich der optionale Flex Builder ist kostenpflichtig). Das war jedoch nicht immer so. Als Flex 1.0 im März 2004 als reiner Präsentationsserver auf den Markt geworfen wurde, konnte das Interesse der breiten Masse an Webentwicklern nicht wirklich geweckt werden. Dies lag zum einen daran, dass der Flash Player zu dem Zeitpunkt noch nicht die heutige hohe Akzeptanz und Verbreitung aufwies, und hing zum anderen damit zusammen, dass die erste Generation von Flex mit hohen Investitionen verbunden war. Mit Flex 2.0 und der Übernahme von Macromedia durch Adobe wurde ein neuer Kurs eingeschlagen: Das Flex-SDK zur Erstellung von Flex-basierten Client-Anwendungen wurde kostenlos bereitgestellt, eine kostenpflichtige Serverkomponente war nicht länger notwendig. Es war also erstmals möglich, ohne jegliche Investition die vielseitigen Vorteile von Flex nutzen zu können. Das Problem war jedoch, dass kaum ein Webentwickler diese Veränderung wahrgenommen hat. So wurde die Flash-Technologie samt Entwicklungsumgebung nach wie vor von vielen Entwicklern als zu grafikorientiert und für ernstzunehmende Anwendungen ungeeignet verspottet, und die Flex-Technologie wurde nicht selten als unbezahlbar und für kleine und mittelgroße Projekte uninteressant beschrieben und ignoriert. Als leidenschaftlicher Flasher und PHP-Entwickler habe ich die Diskussionen aufmerksam verfolgt und auch selbst eine größer werdende Skepsis entwickelt. Als jedoch Flex 2.0 gerade erschienen war und ich aufgrund eines Projektpitches einen Blick darauf werfen musste, hat es mich in kürzester Zeit überzeugt. Die Begeisterung war so groß, dass ich die folgende Nacht gänzlich auf Schlaf verzichtet habe, um die Vielseitigkeit und Vorteile von MXML, ActionScript 3.0 und den Flex-Komponenten zu erforschen. Obwohl die deklarative MXML-Sprache völlig neu für mich war, ist es mir in den wenigen Stunden gelungen, eine erste kleine Anwendung zu schreiben, die nahtlos via AMFPHP an mein eigenes PHP-Framework angebunden werden konnte. XIII

3 Vorwort Nach dieser Erfahrung und der erfolgreichen Umsetzung des besagten Projekts war mir schnell klar, dass die Flex-Technologie längst nicht mehr das ist, was in den Köpfen vieler Webentwickler herumspukt. Nachdem ich nach wie vor über Blog- und Forenbeiträge gestolpert bin, die weiterhin die Flex-Technologie in völlig falschem Licht erscheinen liessen, war es letztlich ein Gespräch mit dem Chefentwickler einer Internetagentur, das mich darin bestärkt hat, ein wenig Aufklärungsarbeit leisten zu wollen. Auch in diesem Gespräch musste ich feststellen, dass die Flex-Technologie keineswegs in Betracht gezogen wurde und stattdessen auf herkömmlicher Flash-Basis entwickelt werden sollte obwohl genau sie die Entwickler bei den anstehenden Aufgaben vor einige Probleme gestellt hätte: Neben einem komplexen Fenstersystem sollten datenlastige DataGrids eingesetzt werden, und die entstehende Anwendung sollte sich in Höhe und Breite stets dem Player-Fenster anpassen. Zudem sollten zahlreiche Module entwickelt werden, die von verschiedenen Teams umgesetzt werden sollten. Nach meinen bisherigen Erfahrungen mit Flash und Flex war mir schnell klar, dass Flex in diesem Fall genau die richtige Wahl wäre. Doch auch hier war das Argument, dass Flex ja eine Servertechnologie und eben viel zu teuer sei. In einem ca. sechsstündigen Workshop konnte ich jedoch alle beteiligten Entwickler davon überzeugen, dass Flex heiß ist und genau das richtige Werkzeug für die anstehenden Aufgaben darstellt. Die beteiligten Entwickler berichteten mir später, dass auch Sie die Erfahrung gemacht haben, dass der Einstieg viel einfacher und schneller war als erwartet: Der Flex Builder basiert auf Eclipse, das viele bereits aus Java oder PHP kennen, und MXML ist für jeden HTML-Programmierer relativ schnell nachvollziehbar. Während dieser Diskussionen und dem daraus resultierenden kleinen Einsteiger-Workshop entstand die Idee, diese Art der Aufklärungsarbeit im größeren Stile zu betreiben. Aus diesem Gedanken entwickelte sich schließlich die Idee, gemeinsam mit dem ebenfalls engagierten Flexer Johannes Boyne eine erste deutsche Flex User Group ( zu gründen, um unsere Erfahrungen rund um Flex mit anderen zu teilen, und eben auch die Idee zu diesem Buch. Sie werden in diesem Buch sicherlich nicht alles finden, was Adobe Flex 3 zu bieten hat. Aber Sie erhalten mit diesem Buch einen optimalen Einstieg in die relevanten Themen, die Sie benötigen, um mit Flex ebenfalls durchstarten zu können. Themenspektrum Wie Sie bereits dem Buchtitel entnehmen, führt Sie dieses Buch schrittweise an die Entwicklung komplexer Rich Internet Applications (RIA) mit Flex 3 heran. Dabei werden die wichtigsten Aspekte wie folgt behandelt: In den ersten vier Kapiteln erhalten Sie eine kurze Einführung in die Flex-Technologie, der Entwicklungsumgebung sowie der Bestandteile von Flex 3 (MXML, ActionScript etc.). Das fünfte Kapitel ist ein kleiner Praxis-Workshop, der im Rahmen der ersten Meetings der Flex User Group entstanden ist, um besonders Ein- bzw. Umsteigern den Umgang mit Flex anhand einer kleinen Beispielanwendung näherzubringen. XIV

4 Vorwort Kapitel 6 ist dem Event-Modell von Flex gewidmet. Dieses Thema wird recht ausführlich behandelt, da es bei der Entwicklung von RIA eine sehr zentrale Rolle spielt und für das tiefere Verständnis von Flex notwendig ist. Das siebte Kapitel gibt Ihnen eine Übersicht über die enthaltenen Flex-Komponenten und zeigt Ihnen, wie Sie die verschiedenen Komponentenarten für die Erstellung einer Benutzeroberfläche nutzen können. Kapitel 8-11 vertieft die Thematik der Erstellung von Benutzeroberflächen. Hier erfahren Sie, wie Medien (Bilder, Videos und Sounds) verwendet und eingebettet und wie das Look & Feel der Anwendung mit Hilfe von CSS, Skins, States, Effects und Transitions anpassen werden können. Dabei wird konkret gezeigt, wie Adobe Photoshop und Adobe Flash eingesetzt werden kann, um bestehenden Flex-Komponenten ein anderes visuelles Erscheinungsbild zu verleihen. Kapitel 12 bringt Ihnen den Umgang mit lokalen Daten näher (Datenmodellierung, Datenbindungen, Formatieren und Validieren von Daten, LocalConnection und Shared Object). Kapitel 13 befasst sich mit dem Einbinden externer Datenquellen. Hier werden Sie neben dem HTTPService, WebService und dem RemoteObject noch zwei serverseitige Werkzeuge kennenlernen, die als Backend für Ihre Flex-Anwendungen dienen können: AMFPHP für PHP und BlazeDS für Java. In Kapitel 14 erfahren Sie, wie Sie eigene Komponenten und Module erstellen. Dabei lernen Sie, bestehende Komponenten zu erweitern und eigene von Grund auf selbst zu entwickeln. Zusätzlich wird in diesem Kapitel der Ansatz der Runtime Shared Library vorgestellt, mit dem Sie die Datengröße der entstehenden SWF-Dateien optimieren können. Nachdem Sie die verschiedenen Bestandteile von Flex kennengelernt haben und so über die nötigen Grundlagen verfügen, zeigt Kapitel 15 auf, wie Sie modulare und skalierbare Anwendungen entwickeln und welche Ansätze der Architektur hilfreich sind. In diesem Kapitel wird außerdem das Microarchitecture-Framework Cairngorm anhand eines kleinen Beispiels vorgestellt. Das letzte Kapitel 16 ist der neuesten Technologie im Flex Umfeld gewidmet: Adobe AIR. Hier erfahren Sie, wie Sie mit Hilfe von Flex ausführbare Desktopanwendungen entwickeln können. Die Website zum Buch In Zeiten von Internet, Web und DSL erschien dem Verlag und mir eine CD-ROM zum Buch, die die Beispiele und anderes Begleitmaterial enthält, allein schon deswegen unzeitgemäß, weil sie recht schnell veraltet. Daher haben wir uns dafür entschieden, Ihnen dieses Material auf einer Website bereitzustellen. Die URL der Website lautet XV

5 Vorwort Dort finden Sie neben den Quelltexten dieses Buches noch weitere Informationen über Flex sowie einen Blog rund um die Flex-Technologie. Danksagung Bei allen Personen, die zum Entstehen des vorliegenden Buches beigetragen haben, möchte ich mich an dieser Stelle bedanken, insbesondere bei Karsten Junghanns, der mir den Weg zum Hanser Verlag geebnet und mir stets den Rücken frei gehalten hat. Ein ganz besonderer Dank gilt meiner Freundin Jennifer Görn, die mich in schlechten Zeiten immer wieder motiviert hat und stets verständnisvoll hinter mir stand ;-). Desweiteren möchte ich Johannes Boyne und Amir Rocker danken, die mich mit Rat und Tat unterstützt und einige kleinere Passagen beigesteuert haben. Last but not least möchte ich mich noch bei Fernando Schneider für die professionelle und inspirierenden Zusammenarbeit, sowie Sandra Gottmann und Steffen Jörg vom Hanser Verlag bedanken, ohne die Sie dieses Buch nicht in den Händen halten würden. Feedback Wenn Sie Vorschläge oder Fragen zum Buch haben, können Sie mich selbstverständlich direkt kontaktieren: Bleibt mir zu guter Letzt nur noch, Ihnen viel Spaß und Erfolg bei Ihrer Reise durch die spannende Welt von Adobe Flex zu wünschen! Köln, im Mai 2008 Simon Widjaja XVI

6 Simon Widjaja Rich Internet Applications mit Adobe Flex 3 ISBN-10: ISBN-13: Leseprobe Weitere Informationen oder Bestellungen unter sowie im Buchhandel.

7 12 12 Umgang mit lokalen Daten 12.1 Einführung Das Flex-Framework stellt Ihnen verschiedene Werkzeuge zur Verfügung, mit denen Benutzereingaben überprüft, die Ausgabe formatiert und Daten strukturiert und typsicher gehalten sowie zwischen verschiedenen Objekten bzw. Schichten ausgetauscht werden können. Dieses Kapitel widmet sich ausschließlich der Haltung, Darstellung und Verarbeitung lokaler Daten innerhalb der Anwendung. Wie Sie externe Daten (z.b. WebServices oder RemoteObjects) in die lokale Anwendung einbeziehen, erfahren Sie in Kapitel 13: Externe Datenquellen. Zunächst möchte ich Ihnen erst einmal ein Grundverständnis für den Datenfluss einer typischen Flex-Anwendung vermitteln. Bevor wir uns den einzelnen Themenblöcken im Detail zuwenden, folgen eine grobe Übersicht der einzelnen Vorgänge sowie ein Datenflussdiagramm Daten aktuell halten: Datenbindung (Data Binding) Das sogenannte Data Binding ist ein sehr zentraler Bestandteil im Umgang mit Daten innerhalb der Flex-Anwendung. Kurz gesagt, beschreibt Data Binding die Möglichkeit, auf einfache Weise Daten in Form von Objekteigenschaften auf ein anderes Objekt zu übertragen. Verändert sich also die Eigenschaft des einen Objekts, so wird die des zweiten Objekts informiert und dementsprechend angepasst. Da so eine Bindung zwischen den beiden Eigenschaften entsteht, spricht man hier von der Datenbindung (Data Binding). Diese Bindungen werden während der Entwicklung festgelegt, sodass sie zur Laufzeit automatisch angewandt werden können. 263

8 12 Umgang mit lokalen Daten Abbildung 12.1 Beispiele für den Einsatz von Data Binding Folgende konkrete Anwendungsbeispiele sind denkbar: Die Eigenschaft value eines HSliders soll automatisch den Wert der Eigenschaft playheadtime eines Video-Displays (Position des Abspielkopfes) übernehmen. Mehrere Eigenschaften sollen automatisch an ein und dieselbe Eigenschaft gebunden werden. Die Felder eines Formulars sollen automatisch die Werte eines Data Models übernehmen und somit vorausgefüllt werden. Benutzereingaben sollen automatisch an ein Data Model übergeben werden, um so an einen Webservice gesendet werden zu können. Das nachstehende Beispiel zeigt eine der möglichen Arten, ein solches Data Binding zu realisieren. Das Label übernimmt automatisch die text-eigenschaft des Eingabefeldes, und zwar immer dann, wenn sich diese verändert. Hierbei kommen die geschweiften Klammern ({}) zum Einsatz, welche die Inline-Schreibweise für Data Binding darstellen. Listing 12.1 Ein einfaches Data Binding <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx=" layout="vertical"> <!-- Eingabe --> <mx:textinput id="myname" /> <!-- Gebundene Ausgabe --> <mx:label text="{myname.text}" /> </mx:application> Abbildung 12.2 Data Binding: ohne und mit Eingabe 264

9 12.1 Einführung Was beim Data Binding genau hinter den Kulissen passiert und welche Möglichkeiten Ihnen zur Verfügung stehen, ein Data Binding zu realisieren, erfahren Sie in Abschnitt 12.2.: Data Binding Daten richtig strukturieren und bereitstellen: Data Model Da Flex-Anwendungen nicht selten sehr datenlastig sind und die Komplexität der Daten schon den einen oder anderen Webentwickler an die Grenzen seines Können gebracht hat, spielen die Strukturierung und Modellierung von Daten eine sehr wichtige Rolle und sollten von Anfang an die notwendige Aufmerksamkeit erhalten. Werden bereits hier grundlegende Fehler begangen, hat dies meist mit fortschreitendem Entwicklungsstand fatale Folgen. Das Flex-Framework bietet generell verschiedene Möglichkeiten, Daten strukturiert zu verwalten. Für Fortgeschrittene bzw. bei komplexen Aufgabenstellungen möchte ich bereits an dieser Stelle das Flex-Framework Cairngorm erwähnen. Dieses Framework für Mikroarchitektur ist eine Sammlung verschiedener, etablierter Design-Pattern, die u.a. sehr sinnvolle Mechanismen und Klassen bereitstellen, um eine gute Datenhaltung selbst bei umfangreichen und/oder modularen Projekten zu ermöglichen. Mehr zum Cairngorm Framework erfahren Sie in Kapitel 15.3: Cairngorm.. Das Data Model in Flex versetzt Sie in die Lage, Daten verschiedenster Art und Herkunft in Form von clientseitigen Objekten zwischenzuspeichern. Hierzu existieren mehrere ActionScript-Klassen, die jedoch nicht nur in ActionScript, sondern auch in MXML definiert werden können. Eine MXML-Variante ist <mx:model/>. So stellt folgender Tag ein beispielhaftes Data Model für ein Benutzerkonto dar: <mx:model id="mybenutzerkonto"> <benutzerkonto> <name/> <benutzername/> < /> </benutzerkonto> </mx:model> Dieses Model kann also die zentrale Datenhaltung für Ihre Anwendung bilden. Abbildung 12.3 Beispiele für den Einsatz eines Datenmodells 265

10 12 Umgang mit lokalen Daten In Kombination mit dem zuvor kennengelernten Data Binding können Sie nun bereits ein Formular und das dazugehörige Data Model erstellen und diese miteinander verknüpfen: Listing 12.2 Data Model mit Data Binding <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx=" layout="vertical"> <!-- Data Model --> <mx:model id="mybenutzerkonto"> <benutzerkonto> <name>simon Widjaja</name> <benutzername>simonwidjaja</benutzername> </benutzerkonto> </mx:model> <!-- Formular --> <mx:form> <mx:formitem label="name"> <mx:textinput text="{mybenutzerkonto.name}"/> </mx:formitem> <mx:formitem label="benutzername"> <mx:textinput text="{mybenutzerkonto.benutzername}"/> </mx:formitem> <mx:formitem label=" "> <mx:textinput text="{mybenutzerkonto. }"/> </mx:formitem> </mx:form> </mx:application> Abbildung 12.4 Einfaches Formular mit Data Model und Data Binding Neben dem <mx:model/>-tag gibt es noch weitere Möglichkeiten, um ein Data Model abzubilden. Welche dies sind und welche Vor- und Nachteile die jeweiligen Varianten haben, erfahren Sie in Abschnitt 12.3: Data Model Daten aufbereiten und formatieren: Data Formatter Für die Formatierung von Daten stellt Flex die Data Formatter Components bereit. Mit diesen können Sie Daten aufbereiten, bevor sie im User-Interface dargestellt werden. Häufige Anwendungsbeispiele sind: Darstellung eines Datums oder Timestamps Ausgabe einer Telefonnummer 266

11 12.1 Einführung Darstellung von Dezimalzahlen mit Tausender-Separator (Punkt oder Komma) Anzeigen länderspezifischer Angaben (Währungen etc.) Eine Data Formatter Component ist letztlich ein Objekt, das einen Wert im Rohzustand übergeben bekommt und einen formatierten Wert zurückgibt. Flex bietet neben den mitgelieferten Formatter-Komponenten, wie z.b. NumberFormatter, DateFormatter oder Phone- Formatter, auch die Möglichkeit, eigene Formatter-Klassen zu implementieren. Häufig kommen Formatter im Zusammenspiel mit dem zuvor vorgestellten Data Model und Data Binding zum Einsatz. Auf diese Weise können Werte in ihrem Rohzustand im Data Model abgelegt und dennoch sinnvoll visualisiert werden. Abbildung 12.5 Beispiel für den Einsatz eines Data Formatters Das folgende Beispiel zeigt, wie Sie ein formatiertes Datum in einem Label ausgeben: <!-- Formatierung --> <mx:dateformatter id="mydateformatter" formatstring="dd.mm.yyyy"/> <!-- Ausgabe des formatierten Datums --> <mx:label text="{mydateformatter.format( new Date() )}"/> Dieses Beispiel gibt statt des unformatierten Fri Nov 30 02:23:29 GMT die Zeichenkette aus. Welche Formatter Flex genau bereitstellt und wie Sie Ihre eigene Formatter-Klasse schreiben, erfahren Sie in Abschnitt 12.4: Data Formatting Daten auf Gültigkeit überprüfen: Data Validation Im Umgang mit Daten muss fast immer sichergestellt sein, dass einzelne Werte gewissen Vorgaben bzw. Regeln entsprechen. Besonders bei Benutzereingaben ist dies eigentlich stets notwendig. Natürlich kann die Prüfung der eingegebenen Daten auch ausschließlich serverseitig stattfinden. In den meisten Fällen ist es jedoch sinnvoll, die Eingaben direkt auf der Clientseite zu überprüfen. Dies schmälert zum einen den entstehenden Traffic und reduziert die Serverlast, und zum anderen kann der Benutzer auf diese Weise unmittelbar über seine fehlerhaften Eingaben informiert werden. 267

12 12 Umgang mit lokalen Daten Abbildung 12.6 Beispiel für den Einsatz eines Data Validators Typische Fälle, bei denen eine Validierung der Daten notwendig ist: -Adressen Datumsangaben (z.b. Geburtsdatum) Alter (z.b. nur gültige Werte von 18 99) Telefonnummern Postleitzahlen Adressen samt Hausnummern Kreditkartennummern Für solche Standardfälle gibt es im Flex-Framework fertige Klassen, die leicht einzusetzen sind. Eine sehr flexible Lösung stellt der RegExpValidator dar, mit dem selbst definierte reguläre Ausdrücke zur Validierung verwendet werden können. Das nachstehende Beispiel zeigt ein Data Model, eine Eingabemöglichkeit für eine sowie die dazugehörige Validierung. Listing 12.3 Beispiel einer Data Validator-Klasse <?xml version="1.0" encoding="utf-8"?> <mx:application xmlns:mx=" layout="vertical"> <!-- Data Model --> <mx:model id="mymodel"> <root> < >{myinput.text}</ > </root> </mx:model> <!-- Validierung --> <mx: validator source="{mymodel}" property=" " listener="{myinput}" trigger="{myinput}"/> <!-- Ausgabe --> <mx:label text="ihre "/> <mx:textinput id="myinput"/> <mx:button label="prüfen!"/> </mx:application> 268

13 12.1 Einführung Und so sieht das Ergebnis der Prüfung bei Nichterfüllen aus: Abbildung 12.7 Data Validator in Aktion Eine Übersicht über die bereitgestellten Validator-Klassen sowie eine Anleitung zum Schreiben eigener Validator-Klassen finden Sie in Abschnitt 12.5: Data Validation Datenfluss Nachdem Sie nun ein Grundverständnis für die Datenhaltung und -manipulation in Flex haben, soll das folgende Diagramm anhand eines kleinen Beispielszenarios das Zusammenspiel der einzelnen Phasen und somit den gesamten Datenfluss veranschaulichen. Nehmen wir einmal an, es soll eine kleine Anwendung erstellt werden, die zwei Zustände hat: Im ersten Zustand soll der Benutzer über ein Texteingabefeld seine eingeben. Im zweiten Zustand soll das Datum ausgegeben werden, an dem der jeweilige Benutzer sich das letzte Mal eingeloggt hat. Die Ausgabe kann beispielsweise in einem einfachen Label stattfinden. Die Auswertung, also das Auslesen des Datums zur jeweiligen - Adresse, soll über einen Serveraufruf realisiert werden. Der Datenfluss könnte wie folgt aussehen: Die Benutzereingabe wird via Datenbindung an ein Datenmodell gebunden. Anschließend wird die Eingabe über einen Validator geprüft. In diesem Fall würde der -Validator zum Einsatz kommen, um sicherzustellen, dass es sich bei der Eingabe um eine gültige -Adresse handelt. Sofern der Validator grünes Licht gibt, werden die Daten wieder per Datenbindung beispielsweise in ein RemoteObject geschrieben, das schließlich als Request zum Server gesendet wird. Dies kann als HTTP-, SOAP- oder AMF-Request geschehen. Der Server startet seine Abfrageroutine und sendet die Antwort (Response) im selben Format zurück. Über einen Event-Handler des RemoteObjects wird die Antwort entgegengenommen, von wo aus sie über eine Datenbindung an das Datenmodell übergeben wird, um dort zwischengespeichert zu werden. Über eine erneute Datenbindung werden die Antwortdaten mithilfe eines Formatters aufbereitet (in unserem Fall kommt ein DateFormatter zum Einsatz), um letztendlich dem Benutzer präsentiert zu werden. 269

14 12 Umgang mit lokalen Daten Abbildung 12.8 Typischer Datenfluss in einer Flex-Anwendung (Client/Server) 12.2 Data Binding Mit Data Binding können Sie Objekteigenschaften verschiedener Objekte aneinander binden. Auf diese Weise kann der Datenfluss innerhalb der Anwendung stark vereinfacht werden, da Sie bei einer Änderung nicht selbst jedes Mal alle weiteren, von diesen Änderungen betroffenen Objekte informieren und diese ggf. aktualisieren müssen. Für eine solche Datenbindung wird stets neben einer Ausgangseigenschaft und einer Zieleigenschaft zusätzlich noch ein auslösendes Event (Trigger) benötigt. Der Trigger beinhaltet die Information, zu welchem Zeitpunkt der Datenabgleich zwischen Ausgangseigenschaft und Zieleigenschaft stattfinden soll. Im Normalfall ist ein Trigger bereits implementiert und so eingestellt, dass dieser Datenabgleich sofort ausgeführt wird, sobald sich die Ausgangseigenschaft verändert. Selbstverständlich können Sie auch eigene Trigger definieren. Doch dazu später mehr. 270