InhalT

Schnelleinstieg in Flex 2
Roger Braunstein Übersetzung von Lars Schulten
Flex ist ein umfassendes Framework zur Entwicklung Flash-basierter Rich Internet Applications. Obwohl die Umgebung noch sehr jung ist, gibt es schon jetzt viele moderne Webanwendungen, die mit Flex 2 realisiert wurden. Auch für Desktop-Anwendungen ist Flex optimal geeignet, wenn es zusammen mit Adobe Apollo zum Einsatz kommt. Dieses Dokument bietet eine vollständige Einführung in die Programmierung mit Flex 2 und berücksichtigt dabei auch MXML und ActionScript 3.0. Es ist für alle geeignet, die Kenntnisse in einer objektorientierten Programmiersprache und XML haben. Den Beispielcode zu diesem TecFeed finden Sie auf der Website des Autors unter http://partlyhuman.com/books/flexshortcut/.

Flex 2 kennenlernen | 2 actionScript 3.0 | 6 Was Flex mitbringt | 27 Flex zum Glänzen bringen | 64 Flex erweitern | 80 Weitere Features | 89 Zusammenfassung | 90 Impressum | 91 Ergänzende O’Reilly-Titel | 92

TecFeeds
www.tecfeeds.de

è Inhalt

Schnelleinstieg in Flex 2

Flex 2 kennenlernen

2

Flex 2 kennenlernen
Flex 2 ist eine deklarative XMl-UI-Sprache Das wahrscheinlich markanteste Kennzeichen von Flex 2 ist MXML, eine neue Sprache, die Sie einsetzen können, um FlexAnwendungen zu erstellen. Wenn Sie Ihren ersten <mx:Button> sehen, können Sie sicher sein, dass Sie MXML und Flex vor sich haben. Vielleicht haben Sie schon erraten, dass das »ML« in MXML für »Markup-Sprache« steht. Und ein Blick auf MXML-Code macht die Ähnlichkeit mit XHTML oder anderen Markup-Sprachen deutlich. MXML ist eine deklarative XML-Sprache. Das bedeutet, dass Sie, einfach indem Sie deklarieren, schon etwas machen. Wenn Sie Folgendes schreiben:
<mx:Panel><mx:Button></mx:Panel>

Einige Unternehmen haben deklarative XML-Sprachen als Mittel zur Erstellung von UIs entdeckt. Man kann also MXML leicht mit Microsofts XAML, AOLs Boxely, Laszlos OpenLaszlo und Netscapes XUL vergleichen. Schon die Vertrautheit mit HTML und JavaScript sorgt dafür, dass Sie sich bei MXML zu Hause fühlen. Flex 2 ist ein Windowing-Toolkit Flex 2 fügt den Fähigkeiten von Flash Player 9 ein mächtiges, erweiterbares, gut organisiertes und gut dokumentiertes Windowing-Toolkit hinzu. Ein großer Teil des Werts von Flex 2 steckt im Framework: den Hunderten von Klassen, die bereitstehen, damit Sie sie nutzen und erweitern können. Die meisten dieser Klassen kümmern sich gleichermaßen um Layout und Anzeige vertrauter GUI-Komponenten wie Buttons, Textfelder und Werkzeugleisten. Wie jedes WindowingToolkit soll es Ihnen ersparen, jemals eine weitere Scrollleiste (oder irgendeine andere GUI-Komponente) schreiben zu müssen. Sie können Flex eine Menge lästiger Details überlassen – das Zentrieren von Objekten, das Ersetzen des Mauszeigers des Benutzers oder das Füllen von Auswahllisten mit Daten – und sich gleich den wichtigen Teilen Ihrer Anwendung zuwenden. Neben den Komponenten, die Flex 2 von Haus aus mitbringt, können Sie auch fast alle Klassen nutzen, die verwendet werden, um Flex 2 selbst aufzubauen. Die Quellen aller Klassen werden in rohem ActionScript angeboten. Das ermöglicht Ihnen, eigene Komponenten oder unkonventionelle Benutzer-

erhalten Sie also einen Button in einem Panel. Die Erzeugung und Zusammensetzung dieser Komponenten wird bereits von der Struktur des Markups impliziert. Beachten Sie, dass nicht der gesamte Code in einer Flex 2-Anwendung MXML sein muss. In Flex 2 haben Sie immer die Wahl zwischen MXML und ActionScript 3.0, auch wenn Sie nur in Flex 2 MXML verwenden können. Der Gebrauch von deklarativem XML kann bei der Programmierung sehr vorteilhaft sein. Es ist erheblich kompakter, wenn man viele Komponenten aufbaut. Es kann eingesetzt werden, um Design und Code zu trennen. Außerdem kann es extern gestylt und mit visuellen Werkzeugen gestaltet werden.
TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex 2 kennenlernen

3

schnittstellen zu erzeugen, die Funktionalitäten von beliebigen Teilen der Flex 2-Bibliothek ausleihen. Wenn Sie sich einmal daran gewöhnt haben, Flex 2 an Ihrer Seite zu haben, empfindet man es als geradezu lästig, Benutzerschnittstellen in Flash zu programmieren. Das soll jedoch nicht heißen, dass Flex Flash vollständig ersetzt. Flex besitzt keinen Grafikeditor, keine Timeline, keine Animationswerkzeuge und keine Bibliotheksverwaltung wie Flash. Es soll auf einer höheren Ebene arbeiten und bietet Komponenten statt Shapes. Generell könnte man sagen, dass Flex 2 am besten für den Aufbau datengesteuerter, benutzerfreundlicher Benutzerschnittstellen geeignet ist. Flex 2 basiert auf Flash Wenn Sie eine Flex 2-Anwendung ausführen, lassen Sie sie im Flash Player (Version 9 und höher) laufen. Egal ob es das Flash Player-Plugin in Ihrem Browser, der Standalone Flash Player oder eine Desktop-Anwendung ist, die über Appolo läuft, Flex 2-Anwendungen laufen innerhalb des Flash Players. Das bedeutet, dass alles, was Sie in Flex 2 schreiben, an den gleichen Orten läuft wie ein Flash-Film: in unterschiedlichen Browsern, auf unterschiedlichen Computern und unter unterschiedlichen Betriebssystemen. Außerdem sind Flex 2-Anwendungen Flash-Filme. Obwohl Sie sie nicht in der Flash-IDE entwerfen und einen anderen Compiler nutzen, sind Flex 2-Anwendungen in jeder Weise ganz gewöhnliche SWFs. Flex ist also eine Flash-Technologie. Beim Aufbau von Flex 2-Anwendungen können Sie in ActionScript 3.0

programmieren und jeden Teil der Flash 9-API aufrufen. Flex ist eine Obermenge von Flash. Weniger Worte, mehr Code Kürzen wir das Geschwatze ab und sehen wir uns eine einfache (allerdings etwas unnütze) Flex 2-Anwendung an. Indem Sie sich etwas Beispielcode ansehen, bekommen Sie ein Gespür dafür, wie Flex 2-Anwendungen erstellt werden, bevor wir uns den Einzelheiten zuwenden. Abbildung 1 zeigt ein Werkzeug zur Temperaturumrechnung, das Celsius in Fahrenheit und Fahrenheit in Celsius umrechnet.

abb. 1 Ein Temperaturumrechner

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" currentState="FtoC"> <mx:Script> <![CDATA[

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex 2 kennenlernen

4

private const C_INPUT_TEXT:String = "Geben Sie eine Temperatur in Celsius ein:"; private const F_INPUT_TEXT:String = "Geben Sie eine Temperatur in Fahrenheit ein:"; private const CF_STATE:String = "CtoF"; private const FC_STATE:String = "FtoC"; private function convertTemp():void { var inputTemp:Number = parseFloat(inputTempField.text); var outputTemp:Number; switch(currentState) { case CF_STATE: outputTemp = convertCtoF(inputTemp); outputTempField.text = outputTempFormatter.format(outputTemp); outputTempField.text += "°F"; break; case FC_STATE: outputTemp = convertFtoC(inputTemp); outputTempField.text = outputTempFormatter.format(outputTemp); outputTempField.text += "°C";

break; default: throw new Error("Unerwarteter Zustand"); } } private function clearTemp():void { outputTempField.text = ""; } private function convertCtoF(celsius:Number):Number { return 9/5 * (celsius + 32); } private function convertFtoC(fahrenheit:Number): Number { return 5/9 * (fahrenheit - 32); } ]]> </mx:Script> <mx:Style> .outputTemp {font-size: 18; font-weight: bold; color: red} </mx:Style>

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex 2 kennenlernen 

<mx:states> <mx:State name="{FC_STATE}" enterState="convertTemp()"> <mx:SetProperty target="{inputLabel}" name="text" value="{F_INPUT_TEXT}"/> </mx:State> <mx:State name="{CF_STATE}" enterState="convertTemp()"> <mx:SetProperty target="{inputLabel}" name="text" value="{C_INPUT_TEXT}"/> </mx:State> </mx:states> <mx:NumberValidator source="{inputTempField}" property="text" triggerEvent="change" valid="convertTemp()" invalid="clearTemp()"/> <mx:NumberFormatter id="outputTempFormatter" precision="2"/> <mx:Panel title="Temperaturumrechnung" layout="vertical" horizontalAlign="center"> <mx:HBox horizontalAlign="center" verticalAlign="middle"> <mx:Label id="inputLabel"/> <mx:TextInput id="inputTempField" maxChars="5"/> <mx:Spacer width="10"/> <mx:Text id="outputTempField" styleName="outputTemp" width="100"/> </mx:HBox>
TecFeeds © 2007 by O’Reilly Verlag

<mx:HBox horizontalAlign="center" creationComplete="conversionMode.selectedValue = currentState;"> <mx:RadioButtonGroup id="conversionMode" change="currentState = conversionMode.selectedValue as String"/> <mx:RadioButton group="{conversionMode}" label="Fahrenheit in Celsius" value="FtoC"/> <mx:RadioButton group="{conversionMode}" label="Celsius in Fahrenheit" value="CtoF"/> </mx:HBox> </mx:Panel> </mx:Application>

Dieser Hauruck-Temperaturumrechner nutzt Elemente aus vielen verschiedenen Teilen von Flex 2. Mit dieser und den anderen Anwendungen in diesem TecFeed können Sie auf der Begleit-Website zu diesem TecFeed experimentieren (dort können Sie auch den jeweiligen Code herunterladen oder einsehen): http://www.partlyhuman.com/books/flexshortcut/. Inhalte dieses TecFeeds Im Rest dieses Dokuments werden Sie alle Elemente sehen, die in das vorangehende Beispiel mit eingeflossen sind, und noch vieles mehr. Dieser TecFeed ist in vier übergeordnete Abschnitte eingeteilt. Der erste ist eine Einführung in ActionScript 3.0, die Sie brauchen, um Flex 2-Anwendungen zu schreiben. Der zweite Abschnitt befasst sich mit den am häu-

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

6

figsten verwendeten und nützlichsten Komponenten, die Sie in der Flex 2-Bibliothek finden können, und damit, wie Sie direkt aus ihnen Anwendungen aufbauen. Im dann folgenden Abschnitt geht es darum, wie Sie erreichen, dass diese Anwendungen gut aussehen. Der letzte große Teil dieses TecFeeds dreht sich darum, wie man an das Flex-Framework anknüpft, um eigene Komponenten zu erstellen. Wollen Sie sich so schnell wie möglich in die eigentliche FlexEntwicklung stürzen, können Sie das folgende Kapitel zu ActionScript 3.0 erst mal überspringen und gegebenenfalls zurückblättern, wenn die Beispiele komplexer werden und mehr Scripting erfordern. Konventionen Die Codeauszüge in diesem TecFeed wurden gelegentlich gekürzt, um den Schwerpunkt mehr auf die eigentliche Bedeutung des Auszugs zu legen. Sie können nebeneinander Abschnitte mit ActionScript 3.0 und MXML enthalten. Das impliziert, dass das MXML Teil einer MXML-Datei ist und dass das AS3 in einen <mx:Script> -Block oder eine externen ActionScript-Datei eingeschlossen ist. Gleichermaßen sollte CSS in eine externe CSS-Datei gepackt werden. Importanweisungen und die XML-Deklaration <?xml version="1.0"?> werden in die Auszüge nicht eingeschlossen.

actionScript 3.0
Die gemeinsame Sprache von Flex 2-Anwendungen ist ActionScript 3.0. Sie können keine älteren Versionen von ActionScript verwenden, und es ist nicht möglich, ganz ohne ActionScript 3.0 eine funktionierende Anwendung zu erstellen. Außerdem werden wir bald sehen, dass MXML und AS3 grundlegend miteinander verwandt sind. ActionScripts dritte Inkarnation ist eine ausgereifte Sprache und substantiell anders als ActionScript 2. Dieses Kapitel wird alle wesentlichen Aspekte von ActionScript 3.0 kurz behandeln, ist aber in keiner Weise eine vollständige Einführung. Am Ende dieses TecFeeds befindet sich eine Liste mit weiterem nützlichen Lesestoff, der ergänzende Anleitungen bietet. Was bringen Sie mit? Leser, die ActionScript 2 verstehen, dürften mit dem Übergang zu ActionScript 3.0 keine Probleme haben. Das folgende Kapitel widmet sich speziell den Konzepten, die seit AS2 eingeführt wurden. Lesen Sie also weiter! Leser mit Erfahrungen in C# oder Java werden sich bei AS3 nach kurzer Zeit zu Hause fühlen, sollten aber auf ein paar Unterschiede in der Syntax und bei den Features achten. Auf alle Fälle setzt dieses Kapitel zumindest Grundkenntnisse in der objektorientierten Programmierung voraus.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

7

haupt-Features von actionScript ActionScript ist eine ECMAScript-Sprache. ActionScript 3.0 implementiert den Entwurf von ECMAScript Edition 4 (ECMA262). Das bedeutet zwei Dinge: Erstens ist der eigentliche Name lächerlich, Sie brauchen ihn sich also nicht zu merken. Zweitens handelt es sich um einen Entwurf, der sich in Zukunft noch verändern kann. Ecma International ist eine internationale Standardisierungsorganisation, die ECMAScript und andere technologische Standards überwacht. JavaScript ist eine andere Implementierung von ECMAScript. Es ist also mehr als wahrscheinlich, dass ActionScript 3.0 mit JavaScript identisch sein wird, wenn Browser die Version 4 von ECMAScript implementieren. ActionScript 3.0 ist eine echte objektorientierte Sprache, in der alle Typen, die Basistypen eingeschlossen, Klassen sind. Selbst auf einem Literal wie 5 können direkt Number-Methoden aufgerufen werden. AS3 unterstützt Einfachvererbung: Jede Klasse kann nur eine einzige Klasse erweitern. Die Prototyp-Natur früherer Versionen von ECMAScript wird langsam verdeckt und der klassischen Verwendung geopfert. Einige Teile von AS3 ermöglichen Ihnen, es als Prototyp-basierte Sprache zu verwenden, aber diese Fähigkeit wird selten verwendet und hier nicht behandelt. Die virtuelle Maschine ist so ausgerichtet, dass sie am besten funktioniert, wenn Sie auf klassische Weise programmieren. AS3 ist auch eine funktionelle Sprache. Funktionen sind Objekte – Bürger erster Klasse – und können gespeichert und

herumgereicht werden. Lambda-Funktionen (oder anonyme Funktionen) werden unterstützt. Außerdem arbeitet die Klasse Array als eine Liste und unterstützt viele der üblichen Listenoperationen aus der funktionellen Programmierung. ActionScript 3.0 unterstützt dynamisch und statisch typisierte Variablen gleichermaßen. Dynamisch typisierte oder »untypisierte« Variablen können ihren Typ zur Laufzeit ändern. Dann wird Typ-Inferenz eingesetzt, um den Typ auf Basis des Werts anzupassen, den Sie zuweisen. AS3 führt den Typ * ein, um eine untypisierte Variable anzuzeigen. Der Compiler prüft den Typ aller typisierten Variablen und versiegelten Klassen. Die Verwendung statisch typisierter Variablen hilft dem Compiler also, die Richtigkeit Ihrer Programme zu sichern. Klassen sind standardmäßig versiegelt: Sie können ihnen zur Laufzeit keine Eigenschaften oder Methoden hinzufügen. Dynamische Klassen bleiben allerdings weiterhin möglich, indem man das Schlüsselwort dynamic verwendet. ActionScript 3.0 hat ein natives Event-Modell. Anders als vorherige Versionen von ActionScript, in denen man ein EventFramework auswählen musste und unter denen zu einem Zeitpunkt mehrere verschiedene Event-Handling-Schemata im Einsatz sein konnten, bietet AS3 ein flexibles, mehrphasiges Event-Modell. Dieses Modell basiert auf dem DOM Level 3, einem W3C-Standard. Die Behandlung von Laufzeitfehlern wurde durch die stark verbesserte Verwendung von Exceptions unter AS3 vereinfacht. Viele Fehler, die in vorherigen Versionen von Action-

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

8

Script stumm blieben, lösen jetzt Exceptions aus. Das vereinfacht das Debugging und ermöglicht umfassendere Ausweichstrategien. actionScript Virtual Machine 2 (aVM2) Ein Großteil der Kraft von ActionScript 3.0 steckt in einer vollständig neuen virtuellen Maschine, der ActionScript Virtual Machine 2 (AVM2). Die virtuelle Maschine ist das, was ermöglicht, dass SWF-Dateien auf einem Mac, einem PC, unter Linux oder auf einem Pocket PC laufen. AS3-Code wird zu Bytecode, d.h. Anweisungen werden auf einer maschinennahen Ebene kompiliert. Die virtuelle Maschine im Flash Player führt diesen Bytecode aus. Früher wurde Quellcode zu Anweisungen für eine CPU kompiliert. Das führt aber dazu, dass dieses Programm nur auf Rechnern mit der gleichen CPU läuft. Viele moderne Sprachen sind dazu übergegangen, virtuelle Maschinen zu verwenden, die den gleichen Bytecode ausführen. Beispiele dafür sind Javas JRE und .NETs CLR. Weil auf Ihrer Maschine eine virtuelle Maschine läuft, die die Anweisungen für die VM in Anweisungen umwandelt, die Ihre CPU verstehen kann, können Bytecode-interpretierte Sprachen langsamer sein als native Programme, gewinnen aber Interoperabilität, Sicherheit und Flexibilität. Weil der Flash Player weiterhin ältere SWFs abspielen können muss, enthält der Flash Player 9 tatsächlich zwei vollständige Interpreter: AVM1 und AVM2. Setzen Sie in einem SWF ActionScript 3.0 ein, läuft es in der AVM2: Das ist bei allen Flex 2-An-

wendungen der Fall. Die AVM2 wurde, mit der Leistung im Blick, von Grund auf neu geschaffen. Ihre Geschwindigkeit und Stabilität machen Flex 2 möglich. AVM2 und damit AS3 behandeln Klassen grundlegend anders als vorherige Versionen von ActionScript. ActionScript-Klassen begannen als prototypische Objekte: In ActionScript 1 und JavaScript kann man »Klassen« erstellen, indem man einem im Speicher vorhandenen Prototyp-Objekt Methoden und Variablen hinzufügt. Vererbung wurde behandelt, indem der Prototyp der Superklasse kopiert wurde und ihm Methoden und Eigenschaften hinzugefügt wurden, um ihn so zu erweitern und eine Prototyp-Kette zu schaffen. In ActionScript 2 konnte man Klassen in der vertrauten Struktur mit einem class -Block schreiben. Aber das war nur syntaktischer Zuckerguss: Der ActionScript 2-Compiler hat diese einfach für Sie in Prototyp-Objekte umgewandelt. Prototyp-basierte Klassen haben allerdings einige schwerwiegende Probleme. Klassen können zur Laufzeit modifiziert werden. Methoden und Variablen können referenziert werden, ohne dass sie deklariert wurden, oder können umgekehrt zur Laufzeit überschrieben werden. Aber am wichtigsten ist vielleicht, dass jeder Methoden- oder Eigenschaftenzugriff auf einer Klasseninstanz die AVM auf eine wilde Jagd nach dieser Ressource schickt, um erst in einer Hashtable im Objekt, dann in seinem Prototyp, dem Prototyp der Superklasse und dann auf dem ganzen Weg nach oben in der Vererbungskette zu suchen! Die neue virtuelle Maschine schafft einen Ausgleich. Sie ermöglicht Ihnen, das Prototyp-Objekt zu verwenden, kollabiert

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

9

aber auch Ihre Klassen. In der AVM2 werden alle Klassen als flache Strukturen gespeichert. Das bedeutet zwei Dinge: Klassen nehmen erheblich weniger Speicher ein, und das Nachschlagen von Methoden und Eigenschaften ist eine direkte Operation. All das muss ich wegen einer wichtigen Implikation erwähnen. Die Verwendung statisch typisierter Variablen ist nicht einfach nur eine Prüfung Ihrer Arbeit – sie optimiert Ihr Programm. Durch die Verwendung von Just-in-Time-Kompilierung (JIT ) erhält die AVM2 ebenfalls einen gewaltigen Geschwindigkeitszuwachs. Im Vergleich zur direkten Ausführung von Anweisungen auf der CPU Ihres Rechners kann die Interpretierung von Bytecode ziemlich langsam sein. Just-in-Time-Kompilierung erstellt während der Ausführung Profile Ihres Programms, entdeckt Codeabschnitte, die häufig ausgeführt werden, und kompiliert diese darüber hinaus zu nativem Code – und all das, während Ihr Programm läuft. Die Compiler-Optimierung ist ein Vorgang, der sich im Wesentlichen im Hintergrund abspielt und an dem Sie unglücklicherweise nicht herumschrauben können. Seine Auswirkungen sind aber nicht zu unterschätzen. Beispielsweise haben Javas Verbesserungen bei der JIT mit den Jahren eine anfänglich negative Wahrnehmung seiner Geschwindigkeit vollkommen umgewandelt. Die AVM2 bietet eine Garbage Collection-Einrichtung. AS3 ist eine vollständig speicherverwaltete Sprache. Wenn Referenzen nicht mehr gültig sind und keine (starken) Referenzen auf sie bleiben, werden sie aus dem Speicher entfernt. Wie in

Java sind new und delete die wesentlichen Mittel zur Verwaltung Ihres Speichers. Das Schlüsselwort delete ist in AS3 allerdings stark beschränkt. Es ist üblicher, Referenzen auf null zu setzen, um zu erlauben, dass Objekte eingesammelt werden. In ActionScript 3.0 können Sie Konstruktoren schreiben, aber keine Destruktoren. Die AVM2 nutzt einen Mark-andSweep-Algorithmus für die Durchführung der Garbage Collection. ECMa-Script for XMl (E4X) Ein willkommenes neues Feature des AS3-Sprachkerns ist die Einbindung von XML als nativem Datentyp mit Literalen und intuitiven Operatoren. Dieses Feature wird als ECMAScript for XML (E4X) bezeichnet und ist ein weiterer ECMA International-Standard mit dem schlecht zu merkenden offiziellen Namen ECMA-357. Es vereinfacht und beschleunigt nicht nur die Verwendung von XML, sondern macht XML auch zu einem hilfreichen Typ für die interne Speicherung und Manipulation von Informationen. Die neue Klasse XML wird von einer sehr nützlichen Klasse namens XMLList begleitet. Eine XMLList lockert eine der Schlüsselanforderungen von wohlgeformtem XML: den einen Wurzelknoten. Es ist auch der typische Rückgabetyp für alle Filterungen, die mit E4X-Methoden durchgeführt werden, und enthält nützliche Methoden zur Manipulation ihres Inhalts. Sie werden feststellen, dass es sehr komfortabel ist, eine XMLList zu verwenden, um beliebige Happen von XML-Daten zu speichern. Es sollte erwähnt werden, dass die XML-Klasse von

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

10

ActionScript 2 als die Klasse XMLDocument fortbesteht. Das vereinfacht es, alten Code zu portieren. Im Folgenden sehen Sie ein Beispiel, das gerade mal in den Anfängen einiges davon zeigt, was Sie mit E4X machen können.
//Geben Sie das XML einfach inline an! //Der <?xml version="1.0"?>-Prolog ist nicht erforderlich. var roster:XML = <root> <person name="Ezra" skill="flash"/> <person name="Joey" skill="flex"/> <person name="Danny" skill="flash"/> <person name="Mims" skill="flex"> <title>Meister der Schnäuzer.</title> </person> <person name="Geoff" skill="javascript"/> <person name="Paul" skill="flash"/> <person name="Robert" skill="flash"/> <person name="Roger" skill="flex"> <title>Ihr demütiger Autor.</title> </person> </root>; //Sie können jetzt Teil des Teams werden! (Ein neues Kind //hinzufügen.) roster.appendChild(<person name="LieberLeser" skill="learning"/>);

//Wer steht in der ersten Reihe? (Das name-Attribut des //ersten person-Elements finden.) trace(roster.person[0].@name); //Ezra //Herausfinden, was Roger hier tun soll. //(Der Inhalt des title-Knotens im person-Element, dessen //name-Attribut Roger ist.) trace(roster.person.(@name == "Roger").title); //Ihr //demütiger Autor. //Schauen wir nach, wie viele Flexperten es gibt. //(Die Länge der XMLList aus den person-Elementen //mit dem skill-Attribut flex.) trace(roster.person.(@skill == "flex").length()); //3 //Diese Zeile können Sie für das Ende des Buchs speichern. //(Eine Referenz auf das person-Element mit dem //name-Attribut LieberLeser.) //(Setzt das skill-Attribut für dieses person-Element.) var you:XMLList = roster.person.(@name == "LieberLeser"); you.@skill = "flex"; //Ein neuer Flexperte ist aufgetaucht! //(Die Länge der XMLList aus den person-Elementen mit dem //skill-Attribut flex.) trace(roster.person.(@skill == "flex").length()); //4

Dieses Beispiel ist ein kleiner Auszug dessen, was mit E4X möglich ist. Sie können komplexe Suchen aufbauen, indem

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

11

Sie einen punktseparierten Abfragepfad konstruieren. Sie können Kinder auswählen, indem Sie den Namen des Kindknotens in einen Punktpfad ( roster.person.title ) einfügen, und Sie können Knoten positionell mit einer dem Array-Zugriff vergleichbaren Notation mit eckigen Klammern ( roster. person[0] ) auswählen. Sie können mit dem At-Zeichen ( @ ) zu den Attributen navigieren und Knoten auswählen, die in ihrem Pfad beliebigen Bedingungen (nicht nur Gleichheit) genügen. Die Klasse XMLList bietet mehr Achsenselektoren, als in diesem Beispiel gezeigt werden, die den Fähigkeiten von XPath entsprechen. Während Sie in Flex 2 mit XML-Daten arbeiten, können Sie sich die Dokumentation und die am Ende dieses TecFeeds aufgeführten Ressourcen ansehen, um mehr über E4X zu erfahren. Reguläre ausdrücke Ein weiteres nützliches und lang erwartetes Feature in AS3 sind reguläre Ausdrücke. Diese Objekte machen das Parsen von komplexen Strings zu einem Kinderspiel. Es gibt eine Unmenge von Büchern und Artikeln zu diesem Thema, wie beispielweise Reguläre Ausdrücke, 2. Auflage von Jeffrey Friedl (O’Reilly Verlag). AS3 unterstützt reguläre Ausdrücke als Literale – die durch einen Ausdruck angezeigt werden, der von Backslashs eingeschlossen wird ( /Hallo/ ) – und als Instanzen der Klasse RegExp . Es können nicht nur RegExp-Objekte auf Strings ausgeführt werden, indem sie als Argumente an die RegExp-Instanzmethoden übergeben werden, es wurden

auch eine Reihe von String-Methoden so aktualisiert, dass sie reguläre Ausdrücke als Argumente akzeptieren. Hier ist ein Beispiel dafür, wie reguläre Ausdrücke in ActionScript 3.0 verwendet werden können.
var str:String = "Rub a dub dub, three men in a tub. And who do you think they be?"; //Im String nach allem suchen, bei dem auf einen Buchstaben //"ub" folgt. str.match(/\wub/g); //Rub, dub, dub, tub //Einen regulären Ausdruck machen, der auf "dub dub" passt. var re:RegExp = new RegExp("dub dub"); //Den String auf die Existenz des Musters prüfen. re.test(str); //true //Das Muster durch unseren Text ersetzen. str.replace(re, "glub glub"); //Rub a glub glub, three men in //a tub ... //Nach allen Wörtern mit drei Buchstaben suchen. //Beachten Sie, dass replace() den String zurückgeliefert, //aber nicht verändert hat. str.match(/\b\w{3}\b/g); //Rub, dub, dub, men, tub, And, who, you //Die Position des ersten "a"-Zeichens finden. str.search(/a/); //4

Beachten Sie, dass Literale für reguläre Ausdrücke in AS3 nur verwendet werden, um reguläre Ausdrücke zu deklarieren, nicht, um sie auszuführen. Sie sehen also keine Konstrukte wie m/fnord/ (das in vielen Programmiersprachen nach dem Muster »fnord« suchen würde).

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

12

anzeigeliste Die Flash Player-API für die Verwaltung visueller Elemente (wie MovieClip) wurde vollständig überarbeitet. Ganz gleich, ob Sie Flash 9 verwenden oder nicht, es ist wichtig, dass Sie das verstehen, weil Flex 2 das gleiche Paradigma verwendet. Das neue Modell basiert auf einer Anzeigeliste. Jedes visuelle Element, das Kinder haben kann, besitzt eine Anzeigeliste. Sie können sich das als eine Liste vorstellen, weil Sie sie genau so verwalten und weil auf diese Weise die Stapelordnung bestimmt wird. Nur Elemente, die einer Anzeigeliste hinzugefügt wurden, werden gerendert, wenn das erforderlich ist. Die Liste wird von hinten nach vorne gerendert, und die Dinge, die vorne in der Liste stehen, werden über denen gerendert, die hinten in der Liste stehen. Zusätzlich zu der Art und Weise der Verwaltung wurden auch die Klassen selbst organisiert und ausgebaut, die visuelle Elemente repräsentieren. In SWF-Dateien, die für Flash Player 9 veröffentlicht werden, ist alles, was auf dem Bildschirm sichtbar ist, in einer Anzeigeliste organisiert und für Code zugreifbar, sogar statische Textfelder und einfache Shapes. Alle Anzeigeobjekte erweitern die abstrakte Basisklasse Display Object , und Objekte, die selbst andere Anzeigeobjekte enthalten können, erweitern DisplayObjectContainer . Im Folgenden finden Sie die wichtigsten Anzeigeobjekte, die in AS3 verfügbar sind.

