ADOBE FLEX MXML, ACTIONSCRIPT, CSS // KOMPONENTEN UND MODULE // DATA CENTRIC DEVELOPMENT MIT PHP UND JAVA // ADOBE AIR

Transkript

1 simon WIDJAJA ADOBE FLEX 4 MXML, ACTIONSCRIPT, CSS // KOMPONENTEN UND MODULE // DATA CENTRIC DEVELOPMENT MIT PHP UND JAVA // ADOBE AIR

2 Simon Widjaja Adobe Flex 4 vbleiben Sie einfach auf dem Laufenden: Sofort anmelden und Monat für Monat die neuesten Infos und Updates erhalten.

3

4 Simon Widjaja Adobe Flex 4

5 Der Autor: Simon Widjaja, trendspurt GmbH, Köln Alle in diesem Buch enthaltenen Informationen, Verfahren und Darstellungen wurden nach bestem Wissen zusammengestellt und mit Sorgfalt getestet. Dennoch sind Fehler nicht ganz auszuschließen. Aus diesem Grund sind die im vorliegenden Buch enthaltenen Informationen mit keiner Verpflichtung oder Garantie irgendeiner Art verbunden. Autoren und Verlag übernehmen infolgedessen keine juristische Verantwortung und werden keine daraus folgende oder sonstige Haftung übernehmen, die auf irgendeine Art aus der Benutzung dieser Informationen oder Teilen davon entsteht. Ebenso übernehmen Autoren und Verlag keine Gewähr dafür, dass beschriebene Verfahren usw. frei von Schutzrechten Dritter sind. Die Wiedergabe von Gebrauchsnamen, Handelsnamen, Warenbezeichnungen usw. in diesem Buch berechtigt deshalb auch ohne besondere Kennzeichnung nicht zu der Annahme, dass solche Namen im Sinne der Warenzeichen- und Markenschutz-Gesetzgebung als frei zu betrachten wären und daher von jedermann benutzt werden dürften. Bibliografische Information Der Deutschen Nationalbibliothek Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar. Dieses Werk ist urheberrechtlich geschützt. Alle Rechte, auch die der Übersetzung, des Nachdruckes und der Vervielfältigung des Buches, oder Teilen daraus, vorbehalten. Kein Teil des Werkes darf ohne schriftliche Genehmigung des Verlages in irgendeiner Form (Fotokopie, Mikrofilm oder ein anderes Verfahren) auch nicht für Zwecke der Unterrichtsgestaltung reproduziert oder unter Verwendung elektronischer Systeme verarbeitet, vervielfältigt oder verbreitet werden Carl Hanser Verlag München Gesamtlektorat: Fernando Schneider Sprachlektorat: Sandra Gottmann, Münster-Nienberge Herstellung: Stefanie König Coverconcept: Marc Müller-Bremer, München Coverrealisierung: Stephan Rönigk Datenbelichtung, Druck und Bindung: Kösel, Krugzell Ausstattung patentrechtlich geschützt. Kösel FD 351, Patent-Nr Printed in Germany ISBN

6 1 Inhalt 1 Einstieg in Flex Next Generation Internet Die Flash Platform Die Protagonisten Die Bestandteile von Flex Entwicklung und Aufbau einer Flex-Anwendung Flex für den Desktop: Adobe AIR 6 2 Die Entwicklungsumgebung: Flash Builder Die verschiedenen Projektarten Ein neues Projekt anlegen und ausführen 11 3 MXML Struktur und Syntax MXML-Grundgerüst und Zeichenkodierung Kommentare in MXML Platzieren von Komponenten MXML-Dateinamen Aufbau von MXML-Dokumenten MXML und ActionScript 20 4 ActionScript Einführung Über ActionScript 23 V

7 Inhalt ActionScript im Umfeld von Flex Spuren legen mit trace() Kommentare in ActionScript Einsatz von ActionScript Inline: Innerhalb von MXML-Tag-Attributen Nested: verschachtelt in MXML-Tags Block: MXML Script Blocks Ausgelagert: ActionScript in separater Datei Klassen: Externe Definitionsdateien ActionScript 3.0 im Vergleich Was gibt es Neues in ActionScript Sprachelemente und Syntax Variablen und Datentypen Klassen, Eigenschaften und Methoden Interfaces programmieren Vergleich: ActionScript, PHP und Java 49 5 Das Event-Modell von Flex Einführung Ereignisfluss: das Event-Modell verstehen Event-Handler Events in MXML abfangen Events in ActionScript abfangen Welche Events sind verfügbar? Die Event-Klasse Event Propagation Unterschied zwischen target und currenttarget Die addeventlistener()-methode Priorität von Events Propagation in Event-Kette stoppen Event-Unterklassen MouseEvent KeyboardEvent Gesten und ihre Events 73 VI