flash.display.MovieClip Die Klasse MovieClip ist ihrem Gegenstück in früheren Versionen von ActionScript sehr ähnlich: ein visuelles Element mit einer unabhängigen Timeline, die beliebige andere Anzeigeobjekte enthalten kann. Beachten Sie, dass alle Eigenschaften, denen früher ein Unterstrich vorangestellt wurde, wie _alpha und _rotation , den Unterstrich verloren und zu alpha und rotation geworden sind. Beachten Sie auch, dass die Klasse von der obersten Ebene in das Paket flash.display gewandert ist. flash.display.Sprite Wie ein MovieClip kann ein Sprite eine beliebige Art von Anzeigeobjekt enthalten und mit den gleichen Eigenschaften transformiert werden. Sprites haben allerdings keine Timelines und sind deswegen effizienter, insbesondere wenn sie in großer Zahl vorkommen. Für viele Entwickler werden Sprites MovieClips als Standardbaustein ersetzen. flash.display.Loader Loader werden verwendet, um Inhalt zu fassen, der zur Laufzeit geladen wird, SWFs und Grafiken gleichermaßen. Beide ersetzen die Klasse MovieClipLoader und die Methode loadMovie() von vorherigen Versionen von ActionScript. Diese und die anderen Anzeigeobjekte sind für Anwendungen wesentlich, die die Player 9-Anzeigeliste verwenden. Wenn Sie Flex 2 verwenden, haben Sie Zugriff auf die Flash

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

13

Player-API und diese Klassen. Aber denken Sie daran, dass Sie eher Flex 2-Komponenten verwenden werden als diese Klassen. Die Möglichkeiten, Anzeigeobjekte zu manipulieren, sind ebenfalls vollkommen anders als bei vorherigen Versionen von ActionScript. Vergessen Sie alles, was Sie über createEmptyMovieClip, attachMovie und swapDepths wissen, und konzentrieren Sie sich auf die Anzeigeobjekte und Anzeigelisten:
var box:Sprite = new Sprite(); addChild(box); var jack:Sprite = new Sprite(); box.addChild(jack);

nahm, können Sie ihn einfach aus der Anzeigeliste entfernen, die ihn enthält. Die Anzeigeliste kann weiterhin von Ihnen verwendet werden (solange Sie eine Referenz darauf halten), aber es wird keine Zeit mehr damit verschwendet, sie zu rendern oder ihre Timeline auszuführen.
box.removeChild(jack); royalFlush.addChild(jack);

Sie können Objekten sogar andere Eltern geben und sie in ganz andere Container verschieben. Hier nehmen wir jack aus der box und nutzen ihn stattdessen, um unseren royalFlush vollständig zu machen. Sie sind am gewinnen! actionScript-Kerntypen ActionScript 3.0 fügt ein paar neue Kerntypen hinzu und unterstützt weiterhin alle, die in AS2 vorhanden waren. Es sei nochmals erwähnt, dass AS3 eine echte objektorientierte Sprache ist und all diese Typen Klassen sind. Zu den Kerntypen, die von vorherigen Versionen von ActionScript geerbt wurden, zählen: Number Eine Gleitkommazahl doppelter Genauigkeit. Date Eine Darstellung eines bestimmten Zeitpunkts. String Ein String, ganz ähnlich wie ein Java-String. Es gibt keinen Typ für ein einzelnes Zeichen.

Die erste Zeile erzeugt einen neuen leeren Sprite. Die zweite Zeile fügt die box unserer Anzeigeliste hinzu und macht sie sichtbar. Dann erzeugen wir einen weiteren neuen Sprite, diesmal einen Jack , und stecken jack in die box . Inhalte werden als Unterklassen behandelt. Wenn Sie tatsächlich ein Bild mit jack verknüpft hätten, könnten Sie ihm den Namen »Jack« geben und Jack wäre dann eine Unterklasse von Sprite . Jetzt ist die Klasse Jack einfach eine besondere Art von Sprite, die eine bestimmte Erscheinung hat. Das Konzept ersetzt Linkage-Namen und ist in Flex 2 und Flash 9 zu finden. Anstatt die Eigenschaft _visible aus früheren Versionen von Flash zu verwenden, die häufig dafür verantwortlich war, dass der unsichtbare Clip in jedem Frame Ressourcen in Anspruch

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

14

Boolean Ein Boolescher Wert, der true oder false ist. Array Eine nicht typisierte (sie kann Objekte unterschiedlicher Typen enthalten), automatisch größenangepasste Liste. Object Ein anonymes Objekt und die Wurzelklasse aller Klassenhierarchien in AS3. Eigenschaften können zur Laufzeit hinzugefügt werden. Das macht sie als Wörterbücher nützlich, die String-Schlüssel unterstützen. Function Eine Funktion. AS3 führt einige neue Kerntypen ein: int Eine vorzeichenhaftete (Zweierkomplement) 32-Bit-Ganzzahl. uint Eine vorzeichenlose 32-Bit-Ganzzahl. XML XML-Daten. Class Eine Laufzeitdarstellung einer Klasse. Speichert die statischen Eigenschaften und Methoden einer Klasse. Klassenreferenzen können mit dem new -Operator verwendet werden, um Instanzen der Klasse zu erzeugen.
TecFeeds © 2007 by O’Reilly Verlag

Namespace Die Repräsentation eines Namensraums. Error Der Basistyp für alle Exceptions. Sichtbarkeit ActionScript 3.0 bietet eine größere Granularität für das Setzen der Sichtbarkeit von Eigenschaften und Methoden als vorherige Versionen von ActionScript. Zusätzlich dazu hat sich die Bedeutung einiger Sichtbarkeitsmodifizierer seit ActionScript 2 geändert. public Wird verwendet, um Klassen, Eigenschaften, Methoden und Namensräume zu deklarieren, auf die jeder Aufrufer zugreifen kann. protected Wird nur innerhalb von Klassendefinitionen verwendet, um Eigenschaften, Konstanten, Methoden und Namensräume zu deklarieren, die für die deklarierende Klasse und all ihre Subklassen zugreifbar sind. private Wird in Klassendefinitionen verwendet, um Eigenschaften, Konstanten, Methoden und Namensräume zu deklarieren, die nur in der deklarierenden Klasse verfügbar sind. Strenger als seine Bedeutung in ActionScript 2.

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

1

internal Wird verwendet, um Klassen, Eigenschaften, Methoden und Namensräume zu deklarieren, auf die aus dem Paket zugegriffen werden kann, in dem sie deklariert wurden. Wenn Sie ein Sichtbarkeitsattribut bei einer Deklaration in einer Klassendefinition weglassen, weist AS3 implizit das Attribut internal zu. Außerdem ermöglicht Ihnen AS3, eigene Namensräume zu erzeugen und zu verwenden. Klassen, Eigenschaften und Methoden, die in einem eigenen Namensraum deklariert werden, sind für anderen Code im gleichen Namensraum und Code zugreifbar, der den Namensraum durch Verwendung der Direktive use namespace geöffnet hat. Oder Sie können den Namensqualifizierungsoperator ( :: ) verwenden, um den Namensraum anzugeben, in dem eine Eigenschaft zu finden ist. Für Ihren Namensraum können Sie jeden gültigen Bezeichnernamen verwenden. Sie können ihn auch an einen URI (Uniform Resource Identifier) binden. Wenn Sie eine Klasse, Eigenschaft oder Methode in einem eigenen Namensraum deklarieren, können Sie nicht gleichzeitig einen der vordefinierten Namensräume wie public oder private verwenden. Typmanipulation ActionScript 3.0 bietet eine große Menge an Werkzeugen zur sicheren und intelligenten Manipulation von Typen. Der Compiler führt Typprüfungen für Ihr Programm durch und kann, wenn Sie typisierte Variablen verwenden, bereits zur Laufzeit viele Fehler abfangen. Die Regeln, die erzwungen werden,

sind ziemlich gradlinig. Alle typisierten Parameter eines Funktionsaufrufs oder die Operanden eines Operators müssen in kompatiblen Typen angegeben werden. Bei Zuweisungen müssen eine Variable (die linke Seite) und der Ausdruck oder Wert, den Sie ihr zuweisen, kompatible Typen haben. Und einen Ausdruck oder ein Wert, der mit dem Schlüsselwort return zurückgeliefert wird, muss dem Typ der Funktion entsprechen. Außerdem speichert die AVM2 Typinformationen für alle Variablen, die mit einem Typ deklariert werden. In vorherigen Versionen von ActionScript hat der Compiler zur Kompilierzeit Typprüfungen durchgeführt, aber unter der AVM1 waren alle Objekte dynamisch typisiert. So konnten Sie den Typ von Variablen zur Laufzeit verändern und damit die Compiler-Prüfungen umgehen, beispielsweise indem Sie eine Variable über einen Suchvorgang referenzierten. Die AVM2 kann Typsicherheit auch zur Laufzeit erzwingen. Inkompatible Typzuweisungen lösen dann eine TypeError -Exception aus. Das sind gute Nachrichten, weil inkompatible Zuweisungen, die andernfalls stillschweigend scheitern können – und später Fehler verursachen und Sie zu Nachforschungen veranlassen –, jetzt unmittelbar identifizierbar sind. Den Typ eines Werts können Sie mit dem is -Operator untersuchen. Der is -Operator ersetzt den instanceof -Operator von ActionScript 2 und bietet die gleiche Funktionalität wie der instanceof -Operator von Java. Betrachten Sie folgenden Ausdruck:
a is B

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

16

a ist ein Objekt von Typ A , und B ist ein Typ. Der Ausdruck liefert true , wenn B gefunden werden kann, indem der Typhierarchie von A nach oben, d.h. in Richtung von Object , gefolgt wird. Beispielsweise gilt a is B , wenn: • A die gleiche Klasse ist wie B • A B erweitert • A B implementiert • A eine Kombination aus Obigem ist, z.B. A s Super-Superklasse B implementiert

eatDessert(chocolateCupcake); //chocolateCupcake wird als //Dessert behandelt. trace(chocolateCupcake is Dessert); //true

Dieses Beispiel übergibt einer Funktion, die ein Dessert erwartet, einen Cupcake. Aber die Typen sind kompatibel und der Code damit gültig. Eine andere Situation, in der Typen kompatibel sind, ist, wenn AS3 weiß, wie man einen Typ in einen anderen umwandelt. In bestimmten Situationen führt AS3 automatisch diese Typerzwingung durch, zum Beispiel:
var coerce:String = "Party like it's " + 2099;

Weiter oben habe ich den Grundgedanken kompatibler Typen erwähnt. Ein Typ ist mit allen Typen kompatibel, die sich in der gleichen Typhierarchie befinden und allgemeiner sind. Beispielsweise ist Dessert allgemeiner als Cupcake. Sie könnten auf einen bestimmten Cupcake (das ist übrigens eine Art Muffin) also problemlos als ein Dessert verweisen. ActionScript 3.0 lässt Sie ohne Schwierigkeiten Werte Variablen eines allgemeineren Typs zuweisen. Sie könnten also leicht Folgendes machen:
public function eatDessert(somethingTasty:Dessert):void { trace("hmm ... das ist gut " + somethingTasty.toString()); } var chocolateCupcake:Cupcake = Magnolia.getCupcake ("Schokolade");

Das zwingt den Integer 2099 zu einem String, den der + -Operator in einem String-Kontext erwartet. Es ist eine erwünschte Praxis in der objektorientierten Programmierung, gegen Schnittstellen und nicht gegen Implementierungen zu programmieren. Wenn Sie all Ihren Variablen den Typ IEdible geben, wie erhalten Sie dann einen Cupcake zurück, wenn Sie einen brauchen? Gelegentlich ist es erforderlich, Typen in die spezifischeren Typen umzuwandeln, und AS3 ermöglicht Ihnen, das mit zwei Arten expliziter Typumwandlung zu erreichen: einem Cast und einem bedingten Cast. Casting zwingt Variablen des einen Typs, einen anderen Typ anzunehmen. Um das Ergebnis dieser Operation einzufangen, sollten Sie es einer neuen Variablen des gewünschten Typs zuweisen, zum Beispiel
var cupcake:Cupcake = Cupcake(somethingTasty);

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

17

Java- und C-Entwickler sollten auf die Klammern achten, die den Ausdruck, nicht den Typ umgeben. Wenn diese Typumwandlung unmöglich ist, das heißt, wenn das Objekt, das Sie casten, nicht tatsächlich den Typ hat, den Sie anfordern, oder mit dem von Ihnen angeforderten Typ nicht kompatibel ist, wird ein TypeError ausgelöst. In diesem Beispiel muss Ihr somethingTasty , das aktuell den Typ Dessert hat, ursprünglich ein Cupcake gewesen sein.
var cupcake:Dessert = new Cupcake(); //einen Cupcake als //Dessert verwenden, OK var baklava:Dessert = new Baklava(); //eine Baklava als //Dessert verwenden, OK Cupcake(cupcake).addSprinkles(); //OK, weil es sein Leben als //Cupcake begonnen hat. Cupcake(baklava).addSprinkles(); //NICHT OK! Baklava ist mit //Cupcake nicht kompatibel!