8 Inhalt 5.5 Events für Fortgeschrittene Eigene Event-Klasse erstellen Events manuell feuern 75 6 Die Flex-Bausteine: Komponenten Komponenten Controls Layout-Container Navigators Textkomponenten Flash Text Engine (ab Flash Player 10) Text Layout Framework (TLF) Die Text-Komponenten Das Text-Objektmodell Einfachen Text in MXML Eingabe von Text (TextInput und TextArea) Texteingabe und die relevanten Events Textformatierung in ActionScript (TextFlow) Templates: TextFlow und Datenbindung Mehrspaltiger Text Formatierten Text importieren (importfromxml und importfromstring) TextFlow exportieren List-basierte Komponenten List Tree (Halo) DataGrid AdvancedDataGrid ItemRenderer ItemEditor DropDownList und ComboBox DataGroup und SkinnableDataContainer Layout Die möglichen Layouts Absolute Positionierung (BasicLayout) Constraint-based Layout (BasicLayout) 138 VII

9 Inhalt TileBasedLayout Verschachteln von Containern Rahmen und Abstand Scrollbalken Medienintegration Einführung Grafiken und Bilder laden SWF-Animationen und Skripte laden Ladevorgang überwachen Einbinden von Sound Einbinden von Video Restriktionen beim Laden externer Medien Anpassen der Benutzeroberfläche Einleitung Styles Instance/ Inline Style CSS: Class Styles und Type Styles CSS-Syntax CSS in Flex und die allgemeine CSS-Spezifikation Globale Styles Einsatz von Styles in MXML und externen CSS-Dateien Einsatz von Styles in ActionScript Verfügbare Style-Eigenschaften Formate von Style-Eigenschaften Vererbung und Dominanz Component Skinning Beispiel Skinning mit Flash Catalyst Die Designvorgabe und das Artwork (Photoshop) Die Komponente in Flash Catalyst zum Leben erwecken Import in Flash Builder Fonts Fonts nutzen und einbetten Probleme beim Nutzen und Einbetten von Fonts 200 VIII

10 Inhalt Problembehandlung bei Halo-Komponenten Die Bereiche der Zeichensätze anpassen Runtime CSS States, Effects und Transitions States Mit States arbeiten (MXML) Mögliche Modifikationen innerhalb eines States States ableiten States in Komponenten und Modulen States und ihre Events States verfeinern Effects Effects erstellen und anwenden Die Trickkiste: Übersicht der verfügbaren Effects und Trigger Effects kombinieren Effects und ihre Events Sonderfälle Transitions Transitions mit States verknüpfen Event-Kette von States und Transitions Eins nach dem anderen: Action Effects Fine-Tuning: Filter Weitere Werkzeuge des Flex-Frameworks PopUp Drag and Drop Events einer Drag-and-Drop-Operation Custom Drag and Drop (für nicht List-basierte Komponenten) Drucken in Flex Einfaches Drucken Drucken eines DataGrids mit Druckvorlage Umgang mit lokalen Daten Einführung Daten aktuell halten: Datenbindung (Data Binding) Daten richtig strukturieren und bereitstellen: Data Model 271 IX

11 Inhalt Daten aufbereiten und formatieren: Data Formatter Daten auf Gültigkeit überprüfen: Data Validation Datenfluss Data Binding Uni- und bidirektionale Inline-Datenbindung Die Tag-Variante für die Datenbindung Datenbindungen mit ActionScript realisieren Eigene Objekteigenschaften für Datenbindungen aktivieren ActionScript innerhalb einer Datenbindung Data Model Model, View und Controller (MVC) Data Model in Flex Data Formatting Formatter in MXML anlegen Formatter in ActionScript realisieren Fehler in Formatter abfangen Übersicht der Formatter-Klassen von Flex Custom Formatter programmieren Data Validation Validator in MXML anlegen Validator in ActionScript realisieren Übersicht der Validator-Klassen von Flex Pflichtfelder Manuelles Auslösen eines Validators Fehlermeldungen anpassen Custom Validator programmieren LocalConnection Externe Datenquellen und Data Centric Development Einleitung HTTP-basierte Kommunikation HTTPService WebService RemoteObject Data Centric Development Codegenerierung 382 X

12 Inhalt CallResponder Fiber Model PHP und ZendAMF Voraussetzungen Ausgangspunkt PHP Ausgangspunkt Flex Ein unschlagbares Team: Flex, Java, BlazeDS und Hibernate Die Serverseite Flex-Client: Manager Flex-Client: Frontend Zusammenfassung Messaging mit BlazeDS Chat-Anwendung mit mehreren Themen Komponenten und Module entwickeln Einleitung Vorteile der modularen Entwicklung Komponenten Module Komponenten vs. Module Workflow und Aufbau einer modularen Flex-Anwendung Eigene Komponenten entwickeln Composite Components (MXML) Extended Components (ActionScript) Template Components (MXML) Komponentenentwicklung für Fortgeschrittene Component Lifecycle Darstellung und Aktualisierungsprozess von Komponenten Eine Custom Component entwickeln Komponenten kompilieren und verteilen Module ModuleLoader ModuleManager Kommunikation mit Modulen Application Domain vs. Module Domain 562 XI

13 Inhalt 14 Gute Programmierung, schlechte Programmierung So nicht: eng gekoppelte Programmierung Lose gekoppelte Programmierung Flex für den Desktop (Adobe AIR) Einführung in Adobe AIR Entwicklung einer AIR-Anwendung AIR-Projekt im Flash Builder erstellen Die AIR-Komponenten Spezielle AIR-Funktionen und nicht sichtbare Komponenten Veröffentlichung von AIR-Anwendungen Exportieren von AIR-Anwendungen Beispielanwendungen 591 XII

14 Vorwort Flex ist das kostenlose Open-Source-Framework zur Entwicklung von anspruchsvollen, interaktiven Anwendungen und somit das Herzstück der neuen Produktlinie Flash Platform aus dem Hause Adobe. Die Flash Platform vereint bewährte Technologie, Webinnovation, integrierte Produktlösungen für optimale Workflows zwischen Entwicklern, Designern und Konzeptern, sowie ein umfassendes Community- und Partnernetzwerk. Flex-Anwendungen lassen sich in den beiden Laufzeitumgebungen der Flash Platform ausführen: Adobe Flash Player und Adobe Integrated Runtime (AIR). Während der Flash Player primär im Web zum Einsatz kommt, können Flex- Anwendungen ohne große Modifikationen auch in der AIR-Laufzeitumgebung auf dem Desktop ausgeführt werden. Hier steht dem Entwickler ein erweiterter Befehlssatz zur Verfügung, der beispielsweise den Zugriff auf das lokale Dateisystem oder auf native Prozesse ermöglicht. Außerdem erobert die Flash Platform gerade, während ich dieses Buch verfasse, die Welt der mobilen Endgeräte. So stehen mobile Versionen von beiden Laufzeitumgebungen kurz vor dem ersten Release, so dass 2010 wohl mitunter das Jahr der Smartphones und Slades bzw. Handhelds wird. Besonders in der Welt von Android wird Flash und Flex eine wichtige Rolle spielen. An dieser Stelle darf der Hinweis auf das von Adobe initiierte Open Screen Project natürlich nicht fehlen. Unter erfahren Sie, wie Adobe mit einer beeindruckenden Allianz (u.a. Google, HTC, nvidia etc.) die Flash Platform für Mobile Endgeräte und sogar Fernseher optimieren wird und welche Wege in den kommenden Jahren eingeschlagen werden. Doch schauen wir uns ersteinmal den beeindruckenden Lebenslauf von Flex an. 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. XIII

15 Vorwort 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. Nach dieser Erfahrung und der erfolgreichen Umsetzung des besagten Projekts war mir schnell klar, dass die Flex-Technologie längst nicht mehr das war, was in den Köpfen vieler Webentwickler herumspukte. Nachdem ich nach wie vor über Blogund Forenbeiträge gestolpert bin, die weiterhin die Flex-Technologie in völlig falschem Licht erscheinen ließen, war es letztlich ein Gespräch mit dem Chefentwickler einer anderen 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: XIV