sonderen Eigenschaften des as -Operators, kreativ kompakten Code wie in diesem Beispiel zu erstellen:
var cookie:Cookie; for each (var dessert:Dessert in desserts) { //Den as-Operator verwenden, um alle Cookies in einer //Dessert-Liste zu frosten. //Liefert null, wenn der Cast scheitert, und überspringt //dann den if-Block. if (cookie = dessert as Cookie) { cookie.frost(); } }

Der as -Operator führt einen bedingten Cast durch. Wenn die angeforderte Typumwandlung nicht möglich ist, liefert der Ausdruck einfach null zurück, anstatt einen TypeError auszulösen. Das hat Ähnlichkeiten mit einem dynamic_cast in C++ und dem Identitätsoperator in C#. Außerdem entspricht es mehr oder weniger dem Verhalten von Casts unter ActionScript 2. Wenn Sie das Ergebnis eines bedingten Casts nicht prüfen können oder bereits geprüft haben, dass die Typen kompatibel sind, sollten Sie stattdessen einen normalen Cast verwenden. Auf diese Weise können Sie eventuelle Probleme als Exceptions abfangen. Außerdem ermöglichen es die be-

Es ist hier auch erwähnenswert, wie sich ActionScript 3.0 um Initialisierungswerte kümmert. Wenn einer Variablen kein Wert zugewiesen wurde, sie aber einen bestimmten Typ hat, ist der Standardwert von diesem Typ abhängig. Ein int , dem kein Wert zugewiesen wurde, hat beispielsweise den Wert 0 , eine Number , der kein Wert zugewiesen wurde, den Wert NaN , und alle komplexen Typen haben den Standardwert null . Kerntypen, die Standardwerte haben, kann nicht null oder undefined zugewiesen werden. Der Wert undefined existiert noch, aber nur, um nicht typisierte Variablen, denen nichts zugewiesen wurde, zu repräsentieren. Im Allgemeinen können AS2Entwickler, die zu AS3 wechseln, die verwirrenden Unterschiede zwischen undefined und null vergessen und bei null bleiben.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

18

Pakete und Klassen Pakete sind ein Mittel, Code zu organisieren und Namenskollisionen zu vermeiden. In ActionScript 2 würden Sie die Klassendateien in eine Ordnerstruktur packen, die ihren vollständig qualifizierten Klassennamen definiert. Beispielsweise würde die Klasse com.partlyhuman.Banana in der Datei com/ partlyhuman/Banana.as definiert. In ActionScript 3.0 sind Pakete mehr als Dateinamen. Sie müssen den package -Block verwenden, um Pakete zu deklarieren, und nur Code, der innerhalb eines Paketblocks gefunden wird, ist außerhalb einer Datei sichtbar. Pakete werden auch eingesetzt, um den Zugriff zu steuern, wie Sie bei internal gesehen haben. Klassen werden in einem class -Block definiert. Um Ihre Klassen außerhalb der Datei sichtbar zu machen, in der sie geschrieben wurde, müssen Sie sie in einem geeigneten Paketblock einfügen und als public deklarieren:
//in Datei com/partlyhuman/Banana.as package com.partlyhuman { public class Banana { } }

Element spiegeln. Elemente, die in einem Paketblock deklariert werden, dürfen nur die folgenden beiden Zugriffsmodifizierer tragen: public und internal. Üblicherweise schreiben Sie Dateien mit einem Paketblock, der eine öffentliche Klasse oder Funktion enthält. Eine Ausnahme bildet die gebräuchliche Implementierung des Singleton-Musters, das globalen Zugriff auf eine einzige Instanz bietet und die Instantiierung weiterer Instanzen verhindert. Weil AS3 keine privaten Konstruktoren erlaubt, erfordert das Muster, dass ein Objekt an den Konstruktor übergeben wird, dessen Typ nur in dieser Datei sichtbar ist, damit zu dieser Klasse externer Code nicht dazu in der Lage ist, ein geeignetes Argument an den Konstruktor zu übergeben. Das macht den Konstruktor so gut wie privat:
package com.partlyhuman { public class SingletonDemonstration { private static var instance:SingletonDemonstration; public function SingletonDemonstration(enforcer: SingletonEnforcer) { //Initialisierungscode }

Pakete können nicht nur Klassen, sondern auch Funktionen, Variablen, Namensräume oder sogar Anweisungen enthalten. Es kann aber maximal ein Element in einer Datei außerhalb der Datei sichtbar sein, und der Name der Datei muss dieses

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

19

public static function getInstance(): SingletonDemonstration { if (instance == null) { instance = new SingletonDemonstration(new SingletonEnforcer()); } return instance; } } } class SingletonEnforcer {}

{ //Ballon initialisieren } public function pop():void { //Sie müssen die Methoden aller Interfaces //implementieren. Methoden aus einem Interface sind //immer öffentlich. } public function inflate():void { //aufblasen } } public final class Blimp extends Balloon { public function Blimp() { //den Superklassenkonstruktor aufrufen super(); //noch mehr nette Sachen machen } public function fly():void { //Ein Blimp ist wie ein Ballon, der fliegen kann, //oder was Ähnliches. } }

ActionScript 3.0 unterstützt ähnliche Vererbungsmuster wie Java. Klassen können eine Klasse erweitern und mehrere Interfaces implementieren.
public interface IPoppable { function pop():void } public interface IInflatable { function inflate():void } public class Balloon implements IPoppable, IInflatable { public function Balloon()

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

20

Hier wurde eine Balloon -Klasse erzeugt, die die Operationen unterstützt, die in den Interfaces IPoppable und IInflatable definiert werden. Diese Interfaces können nur Methoden definieren, und Sie müssen die Sichtbarkeit der Methoden nicht angeben: Alle müssen als public implementiert werden. Abstrakte Klassen oder virtuelle oder abstrakte Methoden sind nicht Teil von AS3. Sie können Abstraktheit zur Laufzeit erzwingen, indem Sie im Konstruktor Ihrer abstrakten Klasse oder in Ihrer abstrakten Methode Fehler auslösen. Das Beispiel oben zeigt auch ein Beispiel einer finalen Klasse. Finale Klassen können nicht erweitert werden. Sie sind die letzten Klassen in ihrer Klassenhierarchie. Das verhindert, dass irgendjemand Ihren hart erarbeiteten Blimp -Code nimmt und zum Bösen wendet, indem er MissileBlimps und LaserBlimps erzeugt. In der Realität kann das für Klassen benutzt werden, die zur Verwendung angeboten werden, aber nicht erweitert werden sollen, beispielsweise flash.system.Security . Klassen können auch als dynamic deklariert werden. Wird dieses Schlüsselwort nicht verwendet, sind Klassen versiegelt: Ihre Eigenschaften und Methoden sind in Stein gemeißelt und können zur Laufzeit nicht verändert werden. Mit dynamic können Sie zur Laufzeit auf die Eigenschaften und Methoden von Klassen zugreifen und diese verändern. Das kann nützlich sein, um einfache Wrapper für Daten zu erzeugen, beispielsweise um beliebige Daten in Object-Instanzen zu speichern. Dynamische Klassen können aus einigen der Optimierungen der AVM2 keinen Vorteil ziehen. Nutzen Sie sie also nur, wenn es erforderlich ist.
TecFeeds © 2007 by O’Reilly Verlag

Methoden und Eigenschaften Fügen wir der Klasse Blimp noch etwas hinzu:
public final class Blimp extends Balloon { private const TAKEOFF_PRESSURE:Number = 10000; private var currentPressure:Number; public function Blimp() { super(); currentPressure = 100; } override public function pop():void { //Schiff verlassen! } override public function inflate():void { //auf gleiche Weise aufblähen wie einen Ballon //und eigene Verhalten ergänzen super.inflate(); if (currentPressure >= TAKEOFF_PRESSURE) fly(); } public function fly():void { //flieg, flieg, majestätischer Blimp! } }

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

21

In AS3 wurden ein paar neue Features eingeführt, die hier demonstriert werden. ActionScript 3.0 schließt einige Konstanten ein, Variablen, deren Wert nicht verändert werden kann. Der Compiler hält Sie auf, wenn Sie versuchen, eine zweite Zuweisung zu einer Konstanten oder eine Zuweisung von außerhalb der Klassendefinition zu machen. Die inflate() -Methode von Blimp nutzt die Konstante TAKEOFF_PRESSURE , um zu prüfen, ob der Blimp abhebebereit ist. Konstanten werden mit dem Schlüsselwort const statt dem Schlüsselwort var deklariert. Vielleicht ist Ihnen auch aufgefallen, dass die Methode pop() als override und als public gekennzeichnet ist. ActionScript 3.0 erlaubt Ihnen, Methoden zu schreiben, die auch in der Superklasse vorhanden sind. Aber Sie müssen dem Compiler mit dem Schlüsselwort override bestätigen, dass Sie diese Methode bewusst überschreiben. Die überschreibende Methode kann die ursprüngliche Implementierung aufrufen, indem sie die gleiche Methode auf dem super -Objekt aufruft, das eine Referenz auf die Superklasse der Klasse ist. Die Signatur der überschreibenden Methode muss vollständig der Signatur der überschriebenen Methode entsprechen. ActionScript 3.0 unterstützt nur eine Methode mit dem gleichen Namen. Das bedeutet, dass Sie keine Überladungen machen können, bei denen eine Methode auf Basis der Eingaben unterschiedliche Operationen ausführen kann. Allerdings können Sie immer eine variable Argumentliste verwenden (siehe unten), um das zu erreichen.

Statische Variablen oder Klassenvariablen sind in ActionScript 3.0 wie in AS2 möglich. Statische Variablen werden mit dem Schlüsselwort static deklariert. Diese Variablen gehören zur Klasse selbst und sind über alle Instanzen einer Klasse gleich. Das könnte in Ihrem Blimp verwendet werden, um Eigenschaften zu speichern, die in allen Blimps gleich sein sollten, wie die Anzahl der Räder oder die Landevorrichtung. ActionScript 3.0 unterstützt implizite wie explizite Akzessormethoden. Explizite Akzessormethoden sind gewöhnliche Methoden, die Werte abrufen oder setzen. Ein Beispiel dafür wäre, wenn die Klasse Blimp setAltitude() - und getAltitude() Methoden hätte, die die interne Höhe des Blimps manipulieren. Akzessormethoden bieten eine Alternative zur Deklaration öffentlicher Instanzvariablen und geben Ihrer Klasse die Möglichkeit, den zu setzenden Wert zu prüfen oder zusätzliche Operationen auszuführen, wenn der Wert gesetzt wird. Das ist eine gute Praxis, der Sie folgen sollten, um die Kapselung zu wahren. Implizite Akzessormethoden ermöglichen es Clientcode, die Illusion aufrechtzuerhalten, eine Eigenschaft direkt auf Ihrer Klasse zu setzen, und erlauben Ihnen trotzdem, in den Vorgang einzugreifen. An Stelle von
public function setAltitude(newAltitude:Number):void {…} public function getAltitude():Number {…} myBlimp.setAltitude(10);

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

22

könnten Sie implizite Akzessormethoden verwenden, indem Sie Folgendes schreiben:
public function set altitude(newAltitude:Number):void {…} public function get altitude():Number {…} myBlimp.altitude = 10;

stehen, kompatible Typen haben, und es dürfen keine Parameter fehlen. ActionScript 3.0 ergänzt allerdings einige Werkzeuge, die es ermöglichen, diese Anforderungen zu entspannen und Bequemlichkeit sowie Flexibilität liefern. Standardwerte sind eine neue Ergänzung zu ActionScript, die aus der C++-Welt stammt. Sie können einige Parameter für Ihre Funktion optional machen, indem Sie direkt in der Argumentliste Standardwerte für diese Argumente deklarieren. Beispielsweise könnten Sie eine komplexe Operation mit vielen Optionen haben:
function makeDagwood(layers:int, meat:String, cheese:String, bread:String, mayo:Boolean, mustard:Boolean, lettuce:Boolean): Sandwich {…}

Schließlich unterstützt ActionScript 3 Methoden-Closures oder gebundene Methoden. Eine Closure ist eine Funktion, die auf Variablen im umgebenden Block verweisen kann, egal von wo sie aufgerufen wird. Das ist, als würden Sie eine Funktion in einen eigenen Geltungsbereich einpacken. Vielen AS2Entwicklern wird Code wie der folgende vertraut sein:
var closure:Function = Delegate.create(this, doFoo);

der eine Closure erzeugt. Jedes Mal, wenn Sie closure() ausführen, wird doFoo() im ursprünglichen Geltungsbereich aufgerufen, aus dem Sie Delegate.create() aufgerufen hatten. In AS3 sind alle Methoden in einer Klasse ohne weitere Arbeit an diese Klasse gebunden. Selbst wenn Sie diese Methoden aus einem Event-Handler oder über eine Referenz auf die Methode aufrufen, die als Funktion übergeben wurde, kann die Methode also auf die Methoden und Eigenschaften der Besitzerklasse zugreifen. argumente Der ActionScript 3.0-Compiler erzwingt, dass Ihre Funktionsaufrufe den Signaturen der Funktionen entsprechen. Im Allgemeinen müssen Parameter in der richtigen Reihenfolge

Sie wollen zwar, dass Benutzer vollständige Kontrolle über ihr Sandwich haben, wollen Ihren Code aber auch kompakt halten und geben vernünftige Standardwerte vor:
function makeDagwood(layers:int, meat:String, cheese:String, bread:String, mayo:Boolean = true, mustard:Boolean = true, lettuce: Boolean = true):Sandwich {…}

Wenn ein Kunde mit den Beilagen auf seinem Sandwich zufrieden ist, kann er den Funktionsaufruf einfach halten:
makeDagwood(3, "Turkey", "Muenster", "Wheat"); //standardmäßig keine Beilagen

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

23

makeDagwood(3, "Roast Beef", "Swiss", "Rye", false, false, true); //keine Mayo, kein Senf

Alle Parameter mit Standardwerten müssen am Ende der Argumentliste stehen und sind beim Funktionsaufruf dann optional. Sie können auch eine Funktion definieren, die eine variable Anzahl von Argumenten annimmt. Das arguments -Array von ActionScript 2 gibt es noch. Jedes Function -Objekt enthält die Eigenschaft arguments , die ein Array aller Parameter ist, die der Funktion übergeben wurden. ActionScript 3.0 verlangt allerdings, dass Sie Ihre Parameter ordentlich angeben, deswegen wurde das Schlüsselwort ... eingeführt. Es ermöglicht Ihnen, ein paar Parameter zu verlangen und nach ihnen eine beliebige Zahl weiterer Parameter zuzulassen.
function addSandwichRecipe(sandwichName:String, ... layers):void {…}

addSandwichRecipe("PB&J", bread, peanutButter, jelly, bread); addSandwichRecipe("The English King", englishMuffin, peanutButter, banana, honey); addSandwichRecipe("The Ultra Slim"); //Das ist zulässig! Es //muss ein Luft-Sandwich sein.

Eine letzte Bemerkung zu Parametern für ActionScript 2-Entwickler: Um Funktionen anzugeben, die null Parameter verlangen, verwenden Sie function foo() und nicht function foo(Void) wie unter AS2. Events ActionScript 3.0 bietet Ihnen ein einheitliches, eingebautes und standardbasiertes Event-Framework, über das Sie Ihre Anwendung über Benutzereingaben steuern und Ihre kollaborierenden Klassen entkoppeln können. Mit der Methode addEventListener() können Sie Events abonnieren. Diese Methode wird von allen Klassen definiert, die IEventDispatcher implementieren, und dazu zählt eine ganze Menge von Klassen. Das neue Event-Modell ersetzt alle Callback-Methoden aus früheren ActionScript-Versionen. Beispielsweise nutzen wir das Event-Modell, um die onClick() Funktion auf einem Button zu definieren:
myButton.addEventListener(MouseEvent.CLICK, onButtonClicked); function onButtonClicked(event:MouseEvent):void { myButton.label = "Hör mit der Klickerei auf!";

Innerhalb von addSandwichRecipe() enthält das Array layers alle zusätzlichen Parameter, die der Funktion übergeben wurden. Sie können jeden gültigen Bezeichner verwenden, um die zusätzlichen Parameter zu speichern. Ein typischer Name für dieses Array ist rest . Gelegentlich hören Sie deswegen vielleicht, dass das Schlüsselwort ... als das Rest-Schlüsselwort bezeichnet wird. Weil es vor dem Rest-Schlüsselwort ein normales Argument gibt, erfordert diese Methode einen Rezeptnamen:

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

24

myButton.removeEventListener(MouseEvent.CLICK, onButtonClicked); }

Die erste Zeile richtet einen Event-Listener für einzelne Klicks auf dem Butten myButton ein. Bei Anklicken des Buttons wird die Methode onButtonClicked() aufgerufen. Beachten Sie, dass die Event-Handler-Methode, die Sie bei einem Event-Listener registrieren, ein Event als Parameter akzeptieren muss. In diesem Fall wissen wir, dass das Event ein MouseEvent sein wird, und geben event den Typ MouseEvent , eine Subklasse von Event . Eine einfache, aber entscheidende Verbesserung in den eingebauten Events ist, dass AS3 Konstanten verwendet, um alle Event-Typen zu definieren. Hier repräsentiert MouseEvent.CLICK einen Event-Typ, der überwacht werden soll. Aber dieser Event-Typ ist einfach ein String. Irgendwo in der Klasse MouseEvent steht:
public static const CLICK:String = "click";

einen Klick auf myButton angestoßen wurde, wird sie immer noch im Geltungsbereich des Codes ausgeführt, in dem sie hinzugefügt wurde. ActionScript 3.0 erzeugt eine gebundene Methode für sie, wenn Sie addEventListener() aufrufen, und bindet die Listener-Funktion an ihren Eigentümer; damit wird das Schreiben von Event-Handlern intuitiver. Schreiben Sie sie einfach wie jede andere Methode und referenzieren Sie sie, ohne Delegate.create() zu verwenden. Das Objekt, das das Event absetzt, ist immer über event.target verfügbar. Das Beispiel zeigt auch, wie man einen Event-Listener entfernt, nachdem das Label des Buttons verändert wurde. Es ist wichtig, dass Sie Ihre Event-Listener bereinigen, wenn sie nicht mehr gültig sind. Sollten Sie vergessen, einen Event-Listener zu entfernen, wird das Objekt nicht durch die Garbage Collection erfasst und kann weiterleben und Speicherplatz verschwenden. Diese nicht eingesammelten Objekte können sich häufen und nach und nach Auswirkungen auf die Leistung Ihrer Anwendung haben. Um diesen Effekt, eine Art von Speicherleck, zu vermeiden, ermöglicht Ihnen ActionScript 3.0, einen Event-Listener mit einer schwachen Referenz anzuknüpfen, die es erlaubt, dass das Objekt auch dann gelöscht wird, wenn der Event-Listener nicht explizit entfernt wurde. Um eine schwache Referenz zu aktivieren, übergeben Sie true an den letzten Parameter von addEventListener() , weakRef :
myButton.addEventListener(MouseEvent.CLICK, onButtonClicked, false, 0, true);

Über die ganze neue AS3-API verteilt und insbesondere in den Event-Paketen werden Sie sehen, dass magische Strings durch Konstanten ersetzt werden. Wenn Sie Konstanten verwenden, kann der Compiler Tippfehler abfangen, bevor sie zu Fehlern werden. Zurück zu unserem Button-Beispiel: Vielleicht ist Ihnen auch aufgefallen, dass der Event-Handler, onButtonClicked() , auf myButton statt auf this verweist. Auch wenn die Funktion durch

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

2

Das ActionScript 3.0-Event-Modell ist eng an die Anzeigeliste gebunden. Events durchlaufen drei Phasen, nachdem sie abgesetzt wurden. Das verschafft Ihnen eine feinstufige Steuerung darüber, wann und wo Sie sie einfangen und auf sie reagieren wollen. Gemeinsam werden diese drei Phasen als Event-Flow bezeichnet. Stellen Sie sich das als eine Reise vor, die Ihr Event durch die Anzeigeliste macht und bei der Sie an jedem Punkt der Reise die Möglichkeit haben, es abzufangen, zu untersuchen und eventuell sogar anzuhalten. Ich denke, dass der Event-Flow so was wie das Bubble BobbleSpiel ist, das in Abbildung 2 gezeigt wird. In Bubble Bobble steuern Sie einen kleinen Drachen, der die Fähigkeit hat, kleine Blasen nach vorn zu blasen. Wenn Sie sich auf einer Linie mit einem Feind befinden und Ihre Blase weit genug kommt, um ihn zu treffen, wird der Feind in der Blase eingeschlossen. Dann schwebt die Blase mit dem hilflosen Feind an den oberen Rand des Bildschirms und wartet darauf, dass Sie sie platzen lassen. Wäre dieses Spiel der Event-Flow, wäre der Feind der Gegenstand eines Events. Das Spielfeld würde Ihre Möglichkeiten repräsentieren, das Event zu untersuchen oder zu unterbrechen. Nehmen wir an, der Benutzer klickt auf einen Button. Erst blasen Sie eine Blase, die sich auf den Weg zum Feind macht. Das wird als die Einfang-Phase bezeichnet. Im Flash Player reist das Event in der Hierarchie der Anzeigeobjekte nach unten, von der Wurzel der Anzeigeliste (der Bühne) bis zu dem Button, der angeklickt wurde. Wenn Sie einen Event-Listener für die Einfang-Phase auf einem Objekt eingerichtet haben, das

abb. 2 Event-Bubbling ist wie Bubble Bobble: Es gibt Einfang-, Zielund Bubbling-Phasen.

ein Vorfahr des Buttons ist, können Sie auf den Klick reagieren, bevor der Button das macht, obwohl das Event eigentlich für den Button gedacht ist. Dann schließt die Blase den Feind ein. Das ist die Ziel-Phase. Damit wird das target eines Event-Objekts auf diesen Button gesetzt, und von jetzt an ist der Feind in der Blase eingesperrt. Wenn Sie den Button direkt abonniert haben, ohne die Einfang-Phase anzugeben, ist das der Punkt, an dem Sie das Event erhalten. Das ist der gradlinigste Weg, mit Events umzugehen, und der, der ActionScript 2-Entwicklern am vertrautesten ist. Schließlich steigt die Blase in der Bubbling-Phase auf dem Bildschirm nach oben auf. Während im Event immer noch das richtige target gesetzt ist, steigt das Event wieder zur Wurzel des Anzeigebaums auf, damit die Vorfahren des Buttons eine Möglichkeit erhalten, das Event zu untersuchen oder zu verwenden. Dieses Bubbling erfolgt automatisch, wenn die bubbles -Eigenschaft Ihres Events true ist. Die Bubbling-Phase ist nützlich, wenn Sie ein eigenes Event an die Außenseite eines

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

ActionScript 3.0

26

komplexen Subsystems übergeben möchten. Nehmen wir an, das alarm -Event wird von einem vibrierenden Quarzkristall in Ihrer Uhr ausgelöst. Ohne zusätzliche Arbeiten auszuführen oder das Gehäuse Ihrer Uhr zu zerbrechen, um den Quarz direkt zu betrachten, können Sie informiert werden, dass es Zeit für einen Snack ist, wenn Sie sich dafür bei Ihrer Uhr registrieren. Das Alarm-Event steigt vom Quarzkristall zur Uhr auf. Während jeder dieser Phasen können viele Events mit den Methoden stopPropogation() und stopImmediatePropogation() abgebrochen werden. Das ist, als würde Ihr Drache die Blase mit seinem stacheligen Rücken zum Platzen bringt, um zu sichern, dass andere Spieler sie nicht erreichen können. Das Event muss allerdings als cancelable deklariert sein. Es gibt also einige harte Blasen, die Sie nicht zum Platzen bringen können. Reflection ActionScript 3.0 bietet Reflection-Features. Reflection ist eine Einrichtung, die es einem Programm ermöglicht, sich zur Laufzeit seines Verhaltens bewusst zu sein und es zu verändern, insbesondere durch die Entdeckung und Erzeugung von Objekten und ausführbaren Konstrukten. Frühere Versionen von ActionScript ermöglichten Ihnen eine rudimentäre Reflection, indem die verfügbaren Methoden einer Klasse mit einer for...in -Schleife aufgelistet wurden und die Eigenschaften und Methoden von Klassen über den Namen in einer Notation mit eckigen Klammen angegeben wurden, beispielsweise obj["method"]() . In ActionScript 3.0 kön-

nen Sie über die Notation mit den eckigen Klammern immer noch dynamisch auf Eigenschaften zugreifen. Allerdings durchläuft eine einfache Schleife nur noch die dynamisch hinzugefügten Eigenschaften. Diese Art von Reflection, Introspektion, bietet zur Laufzeit Informationen zu Typen und Objekten. AS3 stellt viel bessere Werkzeuge für die Introspektion zur Verfügung. Die Funktion flash.utils.describeType(classOrClassInstance) bietet Ihnen zu der übergebenen Klasse beinahe lächerlich ausführliche Informationen in XML, die die vollständige Typhierachie, Methoden und Parameter mit Typen, Eigenschaften und Akzessormethoden einschließt. Die Klasse mx.utils.ObjectUtil bietet außerdem eine getClassInfo() -Funktion, die so ziemlich das Gleiche macht. Neben der Entdeckung von Informationen zu einer Klasse, auf die Sie bereits eine Referenz halten, lässt AS3 Sie Klassen, Namensräume und Funktionen auf Grundlage von Strings suchen. Das kann äußerst mächtig sein, beispielsweise um einen Anwendungszustand und Klassenabhängigkeiten zu Text zu serialisieren und die Klassen dann aus Text zu rekonstruieren. Hier speichern wir den Namen einer Anzeigeobjekt-Klasse und erzeugen ein Objekt einer anderen allein auf Basis des Klassennamens:
import flash.utils.*; var mySprite:Sprite = new Sprite(); var className:String = getQualifiedClassName(mySprite); trace(className); //flash.display.Sprite

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

27

Alert; //Erzwingt die Kompilierung der Klasse, damit //Laufzeitcode sie nutzen kann. try { var ClassReference:Class = getDefinitionByName ("mx.controls.Alert") as Class; addChild(new ClassReference()); } catch (error:ReferenceError) { trace("Wir konnten diese Klasse nicht nachschlagen"); }

Dieser TecFeed bietet keine Behandlung des Designmodus von Flex Builder 2. Alle Beispiele können in den MXML-Editor von Flex Builder 2 oder einen Texteditor Ihrer Wahl eingegeben und mit dem Flex 2-SDK kompiliert werden. Außerdem wird dieser TecFeed Sie an den wichtigsten Klassen schnuppern lassen, ist aber in keiner Weise ein erschöpfendes Handbuch. Ihre erste Adresse für Informationen rund um die im Flex-Framework verfügbaren Klassen sollte die Flex 2-Dokumentation unter http://www.flex.org sein, die auch mit Ihrem Exemplar des Flex Builder 2 gebündelt ist. Im Zweifelsfall gilt: RTFM! Flex ist immer actionScript Wahrscheinlich sind Sie begierig darauf, endlich mit dem Programmieren anzufangen. Es gibt aber ein Konzept, das Ihnen unglaublich helfen kann. Sie sollten es verstanden haben, bevor Sie Ihre erste Zeile MXML geschrieben haben: Flex ist immer ActionScript, auch MXML. Wenn Sie Ihr Flex 2-Projekt kompilieren, werden Ihre MXMLDateien als Zwischenschritt auf dem Weg zu einem SWF tatsächlich in ActionScript 3.0-Dateien umgewandelt. Alles, was Sie in MXML programmieren, können Sie in ActionScript programmieren. MXML ist eine eigenständige Sprache, aber Sie können sie sich als eine andere Form vorstellen, ActionScript zu schreiben. Im Folgenden finden Sie die Regeln, die MXML definieren.

Beachten Sie, wie wir Klassen als Objekte speichern und sie dann tatsächlich mit new instantiieren können. Zusammenfassung ActionScript 3.0 führt eine Menge neuer Fähigkeiten und eine vollständig überarbeitete API ein, die gemeinsam Flex 2 möglich machen. Mit diesen Grundlagen können Sie jetzt anfangen zu lernen, wie Sie das Flex-Framework und MXML einsetzen.

Was Flex mitbringt
Flex ist gut geeignet für Rapid-Prototyping. Beginnen wir also damit, eine Anwendung aufzubauen. Das Ziel dieses Abschnitts ist es, die Fähigkeiten zu illustrieren, die Flex 2 mit im Gepäck hat, indem wir eine Anwendung entwickeln und dazu die vorhandene Menge an Flex 2-Komponenten verwenden.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

28

TaG-naMEn

Wenn Sie <mx:Button/> schreiben, reden Sie eigentlich nur über die Klasse Button . Schreiben Sie drei <mx:Label/> , erhalten Sie drei Instanzen von Label . Tags erzeugen Instanzen der Klasse, die durch den Tag-Namen angegeben wird.
TaG-aTTRIbUTE

Blitz) oder einem Effekt-Trigger (blaues Leuchten) vervollständigt werden. Die Attribute eines Tags werden zu Eigenschaften der Instanz.

Id-aTTRIbUT

Wenn Sie in ein Tag Attribute schreiben, setzen Sie die Attribute dieser Klasseninstanz: Eigenschaften, Event-Handler und Effekt-Trigger. In Abbildung 3 erzeugt das Tag namens <mx: Button/> eine Instanz der Klasse Button , setzt aber auch seine label - und width -Eigenschaften und seine font-size - und font-family -Styles.

Das wichtigste aller Attribute ist das Attribut id . Das Attribut id kann auf jedem Tag gesetzt werden. Wie im (X)HTML DOM ist die id eines Elements das Handle, über das Sie auf das Element zugreifen können. Aber weil Tags zu Klasseninstanzen werden, wird die id zum Namen der Instanz. Weisen Sie einem Tag so eine ID zu:
<Button id="mrClicker"/>

ist das das Gleiche, als würden Sie in der gleichen Datei Folgendes schreiben:
public var mrClicker:Button;
abb. 3 Attribute der Klasse werden gesetzt, indem sie in das Tag geschrieben werden.

Die id eines Tags wird zum Namen einer öffentlichen Eigenschaft, die diese Instanz enthält.

Sie können die Autovervollständigungsfunktion von Flex Builder 2 einsetzen, um sich einen Hinweis auf den Typ des Attributs geben zu lassen, das vorgeschlagen wird. Oben könnten die mit »c« beginnenden Attribute zu einer Eigenschaft (der grüne Kreis), einem Style (lila Kasten), einem Event (gelber

GESChaChTElTE TaGS

In MXML ist das Schachteln eine Metapher für die Zusammensetzung. Das heißt, die folgenden beiden Zeilen repräsentieren das gleiche Konzept:

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

29

<mx:Box><mx:Button/></mx:Box> <!-- einen Button in einer Box erzeugen--> (new Box()).addChild(new Button()); //einen Button in einer //Box erzeugen

Flex Builder 2 unterstützt Sie sogar noch mehr, wenn Sie Ihren Code im MXML-Editor schreiben. Nutzen Sie die Autovervollständigung, wenn sich der Cursor innerhalb eines Tags befindet, zeigt Flex Builder nur die Tags an, die an der aktuellen Cursorposition innerhalb des Eigentümer-Tags zulässig sind. Beispielsweise würde er in der Autovervollständigungsliste in einem Button das Tag <mx:Button/> nicht zeigen, weil Sie in einen Button keinen anderen Button stecken können. Kind-Tags werden Kind-Komponenten.

<mx:Label text="My Label"/> <mx:Label> <mx:text>My Label</mx:text> </mx:Label> <mx:Label>My Label</mx:Label>

Alle hier angegebenen Labels sind identisch. Das letzte Beispiel illustriert eine Default-Eigenschaft. Wenn eine Komponente eine Default-Eigenschaft hat und Sie einen Klartextknoten in das Tag einschließen, wird dieser Text der DefaultEigenschaft zugewiesen. In diesem Fall ist die Default-Eigenschaft von Label text .
KlaSSEn Und daTEIEn

attribut-Tags und default-Eigenschaften Manchmal ist es nützlich, wenn man Attribute in ein Tag setzt, statt sie als XML-Attribute anzugeben, beispielsweise wenn das Attribut mehrere Zeilen Inhalt hat oder selbst weiteren Text enthält. Sie können jedes Attribut für ein Tag durch ein Kind-Tag ersetzen, dessen Name der Attributname ist. Sie können auf einen Blick sagen, wann ein Tag ein Attribut repräsentiert, weil der Tag-Name dann in Kleinbuchstaben notiert ist.

Jede MXML-Datei repräsentiert eine AS3-Klasse, bei der der Name der Datei und der Ort in der Ordnerstruktur den Paketund Klassennamen definieren. Der Inhalt der MXML-Datei ist das, was die Klasse erzeugen wird, wenn Sie sich entschließen, sie zu instantiieren und anzuzeigen. Dieser Vorgang ist logisch. Betrachten Sie als Beispiel fr/louvre/MonaLisa.mxml :
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="210" height="310"> <mx:toolTip>Die Mona Lisa, von Leonardo da Vinci </mx:toolTip> <mx:Image source="monalisa.jpg" width="100%" height="100%"/> </mx:Canvas>

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

30

Sie erzeugt die Klasse fr.louvre.MonaLisa und zeigt eine Gafik mit einem Tooltip an (beachten Sie die Kleinbuchstaben: toolTip ist eine Eigenschaft der Canvas -Instanz, keine eigenständige Klasse). Das Wurzel-Tag jeder MXML-Datei ist die Klasse, die sie erweitert. Jede MXML-Datei muss ein Wurzel-Tag haben, also muss jede Klasse, die von einer erzeugt wird, irgendetwas erweitern – und wenn es Object ist. MonaLisa erweitert Canvas . Jetzt, daSie eine MonaLisa -Klasse haben, können Sie außerdem Instanzen von ihr erzeugen, entweder in MXML oder in ActionScript. Indem Sie Gruppen von zusammenarbeitenden Komponenten zusammen in Dateien platzieren, können Sie Ihre Anwendung auf viele MXML-Dateien aufteilen, so wie Sie einen Flash-Film in viele Klassen und MovieClips segmentieren können. Sie könnten eine MonaLisa folgendermaßen in ActionScript einschließen:
import fr.louvre.MonaLisa; addChild(new MonaLisa());

In MXML erfüllen XML-Namensräume ungefähr die gleiche Aufgabe wie Importanweisungen in ActionScript. XMl-namensräume Ein Namensraum in XML dient dem gleichen Zweck wie ein Paketname in ActionScript: Er dient dazu, Namenskollisionen zu vermeiden und Klassen zu organisieren. Wahrscheinlich ist Ihnen das mx: -Präfix vor all den Tags für eingebaute Flex 2-Komponenten aufgefallen. Es ist erforderlich, um anzugeben, dass die Tag-Namen in den MXML-Namensraum gehören. Das gilt für alle Klassen, die von Flex 2 definiert werden. Der mx -Namensraum wird automatisch definiert, wenn Sie eine MXML-Anwendung in Flex Builder 2 erstellen. Die Syntax für die Deklaration und Verwendung eines XMLNamensraums sieht folgendermaßen aus:
<rootTag xmlns:Präfix="URI oder Paket" … > <Präfix:childTag />

Aber wenn Sie in einer MXML-Datei die richtige Klasse referenzieren wollen, müssen Sie in das Wurzel-Tag einen XMLNamensraum einschließen:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:louvre="fr.louvre.*"> <louvre:MonaLisa /> </mx:Application>

Das Präfix wird bei der Deklaration nach dem Doppelpunkt angegeben. Bei der Verwendung geben Sie es vor dem Doppelpunkt an, um anzuzeigen, wo nach einer Klasse gesucht werden soll. Ein XML-Namensraum muss einen eindeutigen Bezeichner haben, der dem Compiler sagt, was er gerade vor sich hat, da das Präfix willkürlich ist und von Ihnen frei angegeben werden kann. Wenn Sie http://www.adobe.com/2006/ mxml schreiben, zieht der Compiler nicht wirklich raus und prüft diese URL. Sie wird nur genutzt, um festzustellen, dass Sie den MXML-Namensraum referenzieren.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

31

Statt Ihre eigenen Schemata zu erzeugen oder auf eine URL zu verweisen, nutzen Sie den Paketnamen, wenn Sie auf ein Paket verweisen. Außerdem müssen Sie einen separaten Namensraum für alle Klassen in einem anderen Paket erzeugen. Wenn Sie die Klassen fruit.Apple , fruit.Orange und cheese.Swiss haben, müssen Sie zwei Namensräume erzeugen: einen für fruit.* und einen für cheese.* . Sie nutzen den Namensraum * , um auf das lokale Paket zu verweisen.
aCTIOnSCRIPT hInZUFüGEn

METHODEN"); } ]]> </mx:Script>

Sie können nicht nur Komponenten, die zusammenarbeiten, zu einer funktionalen Einheit gruppieren, Sie können in eine MXML-Datei in einem Script -Block auch ActionScript 3.0Code einbetten. Diese Blöcke sollten den Code in einem CDATA-Abschnitt enthalten, um sicherzustellen, dass Sie Dinge wie einen Kleiner-gleich-Vergleich nicht maskieren müssen (denken Sie daran, dass MXML immer noch gültiges XML ist). Code aus einem Script -Block wird in die Klasse eingefügt, die aus Ihrem MXML generiert wird, damit er im Geltungsbereich der umgebenden Klasse operieren kann. Die Ausnahme bilden Importanweisungen, die in einen Script Block kommen (obwohl sie normalerweise in einem Paketblock außerhalb der Klasse erscheinen würden), zum Beispiel:
<mx:Script> <![CDATA[ private function taunt():void { trace("BIN IN DEINER KLASSE UND ERGÄNZE EIN PAAR

Objektorientierte Programmierung führt also Klassen ein, die Daten und die Operationen auf diesen Daten vereinen. Deklarative Markup-Sprachen wie MXML können Daten, Operationen und sichtbare Schnittstellen vereinen. Wie, fragen Sie sich vielleicht, kann man dann die Trennung der Verantwortlichkeiten bewahren, wo doch die Bewegung, die uns überhaupt erst zu deklarativem Markup geführt hat, die Trennung von Verhalten, Stil und Inhalt gepredigt hat. Die einfache Antwort ist, dass die Trennung Ihrem eigenen Programmierstil und Ihrer Diskretion überlassen bleibt. Wie Sie sehen werden, ist eine vollständige Trennung mitunter ein Irrweg und manchmal sogar gar nicht möglich. Generiertes actionScript betrachten Sie können Einblick in die ActionScript-Dateien nehmen, zu denen Ihr MXML kompiliert wird, um sie als Lernmittel zu verwenden oder um seltenen Compiler-Fehlern oder -Warnungen auf den Grund zu gehen, die auf das generierte ActionScript verweisen. Übergeben Sie dem Flex-Compiler einfach das Argument –keep . Beim nächsten Erstellen erscheinen die generierten ActionScript 3.0-Dateien im Ordner generated/ . Mehr Informationen zum Setzen von Compiler-Argumenten finden Sie in der Flex-Dokumentation.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

32

Container und Komponenten Um zu zeigen, wie sich Flex beim Aufbau von Anwendungen hervortut, werden wir einen minimalistischen E-Mail-Client zusammenbasteln, der tatsächlich E-Mails liest. Wir werden mit einigen sehr kleinen Teilen der Anwendung beginnen und sie dann ausbauen. Der Quellcode für das fertige Produkt steht unter http://www.partlyhuman.com/books/flexshortcut/ zum Download bereit.
aPPlICaTIOn

<mx:Panel width="75%" height="75%" layout="vertical" title="Neue E-Mail"/>

Für die meisten Breiten und Höhen können Sie Prozentwerte oder numerische Werte angeben. Einfache Zahlen werden in Pixeln gemessen, und Prozentwerte geben den Anteil des verfügbaren Platzes an. Wenn Sie in ActionScript Maße setzen, werden für Pixelwerte die Attribute width und height verwendet. Sie müssen die separaten Parameter percentWidth und percentHeight setzen, um Maße über Prozentwerte anzugeben.
bOXEn

Die erste Klasse, mit der Sie arbeiten werden, ist eine Application . Eine Subklasse von Application definiert eine neue Flex 2-Anwendung. Wir werden die Datei Mail.mxml mit einer leeren Application erzeugen. Unsere Klasse Mail erweitert also Application und macht sonst nichts:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> </mx:Application>

Führen Sie diese Anwendung aus, sollten Sie einen leeren Bildschirm sehen (mit dem Signaturgradienten von Flex 2 im Hintergrund).
PanEl

Wir beginnen mit dem Fenster zum Schreiben von E-Mails. Wir können ein Panel , das ein Container mit ein paar Dekorationen für einen Titel und einem fensterartigen Rahmen ist, als unser Verfassen-Fenster erzeugen:

Boxen sind einfache Layoutelemente, die verwendet werden, um Objekte zusammenfließen zu lassen. Sie können entweder eine Box oder die spezifischeren Subklassen HBox und VBox verwenden. Eine HBox hat ein horizontal fließendes Layout: Wenn Sie Elemente hinzufügen, fließen diese von links nach rechts wie die Wörter auf einer Zeile oder wie in HTML, wenn der display -Style auf inline gesetzt ist. Eine VBox hat ein vertikal fließendes Layout: Wenn Sie Elemente hinzufügen, werden diese von oben nach unten gestapelt wie Absätze oder aufeinanderfolgende HTML-Elemente, deren display -Styles auf block gesetzt sind oder die durch <br/> -Tags getrennt werden. Boxen und Panels sind beides Container, weil sie andere Komponenten enthalten oder anordnen sollen. Eine VBox oder HBox kann aus einer Box erzeugt werden, indem die layout -Eigenschaft der Box auf vertical oder horizontal gesetzt wird. Ein paar weitere Container unterstützen

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

33

die Eigenschaft layout , um sich automatisch wie eine Box zu verhalten. Das haben wir beispielsweise oben gemacht, als wir das Panel erstellt haben. Erzeugen wir etwas, um die Box zu füllen, und kehren wir dann zu nützlicheren Layouteigenschaften zurück.
labEl

<mx:TextInput width="100%"/> </mx:HBox> <mx:HBox width="100%"> <mx:Label text="Betreff:"/> <mx:TextInput width="100%"/> </mx:HBox> </mx:VBox>

Wir beginnen damit, dass wir der E-Mail-Verfassen-Komponente An:- und Betreff:-Zeilen hinzufügen. Das Label ist ein einzeiliges, nicht interaktives Textstück. Genau das Richtige für die Beschriftung anderer Komponenten.
<mx:VBox width="100%" horizontalAlign="left"> <mx:Label text="An:"/> <mx:Label text="Betreff:"/> </mx:VBox>

Wie in Abbildung 4 zu sehen, habe ich eine VBox eingesetzt, um zwei Zeilen vertikal aufeinanderzustapeln, und zwei HBoxen, die die einzelnen Zeilen horizontal ausrichten. Jeder Container wird auf 100% skaliert, damit er die gesamte horizontale Breite einnimmt. Ohne das würden alle Elemente ihre vom Inhalt abhängige Default-Größe oder ihre natürliche Größe annehmen.

Wir können Labels links oder rechts ausrichten oder zentrieren, indem wir den horizontalAlign -Style der VBox anpassen.
TEXTInPUT

Wir brauchen einen Ort, um diese Werte einzugeben. Fügen wir neben den Labels also einige TextInput -Steuerelemente hinzu. Ein TextInput ist ein Bereich, in den der Benutzer den Cursor setzen und dann eine Zeile Text eingeben kann.
<mx:VBox width="100%"> <mx:HBox width="100%"> <mx:Label text="An:"/>

abb. 4 Das Beispiel bisher

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

34

Das sieht ziemlich gut aus. Aber wahrscheinlich sollten wir auch die linken Ränder der beiden Textfelder ausrichten. Wir brauchen also so etwas wie eine Tabelle.
GRId

bildung 5 sehen. Auf diese Weise können Sie flexible Layouts erzeugen, die sich ausdehnen, um jede Breite auszufüllen, die Sie ihnen geben.

Wir können die Zeilen der beiden HBoxen mit der Grid -Komponente in ein echtes Raster verwandeln:
<mx:Grid width="100%"> <mx:GridRow width="100%"> <mx:GridItem><mx:Label text="An:"/></mx:GridItem> <mx:GridItem width="100%"><mx:TextInput width="100%"/> </mx:GridItem> </mx:GridRow> <mx:GridRow width="100%"> <mx:GridItem><mx:Label text="Betreff:"/></mx:GridItem> <mx:GridItem width="100%"><mx:TextInput width="100%"/> </mx:GridItem> </mx:GridRow> </mx:Grid>

abb.  Die Verwendung eines Rasters führt zu nett ausgerichteten Feldern.

bUTTOn

Das Flex 2- Grid entspricht einer Tabelle in HTML: Grid entspricht <table> , GridRow entspricht <tr> und GridItem <td> . All die 100% -Breiten, die Sie oben sehen, sind erforderlich, um zu sichern, dass TextInput die gesamte GridRow einnimmt, die GridRow das gesamte Grid füllt und das Grid die gesamte Breite des Panel füllt, in dem es sich befindet, wie Sie es in Ab-

Sie haben in vorangegangenen Beispielen bereits eine Menge Buttons gesehen – fügen wir dem Formular also ohne größere Umstände einen Abbrechen- und einen Senden-Button hinzu. Wir nutzen eine HBox mit 100% Breite und richten sie rechts aus, um die beiden Buttons an der rechten Seite des Bildschirms zu platzieren:

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

3

<mx:HBox width="100%" horizontalAlign="right"> <mx:Button label="Abbrechen"/> <mx:Button label="Senden"/> </mx:HBox>

wenn sie benötigt wird (wenn es in der TextArea mehr Text gibt, als in die aktuelle Größe passt).
COlORPICKER Und SlIdER

Weil die HBox die gesamte Breite einnimmt und die Elemente rechts ausgerichtet sind, bleiben die beiden Buttons auf der rechten Seite des Panels, egal wie breit es gemacht wird.
TEXTaREa

Fügen wir ein paar einfache Steuerelemente hinzu, mit denen man das Erscheinungsbild des Textinhalts verändern kann. Wir werden sie gemeinsam mit einigen Labels auf ein Zeile setzen:
<mx:HBox horizontalGap="0" paddingTop="5" paddingBottom="5" backgroundAlpha="0.1" backgroundColor="black"> <mx:Label text="color"/> <mx:ColorPicker id="fontColorPicker" selectedColor="black"/> <mx:Label text="size"/> <mx:HSlider id="fontSizeSlider" minimum="8" maximum="36" snapInterval="1" liveDragging="true" value="10"/> </mx:HBox>

Natürlich können Sie keine E-Mails verfassen, wenn es keinen Ort gibt, an dem Sie den Inhalt der E-Mail eingeben können. Wir werden ein mehrzeiliges Texteingabefeld, eine TextArea, hinzufügen, das dem <textarea> -Tag in HTML ähnelt. Weil das Panel vertikal ausgerichtet ist, stecken wir die TextArea in die Mitte zwischen die Eingabefelder und die Buttons. Wir wollen außerdem, dass das Textfeld nicht nur horizontal, sondern auch vertikal den gesamten verfügbaren Raum einnimmt. Die Eingabefelder und die Buttons haben eine festgelegte Höhe, aber da der Container vertikal wächst, sollten Sie vertikal mehr Platz für den Inhalt Ihrer Nachricht erhalten:
<mx:TextArea width="100%" height="100%" verticalScrollPolicy="auto"/>

Wie Sie wahrscheinlich erraten haben, steuert verticalScrollPolicy die Verwendung vertikaler Scrollleisten auf der TextArea. auto sorgt dafür, dass die Scrollleiste nur angezeigt wird,

Das Tag ColorPicker erzeugt einen Farbwähler mit einer Popup-Palette, wie man ihn aus dem Flash-Entwicklungswerkzeug kennt. Sie können die Farben anpassen, die auf der Palette angezeigt werden, aber dieses Beispiel verwendet die Standardfarben. Die Tags HSlider und VSlider erzeugen Schieber, über die Benutzer visuell einen Wert innerhalb eines Bereichs verändern können.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

36

Die zusätzlichen Eigenschaften im äußeren HBox-Tag sind Styles, die das Erscheinungsbild dieser Zeile mit Steuerelementen setzen und sie visuell hervorheben. (Im nächsten Abschnitt werden Styles ausführlicher behandelt.) Wir landen bei etwas, wie Abbildung 6 es zeigt. Wir haben etwas aufgebaut, das ganz ordentlich aussieht. Aber natürlich macht es bisher noch nichts. Sie können diese Lobes-E-Mail erst erhalten, wenn der Absenden-Button funktioniert.

Scripting und Events Es ist recht einfach, einer MXML-Komponente wie unserem neuen E-Mail-Formular Verhalten hinzuzufügen. Es gibt keine speziellen Verhalten, besondere Arten, Listener zu registrieren, magische Schlüsselwörter oder Zaubersprüche: Alle Event-gesteuerten Verhalten sind einfach Teil des Event-Modells, das wir im letzten Kapitel besprochen haben. Gehen wir eine einfache Aufgabe an und bringen den Abbrechen-Button dazu, alle Felder im Formular zurückzusetzen. Erst werden wir sichern, dass das neue E-Mail-Formular in einer eigenen Komponente existiert. Dann werden wir den Code zum Zurücksetzen der Felder schreiben. Schließlich werden wir MXML-Event-Handler nutzen, um die Funktion aufzurufen.
VORbEREITUnG

abb. 6 Eine verfrühte Lobes-E-Mail verfassen

Das neue E-Mail-Formular, das wir aufgebaut haben, wird nicht nur die sichtbare Schnittstelle, sondern auch alle Verhalten enthalten, die für neue E-Mail-Formulare erforderlich sind, mit anderen Worten: die erforderlichen Methoden. Jetzt sehen wir uns das Problem an: »Wo schreibe ich den Code für das Zurücksetzen des Fomulars?« Statt alle Funktionen, die wir für die verschiedenen Teile der Anwendung brauchen, und alle Tags, die in der Anwendung eingesetzt werden könnten, in eine gewaltige Datei zu packen, werden wir Kapselung und Trennung der Verantwortlichkeiten praktizieren, indem wir alle verwandten Funktionen und Komponenten in

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

37

eine Klasse stecken und dabei daran denken, dass jede MXML-Datei eine Klasse ist. All das Gerede bedeutet einfach nur, dass wir eine MXMLDatei, ComposeView.mxml , im Paket com.partlyhuman.books.flexshortcut.mail erstellen und das Panel und seinen Inhalt in diese Datei verschieben. Als Wiederholung: Unsere ComposeView.mxml -Datei sollte so aussehen:
<?xml version="1.0" encoding="utf-8"?> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" title="Neue E-Mail" width="75%" height="75%" layout="vertical" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5"> <mx:Grid width="100%"> <mx:GridRow width="100%"> <mx:GridItem><mx:Label text="An:"/></mx:GridItem> <mx:GridItem width="100%"><mx:TextInput width="100%"/></mx:GridItem> </mx:GridRow> <mx:GridRow width="100%"> <mx:GridItem><mx:Label text="Betreff:"/> </mx:GridItem> <mx:GridItem width="100%"><mx:TextInput width="100%"/></mx:GridItem> </mx:GridRow> </mx:Grid>

<mx:HBox horizontalGap="0" paddingTop="5" paddingBottom="5" backgroundAlpha="0.1" backgroundColor="black"> <mx:Label text="Farbe"/> <mx:ColorPicker id="fontColorPicker" selectedColor="black"/> <mx:Label text="Größe"/> <mx:HSlider id="fontSizeSlider" minimum="8" maximum="36" snapInterval="1" liveDragging="true" value="10"/> </mx:HBox> <mx:TextArea width="100%" height="100%" verticalScrollPolicy="auto"/> <mx:HBox width="100%" horizontalAlign="right"> <mx:Button id="resetButton" label="Abbrechen"/> <mx:Button id="sendButton" label="Senden"/> </mx:HBox> </mx:Panel>

Und unsere Anwendungsdatei kann diese Klasse jetzt über das entsprechende Tag referenzieren:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mail="com.partlyhuman.books.flexshortcut.mail.*" verticalAlign="middle" horizontalAlign="center"> <mail:ComposeView/> </mx:Application>

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

38

SChREIbMEThOdEn

EVEnT-aTTRIbUTE In MXMl VERWEndEn

Erinnern Sie sich daran, dass ActionScript einer MXML-Klasse über einen Script -Block hinzugefügt werden kann. Wir werden das nutzen, um eine Methode zu ergänzen, die das Formular zurücksetzt. Fügen wir den beiden TextInput-Feldern und der TextArea id s hinzu, damit wir sie aus unserem Code referenzieren können. Wir nennen sie toField , subjectField und messageField . Wir werden unsere Methode zum Zurücksetzen des Formulars reset() nennen und ComposeView.mxml folgenden Code hinzufügen:
<mx:Script> <![CDATA[ public function reset():void { toField.text = subjectField.text = messageField.text = null; } ]]> </mx:Script>

Jetzt müssen wir uns nur noch darum kümmern, dass der Abbrechen-Button reset() aufruft, wenn er angeklickt wird. Wenn Sie in MXML Komponenten erzeugen, können Sie TagAttribute einsetzen, um Event-Handler zu definieren. Geben Sie das ActionScript einfach direkt innerhalb des Attributs an:
<mx:Button label="Reset" click="reset()"/>

Das click -Attribut entspricht dem Event namens click . Wenn der Button das click -Event absetzt, wird der Code ausgeführt, der in MXML innerhalb des click -Event-Handlers angegeben wurde. Haben Sie diesen Code angeknüpft, sollten Sie auf Abbrechen klicken und sehen können, wie alle Felder geleert werden. Code, den Sie in einem Event-Handler-Attribut schreiben, läuft im Geltungsbereich der Klasse, nicht in dem des EventZiels. Sie haben in Code, den Sie in einem Event-Attribut geschrieben haben, also Zugriff auf event , das Event-Objekt selbst, wenn Sie es manipulieren oder an eine externe EventHandler-Funktion weiterreichen wollen. Es ist ein guter Gedanke, für alle mit Ausnahme der einfachsten Event-gesteuerten Aktionen Funktionen zu schreiben: Das verhindert, dass Sie Code in einem Attribut schreiben (der sehr leicht dazu führt, dass Ihr XML ungültig wird), trennt die visuellen Elemente vom Verhalten und gibt Ihnen die Möglichkeit, das Verhalten von anderen Events oder anderen Klassen aus auszulösen.

Dieser Code setzt die text -Eigenschaft aller Felder auf null und leert damit die Ansicht. Die Komponenten mit id wurden zu öffentlichen Eigenschaften der Klasse, und alles im Script Block wird in die Klasse eingefügt. reset() wird also zu einer Instanzmethode der Klasse, die Instanzvariablen der Klasse referenziert.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

39

EVEnT-lISTEnER In aCTIOnSCRIPT EInRIChTEn

Die Arbeit mit dem Event-Modell lässt sich auch einfach mit ActionScript durchführen. Um dem Abbrechen-Button das gleiche Verhalten zu geben, geben Sie ihm zuerst eine id:
<mx:Button id="resetButton" label="Reset"/>

gerweise durch ein Event ausgelöst wird. Es gibt zwei Herangehensweisen für dieses Problem. Die strukturiertere Lösung wäre die Erzeugung einer Handler-Funktion, die reset() aufruft:
protected function onResetButtonClicked(event:Event):void { reset(); }

und fügen den Listener an geeigneter Stelle Ihres Script Blocks mit ActionScript hinzu:
resetButton.addEventListener("click", reset);

Die Eingabe eines Strings wie "click" ist allerdings eine gefährliche Sache. Wenn Sie ihn aus Versehen falsch schreiben, kann der Compiler den Fehler nicht abfangen. Deswegen und um Sie im Editor durch die Autovervollständigung zu unterstützen, werden alle Strings mit einer besonderen Bedeutung in den Flex- und der Flash-API als öffentliche, statische Konstanten veröffentlicht. Statt "click" zu schreiben, um auf einen Mausklick zu referenzieren, sollten Sie Folgendes schreiben:
resetButton.addEventListener(MouseEvent.CLICK, reset);

Das bewahrt die Trennung von Event-Handler und Funktionalität. Und das ist auch das, was der MXML-Compiler automatisch für Sie macht. Der gesamte Code, den Sie in das click Attribut schreiben, wird in eine Funktion eingefügt, die automatisch erzeugt wird, wenn Ihr Projekt kompiliert wird:
public function __resetButton_click(event:flash.events. MouseEvent):void { reset(); }

Aber wenn Sie das ActionScript 3.0-Event-Modell verwenden, müssen Event-Handler-Funktionen das Event als Parameter akzeptieren. Unsere aktuelle reset() -Methode bringt es nicht! Gehen wir hier einen Schritt zurück und betrachten wir den Zweck dieser Methode. Ist reset() eine Methode, die wir anderen Methoden und nach außen verfügbar machen wollen? Wenn das der Fall ist, sollten wir nicht verlangen, dass der Aufrufer ein Event übergibt, weil der Aufruf nicht notwendi-

Das erklärt auch, warum eine Variable namens event in MXML in jedem Event-Attribut verfügbar ist: Der Code landet in einer Funktion, der ein Parameter namens event übergeben wird. Ein nützlicher Hack erlaubt einer Methode, zugleich als EventHandler und als gewöhnliche öffentliche Methode zu agieren. Ermöglichen Sie es, dass der Event-Parameter den Standardwert null erhält. In diesem Fall könnten wir, anstatt eine neue

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

40

Funktion zu schreiben, die reset() aufruft, einfach die Signatur von reset() folgendermaßen ändern:
public function reset(event:Event = null):void

Das funktioniert natürlich nur, wenn Ihre Methode nicht unbedingt von dem Event oder anderen Parametern abhängig ist. Es sieht etwas schlampig aus, kann aber hilfreich sein.
COdE aUSFühREn, WEnn IhRE KOMPOnEnTE SIChTbaR WIRd

Diese Initialisierungsevents sind für das E-Mail-Client-Beispiel nützlich. Wir können einen Standarderläuterungstext in den Feldern An und Betreff (siehe Abbildung 7) erscheinen lassen und dafür sorgen, dass dieser Text ausgewählt wird, wenn Sie in das Feld klicken oder über die Tabulator-Taste zu ihm navigieren, damit das, was Sie eintippen, direkt die Auswahl – den Erläuterungstext – ersetzt:
<mx:Panel title="Neue E-Mail" … initialize="onInitialize (event)"> protected function onInitialize(event:Event):void { toField.text = "An wen soll diese E-Mail gehen"; subjectField.text = "Hier kommt Ihr Betreff hin"; toField.addEventListener(FocusEvent.FOCUS_IN, onFieldFocus); subjectField.addEventListener(FocusEvent.FOCUS_IN, onFieldFocus); } protected function onFieldFocus(event:Event):void { var target:TextInput = event.target.owner as TextInput; if (target) target.setSelection(0, target.text.length); }

Eine Sache, die Ihnen bei der Verwendung von MXML-Klassen schnell auffallen wird, ist, dass Sie keine eigenen Konstruktorfunktionen deklarieren können. Selbst wenn Sie Code im Konstruktor einer MXML-Klasse ausführen könnten, hätte dieser eventuell nicht den gewünschten Effekt. Kindkomponenten werden nach der Konstruktionsphase erzeugt. Versuche, in einem Konstruktor Kinder zu referenzieren, führen also zu einem Fehler. Flex bietet zwei Events, die Sie einfangen sollten, wenn Sie eine Initialisierung durchführen wollen: initialize und creationComplete . Das erste Event, initialize , wird abgesetzt, wenn Ihre Komponente konstruiert wird und Kinder verarbeitet werden, aber bevor etwas so weit ist, dass es tatsächlich auf dem Bildschirm erscheinen kann. Umgekehrt wird creationComplete abgesetzt, nachdem die Komponente erzeugt, einer Anzeigeliste hinzugefügt, berechnet, eingeflossen und gezeichnet wurde. Wenn Ihr Initialisierungscode von der Position der Kinder abhängig sein könnte, wäre es besser, ihn auszuführen, wenn dieses Event abgesetzt wird.

Dieser Code nutzt eine weitere gute Technik: Er nutzt event. target als Gegenstand Ihres Event-Handling-Codes. Auf diese

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

41

können Bindungen in beide Richtungen gehen, aber in Flex 2 gehen sie immer nur in eine Richtung. Wenn der böse Dr. Bad sich entschließt, eine Lebensversicherung abzuschließen, und eine Bombe schafft, die losgeht, wenn sein Herz anhält, könnte er diese Bombe an sein Herz binden. In der Realität könnte das einige riskante Operationen verlangen, um einen Sensor, einen Funksender, einen Schaltkreis und einen komplexen Zündmechanismus einzurichten. Aber in Filmen kümmert sich niemand um so was: Es ist einfach nur eine Bindung. Das Gleiche gilt für Bindungen in Flex. In den meisten Fällen müssen wir keine Setter-Funktionen schreiben, Events absenden, Events abonnieren oder Aktualisierungsfunktionen schreiben. Mit Flex 2 richten wir eine Bindung ein, indem wir mit einer besonderen Syntax auf die Eigenschaft verweisen und Flex die ganze harte Arbeit überlassen.
bEISPIEl: STylES aUF dEM TEXT SETZEn

abb. 7. Wird das An:-Feld angewählt, wird der Erläuterungstext markiert.

Weise können Sie den gleichen Event-Handler an mehrere Komponenten knüpfen. Und etwas Sicherheit ist auch eingebaut. Der as -Test weist target null zu, wenn der Eigentümer des Event-Ziels kein TextInput ist, und der if -Test überspringt den Code, der von einer Methode von TextInput abhängig ist, wenn das Ziel kein TextInput ist. bindungen Bindung ist ein mächtiges Konzept, das in vielen deklarativen Sprachen zu finden ist. Bindungen erzeugen eine Verknüpfung zwischen zwei Werten und nutzen Events, um den einen Wert zu ändern, wenn sich der andere ändert. Normalerweise

Der Farbwähler und der Größenschieber in unserem Formular zum Verfassen von E-Mails machen noch nichts. Nutzen wir Bindungen, um zu erreichen, dass diese Steuerelemente das Erscheinungsbild des Textinhalts steuern. Wir möchten, dass die Schriftgröße den Wert des Größenschiebers wiedergibt und die Schriftfarbe die im Farbwähler ausgewählte Farbe, auch wenn sie geändert werden (siehe Abbildung 8). Um die Bindungen in Aktion zu bringen, umgeben Sie die Eigenschaft, die Sie binden wollen, mit geschweiften Klammern:

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

42

<mx:TextArea width="100%" height="100%" verticalScrollPolicy="auto" id="messageField" fontSize="{fontSizeSlider.value}" color="{fontColorPicker.selectedColor}"/>

bIndUnGEn ERZEUGEn

Dieses Beispiel nutzt eine von drei Möglichkeiten, Daten zu binden. Indem eine Eigenschaft mit geschweiften Klammern umgeben wird, sagen Sie dem Compiler, dass er die Eigenschaft als Bindungsausdruck auswerten soll. Das kann auch ActionScript-Code einschließen: Sie könnten einen Wert mit zwei multiplizieren, an das Ergebnis einen String ketten und erhalten dadurch eine Möglichkeit, die Daten in Form zu bringen, bevor sie verarbeitet werden. Alternativ können Sie Bindungen frei schwebend angeben, anstatt sie direkt an eine Zieleigenschaft zu binden, indem Sie das <mx:Binding> -Tag verwenden. Diese Tags stehen außerhalb der Objekte, die sie zusammenbinden, und definieren eine Quelle ( source ) und ein Ziel ( destination ). Sie können Bindungen mit der Klasse mx.binding.utils.BindingUtils auch in ActionScript erzeugen. Dieser Weg bietet die besten Steuerungsmöglichkeiten darüber, wie man mit Aktualisierungen in der Quelle umgeht.
bIndUnGEn ZUR aUSWERTUnG VERWEndEn

abb. 8 Die Schriftgröße über eine Bindung an einen Schieber aktualisieren

Vielleicht ist dieses Beispiel trivial, aber in echten Anwendungen gibt es viele Fälle wie diesen, und der Einsatz von Bindungen kann das schnell erledigen. Eine sehr interessante Sache in diesem Beispiel ist, dass es die Werte von Eingabeelementen nicht bloß an Eigenschaften, sondern auch an Styles bindet.

Bindungen mit geschweiften Klammern haben noch andere Anwendungsmöglichkeiten, deswegen werden Sie sich häufig dabei ertappen, dass Sie Bindungen nutzen, ohne irgendwelche Eigenschaften oder Daten zu binden. Wenn es in einem von geschweiften Klammern umgebenen Ausdruck keine bindbaren Eigenschaften gibt, wird der Ausdruck einfach ausgewertet.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

43

In vielen Fällen werden Sie eine Eigenschaft irgendeines Tags auf ein anderes Objekt oder auf irgendwelche Daten setzen müssen. Wenn Sie in ein Tag eine ID oder einen Ausdruck eintippen, wird dieser einfach literal als String interpretiert. Deswegen werden Sie geschweifte Klammern häufig verwenden, um bloß auf ein anderes Objekt zu verweisen. Beispielsweise könnten wir den Default-Button unseres Formulars auf den Senden-Button setzen:
<mx:Panel title="New Mail" … defaultButton="{sendButton}">

Bei Letzterem könnten Sie prüfen, ob der Benutzer in das Feld etwas Neues eingegeben hat, indem Sie den Text mit dem Standardwert vergleichen:
var isTextChanged:Boolean = (input.text != INPUT_START_ VALUE);

Dieses Verfahren kann Ihnen dabei helfen, Ihren Code wartbarer zu halten und Fehler auf Grund von Tippfehlern zu verhindern, genau wie die eingebauten Event-Namen, die als Konstanten gespeichert sind.
Wann bIndUnGEn VERWEndET WERdEn SOllTEn

binden an Konstanten Wenn Sie in Ihrem Code Strings verwenden, können Sie diese durch Konstanten und eine Bindung auf sie ersetzen. Das funktioniert besonders gut, wenn Sie diese Strings auch noch an anderen Stellen verwenden müssen – beispielweise wenn Sie ihn mit dem Wert eines Strings vergleichen wollen oder wenn Sie für irgendetwas die Eigenschaft name statt der Eigenschaft id verwenden. (Während id zu einer Eigenschaft der Klasse wird, bleibt name einfach ein String, der auf der Instanz definiert ist, auf der Sie die Eigenschaft angeben). Statt:
<mx:TextInput id="input" text="Standardwert"/>

Es gibt viele Klassen, bei denen Ihnen Bindungen helfen können, Ihren Code kompakt zu halten. Das Binden von Views an Daten (Modelle) ist besonders nützlich, wie Sie im folgenden Abschnitt sehen werden. Das Binden von Komponenten, um ihr Erscheinungsbild synchron zu halten, ist ebenfalls verbreitet. Inspektoren, d.h. Benutzerschnittstellen, die es Ihnen ermöglichen, die Eigenschaft von Objekten auf dem Bildschirm in Echtzeit einzusehen, sind für Bindungen ebenfalls gut geeignet. Wenn Sie eine große Kontrolle über die Reihenfolge der Operationen haben oder nach bzw. vor dem Festschreiben komplexe Operationen durchführen müssen, können Datenbindungen ein zu simpler Mechanismus sein. Anstatt damit zu kämpfen, sie Ihrem Willen zu unterwerfen, sollten Sie Datenbindung verwenden, um Code in einfachen Fällen einfach zu machen.

könnten Sie Folgendes schreiben:
private const INPUT_START_VALUE:String = "Standardwert"; <mx:TextInput id="input" text="{INPUT_START_VALUE}"/>

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

44

GEbUndEnE EIGEnSChaFTEn MüSSEn bIndbaR SEIn

Nur bindbare Eigenschaften können die Quelle von Bindungen sein, die laufend aktualisiert werden. Im Flex 2-Framework gibt es viele Eigenschaften, die bereits bindbar sind. Aber um Ihre eigenen Eigenschaften bindbar zu machen, müssen Sie ein Metadaten-Tag verwenden. Metadaten Metadaten sind Informationen, die der Flex-Compiler nutzt, um spezielle Aktionen durchzuführen. Technisch betrachtet, sind sie nicht Teil der Sprache ActionScript 3.0, sondern Compiler-Direktiven. Metadaten werden durch Ausdrücke in eckigen Klammern erzeugt. Die gebräuchlichsten Metadaten, die Sie verwenden könnten, und ihre Bedeutungen sind:
• [Bindable] erlaubt, dass die nachfolgende Eigenschaft als

Stellen Sie einer Eigenschaft, die Sie bindbar machen wollen, einfach das Metadaten-Tag Bindable voran:
[Bindable] public var numToes:Number = 10;

Außerdem können Sie Getter bindbar machen und das Metadaten-Tag Bindable so anpassen, dass es ein Event Ihrer Wahl absetzt, wenn der Wert aktualisiert wird. Bindbare Eigenschaften funktionieren nur in Klassen, die Events absetzen können. Das schließt alle Benutzerschnittstellen-Komponenten ein, die von Flex definiert werden. Und wenn Sie eine nicht visuelle Klasse als Modell schreiben, müssen Sie einfach nur flash.events.EventDispatcher erweitern. Model-View-Controller mit bindungen Besonders nützlich ist Datenbindung bei einer Model-ViewController-Architektur (MVC). Sie können eine leichtgewichtige View-Komponente erstellen und diese dann, anstatt eine Schar von Funktionen zu schreiben, die sich darum kümmern, diese zu aktualisieren, über Datenbindung direkt an ein Modell binden. Die Einfachheit dieses Verfahrens sehen Sie, wenn wir Komponenten für einen Posteingang mit einer Nachrichtenliste und einen E-Mail-Reader erstellen.
daTEn In MXMl EInbETTEn

Quelle von Bindungen verwendet wird.
• [Embed] sagt dem Compiler, dass er ein externes Asset ab-

rufen und in das SWF einkompilieren soll.
• [Event] definiert Events, denen direkt in den Attributen

des Tags Handler zugewiesen werden können.
• [Style] erzeugt benutzerdefinierte Styles.

Viele dieser Ausdrücke werden in den nachfolgenden Abschnitten behandelt.

Es ist möglich, Modelldaten direkt in Ihr MXML einzubetten. Aber es ist unwahrscheinlich, dass Sie das außer zu TestzweTecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

4

cken oder beim Aufbau von sehr kleinen Anwendungen machen werden. Und genau das müssen wir hier tun: Wir müssen ein paar schnelle Dummy-Daten erzeugen, damit wir den View aufbauen und die Bindungen testen können. Skizzieren wir ein XML-Modell für Nachrichten. Weil XML so leicht mit E4X manipuliert werden kann und wir kein objektrelationale Datenbanken oder eine massive serverseitige Integration haben, die den Aufbau von Modellklassen für E-Mails erforderlich machen, ist die Verwendung von XML ideal.
Erzeugen wir eine neue MXML-Komponente – InboxView.mxml – zum Lesen von Nachrichten und stecken wir in sie ein paar Dummy-Nachrichtendaten:
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" title="Nachrichten"> <mx:XMLList id="inbox"> <message> <date>01/01/2006</date> <from>tests@beispiel.com</from> <to>roger@partlyhuman.com</to> <subject>Beispiel-E-Mail</subject> <message>Das ist eine Beispiel-E-Mail.</message> </message> <!-- viele weitere Nachrichten aus meinem Spam-Ordner --> </mx:XMLList> </mx:Panel>
TecFeeds © 2007 by O’Reilly Verlag

In MXML können wir das XML inline schreiben. Bei HTMLNachrichten wäre es allerdings ratsam, den Inhalt des message Knotens in einen CDATA-Abschnitt einzuschließen.
daTaGRId

Es gibt verschiedene eingebaute Flex-Komponenten, die für die Anzeige von Datensätzen ideal sind. List und TileList sind gut geeignet für Listen mit Daten, und sie können mit Renderern für Elemente kombiniert werden, um eine Liste mit Schnittstellen aufzubauen, die komplexer als eine einfache Liste mit Text ist. Tree ist natürlich gut geeignet, um in hierarchischen Daten zu navigieren. Wir würden unseren Posteingang gern in dem vertrauten Raster mit Spalten sehen, über die wir sortieren und die wir anpassen können (siehe Abbildung 9). Flex 2 besitzt eine Komponente, die dafür perfekt ist, DataGrid .

abb. 9 Das DataGrid macht aus dem XML eine Nachrichtenliste.

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

46

Wir fügen dem Posteingang eine DataGrid-Komponente hinzu, passen ihre Spalten an und knüpfen sie dann an unsere Dummy-Daten, indem wir ihre dataProvider-Eigenschaft binden:
<mx:DataGrid id="messageList" width="100%" height="100%" dataProvider="{inbox}"> <mx:columns> <mx:DataGridColumn dataField="from" headerText="Sender"/> <mx:DataGridColumn dataField="subject" headerText="Betreff"/> <mx:DataGridColumn dataField="date" headerText="Datum"/> </mx:columns> </mx:DataGrid>

EInE SElbST dEFInIERTE KOMPOnEnTE an EIn MOdEll bIndEn

Hier ist unser Ansatz, einen »dummen« View zu erstellen. Er wird einen leeren Platz bieten, in dem ein Modell eingefügt werden kann, und bindet an die Eigenschaften dieses Modells, damit der View automatisch aktualisiert wird, wenn dieses Modell bereitgestellt wird. Wir erzeugen eine weitere Komponente für den NachrichtenView – MessageView.mxml – und fügen alle Felder ein, die wir anzeigen möchten. Wir sollten oben einen Block für die Header haben und unten einen großen skrollbaren Textbereich:
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"> <!-- hier kommt das Modell hin --> <mx:Object id="msg"/> <mx:Grid id="header" backgroundColor="black" backgroundAlpha="0.1" width="100%"> <mx:GridRow> <mx:GridItem horizontalAlign="right"><mx:Label text="Von:"/></mx:GridItem> <mx:GridItem><mx:Text truncateToFit="true" text="{msg.from}"/></mx:GridItem> </mx:GridRow> <mx:GridRow> <mx:GridItem horizontalAlign="right"><mx:Label text="Datum:"/></mx:GridItem> <mx:GridItem><mx:Text truncateToFit="true" text="{msg.date}"/></mx:GridItem>

Mit nur ein paar Zeilen haben wir eine scrollbare Nachrichtenliste, größenveränderbare Spalten und die Möglichkeit erhalten, über beliebige Spalten in aufsteigender oder absteigender Folge zu sortieren. Aber wir haben gerade erst angefangen. Das DataGrid ist ein vorgefertigter View, der für die Anzeige tabellarischer Daten geeignet ist und keine Anpassungen erfordert. Es wusste, wie es jeden XML-Knoten in Ihrer Nachrichtenliste betrachten und das < subject> -Kind für das Betreff-Feld herausziehen musste, weil Sie das in der dataField -Eigenschaft der Betreffspalte angegeben haben. Bauen wir einen selbst definierten View auf und sagen wir ihm, wie er seinen Inhalt darstellen soll. Das wird natürlich das Lesefenster sein, das die vollständige E-Mail zeigt.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

47

</mx:GridRow> <mx:GridRow> <mx:GridItem horizontalAlign="right"><mx:Label text="An:"/></mx:GridItem> <mx:GridItem><mx:Text truncateToFit="true" text="{msg.to}"/></mx:GridItem> </mx:GridRow> <mx:GridRow> <mx:GridItem horizontalAlign="right"><mx:Label text="Betreff:"/></mx:GridItem> <mx:GridItem><mx:Text truncateToFit="true" text="{msg.subject}"/></mx:GridItem> </mx:GridRow> </mx:Grid> <mx:TextArea width="100%" height="100%"editable="false" verticalScrollPolicy="auto" htmlText="{msg.message}"/> </mx:VBox>

einnimmt, durch eine horizontale Leiste, die der Benutzer verschieben kann, um die relative Größe des oberen und unteren Bereichs anzupassen wie bei einem HTML-Frameset mit einem sichtbaren Rahmen. Natürlich bietet Flex 2 auch eine HDividedBox , die ihren Bereich horizontal teilt. Schließlich fügen wir der change -Eigenschaft des DataGrid einen Event-Handler hinzu, der selectedItem aus dem Modell in den Nachrichtenplatzerhalter des Lesebereichs für das Modell einfügt:
<mx:VDividedBox width="100%" height="100%" liveDragging="true"> <mx:DataGrid id="messageList" width="100%" height="100%" dataProvider="{inbox}" change="reader.msg = messageList. selectedItem"> <mx:columns> <mx:DataGridColumn dataField="from" headerText="Sender"/> <mx:DataGridColumn dataField="subject" headerText="Betreff"/> <mx:DataGridColumn dataField="date" headerText="Datum"/> </mx:columns> </mx:DataGrid> <mail:MessageView id="reader" width="100%"/> </mx:VDividedBox>

Wir haben dieses Element zu einer VBox gemacht statt zu einem vollständigen Panel, damit wir es neben der Nachrichtenliste anzeigen können. Beachten Sie, wie einfach das ist: Wir haben ein Objekt, msg , an das alle Komponenten ihre Werte binden. Jetzt müssen wir es nur noch einbinden. Wir nutzen eine VDividedBox , um die Nachrichtenliste und das Lesefenster zu trennen. Diese Container-Komponente trennt den Bereich, den sie

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

48

Mehr brauchen Sie nicht. Der Lesefenster-View aktualisiert seine Bindungen und zeigt die E-Mail an, wenn Sie sie in der Liste auswählen (siehe Abbildung 10).

daten laden und senden Nachdem wir einen View aufgebaut und nachgewiesen haben, dass er an ein Modell gebunden werden kann, können wir die Daten in den E-Mail-Nachrichten laden. Flex 2 stellt Ihnen eine Menge Optionen für das Laden von Daten, die unterschiedliche Verfahren verwenden, zur Verfügung.
EInE daTEI ladEn

Flash Player 9 führt neue Wege ein, Daten über HTTP zu laden. Für externe SWFs oder Grafiken gibt es die neue Klasse flash.display.Loader , die sich um das Laden und Anzeigen kümmert. Für Text, XML oder URL-kodierte Variablen und rohe Binärdaten gibt es die neue Klasse flash.net.URLLoader . Werden Informationen von einer URL angefordert, nutzen beide Klassen die Klasse flash.net.URLRequest , um die URL gemeinsam mit zusätzlichen Daten zur Anfrage, wie Headern, MIMETypen und Formulardaten, zu kapseln. In ActionScript 3.0 ist die Klasse XML einfach nur ein Datentyp und hat anders als in früheren Versionen von ActionScript keine Ladefähigkeiten. Stattdessen kümmert sich URLLoader um das gesamte Laden. Wir nutzen dann die Top-Level-Funktion XML() , um die von URLLoader geladenen Textdaten in XML zu transformieren. Beachten Sie, dass das eine von mehreren Top-Level-Funktionen ist, die sich als Cast-Operator maskieren. Aber das ist eine nützliche Maskierung. Sie liefert nicht nur ein XML-Objekt zu-

abb. 10 Ein umwerfender Spam-Reader, der mit nur 50 Zeilen geschrieben wurde

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

49

rück, sondern übersetzt auch die Bedeutung des Strings in seine XML-Darstellung. Die Verwendung von URLLoader ähnelt der Verwendung von MovieClipLoader in ActionScript 2. Erst erzeugen Sie das Objekt. Dann abonnieren Sie seine Events, die Progress-, Completion-, Status- und Error-Events einschließen. Schließlich fordern Sie es auf, den URLRequest zu senden und die Antwort zu laden. Nachdem das Laden abgeschlossen ist, können Sie auf die geladenen Daten über die nicht typisierte Eigenschaft data zugreifen:
<!-- im MXML --> <XMLList id="inbox"/> <!-- das Posteingang-XML leeren, aber einen Platzhalter lassen --> //im Script-Block: protected var loader:URLLoader; public function updateMessages():void { loader = new URLLoader(); loader.addEventListener(Event.COMPLETE, onDataComplete); loader.load(new URLRequest( "http://partlyhuman.com/books/flexshortcut/mail/services/ inbox.xml")); } protected function onDataComplete(event:Event):void { }

//.message ist ein E4X-Operator, der eine XMLList aller //Kindknoten mit dem Knotennamen <message> liefert inbox = XML(loader.data).message;

Fügen Sie dem vorangehenden Code InboxView.mxml hinzu und leeren Sie ihr XMLList -Tag, kann die E-Mail-Liste ihre Dummy-Daten aus einer externen XML-Datei laden.
hTTPSERVICE

Das vorangehende Beispiel funktioniert in Flash 9 und Flex 2. Flex 2 bietet Ihnen mit der Klasse HTTPService aber auch ein noch einfacheres Verfahren. Der HTTPService kann überall verwendet werden, wo ein URLLoader verwendet werden könnte, bietet aber einige Vorteile. Sie können die Anfrage völlig trivial wiederholen, indem Sie send() auf dem HTTPService aufrufen. Sie können direkt eine Bindung an das Ergebnis des letzten Aufrufs des Diensts einrichten und machen damit eine Aktualisierungsfunktion oder einen zwischengeschalteten Modellort überflüssig. Wir könnten das ganze ActionScript, das URLLoader verwendet, durch ein einziges Flex 2-Tag ersetzen:
<mx:HTTPService id="inbox" resultFormat="e4x" url="http://partlyhuman.com/books/flexshortcut/mail/services/ inbox.xml"/>

Wir ändern auch das DataGrid, um direkt eine Bindung mit dem Service zu erstellen an Stelle einer Bindung an ein Modell, das wir manuell füllen:

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt 

0

<mx:DataGrid id="messageList" … dataProvider="{inbox. lastResult.message}">…

Jetzt muss nur noch inbox.send() aufgerufen werden, um die E-Mail-Liste aufzufrischen. Ganz gleich, ob das Ziel eine einfache XML-Datei oder ein Skript ist, das XML ausgibt – HTTPService kann das Laden von Daten trivial machen.
REST

Natürlich ist auch HTTPService gut für REST geeignet. Das HTTPService -Tag unterstützt eine request -Eigenschaft, die auf eine Vielzahl von Typen gesetzt werden kann.
<mx:HTTPService id="flickr" resultFormat="e4x" url="http://api.flickr.com/services/rest"/> flickr.request = { method: "flickr.photos.getRecent", api_key: "<<hier kommt Ihr API-Schlüssel hin>>" }; flickr.send();

Die URLLoader-Methode für die Verwendung von REST abzuändern ist gradlinig. Fügen Sie der data -Eigenschaft des URLRequest einfach Variablen hinzu, entweder indem Sie data auf einen URL-kodierten String setzen oder indem Sie sie einem URLVariables-Objekt hinzufügen. Das Senden der Variablen in der HTTP-Anfrage und das Laden der XML-Antwort ist alles, was für die Verwendung von REST erforderlich ist. Unten ist ein einfaches Fragment, das die letzten Fotos abruft, die auf Flickr hochgeladen wurden:
var request:URLRequest = new URLRequest("http://api.flickr. com/services/rest"); request.data = new URLVariables(); request.data.method = "flickr.photos.getRecent"; request.data.api_key = "<<hier kommt Ihr API-Schlüssel hin>>"; request.method = URLRequestMethod.GET; loader = new URLLoader(); loader.addEventListener(Event.COMPLETE, onComplete); loader.load(request);

Wie oben können Sie die Eigenschaft request in ActionScript setzen oder direkt als ein Attribut des HTTPService -Tags in MXML. Im Attribut können Sie geschweifte Klammern verwenden, um ein Objekt einzubetten, oder das Attribut als Kindknoten schreiben und eingebettetes XML nutzen, um die zu sendenden Variablen zu beschreiben:
<mx:HTTPService … request="{{method: 'flickr.photos. getRecent'}}"/> <!-- ist identisch mit --> <mx:HTTPService> <mx:request> <method>flickr.photos.getRecent</method> </mx:request> </mx:HTTPService>

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt 

1

SOaP Und WSdl

Über die Klasse WebService können Sie leicht RPC (Remote Procedure Calls) über SOAP ausführen. Wenn das WebServiceObjekt eine WSDL-Datei lokalisieren und laden kann – die die Operationen, die der Service unterstützt, und ihre Parameter beschreibt –, können Sie über die Punktnotation auf Operationen auf dem Service zugreifen, selbst wenn Sie sie nicht im Voraus deklariert haben. Die Klasse WebService muss erfolgreich ein WSDL-Datei laden, bevor irgendwelche Remote Procedure Calls gesendet werden. Deswegen sollten Sie das load -Event eines WebService abonnieren und Zugriff erst erlauben, nachdem dieses Event abgesetzt wurde. Dieses Beispiel und der Viewer, der in Abbildung 11 gezeigt wird, nutzen einen Service für Aktienkurse, um verzögerte Aktienkurse für einen NASDAQ-Wert zu erhalten:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:WebService id="stockService" wsdl="http://services.xmethods.net/soap/urn: xmethods-delayed-quotes.wsdl" load="searchButton.enabled = true;" fault="trace(event.fault.faultString)"> <mx:operation name="getQuote" resultFormat="object"> <mx:request> <symbol>{symbolInput.text}</symbol> </mx:request>

</mx:operation> </mx:WebService> <mx:HBox> <mx:Label text="Symbol name:"/> <mx:TextInput id="symbolInput" maxChars="5"/> <mx:Button id="searchButton" enabled="false" label="GO" click="stockService.getQuote.send();"/> </mx:HBox> <mx:Text text="{stockService.getQuote.lastResult}"/> </mx:Application>

abb. 11 Ein Aktienticker unter Verwendung eines SOAP-Webservices

Wenn der WebService oben die WSDL-Datei lädt, aktiviert er den Suchen-Butten, der standardmäßig deaktiviert ist. Das sichert, dass das getTemp -Objekt bereit ist, wenn es aufgerufen wird. In das Beispiel oben wurde das operation -Attribut des WebService zu unserer eigenen Bequemlichkeit und als Selbst-

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt 

2

dokumentation eingeschlossen. Da die Informationen für die verfügbaren Operationen in die WSDL-Datei einkodiert sind, hätten wir unsere eigene Beschreibung der getQuote -Operation weglassen können. Dann hätten wir aber manuell den symbol -Parameter setzen müssen, anstatt eine Bindung zu verwenden, bevor wir den Prozeduraufruf abschicken könnten. Die Verwendung von Datenbindung zur direkten Bindung eines Parameters an den Wert, mit dem er abgeschickt wird, wird als Parameter-Bindung bezeichnet. Die WebService-Schnittstelle kann erheblich bequemer sein als der HTTPService, insbesondere wenn man viele verschiedene Methoden aufruft, weil eine Service-Referenz mehrere Operationen verwalten kann.
JSOn

MIT-Lizenz veröffentlichte AS3 Lightweight Remoting Framework von Danny Patterson verwenden, das unter http://as3lrf. riaforge.org/ verfügbar ist. Das Framework ermöglicht Ihnen, einen Service zu kapseln, der wie jeder andere Webservice Flash Remoting unterstützt.
FlEX daTa SERVICES

Für Services, die JSON-kodierte Daten zurückliefern, gibt es keinen eingebauten Konvertierer. eval() ist in ActionScript 3 nicht implementiert, um den AS3-Compiler aus dem Flash Player herauszuhalten. Adobe Labs hostet unter http://labs. adobe.com/wiki/index.php/ActionScript_3:resources:apis:libraries aber ein freies Projekt namens corelib, das einen JSONParser einschließt.
FlaSh REMOTInG

Flex Data Services (FDS) unter http://www.adobe.com/products/flex/dataservices/ ist ein Adobe-Produkt in der Flex-Familie. Es ermöglicht Flex 2-Anwendungen, intelligenter und effizienter mit einer Datenschicht zu kommunizieren. FDS ist eine Java-Anwendung, die auf einer vorhandenen BusinessLogik auf dem Server läuft und von der von Ihnen gewählten Datenbankkommunikation unabhängig ist. Auch wenn es eine separate Anwendung ist, enthält Flex 2 Features, die ausdrücklich für die Arbeit mit FDS gedacht sind. Das Produkt muss separat erworben werden und ist in verschiedenen Versionen und Preislagen verfügbar. FDS bietet eine ganze Menge an Features, die in verschiedene Kategorien eingeteilt werden können: Konnektivität, RPC-Services, Data-Management-Services und Messaging-Services. FDS und Flex können über AMF3 kommunizieren. Das ist ein binäres, komprimiertes Format, das Typen bewahrt. FDS kann über RTMP (Real-Time Messaging Protocol) oder über HTTP mit Flex kommunizieren und bietet gute Ausweichmechanismen. FDS kann Nachrichten für vorübergehend nicht erreichbare Clients in Warteschlangen stellen und zustandsbehaftete Transaktionen mit Flex-Clients abwickeln.

Weder Flex noch AS3 bieten neben dem Flex Data Service, der unten erwähnt wird, eine besondere API für das Flash Remoting. Remoting-Aufrufe können über die NetConnection -API durchgeführt werden. Alternativ können Sie das unter einer

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt 

3

FDS bildet Proxies für andere Remote-Services, um Logging, Sicherheit, Konfiguration und gegebenenfalls Lokalisierungen zu zentralisieren. Flex-Anwendungen, die den Flex Data Server nutzen, um mit der Business-Logik von Anwendungen zu kommunizieren, können aktuelle Kopien zentralisierter Daten halten, ohne sich um Synchronisierung, Sperren oder Aktualisierungen kümmern zu müssen. FDS kann Flex-Anwendungen eine Kopie der Daten bieten, die immer automatisch aktuell ist. Schließlich ermöglichen Flex Data Services Push-Messaging in Echtzeit vom Server und über den Server zwischen den Peers.
SOCKETS

ent-Klasse, die die Nachrichten von einem echten E-Mail-Server abruft und das Modell füllt, während sie geladen werden. Unten ist eine kondensierte Version der Klasse POPConnection . Den vollständigen Code finden Sie auf der Verlatgs-Website und der Website des Autors. Die Kommunikation mit einem POP-Server schließt eine Reihe von Schritten ein. Sie müssen Folgendes machen, um mit einem POP-Server zu kommunizieren: 1. Einen Benutzernamen senden. 2. Auf eine Antwort warten. 3. Ein Passwort senden. 4. Auf eine Antwort warten. 5. Eine Liste von Nachrichten anfordern. 6. Die Liste mit Nachrichten parsen. 7. Die Nachrichten einzeln abrufen. Weil das Socket nur ein einziges Event für alle einkommenden Daten veröffentlicht, nutzt die Klasse eine Statusvariable und den zuletzt gesendeten Befehl, um festzuhalten, wo sie sich im Kommunikationsablauf befindet und wie sie mit den empfangenen Daten umgehen muss. Die Klasse greift stark auf reguläre Ausdrücke zurück, um die Serverantworten in XML zu parsen und die Werte mit E4X in das Datenmodell einzufügen:
final public class POPConnection extends EventDispatcher { public function POPConnection(user:String, pass:String, host:String, port:int)

Zum ersten Mal unterstützt Flash Player 9 TCP/IP-Socket-Verbindungen und ermöglicht Ihnen damit, mit beliebigen Servern zu sprechen und dabei vollständige Kontrolle über die Daten zu haben, die empfangen und gesendet werden. Sockets sind eine Abstraktion einer TCP/IP-Verbindung als Stream. Sie können aus dem Stream so viel lesen, wie verfügbar ist, oder in ihn in einer beliebigen Kombination von Formaten schreiben. Um ein Socket zu verwenden, erzeugen Sie es, stellen eine Verbindung mit dem Server her, lesen und schreiben Daten aus ihm bzw. in es und schließen es dann. Unter Verwendung von Sockets können wir unsere E-Mail-Anwendung mit einem echten Mailserver verbinden. Um die EMail-Anwendung funktional zu machen, verschieben wir das Modell an einen zentralen Ort und erzeugen eine POP3-Cli-

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt 

4

{ //… sock = new Socket(); sock.addEventListener(Event.CONNECT, onConnected); sock.addEventListener(SecurityErrorEvent. SECURITY_ERROR, onError); sock.addEventListener(IOErrorEvent.IO_ERROR, onError); sock.addEventListener(ProgressEvent.SOCKET_DATA, onData); connect(); } private function connect():void { //… sock.connect(host, port); //… } private function onData(event:Event):void { responseBuffer += sock.readUTFBytes(sock. bytesAvailable); //wenn das Ende des Puffers das Antwortendezeichen ist { processResponse(); } }

private function sendCommand(command:String, ... args): void { var output:String = command + " " + args.join(" ") + CMD_END; sock.writeUTFBytes(output); sock.flush(); //Timeouts starten … } private function processResponse():void { var response:String = responseBuffer; var isOk:Boolean = (response.search(/^\+OK/) == 0); switch (state) { case POPState.CONNECTED: if (isOk) { state = POPState.WAIT_FOR_USER; sendCommand("USER", user); } break; //andere Zustände für die Authentifizierung … case POPState.WAITING_MULTILINE: if (command == "LIST") { parseList(response); currentIndex = 1; getNextMessage();

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt 

} else if (command == "TOP" || command == "RETR") { if (isOk) { parseMessage(response); getNextMessage(); } else { getNextMessage(); } } break; default: state = POPState.TRANSACTION; } responseBuffer = ""; } private function parseMessage(messageSrc:String):void { var inbox:XMLList = MessageRepository.getInstance(). inbox; var msg:XML = inbox.(id == currentIndex)[0]; var cut:int = messageSrc.indexOf(HEADER_END); var header:String = messageSrc.substring(0, cut); var message:String = messageSrc. substring(cut, messageSrc.length); var headers:Object = parseHeaders(header); msg.from = headers.from;

msg.to = headers.to; msg.date = headers.dateparsed; msg.subject = headers.subject; msg.message = undoubleNewlines(message); } }

Weil das DataGrid an die XMLList für den Posteingang gebunden ist, spiegelt sich jede Änderung der Daten in der Liste wider: Während der POP-Client nacheinander die Nachrichten lädt, erscheinen diese nach und nach im Posteingang und können von Ihnen gelesen werden, ohne dass Sie warten müssen, bis alle geladen sind. States Flex 2 macht es leicht, die Benutzerschnittstelle im Vorübergehen zu verändern. Sie können den Benutzern eine Schnittstelle präsentieren, die sich ihren aktuellen Aufgaben oder Anforderungen entsprechend ändert. Es kann allerdings chaotisch werden, wenn man Code nutzt, um die Benutzerschnittstelle anzupassen: Wenn die Anzahl der möglichen Permutationen der Komponenten steigt, müssen Sie bei der Verwaltung möglicher Zustandsübergänge immer vorsichtiger werden. States bieten Struktur und Indikation für Änderungen an der Benutzerschnittstelle. Einer der Vorteile von Flex States ist der Umstand, dass sie in sich selbst abgeschlossen sind. Sie können die Schritte kapseln, die erforderlich sind, um einen Modus der Schnittstelle

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt 

6

in einen anderen State zu überführen, und diesem State einen Namen geben. Anstatt Ihre Schnittstelle zu inspizieren oder eine manuell aktualisierte Variable zu prüfen, um zu sehen, in welchem State sich die Schnittstelle befindet, können Sie jetzt einfach den Namen des aktuellen States inspizieren. Ein weiterer Vorteil ist, dass Flex die Arbeit ermittelt und ausführt, die für den Übergang von einem State zu einem anderen erforderlich ist. Sie deklarieren einfach die Eigenschaften, die sich ändern müssen, und wenn Sie diesen State anfordern, werden die Änderungen angewandt. Wenn Sie in Ihrer Anwendung States verwenden, können Sie sie außerdem als Event-Trigger benutzen und Übergänge anwenden, die auf ihnen basieren.
bEISPIEl: E-MaIl-lISTE

sis-State zurückzukehren, setzen Sie currentState einfach auf null . Wir fügen InboxView.mxml Folgendes hinzu:
<mx:states> <mx:State name="collapsed"> <mx:SetProperty target="{reader}" name="height" value="0"/> </mx:State> </mx:states>

Dieser Code sagt: Es gibt in dieser Komponente einen State namens collapsed , der die height des Lesefensters auf 0 setzt. Beachten Sie, wie eine Bindung eingesetzt wird, um die id des Lesefenster-Panels zu referenzieren. Sie können einen Button hinzufügen, der diese Veränderung des States anstößt und das Lesefenster-Panel kollabiert:
<mx:Button label="Hide Reader" click="currentState = 'collapsed'"/>

Wenn Sie dazu in der Lage sein wollen, die Nachrichtenliste zu kollabieren und das Lesefenster in der E-Mail-Anwendung zu verbergen, können Sie für dieses Erscheinungsbild einen State erzeugen. Alles, was wir dazu tun müssen, ist, in einem State -Tag, dem Sie einen zu referenzierenden Namen geben, die Änderungen anzugeben, die durchgeführt werden müssen. Dann werden alle Änderungen am State durchgeführt, wenn die Eigenschaft currentState auf den Namen eines States gesetzt wird. Die Eigenschaft currentState ist auf allen Flex UI-Komponenten definiert und verweist auf den Namen des States, in dem sich die Komponente befindet. Um zum Ba-

Dazu wäre es nett, wenn man das Lesefenster-Panel durch einen einfachen Doppelklick auf eine Nachricht in der Liste wieder zurückholen könnte:
<mx:DataGrid id="messageList" … doubleClickEnabled="true" doubleClick="currentState = null">…</mx:DataGrid>

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt 

7

an Konstanten binden Weil Sie auf einen State über seinen name verweisen müssen, der einfach nur ein String ist, sind States ein perfekter Ort für die Anwendung des Binden-an-Konstanten-Verfahrens. Mit ein paar Änderungen könnten Sie diesen Code tippfehlersicher machen. Fügen Sie einfach eine Konstante für jeden State ein, den Sie in Ihrer Klasse verwenden werden:
protected const STATE_COLLAPSED:String = "collapsed";

und nutzen Sie dann geschweifte Klammern, um sie zu dereferenzieren, anstatt den Namen des States einzugeben:
<mx:State name="{STATE_COLLAPSED}">… <mx:Button click="currentState = STATE_COLLAPSED"/>
STaTE-bEREChTIGUnGEn

Das Setzen einer Eigenschaft ist eins der Dinge, die States tun dürfen. Außerdem können sie
• einen Style mit <mx:SetStyle/> modifizieren, • der Komponente mit <mx:AddChild/> Kinder hinzufügen, • mit <mx:RemoveChild/> Kinder entfernen und • mit <mx:SetEventHandler/> einen Event-Handler setzen.
bEISPIEl: FlICKR-VORSChaU

Wir nutzen den gleichen HTTPService-Code wie oben und setzen ihn ein, um ein Raster mit Fotos aufzubauen. Als wir mit einem DataGrid die Nachrichtenliste aufbauten, haben wir gesehen, dass ein DataGrid bereits weiß, wie es seine Daten wiedergeben muss. Und diese Fähigkeiten dieser und anderer eingebauter Komponenten können wir tatsächlich ausbauen, indem wir ihnen einen itemRenderer geben: Das ist eine Klasse, die sich um die Anzeige der einzelnen Datenteile kümmert. Auf diese Weise kann sich eine Liste darum kümmern, die Daten durchzusehen, die erforderliche Anzahl von Zellen anzulegen, sie vertikal anzuordnen und zu scrollen, während sich der itemRenderer darum kümmert, die einzelnen Elemente zu zeichnen. Die TileList ist eine weitere eingebaute Datenkomponente, der neue Renderer zugewiesen werden können, und wir lassen diese die Arbeit machen, die Fotos in einem Raster anzuordnen. Während ein DataGrid Daten in Zellen anzeigt und dabei jeweils ein Element in jede Zeile stellt, zeigt TileList seinen Inhalt in einem Raster angeordnet an, mit einem Element pro Zelle und ohne Zeilenoder Spaltenköpfe:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="flickr.send()"> <mx:HTTPService id="flickr" url="http://api.flickr.com/services/rest" requestTimeout="5000" resultFormat="e4x"> <mx:request> <method>flickr.people.getPublicPhotos</method>

Kehren wir zum kanonischen Flickr-Beispiel zurück. Wir wollen ein Raster mit Fotos ansehen und entweder einen Titel oder das Bild selbst sehen. Wir werden zwei Ansichten jedes Bilds als State speichern.
TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt 

8

<user_id>40732543741@N01</user_id> <per_page>200</per_page> <api_key><!-- hier kommt der API-Schlüssel hin --> </api_key> </mx:request> </mx:HTTPService> <mx:TileList selectable="false" paddingLeft="0" paddingRight="0" columnWidth="75" rowHeight="75" width="100%" height="100%" dataProvider="{flickr.lastResult.photos.photo}" itemRenderer="com.partlyhuman.books.flexshortcut.flickr. FlickrTile"/> </mx:Application>

dem XML herauszuziehen, konstruieren damit eine Grafik-URL und nutzen ein Image , um die Grafik anzuzeigen:
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script><![CDATA[ private function photoToImage(photo:*):String { var p:XML = photo as XML; return "http://static.flickr.com/" + p.@server + "/" + p.@id + "_" + p.@secret + "_s.jpg"; } ]]></mx:Script> <mx:Image id="img" width="75" height="75" source="{photoToImage(data)}"/> </mx:Canvas>

Die itemRenderer -Eigenschaft der TileList gibt an, welche Klasse erzeugt wird, um die einzelnen Felder des Rasters zu füllen. Indem wir ihr den Namen der Klasse FlickrTile geben, geben wir an, dass jedes Feld mit einem FlickrTile gefüllt werden soll. Diese Klasse kümmert sich dann um die visuelle Darstellung einer einzigen Datenzeile. Der Rest der Anwendung befindet sich in der Klasse FlickrTile . Innerhalb eines ItemRenderer gibt es die Eigenschaft data , die auf die Datenzeile gesetzt wird, die der Renderer repräsentieren soll. Wir nutzen E4X, um die Eigenschaften aus

Jetzt fügen wir über der Grafik ein Overlay mit dem Titel hinzu:
<mx:HBox id="caption" width="75" height="75" backgroundColor="black"> <mx:Text height="100%" width="100%" truncateToFit="true" selectable="false" color="white" text="{data.@title}"/> </mx:HBox>

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt 

9

Dann ergänzen wir einige States. An Stelle des StandardStates haben wir dieses Mal zwei States, inaktiv und aktiv:
<mx:states> <mx:State name="inactive"> <mx:SetProperty target="{caption}" name="alpha" value="0.4"/> </mx:State> <mx:State name="active"> <mx:RemoveChild target="{caption}"/> </mx:State> </mx:states>

sichtbar zu machen. Wie in Abbildung 12 gezeigt, ist es ein Mikro-Mini-Browser.

Sie haben die Wahl, ob Sie mehrere benannte States verwenden oder den Standard-State nutzen wollen. Sie können einen selbst definierten State als Ihren Standard-State setzen, indem Sie currentState im Wurzel-Tag Ihrer Komponente setzen. Auf diese Weise können wir den Basis-State ignorieren: Die Anwendung befindet sich immer in einem der beiden States, die wir definiert haben. Wir sorgen auch dafür, dass die Maus die Zustandsänderung anstößt, indem wir dem Wurzel-Tag Events hinzufügen:
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"… mouseOver="currentState='active'" mouseOut="currentState='inactive'" currentState="inactive">

abb. 12 States werden als Rollover ausgetauscht.
Wann Man STaTES (nIChT) VERWEndEn SOllTE

Und das ist alles. Jetzt können wir die Maus über dem Raster schweben lassen, um die Bilder hinter den Überschriften

States sind für Änderungen nützlich, die lokal sind, insbesondere für solche, die sich nur auf das Erscheinungsbild auswirken. Weil Sie beliebigen Code ausführen können, wenn Sie in einen State eintreten, indem Sie ihn an das enterState -Event des States binden, ist es verführerisch, States zur Implementierung aller möglichen Arten von Veränderungen zu verwen-

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

60

den. Sie werden allerdings erfolgreicher sein, wenn Sie States einsetzen, um in sich selbst abgeschlossene Änderungen der Benutzerschnittstelle zu verwalten. Eine Schwäche von States ist, dass sie öffentlich sind: Jeder externe Code kann die currentState -Eigenschaft Ihrer Klasse und damit den State Ihrer Klasse ändern. States sind demnach komfortabel, aber nur zu haben, wenn man auf Kapselung verzichtet. Styles Styles machen es leicht, sämtliche Erscheinungsbilder Ihrer Anwendung anzupassen, und bieten Ihnen verschiedene Wege, Erscheinungsbilder mit Objekten zu verknüpfen. Styles sind ziemlich vielfältig: Sie können Styles zur Laufzeit ändern, um Ihre Anwendung reaktionsfähiger zu machen, Sie können sie in MXML oder ActionScript setzen, und Sie können sie an Datenquellen binden.
InlInE-STylES

welche Styles verfügbar sind, oder einen Blick in den StylesAbschnitt der Dokumentation der Klasse werfen. Wenn sie in Tag-Attributen verwendet werden, unterliegen Style-Namen einer einfachen Übersetzungsregel. Ein StyleName in einem Stylesheet darf (und tut das häufig auch) wie in font-family Minuszeichen verwenden, um Wörter zu trennen. Wenn sie als Attribute in einem Tag verwendet werden, werden die Minuszeichen in Camel-Case umgewandelt, beispielsweise wie in fontFamily . Das erfolgt programmatisch, damit sogar die benutzerdefinierten Styles, die Sie erzeugen, umgewandelt werden können. Außerdem dürfen Sie in einem Stylesheet entweder die Camel-Case-Form oder die Form mit dem Minuszeichen verwenden: Beide Formen werden akzeptiert. Um das Erscheinungsbild einer einzelnen Instanz zu ändern (siehe Abbildung 13), können Sie Inline-Styles verwenden:
<mx:Text width="100%" text="Flau, langweilig, stillos. Macht keinen Eindruck."/> <mx:Text width="100%" fontSize="18" color="white" fontFamily="Futura" fontStyle="italic" text="ABSCHLIESSBARKEIT sorgt für WACHSENDE PRODUKTIVITÄT in der WEBDESIGN-MODELLOLOGIE"/>

In MXML sind Styles eine Gruppe von Attributen von Tags. Anders als bei einigen anderen deklarativen XML-Sprachen teilen in MXML die Attribute für Event-Namen, -Styles, -EffektTrigger und -Instanzeigenschaften alle einen Namensraum. Sie können die Icons im Pop-up der Autovervollständigung von Flex Builder 2 verwenden, um Styles auseinanderzuhalten und zu sehen, welche Styles auf welcher Komponente verfügbar sind. Alternativ könnten Sie das Flex Properties-Panel im Designmodus von Flex Builder 2 verwenden, um zu sehen,

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

61

paddingLeft, Es gibt keine margin -Style. Alle Maßeinheiten paddingRight, … werden in Pixeln angegeben.
Kombinierte Kurzformen ( padding: 1 2 3 4 ) werden nicht unterstützt. Benannte Farben und Ganzzahlwerte wie color, backgroundColor 0x5566AA , # 5566AA , werden unterstützt, Kurzformen wie #AAA nicht. abb. 13 Texten etwas Stil spendieren
häUFIG VERWEndETE STylES

backgroundAlpha Alpha-Werte sind reelle Zahlen zwischen 0 und 1. borderStyle, borderSides
Statt wie in CSS border-left , border-right usw. zu setzen, setzen Sie border-style auf einen einzigen Style und border-sides auf eine kommaseparierte Liste mit top , left , right , bottom . Ermöglicht Ihnen eine Positionierung auf Basis einer Mittelinie statt der linken oberen Ecke. Setzen Sie für beide Werte 0, wird der Mittelpunkt eines Objekts auf den Mittelpunkt seiner Elternkomponente gesetzt. Modifiziert Abstände bei Layout-Containern wie HBox .

Es gibt eine Hand voll Styles, die Sie in Flex 2 häufig verwenden werden. Viele davon scheinen mit W3C CSS-Styles identisch zu sein, sind häufig aber etwas anders. Diese Unterschiede können problematisch werden, deswegen finden Sie entsprechende Hinweise dazu in der folgenden Liste. Wie oben gesagt, werden alle Maßeinheiten in Pixeln angegeben. Deswegen sollte kein Wert Einheiten einschließen. Ein weiterer wichtiger Punkt ist, dass die Eigenschaften x , y , width und height keine Styles sind und von Styles nicht gesteuert werden können. Aber top , bottom , left und right sind Styles, die die gleiche Bedeutung haben wie in W3C CSS.
fontFace
Kommaseparierte Listen werden nicht unterstützt. Verwenden Sie _typewriter , _sans , _serif statt CSS-Vorgaben wie sans. Alle Maßeinheiten werden in Pixeln angegeben. Hängen Sie keine Einheiten an.

horizontalCenter, verticalCenter

horizontalGap, verticalGap

Tab. 1 Häufig vorkommende Styles und Anmerkungen:
STylES In aCTIOnSCRIPT SETZEn

Um auf einer einzelnen Komponenteninstanz mit ActionScript einen Style zu setzen, verwenden Sie setStyle(styleName, value) , zum Beispiel:
<mx:Button id="myButton" click="myButton. setStyle('borderColor', 'red')" label="Red"/>

fontSize

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

62

STylE-VERERbUnG

In Abhängigkeit vom jeweiligen Style kann das Setzen eines Styles auf einer Container-Komponente bewirken, dass er auch auf den Kindern des Containers gesetzt wird. Das ist ein anderes Phänomen als kaskadierende Styles, weil es sich nicht auf Style-Regeln bezieht, sondern auf Anzeigelisten. Es wird als Style-Vererbung bezeichnet und gilt üblicherweise für Farben und Text-Styles. Die Flex 2 Language Reference dokumentiert die Vererbungseigenschaft jedes Styles. Cascading Style Sheets Flex 2 unterstützt Cascading Style Sheets mit der gleichen Syntax wie W3C CSS und dem gleichen Kaskadierungsmodell, aber mit ganz anderer Unterstützung für Selektoren. Wenn Sie beginnen, Flex 2-Stylesheets zu verwenden, würde ich Ihnen raten, alles zu vergessen, was Sie über CSS wissen. Oder schieben Sie es zumindest beiseite, bis Sie das nächste Mal wieder HTML und CSS verwenden. Sie können CSS direkt in einen Style -Block in MXML schreiben oder eine externe CSS-Datei referenzieren:
<mx:Style source="styles.css"/>

fentlicht, die Code teilen: Sie können in jeder Top-Level-Application unterschiedliche .css -Dateien einschließen, die nur Styles enthalten, die in dieser Anwendung verwendet werden. Wenn Sie mit CSS arbeiten, denken Sie daran, dass Flex auch CSS in ActionScript kompiliert. Ihre CSS-Dateien werden nicht zur Laufzeit geladen oder angewandt. In Bezug auf den Wechsel von Styles zur Laufzeit ist aber nicht alle Hoffnung verloren. Über die Klasse StyleManager können Sie Styles einsehen und modifizieren und sogar neue Selektoren hinzufügen, während Ihre Anwendung läuft. Sie können zwar nicht einfach ein neues Stylesheet laden, aber ActionScript verwenden, um CSS-Styles zu modifizieren und zu sehen, wie Ihre Anwendung mit diesen Änderungen aufgefrischt wird. Der Hauptunterschied zwischen W3C CSS- und Flex 2-Stylesheets sind die Arten von Selektoren, die unterstützt werden.
TyP-SElEKTOREn

Allerdings können Sie CSS-Style-Blöcke nur aus der WurzelApplication Ihres Projekts einlesen. Wenn Sie an einer großen Anwendung arbeiten, sollten Sie überlegen, ob Sie Ihre Styles nicht in mehrere .css -Dateien aufteilen, die sich mit verschiedenen Subsystemen befassen. Das ist besonders vorteilhaft, wenn Sie an einem Projekt arbeiten, das mehrere SWFs veröf-

Nutzen Sie Typ-Selektoren, um Styles für jede Instanz einer bestimmten Klasse zu setzen. Diese können nicht nur auf eingebaute Komponenten wie ComboBox und ProgressBar verweisen, sondern auch auf MXML- und ActionScript-Klassen, die Sie selbst schreiben. Ganz ähnlich, wie Sie die folgende Zeile in W3C CSS verwenden könnten, um alle geordneten und ungeordneten Listen weiß erscheinen zu lassen:
ul, ol {color: white}

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Was Flex mitbringt

63

könnten Sie Folgendes in Flex 2 CSS verwenden, um alle Label- und Text-Komponenten weiß erscheinen zu lassen:
Label, Text {color: white}
KlaSSEn-SElEKTOREn

Achtung: Sie können auf einem Element nicht, wie in HTMLCode bei <a class="external, big"> mehrere Style-Klassen anwenden.
dER GlObal-SElEKTOR

Nutzen Sie Klassen-Selektoren, um einen allgemeinen Style zu erzeugen, den beliebige Instanzen verwenden können. Um einen Kassen-Selektor zu benutzen, müssen Sie sich nur einen Klassennamen einfallen lassen, ihn in CSS mit dem Style definieren, den Sie darauf anwenden möchten, und den Klassennamen auf den Instanzen setzen, die auf diese Weise erscheinen sollen. Beispielsweise können Sie eine Klasse red erzeugen, die nur ein paar spezifische Komponenten auf dem Bildschirm verwenden werden:
<mx:Style> .red {color: red} </mx:Style> <mx:Button styleName="red" label="Roter Button"/> <mx:Label styleName="red" label="Rotes Label"/> <mx:Button label="Normaler Button"/>

Wie der * -Selektor von W3C CSS gilt der global -Selektor in Flex 2 CSS für alles. Er ist allerdings die allgemeinste Regel und kann von einer spezifischeren Regel überschrieben werden. Das kann nützlich sein, um eine globale Schriftart zu setzen oder, noch besser, um auf einmal Animationen in allen Flex 2-Komponenten zu beschleunigen oder abzuschalten.
global { openDuration: 0; closeDuration: 0; }
nIChT IMPlEMEnTIERTE SElEKTOREn

Über die drei oben erwähnten Selektoren hinaus sind keine weiteren Selektoren implementiert. Das bedeutet, dass Sie Folgendes nicht verwenden können:
• Typ-spezifische Klassen wie Button.bigButton • ID-Selektoren wie #logo • alle Arten von Nachfahren- oder Familien-Selektoren wie Panel LinkButton • Pseudoklassen wie .fancyLabel:hover

Die Nomenklatur wird hier verwirrend, weil wir bereits ein ganz anderes Konzept dafür haben, was eine »Klasse« ist. Auch wenn die Dinger immer noch »Klassen-Selektoren« genannt werden, nutzen Sie das Attribut styleName , um StyleKlassen in Ihren Tags anzuwenden, nicht class , wie Sie es in HTML machen würden.
TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex zum Glänzen bringen

64

CSS OdER nIChT CSS

Flex 2 führt mit der mangelhaften Selektorenunterstützung und der Klassifizierung visueller Eigenschaften wie width und height als Nicht-Styles einen Doppelschlag aus. Es gibt zwar gute Gründe dafür, diese Eigenschaften nicht als Styles zu behandeln, führt aber dazu, dass der Haupteil des visuellen Erscheinungsbilds häufig in einer externen CSS-Datei gespeichert wird, während Teile fest im MXML verankert bleiben. Der Mangel an Selektoren bedeutet, dass Sie eventuell keine andere Wahl haben, als unhandliche Style-Klassennamen zu konstruieren, um Namenskonflikte zu vermeiden, wenn Sie bestimmte Komponenten in einem Stylesheet (mit globaler Gültigkeit) anvisieren. Wenn es sinnvoll ist, könnten Sie Inline-Styles für Styles verwenden, die nur auf einzelnen Instanzen verwendet werden, oder statt Style-Klassen »Mikroklassen« erzeugen. Nehmen wir an, Sie wollten beispielsweise den folgenden Effekt erzielen:
#topPanel Button.redButton {background-color: red; width: 50}

in Flex 2-Anwendungen kommt der Inhalt oft von einer externen Quelle und wird verwendet, um den View zu füllen. Wenn Sie in MXML Views schreiben, geben Sie also eine Darstellung vor, die bereits locker an einen Inhalt gebunden ist. Die Darstellung noch weiter in Struktur und Style aufzuteilen ist Zweck der Externalisierung von CSS. Das ist nützlich, um Komponenten zu schreiben, die mit einem anderen Style wiederverwendet werden könnten. Andererseits könnten Sie sich bei Einwegkomponenten selbst behindern, wenn Sie den Style wie beim Rest der MXML-Darstellung in eine separate Datei stecken. Die Verwendung von externem CSS – ihre Einschränkungen vorausgesetzt – kann Ihren Code entweder vereinfachen oder komplizierter machen. Finden Sie eine Strategie, die gut mit Ihren Styles und Ihrer Anwendung funktioniert und ihre Komplexität und Organisation berücksichtigt.

Flex zum Glänzen bringen
Viele Entwickler (und noch mehr Designer), die sich zum ersten Mal mit Flex beschäftigen, sind zunächst skeptisch, was das Erscheinungsbild von Flex-Anwendungen angeht. Das Standardtheme wird in so vielen Flex 2-Demos verwendet, dass es scheint, als hätte man keine Auswahlmöglichkeiten: Anwendungen scheinen viele Formen annehmen zu können, vorausgesetzt sie sind Blaugrün, haben abgerundete Ecken und nutzen Verdana als Schrift. Wäre das der Fall, wäre es schwierig, Kunden von Flex 2 zu überzeugen.

Sie könnten sich entschließen, an Stelle der Style-klasse .topPanelRedButton tatsächlich eine Klasse RedButton.mxml zu machen, die sich vielleicht im gleichen Paket befindet wie Ihr topPanel und aus Folgendem besteht:
<mx:Button backgroundColor="red" width="50"/>

Bewährte Praktiken der Webstandards-Gemeinschaft würden uns auf eine Trennung von Inhalt und Style verpflichten. Aber

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex zum Glänzen bringen

6

Glücklicherweise ist dem nicht so. Ohne viel Aufwand können Sie Flex 2-Anwendungen entwickeln, die keinerlei Ähnlichkeiten mit dem Standardtheme haben. Denken Sie daran: Im wahren Leben kann das Aussehen Ihrer Anwendung fast so wichtig sein wie ihre Funktionalität. assets Mit den eingebauten Style-Eigenschaften können Sie nur beschränkt Dinge erreichen. Sie können Rahmen, Farben und Abstände ändern, aber um wirklich das Erscheinungsbild Ihrer Anwendung zu ändern, brauchen Sie Assets. Flex 2 behandelt Assets ganz anders als beispielsweise Flash 8. Erstens kompiliert Flex 2 direkt von den Quelldateien. Die IDE besitzt weder Bibliotheks-Panel noch -Schnittstelle für den Import von Assets. Aber auch wenn es auf den ersten Blick nicht so scheinen mag, ist Flex 2 absolut dazu in der Lage, in kompilierten SWFs gemeinsam mit Ihrem Code Multimedia-Inhalte einzuschließen.
aSSET-TyPEn

Sie können die folgenden Inhalte einbetten:
• JPG-/JPEG-Grafikdateien • GIF-Grafikdateien • PNG-Grafikdateien • SVG-/SVGZ-Vektorgrafikdateien (unterstützt eine Unter-

menge von SVG 1.1)
• MP3-Sounddateien • TTF-Schriftdateien • installierte Systemschriften • SWF-Dateien und spezielle Symbole in SWFs

Von diesen können SVG-Dateien und Schriftdateien nicht zur Laufzeit geladen werden.
aSSETS übER STylES EInbETTEn

Sie können Schriften, Soundobjekte, Grafiken und sogar andere SWFs in Ihre Anwendung einbetten. Wenn Sie in eine Anwendung Assets einbetten, haben Sie keine Möglichkeit, die Qualitätseinstellungen zu steuern. Können Sie die Komprimierungseinstellungen dieser Dateien steuern, müssen Sie diese also über externe Programme anpassen.

Das einfachste und üblichste Verfahren, Assets in Ihre Anwendung zu bekommen, ist die Verwendung von Styles. Da die Grafikeinbettung einfach dort platziert wird, wo die Grafik verwendet wird, ist dieses Verfahren intuitiv und leicht verwendbar. Flex 2 nutzt die Embed() -Notation, eine Flex-Erweiterung zu CSS im Gefolge von url() . Die funktionale Notation Embed() kann mehrere Parameter annehmen, von denen einige nur bei bestimmten Typen von Assets anwendbar sind. Der Standardparameter ist source , der, wenn keine anderen Parameter vorhanden sind, weggelassen werden kann.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex zum Glänzen bringen

66

Wenn Sie CSS in ein Stylesheet schreiben, verwenden Sie die Embed() -Notation normal:
<mx:Style> MonaLisa { background-image: Embed("/assets/monalisa.jpg"); background-size: "100%"; } </mx:Style> <louvre:MonaLisa/>

können. Zunächst scheint das vielleicht ziemlich weit weg, ergibt in Bezug auf die neue Anzeigearchitektur von Flash Player 9 aber schnell Sinn. Die Methode zur Erstellung eines beliebigen Typs von Anzeigeobjekt ist eben einfach new . Wenn Sie neue Komponenten erzeugen, die vorhandene erweitern, werden auch diese noch mit new erzeugt. Bitmap-Assets sind also Subklassen von BitmapAsset (und die wiederum Sub-Subklassen von Bitmap ), die eben die Funktionalität einer leeren Bitmap erweitern, indem sie stattdessen eine bestimmte Grafik anzeigen
var var var var a:Button = new Button(); addChild(a); b:Panel = new Panel(); addChild(b); c:TextInput = new TextInput(); addChild(c); d:InboxView = new InboxView(); addChild(d); //benutzerdefinierte Komponente var e:MonaLisaBitmap = new MonaLisaBitmap(); addChild(e); //Asset!

Und wenn Sie Styles inline als Attribute von Tags schreiben, schreiben Sie stattdessen @Embed() :
<mx:Image source="@Embed('/assets/monalisa.jpg')" width="100%" height="100%"/> Embed() nutzt Pfade, die relativ zu der Datei sind, in die sie ge-

schrieben wurden, und die Wurzel des Pfads ist der Quellordner, wie er in den Projekteinstellungen von Flex Builder 2 gesetzt wurde. Wenn Sie nicht gerade einen guten Grund haben, etwas anderes zu machen, sollten Sie absolute Pfade verwenden, damit das Verschieben von Quellcode-Dateien keine Auswirkungen hat.
aSSETS In dER RUnTIME

Wenn Sie in CSS Assets einbetten, generiert der Flex 2-Compiler automatisch Namen für die Klassen. Wollen Sie auf sie außerhalb von CSS zugreifen, können Sie Assets einbetten, indem Sie in ActionScript Metadaten verwenden.
aSSETS MIT aCTIOnSCRIPT EInbETTEn

Assets, die Sie einbetten, werden zu einem Teil der Anwendung und sind gleichermaßen für den Code, den Sie schreiben, und zur Laufzeit für die Anwendung verfügbar. Das Tollste an Assets ist, dass sie in Klassen verwandelt werden

Sie können das Metadaten-Tag Embed verwenden, um Assets in ActionScript einzubetten. Eingebettete Assets sind mit der Class-Referenz verknüpft, die Sie angeben. Sie können auch Bindung über geschweifte Klammern verwenden, um diese Klasse in Inline-CSS-Attributen zu verwenden:

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex zum Glänzen bringen

67

[Embed(source="assets/delete.gif")] private const DeleteAsset:Class; <!-- direkt inline in CSS einbetten --> <mx:Button icon="@Embed(source='/assets/delete.gif')" label="Löschen"/> <!-- an über Metadaten eingebettete Klasse binden --> <mx:Button icon="{DeleteAsset}" label="Löschen"/>

Weil Variablen, die Klassen referenzieren, nicht als Typen verwendet werden können, können Sie nicht var foo:DeleteAsset schreiben. Möchten Sie Referenzen auf Assets übergeben, müssen Sie stattdessen die Superklasse verwenden. Bitmaps werden als BitmapAssets eingebettet, Schriften als FontAssets , SVG als SpriteAsset usw. Sie können als Typ auch die allgemeine Schnittstelle IFlexAsset verwenden.
EInbETTUnGSOPTIOnEn

bare Komponente verwendet wird. Während die Ränder in der ursprünglichen Größe bleiben, können Sie durch die Skalierung der Mitte viele Grafiken dehnen, ohne die wichtigen Details in den Ecken zu deformieren. Sie definieren zwei Linien auf jeder Achse, die die Grafik in ein Raster mit neun Unterteilungen aufgliedern. Die Positionen der vertikalen Linien werden in Pixeln von der linken Seite gemessen und die der horizontalen Linien von oben (da der Ursprung im Flash Player die linke obere Ecke ist). Beispielsweise könnten wir Folgendes verwenden, um die Größe eines Rahmens in einem eingerahmten Bild zu bewahren:
<mx:Image source="@Embed(source='/assets/ monalisa-framed.jpg', scaleGridTop=22, scaleGridLeft=22, scaleGridRight=395, scaleGridBottom=575)" width="100%" height="100%"/>
SChRIFTEn EInbETTEn

Unabhängig davon, ob Sie Embed() in einem Metadaten-Tag, in einem Inline-Style oder einem Stylesheet verwenden, können Sie mit ihm immer Parameter verwenden. Bei allen Typen von Assets unterstützt es die Eigenschaften source und mimeType , die verwendet werden, um die Quelldatei und den MIME-Typ des Objekts anzugeben. Grafische Assets unterstützen außerdem Eigenschaften zur Angabe von Scale-9-Segmentierungen. Scale-9 ermöglicht Ihnen, eine Grafik diskontinuierlich zu skalieren, die üblicherweise als Hintergrund oder als Skin für eine größenveränder-

Um eine Schrift in ein Stylesheet einzubetten, können Sie url() statt Embed() verwenden. Nutzen Sie den speziellen Selektor @font-face , um die Schrift zu definieren, und setzen Sie font-family , um ihren Namen zu erzeugen:
/* die Schrift einbetten */ @font-face { src: url("/assets/fonts/caecilia-light.ttf"); font-family: "Caecilia"; } /* die Schrift verwenden */ .partlyhuman {

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex zum Glänzen bringen

68

font-family: "Caecilia"; font-size: 32; }

Zur Verwendung der Schrift müssen Sie einfach nur die fontfamily referenzieren, die Sie bei der Einbettung deklariert haben. Sie können eine Schrift aus einer TTF-Datei, aus einer TrueType-Schrift, die auf Ihrem System installiert ist, oder aus einer Schrift einbetten, die in ein SWF eingebettet ist. Wenn Sie PostScript- oder OTF-Schriften verwenden müssen, betten Sie diese in ein SWF ein und nutzen dann das SWF als Ziel Ihrer src -Eigenschaft. Wenn Sie Schriften aus einem SWF verwenden, müssen Sie ein @font-face -Element für jeden Style ( bold , italic , bold italic ) erstellen, den Sie verwenden wollen:
@font-face { src: url("assets/fonts/caecilia.swf"); font-family: "Caecilia"; } @font-face { src: url("assets/fonts/caecilia.swf"); font-family: "Caecilia"; font-style: italic } @font-face { src: url("assets/fonts/caecilia.swf"); font-family: "Caecilia"; font-weight: bold;

} @font-face { src: url("assets/fonts/caecilia.swf"); font-family: "Caecilia"; font-style: italic; font-weight: bold; }
SyMbOlE EInbETTEn

Sie können gleichermaßen SWFs selbst und Symbole aus der Bibliothek eines SWF in Ihre Flex-Anwendung einbetten. Wenn Sie ein vollständiges SWF einbetten, können Sie den Code darin verwenden, als wäre er mit ActionScript 3 für Flash Player 9 oder höher veröffentlicht worden, oder Sie können mit älteren SWFs über eine LocalConnection im Host und im eingebetteten SWF kommunizieren. Eingebettete SWFs werden als Subklassen von mx.core.MovieClipLoaderAsset erzeugt, die MovieClip erweitert. Sie können SWFs auch als Bibliotheken einsetzen, um grafische Assets zu organisieren, die Ihre Flex-Anwendung nutzt, und dann die Flash-Entwicklungsumgebung nutzen, um Ihre Assets zu verwalten. Alle Symbole, die für ActionScript als Button- oder MovieClip-Typen veröffentlicht werden, sind über ihren Linkage-Namen verfügbar. Aus eingebetteten Symbolen wird der gesamte Code herausgezogen. Sie werden am besten also nur für Grafiken verwendet. Um ein Symbol anzugeben, das aus einem SWF eingebettet werden soll, nutzen Sie den symbol -Parameter der Embed() -Notation. Beispiels-

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex zum Glänzen bringen

69

weise könnten Sie Folgendes verwenden, um ein Symbol aus einem SWF mit einer Sammlung von Gemälden zu verwenden:
<mx:Image id="laJoconde" source="@Embed(source='paintings. swf', symbol='monaLisa')"/>

Button { up-skin: Embed("/assets/button-up.png"); down-skin: Embed("/assets/button-down.png"); over-skin: Embed("/assets/button-over.png"); }

Skinning Das Einbetten von Grafiken kann für sich genommen schon die visuelle Wirkung Ihrer Anwendung erhöhen. Üblicherweise werden Grafiken als Hintergrund, als frei schwebende Grafiken und als Icons auf Buttons verwendet. Aber um das Erscheinungsbild der Schnittstelle selbst zu ändern, müssen Sie die Skinning-Einrichtungen von Flex 2 verwenden. Skinning kann ganz einfach durchgeführt, indem Grafiken in Skin-Style-Eigenschaften eingebettet werden. Eingebaute Flex UI-Komponenten veröffentlichen mehrere Style-Eigenschaften für das Skinning. Diese lassen sich leicht identifizieren, da sie mit »-skin« enden. Skin-Style-Eigenschaften gibt es in Gruppen, die auf den möglichen Interaktionen der Komponente basieren. Beispielsweise zählen Skins für Buttons seine acht möglichen Zustände auf: up , down , over , disabled – und all diese noch mal, während sie ausgewählt sind (um Buttons zu unterstützen, die ein- und ausgeschaltet werden können). Unten ist das CSS für den benutzerdefinierten Button-Style, den Sie in Abbildung 14 sehen.

abb. 14 Skinning lässt Ihre Anwendung schnell einzigartig aussehen.

Wenn Sie sich sicher sind, dass kein Button in der Anwendung deaktiviert oder ausgewählt ist, reichen diese drei Styles aus. Andernfalls könnte ihr sorgfältig geskinnter Button seine Maske fallen lassen und im Standard-Style erscheinen, wenn er deaktiviert oder ausgewählt wird. Selbst wenn Sie nicht alle Zustände in Ihren Skins verwenden, wäre es also empfehlenswert, alle Skin-Eigenschaften zuzuweisen, beispielsweise indem Sie die Skin-Eigenschaften für den ausgewählten Zustand auf die gleichen Grafiken zeigen lassen wie die Skin-Eigenschaften für den nicht ausgewählten Zustand. Werfen Sie in der Dokumentation bei den einzelnen Komponenten einen Blick in den Styles-Abschnitt, um seine skinbaren Eigenschaften zu sehen.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex zum Glänzen bringen

70

Es kann auch andere Styles geben, die mit den Zuständen einer Komponente verknüpft sind und seine Skins begleiten. Buttons haben die Eigenschaften disabled-color , textrollover-color und text-selected-color , um die Farbe des Texts in Abhängigkeit von diesen Zuständen zu ändern. Eine Anforderung von Skin-Styles ist, dass sie eingebettete Grafiken sein müssen. Während andere Styles wie backgroundimage entweder über eine url() -Notation angegeben und zur Laufzeit geladen oder aber mit der Embed() -Notation angegeben und eingebettet werden können, müssen Skin-Eigenschaften immer eingebettet werden. Das sichert, dass Sie sich nicht mit dem Ladevorgang und der Möglichkeit befassen müssen, dass Ihre Schnittstelle unsichtbar oder nicht verwendbar ist, solange das Laden noch nicht abgeschlossen ist. Ob ein Grafik-Style das Laden zur Laufzeit erlaubt, können Sie ermitteln, indem Sie sich den Typ des Styles anschauen. Wenn Sie eine Style-Eigenschaft mit dem Typ Class sehen, können Sie annehmen, dass Sie ein eingebettetes Asset erwartet. Denken Sie daran, dass das Ergebnis eines Metadaten-Tags Embed eine Class-Referenz ist: Eine Inline- Embed() -Notation erfüllt also die Style-Eigenschaft-Anforderungen für einen Class -Typ. bitmap-Glättung Flash Player 9 und Flex 2 wollen Ihnen wirklich helfen, dass Ihre Anwendung schneller läuft. Egal ob Sie eine Grafik einbetten, sie zur Laufzeit laden oder die Abspielqualität auf

BEST setzen, Flash Player 9 transformiert Bitmaps immer mit

einem schnellen Nächster-Nachbar-Algorithmus. Das bedeutet, dass bei skalierten Grafiken ein Treppeneffekt zu sehen sein kann. Dass dabei die Anzeigequalität der Geschwindigkeit geopfert wird, ist in der Regel eine gute Sache und eine vernünftige Standardeinstellung: In Animationen ist die Frame-Rate wichtiger als die Qualität der einzelnen Frames. Allerdings bietet Ihnen Flex keine einfache Medizin, wenn die Bildqualität für eine bestimmte Grafik entscheidend ist. Es gibt eine Boolesche Eigenschaft namens smoothing , die auf Bitmap -Instanzen definiert ist, eine bilineare Filterung aktiviert und ein glatteres Bild auf Kosten von mehr Berechnungen liefert. Die eigentliche Bitmap ist allerdings tief in der Komponente vergraben, die sie tatsächlich verwendet, und es gibt keinen allgemeinen Weg, an diese innere Bitmap heranzukommen. Der Code für diesen TecFeed schließt eine Klasse namens com.partlyhuman.fx.SmoothingEnabler ein, die alle Bitmaps findet, die in einer Komponente vergraben sind, und für sie das Glätten einschaltet. Sie können sie folgendermaßen auf jedem Anzeigeobjekt verwenden:
import com.partlyhuman.fx.SmoothingEnabler; SmoothingEnabler.enableSmoothing(myDisplayObject);

Die statische Methode baut rekursiv eine Liste des Inhalts des Objekts auf und aktiviert das Glätten auf allen gefundenen Bitmaps, einschließlich extern geladener Grafiken.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex zum Glänzen bringen

71

PROGRaMMaTISChE SKInS

Indem Sie die Drawing-API von ActionScript 3.0 einsetzen, können Sie programmatisch Grafiken auf dem Bildschirm zeichnen. Wenn das von Ihnen beabsichtigte Look-and-Feel mit wenigen Strichen, Füllungen und Gradienten erreichbar ist, wenn Sie ein anpassbares Theme benötigen, wenn Sie Themes auf Elemente mit sehr unterschiedlicher Dateigröße anwenden müssen oder wenn die Dateigröße die entscheidende Rolle spielt, sollten Sie überlegen, ob Sie Ihre Skins mit Code generieren. Das eingebaute »halo«-Theme von Flex 2 ist vollständig programmatisch. Das bedeutet:
• Sie können die Farbe und die Gradienten des Skins mit

Methode updateDisplayList() , damit sie sich selbst zeichnen kann. Indem Sie die Styles untersuchen, die auf Ihrer Klasse gesetzt werden (die von den Styles übergeben werden, die auf der Komponente gesetzt werden, der sie ein Theme gibt), können Sie anpassen, wie Ihr Skin gezeichnet wird. Haben Sie Ihre Skin-Klasse erstellt, können Sie Skin-Styles mit einer zusätzlichen Notation namens ClassReference() darauf setzen, die auch in Inline-CSS eingefügt werden kann, indem ihr das At-Symbol (@) vorangestellt wird:
Button { up-skin: ClassReference('com.partlyhuman.books. flexshortcut.CustomButtonSkin'); }
EIn ThEME ERZEUGEn

Styles anpassen.
• Das Erscheinungsbild fällt nicht auseinander, wenn Sie in

das Theme zoomen oder das Theme auf eine extrem große oder eine extrem kleine Komponente anwenden. Vektorgrafiken, die mit der Drawing-API erzeugt werden, werden unabhängig von der Skalierung immer verlässlich gerendert.
• Die Dateigröße für das gesamte Theme ist sehr klein. Es

sind keine Bitmap-Grafiken eingebettet, und kompilierter Code ist extrem kompakt. Um programmatisch einen Skin für einen Style zu erzeugen, erstellen Sie eine Klasse, die eine geeignete abstrakte Klasse aus dem mx.skins -Paket erweitert, und implementieren die

Es ist möglich, all Ihre geskinnten Klassen, Assets und Styles zu einer SWC-Datei zu kompilieren und diese für mehrere SWFs zu verwenden oder sie als ein Theme zu verteilen. Eine SWC-Datei ist ein Archiv, das kompilierten Code und Assets enthält, gegen die vom Compiler gelinkt werden kann, ohne dass ihr Inhalt neu kompiliert werden muss. Wenn Sie sich entscheiden, eine SWC-Datei dynamisch zu linken, kann sie außerhalb der SWF-Datei vorliegen und auf Anforderung geladen werden. Das ist eine sehr gute Taktik, wenn Sie eine Anwendung in mehrere SWFs aufspalten, weil ein geteiltes Theme dann nur einmal heruntergeladen und nicht in alle SWFs separat einkompiliert werden muss. Das führt zu einer kleineren Download-Größe.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex zum Glänzen bringen

72

Nutzen Sie den Kommandozeilen-Flex-Compiler mxmlc mit dem Kommandozeilen-Argument –theme , um Theme-Dateien zu erstellen. Die Flex 2-Dokumentation erklärt diesen Vorgang ausführlich. Effekte Ein paar gut platzierte reaktive Animationen können eine deutliche Wirkung auf den Eindruck haben, den ein Benutzer von einem Stück Software bekommt. Animationen können dem Benutzer durch visuelle Reaktionen Feedback geben. Glüchlicherweise gibt Flex 2 Entwicklern mit Effects eine Wunderwaffe. Der Einsatz von Effekten und Effekt-Triggern kann Ihre Anwendung herausputzen, ohne Sie ins Schwitzen zu bringen. Effekte sind Klassen im Paket mx.effect , die Effect erweitern. Indem Sie die Eigenschaften einer Effect-Instanz setzen, können Sie ändern, worauf der Effekt Auswirkungen hat, und die Parameter der Animation festlegen. Dann können Sie den Effekt so einrichten, dass er von bestimmten Triggern ausgelöst wird, indem Sie den Effekt einem Effekt-Trigger auf Ihrer Komponente zuweisen. Unten haben wir einen einfachen Effekt hinzugefügt, um die Grafiken in unserem Flickr-Raster einzublenden zu lassen, wenn sie vollständig geladen sind:
<mx:Image id="img" width="75" height="75" source="{photoToImage(data)}"> <mx:completeEffect>

<mx:Fade alphaFrom="0" duration="500" easingFunction="{Cubic.easeOut}"/> </mx:completeEffect> </mx:Image>

Dieser Code nutzt einen Kindknoten, um ein Attribut zuzuweisen, damit wir darin ein Objekt einbetten können. Der Effekt-Trigger ist hier completeEffect , und der Effekt ist ein Fade : Das Objekt wird eingeblendet, wenn das Laden abgeschlossen ist. Dass ein Attribut ein Effekt-Trigger ist, können Sie anhand eines Icons im Autovervollständigungs-Pop-up von Flex Builder 2 sehen, indem Sie im Effekte-Abschnitt der Flex 2-Dokumentation einer Komponente nachschlagen, oder an dem Umstand, dass sein Name auf -Effect endet. Wie in diesem Fall spiegelt der Name eines Effekt-Triggers den Namen des korrespondierenden Events: Ist das Laden abgeschlossen, setzt die Komponente ein complete -Event ab und stößt das Abspielen von completeEffect an, wenn es einen gibt. Effekte versuchen, Sie durch vernünftige Standardwerte zu unterstützen. Der Code oben gibt an, dass der anfängliche Alpha-Wert 0 (vollständig transparent) sein sollte, spart aber den abschließenden Alpha-Wert ( alphaTo ) aus. In der Realität können Sie alphaFrom ebenfalls weglassen, weil der Effekt standardmäßig ein Fade-in von 0 zu 1 verwendet. Unten werden verschiedene Effekte auf verschiedene Trigger auf dem gleichen Button angewandt:
<mx:Button styleName="skinnedButton" label="Effect"> <mx:rollOverEffect>

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex zum Glänzen bringen

73

<mx:Glow color="#ffa0a0" duration="500" easingFunction="{Cubic.easeOut}" blurXFrom="20" blurXTo="20" blurYFrom="20" blurYTo="20" alphaFrom="0" alphaTo="0.5"/> </mx:rollOverEffect> <mx:rollOutEffect> <mx:Glow color="#ffa0a0" duration="500" easingFunction="{Cubic.easeIn}" blurXFrom="20" blurXTo="20" blurYFrom="20" blurYTo="20" alphaFrom="0.5" alphaTo="0"/> </mx:rollOutEffect> <mx:addedEffect> <mx:Resize heightFrom="0" widthFrom="0" duration="500" easingFunction="{Cubic.easeOut}"/> </mx:addedEffect> </mx:Button>

abb. 1 Über den linken Button mit Rollover-Skin und Effekt streichen
EFFEKT-aTTRIbUTE

Die meisten Effekt-Attribute sind für den Effekt spezifisch, den sie repräsentieren, aber es gibt einige, die die Animation im Allgemeinen steuern. Die nützlichsten sind: duration In Millisekunden die Zeit, die es dauert, bis die Animation abgeschlossen ist. easingFunction Eine Referenz auf eine Funktion, die steuert, wie die animierten Eigenschaften über die Zeit interpoliert werden. Sie können die eingebauten Funktionen referenzieren, die im Paket mx.effects.easing angeboten werden. Das sind die Easing-Funktionen von Robert Penner, die in den meisten Tweening-Paketen für Flash und Flex verwendet werden. startDelay Die Verzögerung, bevor die Animation beginnt, in Millisekunden.

Der Button wird von einem Punkt ausgehend vergrößert, wenn er hinzugefügt wird, und leuchtet in Reaktion auf Ihre Maus. Aber das Leuchten erscheint nicht einfach, sondern wird allmählich ein- und ausgeblendet (siehe Abbildung 15). Sie sollten Ihrem Boss nicht verraten, wie einfach das ist.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex zum Glänzen bringen

74

repeatCount und repeatDelay Wie oft der Effekt wiederholt werden soll und die Verzögerung zwischen den einzelnen Wiederholungen in Millisekunden. target oder targets Die Instanz oder ein Array der Instanzen, auf die sich der Effekt auswirken soll. Der Standardwert ist das Objekt, das das Event ausgelöst hat. Ein Wort zu Easing-Funktionen: Da Sie diese Eigenschaft nur auf eine Funktionsreferenz setzen können, ist nicht unmittelbar klar, wie Sie die Eigenschaften von Tweening-Funktionen anpassen, die zusätzliche Parameter erwarten. Die Lösung ist der Einsatz einer partiellen Funktion, einer Funktion, für die einige Eingaben bereits definiert sind. In einigen funktionalen Programmiersprachen wird das direkt in der Syntax unterstützt, aber in ActionScript 3.0 können wir einfach eine Container-Funktion konstruieren:
private const CUSTOM_BACK_S:Number = 100; private const backEaseOutCustom:Function = function(a:Number, b:Number, c:Number, d:Number):Number { return Back.easeOut(a, b, c, d, CUSTOM_BACK_S); }; <mx:Resize duration="1000" easingFunction="{backEaseOutCustom}"/>

ZUSaMMEnGESETZTE anIMaTIOnEn aUFbaUEn

Effekte schränken Sie nicht auf reine Eine-Eigenschaft-Animationen ein. Indem Sie verschiedene Effekte kombinieren, können Sie beliebig komplexe Animationen erzeugen. Das Effektsystem nutzt die Art deklarativer Animationen, die in der Synchronized Multimedia Integration Language (SMIL) des W3C standardisiert sind. Es gibt nur zwei Klassen, die das Timing von Animationsgruppen steuern, Parallel und Sequence , und diese sind leicht zu verstehen. Kinder eines <mx:Parallel> -Tags beginnen alle zur gleichen Zeit und laufen zur gleichen Zeit parallel ab. Kinder eines <mx:Sequence> -Tags werden nacheinander in vorgegebener Reihenfolge abgespielt. Diese beiden Klassen erweitern ebenfalls Effect . Der Effekt, den Sie einem Effekt-Trigger zuweisen, kann also Parallel oder Sequence als Wurzelknoten haben.
häUFIG VERWEndETE EFFEKTE

Der Satz der zur Verfügung stehenden Effect-Klassen und die Möglichkeit, diese zu komplexeren Effekten zusammenzusetzen, bedeutet, dass Sie nur selten Ihre eigenen Effect-Subklassen schreiben müssen. Filtereffekte Fade ändert die Transparenz des Ziels. Blur und Glow wenden Ihre jeweiligen Filter auf ihre Ziele an und ändern die Eigenschaften dieses Filters. Dissolve erzeugt eine Schicht über dem Ziel und blendet diese ein oder aus, um das Ziel zu verbergen oder zu zeigen.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex zum Glänzen bringen

7

Transformationseffekte Resize , Rotate und Move ändern die Größe, Rotation und Position ihres Ziels. Der Rotate -Effekt kann das Zentrum einer Rotation angeben. Der Zoom ändert wie Resize die Größe seines Ziels, ermöglicht Ihnen aber, einen Mittelpunkt anzugeben. Maskeneffekte WipeLeft , WipeRight , WipeUp und WipeDown erzeugen rechteckige Masken und verschieben sie, um ihr Ziel zu verbergen oder zu offenbaren. All diese Effekte erweitert MaskEffect . Sie können eigene Subklassen bilden, um andere Maskenformen vorzugeben. Soundeffekte Der beschreibend benannte SoundEffect spielt einen Soundeffekt in Ihrem Effekt. Indem Sie diese mit Ihren visuellen Effekten in einem Sequence - oder Parallel -Effekt zusammensetzen, können Sie Ihrer Anwendung auch aurales Feedback hinzufügen.
häUFIG VERWEndETE EFFEKT-TRIGGER

Weitem nicht vollständige Liste von Ideen dazu, wo Sie Ihre Effekte anwenden können. Focus-Feedback Nutzen Sie rollOutEffect und rollOverEffect auf beliebigen Komponenten. Sie sollten in Betracht ziehen, die gleichen Effekte für focusInEffect und focusOutEffect zu verwenden, um Ihre Animationen auch bei der Navigation mit der Tastatur anzuwenden. Größenänderungen glätten Sie können einen Resize -Effekt gemeinsam mit dem resizeEffect -Trigger verwenden, um sicherzustellen, dass keine Größenänderungen eines Containers abrupt sind. Abrakadabra! Mit Flair erscheinen und verschwinden Nutzen Sie addedEffect / removedEffect für Kinder, die einer Komponente hinzugefügt werden, oder andernfalls creationCompleteEffect , um die Komponente mit Pep ins Leben zu bringen oder aus dem Leben zu nehmen. View-Übergänge Schalten Sie zwischen den Kindern eines ViewStack (wie TabNavigator ) um, indem Sie ihre visible -Eigenschaft an-/ ausschalten. Änderungen an der Eigenschaft visible können einen hideEffect und einen showEffect anstoßen. Sie können diese also verwenden, um Panels ein- und auszublenden und Überblendung zwischen Tabs zu gestalten.

Das Flex 2-Framework veröffentlicht eine große Vielzahl nützlicher Trigger für Ihre Effekte. Obwohl Sie sie vielleicht nicht alle abonnieren, senden die eingebauten Komponenten von Flex 2 alle möglichen Arten von Events aus, während es sich für Sie darum kümmert, ein UI aufzubauen und zu verwalten. Viele dieser Events dienen auch als Effekt-Trigger. Deswegen sind sie sehr natürliche Orte für Effekte. Unten ist eine bei

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex zum Glänzen bringen

76

WIEdERVERWEndbaRE EFFEKTE

Effektinstanzen direkt in die Tags zu schreiben, die sie anstoßen, ist Demonstrationszwecken in Ordnung, aber kein gutes Verfahren, um wiederverwendbaren, lesbaren Code zu schaffen. Es gibt mehrere Dinge, die Sie tun können, um Ihren Effektcode kompakt zu halten. Erst können Sie die literalen Zahlen aus den Effekt-Tags entfernen und durch Konstanten ersetzen, die Sie unter Verwendung geschweifter Klammern binden. Viele dieser Zahlen sind verknüpft. Beispielsweise verwenden Effekte, die symmetrisch ein- und ausgeschaltet werden, die gleichen Werte für die Dauer und wechseln die Eigenschaften from- und to- . Indem Sie sie in Konstanten in einem Script -Block verschieben, können Sie diese an einem Platz so anpassen, wie Sie es möchten:
private const private const private const private const private const private const private const easeOut; GLOW_BLUR_MAX:Number = 20; GLOW_BLUR_MIN:Number = 0; GLOW_ALPHA_MIN:Number = 0; GLOW_ALPHA_MAX:Number = 0.5; GLOW_DURATION:Number = 500; GLOW_COLOR:uint = 0xffa0a0; GLOW_EASE:Function = mx.effects.easing.Cubic.

blurXFrom="{GLOW_BLUR_MIN}" blurXTo="{GLOW_BLUR_MAX}" blurYFrom="{GLOW_BLUR_MIN}" blurYTo="{GLOW_BLUR_MAX}" alphaFrom="{GLOW_ALPHA_MIN}" alphaTo="{GLOW_ALPHA_MAX}"/> </mx:rollOverEffect> <mx:rollOutEffect> <mx:Glow color="{GLOW_COLOR}" duration="{GLOW_DURATION}" easingFunction="{GLOW_EASE}" blurXFrom="{GLOW_BLUR_MAX}" blurXTo="{GLOW_BLUR_MIN}" blurYFrom="{GLOW_BLUR_MAX}" blurYTo="{GLOW_BLUR_MIN}" alphaFrom="{GLOW_ALPHA_MAX}" alphaTo="{GLOW_ALPHA_MIN}"/> </mx:rollOutEffect> </mx:Button>

Wenn Sie den gleichen Effekt wie anzunehmen für mehrere Instanzen wiederverwenden, können Sie Ihren Effektinstanzen eine id geben und Bindung verwenden, um auf den gesamten Effekt zu verweisen:
<mx:Glow id="buttonGlowIn" … /> <mx:Button rollOverEffect="{buttonGlowIn}" … />

<mx:Button> <mx:rollOverEffect> <mx:Glow color="{GLOW_COLOR}" duration="{GLOW_DURATION}" easingFunction="{GLOW_EASE}"

Der nächste Schritt, den Sie vornehmen könnten, ist, all Ihre häufig verwendeten Effekte in eine Klasse zu verschieben und

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex zum Glänzen bringen

77

diese an jedem Ort einzuschließen und zu binden, an dem Sie einen Effekt daraus benötigen. Sie könnten beispielsweise etwas wie CommonEffects.mxml erzeugen:
<mx:Object xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Glow id="buttonGlowIn" … /> <mx:Glow id="buttonGlowOut" … /> </mx:Object>

weil Effect-Konstruktoren einen Parameter erwarten. Sie könnten eigene Effekte wie ButtonGlowIn.as schreiben wie hier:
package com.partlyhuman.books.flexshortcut.effects { import mx.effects.Glow; import mx.effects.easing.Cubic; public class ButtonGlowIn extends Glow { public function ButtonGlowIn(target:Object = null) { super(target); duration = 500; color = 0xffa0a0; //… alphaTo = 0.5; } } }

und folgendermaßen verwenden:
<fx:CommonEffects id="common"/> <mx:Button rollOverEffect="{common.buttonGlowIn}" rollOutEffect="{common.buttonGlowOut}"/>

Oder Sie könnten eine »Mikroklasse« für einen Button des erforderlichen Stils erstellen: Erzeugen Sie eine MXML-Klasse, die Button erweitert und alle Effekte hat, die Sie darauf setzen wollen. Dann nutzen Sie das Tag für Ihre Klasse dort, wo Sie normalerweise <mx:Button> verwenden würden. Wenn Sie Effekte häufig wiederverwenden, gibt es eine Sache, die Sie unbedingt erwägen sollten: Ihre Effekte zu stylen. Eine wenig bekannte Tatsache: Effekt-Trigger werden intern als Styles implementiert! Sie können in ActionScript auf einer Komponente setStyle("effectTrigger", EffectClass) aufrufen, um Effekte zu setzen. Um Effekte innerhalb eines Stylesheets zu verwenden, nutzen Sie die ClassReference() -Notation, um entweder eine eingebaute Effect-Klasse oder eine von Ihnen erzeugte Subklasse zu lokalisieren. Beachten Sie, dass Sie in MXML keine Effect-Subklasse erzeugen können,

Dann wenden Sie sie in Ihren CSS-Dateien an:
Button { up-skin: Embed("/assets/button-up.png"); down-skin: Embed("/assets/button-down.png"); over-skin: Embed("/assets/button-over.png"); roll-over-effect: ClassReference('com.partlyhuman.books. flexshortcut.effects.ButtonGlowIn');

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex zum Glänzen bringen

78

roll-out-effect: ClassReference('com.partlyhuman.books. flexshortcut.effects.ButtonGlowOut'); }

Das ermöglicht Ihnen, die Macht von Styles und Effekten zu kombinieren, um Styles zu erzeugen, die sich nicht nur mit der Erscheinung, sondern auch mit Bewegung und sogar Sound befassen. Transitions Transitions (Übergänge) wenden die Animationsmacht von Effekten auf die Rekonfigurationsmacht von States an. Eine Transition ermöglicht Ihnen, die Eigenschaften zu animieren, die ein State ändert und definiert, wie ein State-Übergang mit der Zeit ablaufen kann. Eine Transition ist eine Objekt, das angibt, welche States es auslösen kann und welcher Effekt abgespielt wird. Geben Sie fromState , toState oder beides für die Transition an, um Regeln für ihre Auslösung zu erstellen. Wir haben die Flickr-Raster-Anwendung mit einigen Styles und Transitions aktualisiert. Dabei haben wir eine Transition erzeugt, die vom State active , und eine, die vom State inactive angestoßen wird, indem die toState -Eigenschaften der Transitions gesetzt werden. Wenn Sie Effekte als Transitions verwenden, können Sie die für eine State-Änderung erforderlichen Operationen als Teil Ihres Effekt ordnen. Anders gesagt: Transitions können nicht nur die Eigenschaften animieren, die von einem State geän-

dert werden, sondern diese als Teil einer übergeordneten Timeline auslösen. Um die Änderungen zu terminieren, gibt es besondere Effekte, die Sie in einen zusammengesetzten Sequence -Effekt einfügen können, einen für jede mögliche StateAktion: Ein AddChildAction -Effekt stößt ein AddChild im entsprechenden State an, SetStyleAction ein SetStyle und so weiter. Im Beispiel ist SetPropertyAction überflüssig, weil alle Aktionen parallel sind – SetProperty wird immer am Anfang ausgeführt. Wenn es mehrere Überschreibungen des gleichen Typs gibt, können Sie die erwünschte angeben, indem Sie an das gleiche target binden, wie der folgende Code und Abbildung 16 zeigen:
<mx:transitions> <mx:Transition toState="inactive"> <mx:Parallel> <mx:SetPropertyAction/> <mx:Blur target="{img}" blurXTo="{BLUR_AMT}" blurYTo="{BLUR_AMT}" duration="{DURATION}"/> <mx:Fade target="{caption}" alphaFrom="0" alphaTo="{CAPTION_ALPHA}" duration="{DURATION}"/> </mx:Parallel> </mx:Transition> <mx:Transition toState="active"> <mx:Parallel> <mx:SetPropertyAction/> <mx:Fade target="{caption}" alphaTo="0" duration="{DURATION}"/> <mx:Blur target="{img}" blurXTo="0" blurYTo="0"

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex zum Glänzen bringen

79

duration="{DURATION}"/> </mx:Parallel> </mx:Transition> </mx:transitions>

einen Fade-Effekt erzeugen, indem Sie die Eigenschaft filter auf "add" setzen. Der Fade-Effekt wird dann auf alle hinzugefügten Komponenten angewandt. Mögliche Filter sind hide , show , add , remove , move und resize . Filter, Masken, blend-Modi Flex 2 setzt auf die Flash Player 9-Anzeigearchitektur zwar eine Menge auf, trotzdem erweitern alle Flex-Komponenten immer noch DisplayObject . Deswegen können Sie weiterhin die LowLevel-Fähigkeiten nutzen. Auf jedem DisplayObjekt ist ein filters-Array verfügbar – damit also auf jeder Flex-Komponente –, das eine beliebige Anzahl von Filtern aufnehmen kann. Flash Player 9 unterstützt eine Vielzahl eingebauter Filter, die nützlich sein können, einschließlich Weichzeichnern, Leuchten, Schlagschatten, Kantenabflachung, Faltungsmatrizen, Farbtransformationen und Displacement-Maps. Suchen Sie nach ihnen im Paket flash.filters. Sie können auch auf alle Komponenten Masken anwenden: Weisen Sie der Eigenschaft mask ein zweites DisplayObject zu, wird der sichtbare Bereich des zweiten Objekts das erste zeigen. Jede Komponente hat als DisplayObject auch eine blendMode Eigenschaft, die, wenn sie gesetzt wird, die Art ändert, wie es sich auf die Grafiken unter ihm auswirkt. Flash Player 9 und damit Flex 2 bieten eine Menge Blend-Modi, die Ihnen die Möglichkeit verschaffen, Effekte aus Photoshop oder einem ähnlichen Programm zur Laufzeit zu reproduzieren.

abb. 16. Zustandsübergänge lassen die Überschrift verblassen und die Grafik verschwimmen, während sich Ihre Maus bewegt.

Bei komplexeren Transitions kann die filter -Eigenschaft des Effekts hilfreich sein. Statt konkrete Referenzen als Ziele anzugeben, kann die filter -Eigenschaft verwendet werden, um Ziele auf Grundlage einer Regel zu definieren. Wenn ein State neben vielen Aktionen mehrere Kinder hinzufügt, können Sie
TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex erweitern

80

der application-loader Wenn Sie nun Ihre Anwendung bis in die letzte Ecke geskinnt haben, wenn Sie Pakete mit Stylesheets und Effekten haben, wenn Sie aus Ihrer Anwendung alle Gradienten, jedes Auftauchen von Verdana und jede nach Flex-Standard aussehende Scrollleiste entfernt haben, bleibt immer noch eine Sache, die Ihre Anwendung verrät: der Preloader (siehe Abbildung 17).

Klassennamen dem preloader -Attribut Ihrer Application zu. Dann ist das Skinning abgeschlossen:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" preloader="com.partlyhuman.books.flexshortcut.CustomPreloader">

Flex erweitern
Die Programmierung in Flex 2 ist ganz anders als die FlashProgrammierung. Als Flex-Entwickler haben Sie die Aufgabe herauszufinden, wie Sie das bestehende, umfassende Framework am besten einsetzen, um Ihr Ziel zu erreichen. Flash-Entwickler verbringen mehr Zeit damit, Funktionalitäten von Grund auf aufzubauen. Das gibt ihnen mehr Freiheiten, aber weniger Veränderungsspielraum und eine geringere Geschwindigkeit. Außerdem liefert Flex 2 seine besten Leistungen bei Anwendungen. Gebräuchliche Schnittstellen, die Sie von DesktopAnwendungen, Formularen und HTML-Seiten kennen, werden in Flex 2 direkt und häufig in identischen Strukturen unterstützt. Wie Sie gesehen haben, kann es trivial sein, eine Anwendung zu erzeugen, die aus gebräuchlichen UI-Komponenten besteht. Diese Stärke birgt allerdings keine entsprechende Schwäche. Anders als HTML kommt Ihnen Flex offen entgegen. Jede Klasse in der Bibliothek steht als ActionScript-Quellcode zur Verfügung, und Hunderte von Klassen sind nicht finale Klassen, die nur darauf warten, erweitert und Ihren Bedürfnissen

abb. 17. Ihre sorgfältig angepasste Anwendung lüftet das Inkognito: »Ich bin Flex!«

Nachdem Sie sich diese ganze Mühe gemacht haben, werden Sie erfreut erfahren, dass Sie auch einen eigenen Loader schreiben können. Erzeugen Sie eine Subklasse der Klasse DownloadProgressBar , die ihre eigenen Fortschritts-Events abonniert, um ihre Anzeige zu aktualisieren. Weil sie angezeigt wird, bevor das Flex-Framework vollständig initialisiert wurde, ist die DownloadProgressBar ein Sprite und keine UIComponent. In ihr können Sie deswegen keine Flex-Komponenten verwenden. Nachdem Sie eine eigene DownloadProgressBar -Subklasse haben, weisen Sie den entsprechenden

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex zum Glänzen bringen

81

entsprechend angepasst zu werden! Das Framework ist konsistent, damit Sie es lernen und Ihre eigenen Komponenten, Effekte, Skins, Styles oder andere Dinge schreiben können. Flex 2 kommt mit einem wunderbaren Satz von Funkionalitäten, und wenn etwas nicht da ist, können Sie es selbst aufbauen. Vollständige Flexibilität Die beste Sache am Flex-Framework ist, dass Sie es an jedem beliebigen Punkt erweitern können. Sie können konkrete, vollständig verwendbare Klassen wie CheckBox erweitern. Sie können abstrakte Basisklassen wie Container erweitern. Und Sie können reines AS3 schreiben, das nur die Flash Player 9API nutzt. Sie können Klassen in MXML oder ActionScript 3.0 schreiben. So erhalten Flex 2-Entwickler das Beste aus beiden Welten: Sie können eigenen Code schreiben, wenn das erforderlich ist, und können nützliche Klassen verwenden, um die Teile zu bewältigen, für die keine Modifikationen erforderlich sind. Alle Klassen, die wir in den Beispielen dieses TecFeeds geschrieben haben, haben bereits Komponenten erweitert. Denken Sie daran, dass eine MXML-Komponente eigentlich eine ActionScript 3.0-Klasse ist, die die Klasse erweitert, die als ihr Wurzel-Tag angegeben ist. Die Beispiele definieren Subklassen von Flex-Klassen für sehr bestimmte Zwecke. Beispielsweise ist die Flickr-Vorschau eine besondere Art von Anwendung, Application und das Panel zum Verfassen von E-Mails

eine besondere Art von Panel . Wenn Sie die Komponentenarchitektur verstehen, können Sie allerdings Komponenten auf Weisen erstellen, die mit der Zusammensetzung anderer Komponenten nicht möglich sind. Große anwendungen strukturieren Die bisher präsentierten Beispiele haben eine Menge gezeigt, aber die erforderliche Kürze der Darstellung hat eine Diskussion über die Probleme bei der Erstellung großer Anwendungen verhindert. Flex 2 und insbesondere MXML sind sehr mächtige Werkzeuge. Es gibt viele Wege, wie Sie sich selbst damit verletzen können. Auch wenn es zu weit ginge, hier über Anwendungsarchitektur im Allgemeinen zu referieren, gibt es Techniken, die für Flex 2-Anwendungen spezifisch und eine Erörterung wert sind.
EnTWERFEn FüR dIE SEPaRaTIOn

Mit seiner großen Sammlung von Tags ermöglicht Ihnen MXML – und scheint dazu auch zu ermutigen – eine Kombination aus Daten, Struktur, Style und Verhalten. Sie könnten Ihre Anwendung problemlos als eine MXML-Datei strukturieren, mit einem Durcheinander an XML-, Script-, Style-, Transition-, Effect- und Komponenten-Tags. Um Ihren Code modular zu halten, Abhängigkeiten zu minimieren, mehr Codewiederverwendung zu erlauben, simultane Entwicklung zu ermöglichen und die Veränderung zu vereinfachen, können Sie diese Verantwortlichkeiten trennen. Nutzen Sie externe Stylesheets, um die Styles herauszuziehen.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex erweitern

82

Sie sollten die Schnittstelle auch in in sich abgeschlossene, funktionelle und wiederholbare Einheiten aufbrechen und für sie individuelle Klassen erzeugen, anstatt die gesamte Schnittstelle in eine tiefen MXML-Datei zu schreiben. Im E-Mail-Beispiel haben wir separate Klassen für die Hauptanwendung, den Posteingang und das Lesefenster erzeugt. Auch wenn alle direkt geschachtelt und in eine Datei geschrieben werden könnten, ist die Trennung der Verantwortlichkeiten zwischen ihnen klar, und Veränderungen werden ermöglicht, wenn sie auf diese Weise erstellt werden. Vergessen Sie nicht die Option, reine ActionScript-Klassen zu schreiben. Sammeln Sie allgemeine Funktionalitäten in Hilfsklassen. Erzeugen Sie Klassen für nicht sichtbare Objekte wie POPConnection .
MVC MOdIFIZIEREn

zeugt und ihre relevanten Datenfelder als bindbar deklariert, dass man in MXML View-Klassen erzeugt, die direkt an ihre Modellobjekte binden, und dass man ActionScript-Klassen erzeugt, um die Anwendung zu steuern. Weil die Vorteile von MXML in der kompakten Beschreibung von visuellen Komponenten besteht, funktionieren View-Klassen am besten als MXML-Dateien. Es ist nicht notwendig, dass man Controller und View trennt, wenn sie direkt diesen einen View und nichts anderes steuern. Beispielsweise funktioniert die Behandlung von MausEvents als Teil der View-Klasse besser als bei einer externen Klasse, insbesondere bei dem Event-Modell von ActionScript 3.0. Operationen, die Auswirkungen auf die ganze Anwendung haben, gehören aber immer noch in Controller-Klassen. Beispielsweise würde der Controller einer Anwendung ein Modell und Views erzeugen, die Events des Views abonnieren und auf Basis der Views systemweite Operationen durchführen. Ein Klick auf einen E-Mail senden-Button in einem View könnte einen Click-Handler innerhalb des Views anstoßen, der View sendet dann allgemein ein Event aus, das der Controller interpretiert, um dann eine Aktion auszuführen: Er sendet die E-Mail. Die Wurzel einer Flex 2-Anwendung muss eine Subklasse von Application sein. Diese kann als Haupt-Controller der Anwendung verwendet werden, indem die Modelle, Views und unterstützenden Controller instantiiert werden, wenn ihr eigenes initialize -Event abgesetzt wird.

Das Model-View-Controller-Muster (MVC) wurde in unzähligen Anwendungen und als Kernprinzip vieler Frameworks vorteilhaft eingesetzt. Kurz gesagt, ist es eine Struktur, die drei Komponenten isoliert: eine reine Datenrepräsentation des Gegenstands, einen View, der dem Benutzer den Zustand dieser Daten anzeigt, und einen Controller, der Benutzerdaten interpretiert und entweder View oder Modell manipulieren kann. MVC ermutigt uns, Klassen für diese drei Kategorien aufzubauen, und hilft, die Verantwortlichkeiten Verhalten, Struktur und Style zu trennen. Flex 2 funktioniert sehr gut mit einem MVC-Modell. Es scheint natürlich, dass man Modellklassen als ActionScript-Klasse er-

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex erweitern

83

aCTIOnSCRIPT OdER MXMl WählEn

Als Flex 2-Entwickler haben Sie (fast) immer die Wahl, eine Klasse in ActionScript 3.0 oder MXML zu schreiben. Alles, was Sie in MXML tun können, geht ebenfalls in ActionScript, auch wenn das manchmal nicht sehr erstrebenswert ist. Für Klassen, die folgende Kriterien erfüllen, ist es viel einfacher, MXML zu verwenden:
• starke Verwendung von Bindungen • Verwendung von Transitions, Effekten oder States • viele sichtbare Komponenten

vom Setzen eines Styles bis zum Aufruf einer Methode. Sehen Sie sich Folgendes an:
<mx:Button><mx:rollOverEffect> <mx:Fade effectStart="trace('Von einem Effekt angestoßener Code')"/> </mx:rollOverEffect></mx:Button>

Zum Schreiben von Klassen folgender Art ist ActionScript geeigneter:
• ein Konstruktor mit einem oder mehreren Parametern ist

Bei Aktionen, die Seiteneffekte hervorbringen, sollten Sie die Seiteneffekte in Methoden speichern und die Aktionen diese Methoden aufrufen lassen, damit Sie die Verhalten, die Ihre Klasse unterstützt, zentralisieren und explizit machen können. In anderen Worten: Erzeugen Sie eine private API für Klassen, die intern angestoßene Aktionen haben. Sie müssen auch eine Entscheidung über die öffentliche API Ihrer Klasse treffen. Sie könnten es Clients Ihrer Klasse erlauben, Aktionen durch den Aufruf von Methoden ( foo.doBarMode() ), das Setzen von Eigenschaften ( foo.mode = "bar" ), das Ändern eines States ( foo.currentState = "barState" ) oder sogar etwas noch Subtileres anzustoßen. Auch wenn es die ordnungsgemäße Lösung zu sein scheint, äußeren Code darauf zu beschränken, Methoden auf Ihren Klassen aufzurufen, macht es Flex 2 in den meisten Fällen bequemer, implizite Setter statt Methoden zu verwenden. Wenn Sie die API Ihrer Klasse um implizite Akzessoren und damit Eigenschaften entwerfen, werden die folgenden Dinge erleichtert:
• das Binden des Ergebnisses einer Funktion, da man an ei-

erforderlich
• keine visuelle Repräsentation • Kindkomponenten sollten ncht als public entblößt werden

Sie können in MXML auch Interfaces verwenden, indem Sie im Wurzel-Tag Ihrer Klasse ein implements -Attribut angeben:
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" implements="ISomeInterface" … >
IMPlIZITE aKZESSOREn In EInER aPI

Flex 2 ist mit Seiteneffekten sehr flexibel. Alle Arten von Operationen können so gestaltet werden, dass sie Effekte haben – um Code auszuführen oder irgendeine Aktion durchzuführen –,

nen Getter binden kann,

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex erweitern

84

• die Ausführung von Code auf Objekten, die in MXML er-

zeugt wurden, indem ihre Eigenschaften gesetzt/ihre Setter als Attribute des MXML-Tags aufgerufen werden,
• das Durchführen von Aktionen als Teil eines States oder Effekts, indem die Aktion SetProperty verwendet wird.

ken, obwohl ihre Ergebnisse erst gezeigt werden, wenn die Komponente neu gezeichnet wird. Flex löst dieses Problem, indem es erlaubt, dass bestimmte Attribute immer wieder gesetzt werden können, aber mit der Berechnung der Auswirkungen dieser Attribute wartet, bis es die Komponente neu zeichnen muss. Es hält nach, was aktualisiert werden muss, indem es diese Attribute invalidiert und, unmittelbar bevor die Komponente gerendert wird, wieder validiert, indem es ihre Effekte berechnet. UIComponents können ihre Eigenschaften, Größe und Anzeigeliste invalidieren. Die Eigenschaften, deren Effekte hinausgeschoben werden, werden von einer besonderen Komponente definiert, und Sie können die Entwertungssequenz nutzen, um die teuren Operationen Ihrer eigenen Komponenten hinauszuzögern, indem Sie die Validität Ihrer eigenen Eigenschaften nachhalten. Invalidierung und Validierung werden durch Methodenpaare auf UIComponent implementiert.
invalidateProperties() invalidateSize() invalidateDisplayList()
commitProperties() measure() updateDisplayList()

Eigene UI-Komponenten erstellen Um nahtlos funktionierende UI-Komponenten zu erstellen, ist es entscheidend, dass Sie verstehen, wie das Flex-Framework Komponenten implementiert. Funktionalitäten, die allen Komponenten im Flex-Framework gemeinsam sind, befinden sich in der Basisklasse UIComponent , die alle Flex-Komponenten erweitern.
InValIdIERUnG

UIComponents sind träge (im wünschenswerten, computerwissenschaftlichen Sinn): Sie schieben Arbeiten hinaus, wenn das möglich ist. Es gibt keine Grenze dafür, wie häufig Code die Eigenschaften einer Komponente ändern kann. Komponenten werden aber nur mit einer maximalen Rate neu gezeichnet, die von Ihrer Anwendung definiert wird. Wenn Ihre Anwendung mit 30 Frames pro Sekunde läuft, kann eine Komponente in einer Sekunde maximal 30-Mal neu gezeichnet werden, während Sie problemlos eine Schleife entwerfen könnten, die eine Eigenschaft einer Komponente 1000-Mal so schnell setzt, wie das ausgeführt werden könnte. Das Ergebnis dieser Zuweisung könnte aufwendige Operationen wie die Berechnung des Layouts der Kinder der Komponente bewir-

layoutChrome()

Wenn auf Ihrer benutzerdefinierten Komponente eine Eigenschaft gesetzt ist, die eins dieser Attribute entwertet, rufen Sie die Invalidierungsmethode auf. Natürlich enthält UICom-

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex erweitern

8

ponent bereits die richtigen Invalidierungen für eingebaute Eigenschaften: Wird width gesetzt, wird invalidateSize() bereits aufgerufen. Sie können die Validierungsmethoden überschreiben, um eigene Verhalten anzubieten. Beispielsweise können Sie einen »bleed«-Effekt erreichen, indem Sie die Größe Ihrer Komponente in measure() bewusst falsch darstellen. Sie können die Verarbeitung der benutzerdefinierten Eigenschaften, die Sie einer Komponente hinzugefügt haben, verzögern, indem Sie eigene Instanzvariablen ergänzen und ihre Validität nachhalten und commitProperties() überschreiben, um die Ergebnisse invalider Eigenschaften zu verarbeiten. Sie können Kindkomponenten, die Sie manuell verwalten wollen, bewegen, hinzufügen und entfernen, indem Sie updateDisplayList() überschreiben. Wenn Sie die Validierungsmethode überschreiben, sollten Sie darauf achten, dass Sie den Aufruf der überschriebenen Methode ihrer Superklasse einschließen, damit die Komponente, die Sie erweitern, ordentlich funktioniert. Sie sollten nie eine der Invalidierungsmethoden überschreiben müssen, da diese nur ein invalid-Flag setzen. Sie können sie aber manuell aufrufen.
KIndER

beiten, in der eine UIComponent das atomare Element ist. In Wirklichkeit enthalten Komponenten Hintergründe, Rahmen und die Shapes und Textfelder, aus denen sie bestehen. Flex lässt Sie die Kreise und Textfelder vergessen und stattdessen an Radiobuttons denken. Diese Abstraktion bedeutet auch, dass addChild() in einer Flex-Komponente eine Komponente erwartet. Sie können einer Komponente mit addChild() keine einfachen DisplayObjects wie Bitmaps, TextFields oder Sprites hinzufügen. Wenn Sie eigene Komponenten mit Verhalten aufbauen wollen, das unter Flex nicht normal ist, und Sie mehr Steuerungsmöglichkeiten haben wollen, sollten Sie eventuell zu einfachen DisplayObjects zurückgehen. Sie können diese Abstraktion umgehen, indem Sie über die rawChildren -Eigenschaft einer Container-Klasse gehen. Dieses Objekt nutzt die gleichen Methoden für den Zugriff auf Kinder, enthält aber alle Kinder des Eigentümers, der eine Komponente oder etwas anderes sein kann, zum Beispiel:
var vbox:VBox = new VBox(); var sprite:Sprite = new Sprite(); //Im Sprite ein paar Grafiken zeichnen. vbox.addChild(sprite); //NICHT OK, Sprite ist keine //UIComponent vbox.rawChildren.addChild(sprite); //OK!

Flex 2-Komponenten teilen eine nützliche Notlüge – eine Abstraktion – über die Kinder, die sie enthalten. Sie überschreiben alle Methoden zur Manipulation von Kindern wie addChild() und getChildAt() , damit sie sich nur mit Komponenten befassen müssen. Sie lassen Sie in einer Flex-Welt ar-

Kinder, die Sie als rohe Kinder hinzufügen, werden vom FlexFramework nicht wie andere Komponenten manipuliert. Sie werden dem Layout nicht hinzugefügt und nicht angeordnet

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex erweitern

86

oder skaliert, wenn die entsprechenden Flex-Events abgesetzt werden. Sie können rohe Kinder in einer Methode, die für das Neuzeichnen verantwortlich ist wie updateDisplayList() , allerdings manuell manipulieren. Alternativ kann die Image -Komponente verwendet werden, um die Kernanzeigetypen anzuzeigen und mit einem UIComponent-Wrapper zu umgeben, der ihnen die Fähigkeiten einer gewöhnlichen Komponente gibt: Styles, Effekte, States setzen, sie in ein Layout einschließen usw.
//Ein Sprite erzeugen und zeichnen. var image:Image = new Image(); addChild(image); image.source = sprite;

Methode wird aufgerufen, wenn die Komponente einer Elternkomponente hinzugefügt wird. Es kann also möglich sein, dass sie auf einer Instanz einer Komponente mehrfach aufgerufen wird, wenn dieser neue Eltern gegeben werden. In diesem Fall können Sie einen Schalter verwenden oder die vorhandenen Kinder prüfen, um zu verhindern, das die Komponente doppelt oder öfter konstruiert wird.
UPdaTEdISPlaylIST()

Wichtige UIComponent-Methoden Sie können einer Komponente eigene Verhalten hinzufügen, indem Sie eine oder mehrere dieser Methoden überschreiben. In den meisten Fällen sollten Sie daran denken, vor Ihrem eigenen Code die Superklassenimplementierung der Methode aufzurufen.
CREaTEChIldREn()

Die Methode updateDisplayList() wird aufgerufen, wenn die Anzeigeliste invalidiert wurde. Das tritt automatisch ein, wenn sich die Größe ändert, die der Komponente zur Verfügung steht, oder wenn sich das Layout des Eltern-Containers der Komponente ändert. Nutzen Sie updateDisplayList() , um die Komponente auszurichten und zu zeichnen. Bereiten Sie die Komponente in dieser Methode auf die neue Größe vor, indem Sie die Größe der Kinder anpassen, diese ausrichten und größenabhängige Elemente neuzeichnen.
COMMITPROPERTIES()

In MXML-Komponenten würden die Tags, die die Komponente beschreiben, in der Methode createChildren() in eine tatsächliche Kindkomponente umgewandelt. Sie können diese Methode überschreiben, um zusätzliche Kinder hinzuzufügen oder der Liste der rohen Kinder Kinder hinzuzufügen. Diese

commitProperties() wird aufgerufen, um alle Änderungen zu aktualisieren und zu validieren, die durch invalidateProperties() hinausgeschoben wurden. Sie können diese Methode

einsetzen, um Ihre eigenen Eigenschaften für eine hinausgeschobene Ausführung zu ergänzen. Wenn Ihre Komponente zwischen so unterschiedlichen Dingen wie Äpfeln und Birnen umschalten muss, möchten Sie diesen Übergang vielleicht hinausschieben:

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex erweitern

87

private var isFruitInvalid:Boolean = false; private var _fruit:String; public function set fruit(newFruit:String):void { if (_fruit == newFruit) return; _fruit = newFruit; isFruitInvalid = true; invalidateProperties(); } override protected function commitProperties():void { super.commitProperties(); if (isFruitInvalid) { //Hier die nötige Arbeit für das Tauschen //von Äpfeln und Birnen machen. isFruitInvalid = false; } }
STylEChanGEd()

MEaSURE()

measure() wird aufgerufen, wenn der Wert der Komponente

nicht explizit gesetzt wird und es dem Container überlassen bleibt, die Größe zu bestimmen, in der der Container erscheinen soll. Eine Implementierung dieser Methode sollte measuredWidth und measuredHeight des Objekts setzen und wahrscheinlich auch die entsprechenden measuredMinWidth und – Height sowie measuredMaxWidth und – Height . Diese Gruppe von Eigenschaften repräsentiert die gewünschte Größe der Komponente und die minimale und maximale akzeptable Größe. Der Container der Komponente nutzt diese Informationen, um die endgültige Größe der Komponente festzulegen. Das Setzen dieser Eigenschaften garantiert die Größe der Komponente nicht. Werden width und height explizit gesetzt, garantiert das jedoch die Größe und umgeht alle Anforderungen von measure() . die lebensdauer von Komponenten Wenn eine Komponente erzeugt wird, führt Flex eine Reihe von Schritten aus, bevor die Komponente bereit ist, auf dem Bildschirm zu erscheinen. In jeder Phase der Initialisierung einer Komponente wird ein FlexEvent abgesetzt, damit Sie Code bis zum erforderlichen Moment hinausschieben können, wenn der Code von visuellen Aspekten der Komponente abhängig ist. Nach der Instantiierung einer Komponente mit new können Sie auf der neuen Instanz Eigenschaften setzen und Methoden aufrufen. Sind diese aber von visuellen Eigenschaften

Wenn Sie benutzerdefinierte Styles erzeugt haben oder einen Style manuell implementieren müssen oder zusätzlichen Code ausführen müssen, wenn Styles geändert werden, können Sie styleChanged() überschreiben, um das zu ermöglichen. Die Methode hat ein Argument, den Namen des Styles, der gesetzt wird. Um den Wert für diesen Style abzurufen, verwenden Sie getStyle() , das den neuen Wert zurückliefert.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Flex erweitern

88

oder Kindern der Komponenten abhängig, könnten Sie Laufzeitfehler erhalten. Wenn Sie die Komponente mit addChild() einer Anzeigeliste hinzufügen, erfolgt der Rest der Instantiierung.
• Die parent -Eigenschaft der Komponente wird gesetzt. • Auf der Komponente werden die Styles berechnet. • Das preinitialize -Event wird abgesetzt. Die Komponente

• Das updateComplete -Event wird abgesetzt. Dieses Event wird

jedes Mal abgesetzt, wenn die Position, die Größe oder das Layout der Komponente geändert wird. benutzerdefinierte Styles Flex ermöglicht Ihnen, der vorhandenen Menge von Styles Ihre eigenen Styles hinzuzufügen. Um diese zu implementieren, müssen Sie ein Style -Metadaten-Tag erzeugen und den Code schreiben, der erforderlich ist, um Ihren Style bei der Initialisierung der Komponente und bei der Änderung des Werts des Styles wiederzugeben, indem Sie styleChanged() überschreiben. Die Syntax eines Style -Metadaten-Tags ist:
[Style(name="customBorderColor", type="uint", format="Color")]

wurde immer noch nicht gemessen, noch wurden ihre Kinder erzeugt.
• createChildren() wird auf der Komponente aufgerufen. • Alle Invalidierungsmethoden werden aufgerufen. • Das initialize -Event wird abgesetzt. Die Kinder der Kom-

ponente wurden noch nicht initialisiert, und der Komponente wurde bisher weder Größe noch Layout gegeben, noch wurden hinausgeschobene Eigenschaften validiert.
• Flex wartet darauf, dass das nächste render -Event abgesetzt

Sie können nur bestimmte String-Werte erlauben, indem Sie die Eigenschaft enumeration setzen:
[Style(name="customBorderType", type="String", enumeration="squiggly,wiggly,jiggly")]

wird.
• Alle Validierungsmethoden werden aufgerufen: commitProperties() , measure() , layoutChrome() und updateDisplayList() in dieser Reihenfolge. Das wird beim nächsten render -Event wiederholt, wenn eine der Validierungsmetho-

den eine Eigenschaft wieder invalidiert.
• Die Komponente wird auf sichtbar gesetzt, und das creationComplete -Event wird abgesetzt.

Das Metadaten-Tag sollte in jede Klasse platziert werden, auf die Sie den Style anwenden. Aber wenn Sie die inherit -Eigenschaft des Styles auf yes setzen, wird er automatisch auf Subklassen der Klasse angewendet, in die er eingeschlossen ist. Das Tag sollte entweder in ActionScript vor der Klassendefinition erscheinen oder innerhalb eines <mx:Metadata> -Tag in MXML.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Weitere Features

89

Ist das Tag einmal ordentlich eingeschlossen, kann der Style mit setStyle() , inline oder in externem CSS gesetzt werden. Flex Builder 2 schließt benutzerdefinierte Styles sogar in die Autovervollständigung seines CSS-Modus ein.

Validierer Das Paket mx.validators enthält Klassen, die Werte unmittelbar validieren und ein grafisches Feedback liefern können. Sie können prüfen, ob Eingaben gültige E-Mail-Adressen, Kreditkartennummern, Postleitzahlen usw. sind. Sie können auch leicht einen regulären Ausdruck einbinden, um beliebige Formate zu validieren. Formatierer Das Paket mx.formatters enthält Klassen, die Daten und Strings unmittelbar in »schön gedruckte« Strings mit einer besonderen Formatierung für Telefonnummern, Datumsangaben, Währungsangaben usw. umwandeln. Repeater Wenn Sie mehrere Kopien eines Blocks von MXML einschließen wollen, können Sie ihn mit einem <mx:Repeater> -Tag versehen. Verwenden Sie es nur für festgelegte UI-Blöcke. Seine Verwendung ist kompliziert, und es ist nicht das richtige Werkzeug für dynamische Daten. diagramme Flex Charting (http://www.adobe.com/products/flex/charting/) ist ein eigenständiges Produkt, das von Adobe angeboten wird und Ihnen ermöglicht, in Flex 2 Diagramme mit laufender Aktualisierung, Styles und Animationen einzubinden.

Weitere Features
Die vorangehenden Abschnitte dieses TecFeeds behandeln die Kernthemen der Flex 2-Entwicklung und streifen die FlexBibliothek mit ihren über 600 Klassen nur. Ich bin mir bewusst, dass dieser TecFeed nicht alle Themen vollständig behandelt, aber ich hoffe, dass ich Ihnen eine Idee davon vermitteln kann, was es alles gibt und wo Sie Informationen dazu finden. Sie werden einiges an Zeit sparen, wenn Sie auf existierende Einrichtungen zurückgreifen, anstatt sie selbst zu schaffen. Cursor-Verwaltung Sie können den Standardzeiger mit der Klasse CursorManager leicht durch ein eingebettetes Cursor-Bild austauschen. drag-and-drop Sie können Ihren Benutzern mit ein paar einfachen Attributen ( dragEnabled , dropEnabled ) die Möglichkeit geben, Objekte in Datenkomponenten per Drag-and-Drop zu verschieben. Außerdem können Sie mit der Klasse DragManager eigene Dragand-Drop-Verhalten erzeugen.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Zusammenfassung

90

logging Flex 2 kommt mit einer vollständigen Logging-API, die Ihnen eine Protokollierung ermöglicht, um Ausgaben und Dateien nachzuhalten, Log-Verkehr zu filtern sowie unterschiedliche Logging-Stufen und -Katagorien zu verwenden. Diese Klassen finden Sie im Paket mx.logging . Internationalisierung und lokalisierung Sie können die ResourceBundle-API verwenden, um StringRessourcen und Assets aus lokalisierten Bundles zu referenzieren, die ausgetauscht werden können, indem dem Flex 2Compiler ein locale -Parameter übergeben wird. Das Metadaten-Tag [ResourceBundle] und die MXML-Direktive @resource bieten Zugriff auf die Bundles. Testing FlexUnit (http://labs.adobe.com/wiki/index.php/ActionScript_3: resources:apis:libraries) ist ein freies Adobe Labs-Framework für die Automatisierung von Unit-Tests. Verlaufsverwaltung Die Klasse HistoryManager kann Navigationszustände mit den Zurück- und Vor-Verlaufsfunktionen des Browsers verknüpfen, wenn Ihre Flex-Anwendung in einem Webbrowser läuft. Indem Sie das Interface IHistoryManagerClient implementieren, können Sie auch Zustände Ihrer eigenen, selbst definierten Komponenten mit dem Browserverlauf verknüpfen.

Zusammenfassung
Ich hoffe, dass Ihnen dieser TecFeed Flex näher bringen konnte. Auch wenn ich mich auf das Wichtigste beschränken musste, hoffe ich, dass ich viele Fragen beantworten konnte, die Neulinge in der Flex-Programmierung haben. Mein Ziel war es, Sie mit so viel Flex 2 aufzuladen, dass Sie mit der Arbeit an der nächsten großen Web 2.0-Anwendung beginnen, reich werden und früh in Rente gehen können. Ihre Kommentare sind mehr als willkommen: Nehmen Sie an der Diskussion unter http://www.partlyhuman.com/books/flexshortcut/ teil. Wenn Sie mehr zu den hier präsentierten Themen herausfinden wollen, bietet O'Reilly viele Ressourcen, die mit diesem TecFeed verwandt sind, insbesondere die Bände der Adobe Developer Library:
• Programming Flex 2.0 von Chafic Kazoun und Joey Lott • Flex 2.0 User Interface Design & Development von Matt Voer-

man und Simon Reid
• Flex 2.0 Cookbook von Chafic Kazoun, Joey Lott et al. • ActionScript 3.0 Cookbook von Joey Lott, Darron Schall und

Keith Peters
• Essential ActionScript 3.0 von Colin Moock • ActionScript 3.0 Quick Reference von William Sanders • ActionScript 3.0 Design Patterns von William Sanders und

Chandima Cumaranatunge Mehr Informationen finden Sie unter http://www.oreilly.de/.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

Schnelleinstieg in Flex 2

Impressum

91

Die Informationen in diesem eBooklet wurden mit größter Sorgfalt erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen werden. Verlag, Autoren und Übersetzer übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene Fehler und deren Folgen. Alle Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt und sind möglicherweise eingetragene Warenzeichen. Der Verlag richtet sich im wesentlichen nach den Schreibweisen der Hersteller. Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen. Texte, Abbildungen und Design dieses eBooklets sind urheberrechtlich geschützt. Der Kauf berechtigt lediglich zur persönlichen Nutzung des PDF-Dokuments. Das Kopieren, Weitergeben, Vertreiben und Veröffentlichen des eBooklets in gedruckter oder elektronischer Form ist untersagt. Kommentare und Fragen können Sie gerne an uns richten: O’Reilly Verlag Balthasarstraße 81 50670 Köln Tel.: 0221/9731600 Fax: 0221/9731608 E-Mail: kommentar@oreilly.de Copyright: © 2007 by O’Reilly Verlag GmbH & Co. KG

Die Originalausgabe erschien 2007 unter dem Titel Introduction to Flex 2.0 bei O’Reilly Media, Inc. Die Adobe Developer Library bietet Wissen aus erster Hand für Entwickler von plattformunabhängigen Webanwendungen. Sie umfasst Publikationen und Online-Ressourcen zur Entwicklung von Rich Internet Applications mit Adobe-Technologien. Die Adobe Developer Library ist eine Kooperation zwischen O'Reilly Media und Adobe Systems, Inc. Mehr darüber erfahren Sie unter www.adobedeveloperlibrary.com. Die technische Lektorin für dieses Dokument war Stacey Mulcahy. Sie ist eine Flash-/Flex-Entwicklerin, die ihre Zeit damit verbringt, Rich Internet Applications zu erstellen, die häufig sogar Designern gefallen. Ihre Nächte verbringt sie damit, einer Spielsucht nachzugehen, die zu verbergen sie sich nicht einmal die Mühe macht. In ihrem Flash-/Flex-orientierten Blog ereifert sie sich mehr, als dass sie schwärmt. Sie finden es unter: www.bitchwhocodes.com Übersetzung und deutsche Bearbeitung: Lars Schulten, Köln Lektorat: Inken Kiupel, Köln Korrektorat: Sibylle Feldmann, Düsseldorf Reihenlayout: Theo Spangenberg, Neunkirchen-Seelscheid Satz: Conrad Neumann, München Finishing, Satz Werbeseiten: G&U Language & Publishing Services GmbH, (www.GundU.com) Produktion: Andrea Miß, Köln ISBN 978-3-89721-625-9

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

TecFeeds – Wissen zu aktuellen Technologien

Ergänzende O’Reilly-Titel

92

Chafic Kazoun & Joey Lott Deutsche Übersetzung von Sascha Kersken & Peter Klicman 1. Auflage Oktober 2007 ISBN 978-3-89721-726-3 560 Seiten, gebundene Ausgabe EUR 54,90, SFR 88,90

Hans Weigl 1. Auflage September 2007 ISBN 978-3-89721-634-1 60 Seiten, PDF ca. 3 MB EUR 8,90

Schnelleinstieg in adobe aIR (TecFeed) Programmieren mit Flex 2
Adobe Flex ist ein Framework für die Entwicklung plattformübergreifender Rich Internet Applications, die im Flash-Player laufen. Die Anwendungen sind zwar webbasiert, dabei jedoch so schlank, dass man den Eindruck hat, auf dem eigenen Desktop zu arbeiten. Programmieren mit Flex 2 richtet sich an Programmierer, die die Gelegenheit nutzen wollen, in die Entwicklung von RIAs einzusteigen, ohne Flash zu lernen. Das Buch bietet einen kompakten Einstieg in ActionScript 3 und den XML-Dialekt MXML sowie in jede Menge Features, die das Framework von Hause aus mitbringt. Konzepte werden anschaulich vermittelt, und durch die vielen Beispiele wird sofort plastisch, was Flex 2 leisten kann. Adobe AIR ist eine betriebssystemübergreifende Laufzeitumgebung, die eine völlig neue Art von Rich-Internet-Applikationen möglich macht: AIR-Anwendungen können sowohl auf Daten aus dem Web als auch auf den Desktop des Users zugreifen – und das auf der Basis gängiger Webtechnologien wie HTML, CSS, JavaScript, Flash und Flex. In diesem TecFeed lernen Sie anhand von konkreten Beispielen die Struktur und Funktionsweise von AIR-Anwendungen kennen und erfahren, wie Sie sie debuggen, kompilieren und eine AIR-Installationsdatei packen. Der Zugriff auf das lokale Verzeichnissystem, die Einbindung von PDF-Dateien und SQLite werden ebenso behandelt. Schnelleinstieg in Adobe AIR richtet sich an Leser, die Kenntnisse in einer Programmiersprache mitbringen und sich mit HTML, JavaScript und ActionScript auskennen.

Colin Moock 1. Auflage Juni 2007 ISBN 978-0-596-52694-8 946 Seiten, Broschur EUR 53,00, SFR 84,90

Joey Lott, Darron Schall & Keith Peters 1. Auflage Oktober 2006 ISBN 978-0-596-52695-5 586 Seiten, Broschur EUR 38,00, SFR 64,90

Essential actionScript 3.0
More than two years in the making, ActionScript 3.0 presents perhaps the most substantial upgrade to Flash's programming language ever. The enhancements to ActionScript's performance, feature set, ease of use, cleanliness, and sophistication are simply staggering. Revolutionary improvements abound. Essential ActionScript 3.0 is an update to Essential ActionScript 2.0, once again focusing on the core language and object-oriented programming with some coverage of the Flash Player API. Approximately half of the book focuses on the new features and functionality of ActionScript 3.0, while the rest focuses on changes between the 2 and 3 releases.

actionScript 3.0 Cookbook
Solutions for Flash Platform and Flex application developers
Well before Ajax and Windows Presentation Foundation, Macromedia Flash provided the first method for building »rich« web pages. Now, Adobe is making Flash a full-fledged development environment, and learning ActionScript 3.0 is key. That's a challenge for even the most experienced Flash developer. This Cookbook offers more than 300 solutions to solve a wide range of coding dilemmas, so you can learn to work with the new version right away.

TecFeeds © 2007 by O’Reilly Verlag

è Inhalt

TecFeeds – Wissen zu aktuellen Technologien

Ergänzende O’Reilly-Titel

93

William Sanders & Chandima Cumaranatunge 1. Auflage Juli 2007 ISBN 978-0-596-52846-1 532 Seiten, Broschur EUR 43,00, SFR 71,90

Mike Chambers, Rob Dixon, & Jeff Swartz 1. Auflage April 2007 ISBN 978-0-596-51391-7 138 Seiten, Broschur EUR 14,00, SFR 22,90

actionScript 3.0 design Patterns
Object Oriented Programming Techniques
If you're an experienced Flash or Flex developer ready to tackle sophisticated programming techniques with ActionScript 3.0, this hands-on introduction to design patterns takes you step by step through the process. You learn about various types of design patterns and construct small abstract examples before trying your hand at building fullfledged working applications outlined in the book.

apollo for adobe Flex developers Pocket Guide
a developer's Reference for apollo's alpha Release
Now you can build and deploy Flash-based Rich Internet Applications (RIAs) to the desktop using Adobe's Flex framework. Written by members of the Apollo product team, this is the official guide to the Alpha release of Adobe Apollo, the new cross platform desktop runtime from Adobe Labs. Numerous examples illustrate how Apollo works so you can start building RIAs for the desktop right away.

Sascha Kersken 3. Auflage September 2007 ISBN 978-3-89721-721-8 416 Seiten, Broschur inkl. DVD EUR 24,90, SFR 41,90

Mike Chambers, Daniel Dura & Kevin Hoyt 1. Auflage Juli 2007 ISBN 978-0-596-51519-5 174 Seiten, Broschur EUR 14,00, SFR 22,90

Praxiswissen Flash CS3
Praxiswissen Flash CS3 ist eine Einführung für all diejenigen, die HTML-Grundkenntnisse besitzen und einen schnellen und praxisbezogenen Einstieg in Flash suchen. In verständlichen Worten stellt Ihnen der Autor alle wichtigen Features von Flash CS3 vor und demonstriert sie anhand eines durchgängigen Beispiels im praktischen Einsatz. Für die Neuauflage wurde dieses Buch komplett überarbeitet und alle zentralen neuen Funktionen der aktuellen Flash-Version aufgenommen. So wurde der Band beispielsweise um Informationen über den verbesserten Import von Photoshop- und Illustrator-Dateien und die optimierte Skriptsteuerung von Flash mit ActionScript ergänzt.

adobe Integrated Runtime (aIR) for JavaScript developers Pocket Guide
This book explains how you can use AIR to build and deploy HTML and JavaScript-based web applications to the desktop, using all of the tools and technologies with which you are already familiar. Everything you need to know about this platform is right here, so you can start building applications with AIR right away.

TecFeeds © 2007 by O’Reilly Verlag