16 Vorwort Der ehemalige Flex Builder (heue Flash 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 in Köln 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 4 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. Ein besonderes Augenmerk erhalten die im Rahmen der vierten Version des Flex Frameworks eingeführten neuen Spark-Komponenten und das Data Centric Development, das Sie bei der Zusammenarbeit mit verschiedenen Backend-Technologien unterstützt. Interessieren Sie sich darüber hinaus auch für die anderen Protagonisten der Flash Platform (Flash Catalyst, Flash Professional etc.), so lade ich Sie herzlichst auf meinen Blog unter ein. Hier erwarten Sie aktuelle Informationen, interessante Denkanstöße und hilfreiche Anleitungen. Themenspektrum Dieses Buch führt Sie schrittweise an die Entwicklung komplexer Rich Internet Applications (RIA) mit dem Flex Framework 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 4 (MXML, ActionScript etc.). Kapitel 5 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 sechste 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 7-10 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. Kapitel 11 bringt Ihnen den Umgang mit lokalen Daten näher (Datenmodellierung, Datenbindungen, Formatieren und Validieren von Daten). XV

17 Vorwort Kapitel 12 befasst sich mit dem Einbinden externer Datenquellen. Hier werden Sie neben dem HTTPService, WebService und dem RemoteObject noch das so genannte Data Centric Development kennenlernen, das Sie bei der Zusammenarbeit mit verschiedenen Servertechnologien wie Java oder PHP unterstützt. In Kapitel 13 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 14 auf, wie Sie modulare und skalierbare Anwendungen entwickeln und welche Ansätze der Architektur hilfreich sind. Das letzte Kapitel 15 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. Deren URL lautet Dort finden Sie neben den Quelltexten dieses Buches noch weitere Informationen über Flex sowie einen Blog rund um die Flex-Technologie. Danksagung An dieser Stelle möchte ich mich recht herzlich bei allen Personen bedanken, die zum Entstehen dieses Buches beigetragen haben, insbesondere bei meinem wundervollen Team, dass mich tatkräftig unterstützt hat. Besonders bei Janina Werner möchte ich mich nicht nur für den kompetenten Support und die Koordination bedanken, sondern auch für die vielen lustigen und motivierenden Gespräche während der gesamten Produktion über. Desweiteren möchte ich mich bei meinem Weggefährten und guten Freund Johannes Boyne bedanken, der die ein oder andere Zeile dieses Buches beigesteuert hat. Außerdem noch einen großen Dank an Mike Rösgen, auf dessen Unterstützung ich an der einen oder anderen Stelle ebenfalls zurückgreifen durfte. In so einem Team macht das Flexen wirklich Spaß! Last but not least möchte ich mich bei Fernando Schneider für die professionelle und inspirierende Zusammenarbeit, sowie Stefanie König vom Hanser Verlag und Sandra Gottmann bedanken, ohne die Sie dieses Buch nicht in den Händen halten würden. XVI

18 Vorwort 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! Happy Coding! Köln, im Mai 2010 Simon Widjaja Webentwickler aus Leidenschaft XVII

19

20 1 1 Einstieg in Flex Next Generation Internet Adobe positioniert seine Webtechnologien neu, und neben den Major Releases der bekannten Produkte wurde auch ein völlig neues Werkzeug namens Flash Catalyst gerade erst veröffentlicht. Allerhöchste Zeit, einmal einen Blick in die Glaskugel zu werfen, um zu schauen, wie der ambitionierte Flash-Entwickler von morgen seine Rich Internet Applications entwickeln wird... Nachdem sich die aktuelle Version des Adobe Flash Players so schnell verbreitet hat wie kein Browser-Plugin zuvor und seitdem sich Flash-basierte Anwendungen dank der Adobe Integrated Runtime (kurz AIR) plattformübergreifend auf den gängigen Betriebssystemen und sogar mobilen Endgeräten nativ ausführen lassen, gilt Flash wohl als eine der interessantesten und zukunftsweisenden Technologien der Internetentwicklung. Mit Microsofts Silverlight, JavaFX und HTML 5 hat der Konkurrenzkampf bereits begonnen, und im Kontext von Flash betreten immer mehr Protagonisten aus dem Hause Adobe den Ring. Mit Produktnamen wie Flex, Flash Builder, Flash Catalyst und LiveCycle etabliert Adobe ein komplettes Ecosystem zur Erstellung von hippen Webseiten und anspruchsvollen Rich Internet Applications. Das vorliegende Buch bringt Ihnen das Herzstück dieses Ecosystems näher: das Flex Framework. Sie werden erfahren, wie Sie Komponenten einsetzen, modifizieren und selbst erstellen können, und Einblicke in die verschiedenen Bereiche der RIA-Entwicklung mit dem Flex Framework erhalten. Doch eins nach dem anderen. Schauen wir uns doch zuerst einmal die Flash Platform ein wenig näher an... 1