Sie sind auf Seite 1von 93

Inhalt

Schnelleinstieg in Flex 2 Flex 2 kennenlernen | 2


ActionScript 3.0 | 6
Roger Braunstein Was Flex mitbringt | 27
Übersetzung von Lars Schulten Flex zum Glänzen bringen | 64

Flex ist ein umfassendes Framework zur Entwicklung Flash-basier- Flex erweitern | 80
ter Rich Internet Applications. Obwohl die Umgebung noch sehr Weitere Features | 89
jung ist, gibt es schon jetzt viele moderne Webanwendungen, die Zusammenfassung | 90
mit Flex 2 realisiert wurden. Auch für Desktop-Anwendungen ist
Impressum | 91
Flex optimal geeignet, wenn es zusammen mit Adobe Apollo zum
Einsatz kommt. Ergänzende O’Reilly-Titel | 92

Dieses Dokument bietet eine vollständige Einführung in die Pro-


grammierung 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/.

TecFeeds

www.tecfeeds.de
è Inhalt Schnelleinstieg in Flex 2 Flex 2 kennenlernen 

Flex 2 kennenlernen Einige Unternehmen haben deklarative XML-Sprachen als


Mittel zur Erstellung von UIs entdeckt. Man kann also MXML
Flex 2 ist eine deklarative XML-UI-Sprache leicht mit Microsofts XAML, AOLs Boxely, Laszlos OpenLaszlo
Das wahrscheinlich markanteste Kennzeichen von Flex 2 ist und Netscapes XUL vergleichen. Schon die Vertrautheit mit
MXML, eine neue Sprache, die Sie einsetzen können, um Flex- HTML und JavaScript sorgt dafür, dass Sie sich bei MXML zu
Anwendungen zu erstellen. Wenn Sie Ihren ersten <mx:Button> Hause fühlen.
sehen, können Sie sicher sein, dass Sie MXML und Flex vor
sich haben. Flex 2 ist ein Windowing-Toolkit
Flex 2 fügt den Fähigkeiten von Flash Player 9 ein mächtiges,
Vielleicht haben Sie schon erraten, dass das »ML« in MXML für
erweiterbares, gut organisiertes und gut dokumentiertes Win-
»Markup-Sprache« steht. Und ein Blick auf MXML-Code macht
dowing-Toolkit hinzu. Ein großer Teil des Werts von Flex 2
die Ähnlichkeit mit XHTML oder anderen Markup-Sprachen
steckt im Framework: den Hunderten von Klassen, die bereit-
deutlich. MXML ist eine deklarative XML-Sprache. Das bedeu-
stehen, damit Sie sie nutzen und erweitern können.
tet, dass Sie, einfach indem Sie deklarieren, schon etwas ma-
chen. Wenn Sie Folgendes schreiben: Die meisten dieser Klassen kümmern sich gleichermaßen um
Layout und Anzeige vertrauter GUI-Komponenten wie But-
<mx:Panel><mx:Button></mx:Panel>
tons, Textfelder und Werkzeugleisten. Wie jedes Windowing-
erhalten Sie also einen Button in einem Panel. Die Erzeugung Toolkit soll es Ihnen ersparen, jemals eine weitere Scrollleiste
und Zusammensetzung dieser Komponenten wird bereits von (oder irgendeine andere GUI-Komponente) schreiben zu müs-
der Struktur des Markups impliziert. sen. Sie können Flex eine Menge lästiger Details überlassen –
das Zentrieren von Objekten, das Ersetzen des Mauszeigers
Beachten Sie, dass nicht der gesamte Code in einer Flex 2-An-
des Benutzers oder das Füllen von Auswahllisten mit Daten –
wendung MXML sein muss. In Flex 2 haben Sie immer die
und sich gleich den wichtigen Teilen Ihrer Anwendung zu-
Wahl zwischen MXML und ActionScript 3.0, auch wenn Sie nur
wenden.
in Flex 2 MXML verwenden können. Der Gebrauch von dekla-
rativem XML kann bei der Programmierung sehr vorteilhaft Neben den Komponenten, die Flex 2 von Haus aus mitbringt,
sein. Es ist erheblich kompakter, wenn man viele Komponen- können Sie auch fast alle Klassen nutzen, die verwendet wer-
ten aufbaut. Es kann eingesetzt werden, um Design und Code den, um Flex 2 selbst aufzubauen. Die Quellen aller Klassen
zu trennen. Außerdem kann es extern gestylt und mit visu- werden in rohem ActionScript angeboten. Das ermöglicht Ih-
ellen Werkzeugen gestaltet werden. nen, eigene Komponenten oder unkonventionelle Benutzer-

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Flex 2 kennenlernen 

schnittstellen zu erzeugen, die Funktionalitäten von belie- programmieren und jeden Teil der Flash 9-API aufrufen. Flex ist
bigen Teilen der Flex 2-Bibliothek ausleihen. eine Obermenge von Flash.
Wenn Sie sich einmal daran gewöhnt haben, Flex 2 an Ihrer
Weniger Worte, mehr Code
Seite zu haben, empfindet man es als geradezu lästig, Benut-
zerschnittstellen in Flash zu programmieren. Das soll jedoch Kürzen wir das Geschwatze ab und sehen wir uns eine ein-
nicht heißen, dass Flex Flash vollständig ersetzt. Flex besitzt fache (allerdings etwas unnütze) Flex 2-Anwendung an. In-
keinen Grafikeditor, keine Timeline, keine Animationswerk- dem Sie sich etwas Beispielcode ansehen, bekommen Sie ein
zeuge und keine Bibliotheksverwaltung wie Flash. Es soll auf Gespür dafür, wie Flex 2-Anwendungen erstellt werden, bevor
einer höheren Ebene arbeiten und bietet Komponenten statt wir uns den Einzelheiten zuwenden. Abbildung 1 zeigt ein
Shapes. Generell könnte man sagen, dass Flex 2 am besten für Werkzeug zur Temperaturumrechnung, das Celsius in Fahren-
den Aufbau datengesteuerter, benutzerfreundlicher Benutzer- heit und Fahrenheit in Celsius umrechnet.
schnittstellen 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 glei-
chen Orten läuft wie ein Flash-Film: in unterschiedlichen Abb. 1 Ein Temperaturumrechner
Browsern, auf unterschiedlichen Computern und unter unter-
schiedlichen Betriebssystemen. <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
Außerdem sind Flex 2-Anwendungen Flash-Filme. Obwohl Sie currentState="FtoC">
sie nicht in der Flash-IDE entwerfen und einen anderen Compi-
ler nutzen, sind Flex 2-Anwendungen in jeder Weise ganz ge- <mx:Script>
wöhnliche SWFs. Flex ist also eine Flash-Technologie. Beim Auf- <![CDATA[
bau von Flex 2-Anwendungen können Sie in ActionScript 3.0

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Flex 2 kennenlernen 

private const C_INPUT_TEXT:String = break;


"Geben Sie eine Temperatur in Celsius ein:"; default:
private const F_INPUT_TEXT:String = throw new Error("Unerwarteter Zustand");
"Geben Sie eine Temperatur in Fahrenheit ein:"; }
private const CF_STATE:String = "CtoF"; }
private const FC_STATE:String = "FtoC";
private function clearTemp():void
private function convertTemp():void {
{ outputTempField.text = "";
var inputTemp:Number = }
parseFloat(inputTempField.text);
var outputTemp:Number; private function convertCtoF(celsius:Number):Number
{
switch(currentState) return 9/5 * (celsius + 32);
{ }
case CF_STATE:
outputTemp = convertCtoF(inputTemp); private function convertFtoC(fahrenheit:Number):
outputTempField.text = Number
outputTempFormatter.format(outputTemp); {
outputTempField.text += "°F"; return 5/9 * (fahrenheit - 32);
break; }
case FC_STATE: ]]>
outputTemp = convertFtoC(inputTemp); </mx:Script>
outputTempField.text =
outputTempFormatter.format(outputTemp); <mx:Style>
outputTempField.text += "°C"; .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:HBox horizontalAlign="center"


<mx:State name="{FC_STATE}" enterState="convertTemp()"> creationComplete="conversionMode.selectedValue =
<mx:SetProperty target="{inputLabel}" name="text" currentState;">
value="{F_INPUT_TEXT}"/> <mx:RadioButtonGroup id="conversionMode"
</mx:State> change="currentState =
<mx:State name="{CF_STATE}" enterState="convertTemp()"> conversionMode.selectedValue as String"/>
<mx:SetProperty target="{inputLabel}" name="text" <mx:RadioButton group="{conversionMode}"
value="{C_INPUT_TEXT}"/> label="Fahrenheit in Celsius" value="FtoC"/>
</mx:State> <mx:RadioButton group="{conversionMode}"
</mx:states> label="Celsius in Fahrenheit" value="CtoF"/>
</mx:HBox>
<mx:NumberValidator source="{inputTempField}"
property="text" </mx:Panel>
triggerEvent="change" valid="convertTemp()" </mx:Application>
invalid="clearTemp()"/>
<mx:NumberFormatter id="outputTempFormatter" Dieser Hauruck-Temperaturumrechner nutzt Elemente aus
precision="2"/> vielen verschiedenen Teilen von Flex 2. Mit dieser und den
anderen Anwendungen in diesem TecFeed können Sie auf der
<mx:Panel title="Temperaturumrechnung" Begleit-Website zu diesem TecFeed experimentieren (dort
layout="vertical" horizontalAlign="center"> können Sie auch den jeweiligen Code herunterladen oder
einsehen): http://www.partlyhuman.com/books/flexshortcut/.
<mx:HBox horizontalAlign="center"
Inhalte dieses TecFeeds
verticalAlign="middle">
<mx:Label id="inputLabel"/> Im Rest dieses Dokuments werden Sie alle Elemente sehen,
<mx:TextInput id="inputTempField" maxChars="5"/> die in das vorangehende Beispiel mit eingeflossen sind, und
<mx:Spacer width="10"/> noch vieles mehr. Dieser TecFeed ist in vier übergeordnete
<mx:Text id="outputTempField" Abschnitte eingeteilt. Der erste ist eine Einführung in Action-
styleName="outputTemp" width="100"/> Script 3.0, die Sie brauchen, um Flex 2-Anwendungen zu
</mx:HBox> schreiben. Der zweite Abschnitt befasst sich mit den am häu-

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 ActionScript 3.0 

figsten verwendeten und nützlichsten Komponenten, die Sie ActionScript 3.0


in der Flex 2-Bibliothek finden können, und damit, wie Sie di-
Die gemeinsame Sprache von Flex 2-Anwendungen ist
rekt aus ihnen Anwendungen aufbauen. Im dann folgenden
ActionScript 3.0. Sie können keine älteren Versionen von
Abschnitt geht es darum, wie Sie erreichen, dass diese An-
ActionScript verwenden, und es ist nicht möglich, ganz ohne
wendungen gut aussehen. Der letzte große Teil dieses Tec-
ActionScript 3.0 eine funktionierende Anwendung zu erstel-
Feeds dreht sich darum, wie man an das Flex-Framework an-
len. Außerdem werden wir bald sehen, dass MXML und AS3
knüpft, um eigene Komponenten zu erstellen.
grundlegend miteinander verwandt sind. ActionScripts dritte
Wollen Sie sich so schnell wie möglich in die eigentliche Flex- Inkarnation ist eine ausgereifte Sprache und substantiell an-
Entwicklung stürzen, können Sie das folgende Kapitel zu ders als ActionScript 2.
ActionScript 3.0 erst mal überspringen und gegebenenfalls
Dieses Kapitel wird alle wesentlichen Aspekte von Action-
zurückblättern, wenn die Beispiele komplexer werden und
Script 3.0 kurz behandeln, ist aber in keiner Weise eine voll-
mehr Scripting erfordern.
ständige Einführung. Am Ende dieses TecFeeds befindet sich
eine Liste mit weiterem nützlichen Lesestoff, der ergänzende
Konventionen
Anleitungen bietet.
Die Codeauszüge in diesem TecFeed wurden gelegentlich ge-
kürzt, um den Schwerpunkt mehr auf die eigentliche Bedeu- Was bringen Sie mit?
tung des Auszugs zu legen. Sie können nebeneinander Ab-
Leser, die ActionScript 2 verstehen, dürften mit dem Über-
schnitte mit ActionScript 3.0 und MXML enthalten. Das impli-
gang zu ActionScript 3.0 keine Probleme haben. Das folgende
ziert, dass das MXML Teil einer MXML-Datei ist und dass das
Kapitel widmet sich speziell den Konzepten, die seit AS2 ein-
AS3 in einen <mx:Script> -Block oder eine externen Action-
geführt wurden. Lesen Sie also weiter!
Script-Datei eingeschlossen ist. Gleichermaßen sollte CSS in
eine externe CSS-Datei gepackt werden. Importanweisungen Leser mit Erfahrungen in C# oder Java werden sich bei AS3
und die XML-Deklaration <?xml version="1.0"?> werden in die nach kurzer Zeit zu Hause fühlen, sollten aber auf ein paar
Auszüge nicht eingeschlossen. 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 

Haupt-Features von ActionScript herumgereicht werden. Lambda-Funktionen (oder anonyme


ActionScript ist eine ECMAScript-Sprache. ActionScript 3.0 im- Funktionen) werden unterstützt. Außerdem arbeitet die
plementiert den Entwurf von ECMAScript Edition 4 (ECMA- Klasse Array als eine Liste und unterstützt viele der üblichen
262). Das bedeutet zwei Dinge: Erstens ist der eigentliche Listenoperationen aus der funktionellen Programmierung.
Name lächerlich, Sie brauchen ihn sich also nicht zu merken. ActionScript 3.0 unterstützt dynamisch und statisch typisierte
Zweitens handelt es sich um einen Entwurf, der sich in Zu- Variablen gleichermaßen. Dynamisch typisierte oder »untypi-
kunft noch verändern kann. Ecma International ist eine inter- sierte« Variablen können ihren Typ zur Laufzeit ändern. Dann
nationale Standardisierungsorganisation, die ECMAScript und wird Typ-Inferenz eingesetzt, um den Typ auf Basis des Werts
andere technologische Standards überwacht. JavaScript ist anzupassen, den Sie zuweisen. AS3 führt den Typ * ein, um
eine andere Implementierung von ECMAScript. Es ist also eine untypisierte Variable anzuzeigen. Der Compiler prüft den
mehr als wahrscheinlich, dass ActionScript 3.0 mit JavaScript Typ aller typisierten Variablen und versiegelten Klassen. Die
identisch sein wird, wenn Browser die Version 4 von ECMA- Verwendung statisch typisierter Variablen hilft dem Compiler
Script implementieren. also, die Richtigkeit Ihrer Programme zu sichern. Klassen sind
ActionScript 3.0 ist eine echte objektorientierte Sprache, in standardmäßig versiegelt: Sie können ihnen zur Laufzeit
der alle Typen, die Basistypen eingeschlossen, Klassen sind. keine Eigenschaften oder Methoden hinzufügen. Dynamische
Selbst auf einem Literal wie 5 können direkt Number-Metho- Klassen bleiben allerdings weiterhin möglich, indem man das
den aufgerufen werden. AS3 unterstützt Einfachvererbung: Schlüsselwort dynamic verwendet.
Jede Klasse kann nur eine einzige Klasse erweitern. ActionScript 3.0 hat ein natives Event-Modell. Anders als vor-
Die Prototyp-Natur früherer Versionen von ECMAScript wird herige Versionen von ActionScript, in denen man ein Event-
langsam verdeckt und der klassischen Verwendung geopfert. Framework auswählen musste und unter denen zu einem
Einige Teile von AS3 ermöglichen Ihnen, es als Prototyp-ba- Zeitpunkt mehrere verschiedene Event-Handling-Schemata
sierte Sprache zu verwenden, aber diese Fähigkeit wird selten im Einsatz sein konnten, bietet AS3 ein flexibles, mehrphasi­
verwendet und hier nicht behandelt. Die virtuelle Maschine ges Event-Modell. Dieses Modell basiert auf dem DOM Level 3,
ist so ausgerichtet, dass sie am besten funktioniert, wenn Sie einem W3C-Standard.
auf klassische Weise programmieren. Die Behandlung von Laufzeitfehlern wurde durch die stark
AS3 ist auch eine funktionelle Sprache. Funktionen sind Ob- verbesserte Verwendung von Exceptions unter AS3 verein-
jekte – Bürger erster Klasse – und können gespeichert und facht. Viele Fehler, die in vorherigen Versionen von Action-

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 ActionScript 3.0 

Script stumm blieben, lösen jetzt Exceptions aus. Das verein- wendungen der Fall. Die AVM2 wurde, mit der Leistung im
facht das Debugging und ermöglicht umfassendere Aus- Blick, von Grund auf neu geschaffen. Ihre Geschwindigkeit
weichstrategien. und Stabilität machen Flex 2 möglich.
AVM2 und damit AS3 behandeln Klassen grundlegend anders
ActionScript Virtual Machine 2 (AVM2)
als vorherige Versionen von ActionScript. ActionScript-Klas-
Ein Großteil der Kraft von ActionScript 3.0 steckt in einer voll- sen begannen als prototypische Objekte: In ActionScript 1
ständig neuen virtuellen Maschine, der ActionScript Virtual und JavaScript kann man »Klassen« erstellen, indem man
Machine 2 (AVM2). einem im Speicher vorhandenen Prototyp-Objekt Methoden
Die virtuelle Maschine ist das, was ermöglicht, dass SWF-Da- und Variablen hinzufügt. Vererbung wurde behandelt, indem
teien auf einem Mac, einem PC, unter Linux oder auf einem der Prototyp der Superklasse kopiert wurde und ihm Metho-
Pocket PC laufen. AS3-Code wird zu Bytecode, d.h. Anwei- den und Eigenschaften hinzugefügt wurden, um ihn so zu er-
sungen werden auf einer maschinennahen Ebene kompiliert. weitern und eine Prototyp-Kette zu schaffen. In ActionScript 2
Die virtuelle Maschine im Flash Player führt diesen Bytecode konnte man Klassen in der vertrauten Struktur mit einem
aus. Früher wurde Quellcode zu Anweisungen für eine CPU class -Block schreiben. Aber das war nur syntaktischer Zucker-
kompiliert. Das führt aber dazu, dass dieses Programm nur auf guss: Der ActionScript 2-Compiler hat diese einfach für Sie in
Rechnern mit der gleichen CPU läuft. Viele moderne Sprachen Prototyp-Objekte umgewandelt. Prototyp-basierte Klassen
sind dazu übergegangen, virtuelle Maschinen zu verwenden, haben allerdings einige schwerwiegende Probleme. Klassen
die den gleichen Bytecode ausführen. Beispiele dafür sind können zur Laufzeit modifiziert werden. Methoden und Vari-
­J avas JRE und .NETs CLR. Weil auf Ihrer Maschine eine virtuelle ablen können referenziert werden, ohne dass sie deklariert
Maschine läuft, die die Anweisungen für die VM in Anwei- wurden, oder können umgekehrt zur Laufzeit überschrieben
sungen umwandelt, die Ihre CPU verstehen kann, können werden. Aber am wichtigsten ist vielleicht, dass jeder Metho-
Bytecode-interpretierte Sprachen langsamer sein als native den- oder Eigenschaftenzugriff auf einer Klasseninstanz die
Programme, gewinnen aber Interoperabilität, Sicherheit und AVM auf eine wilde Jagd nach dieser Ressource schickt, um
Flexibilität. erst in einer Hashtable im Objekt, dann in seinem Prototyp,
dem Prototyp der Superklasse und dann auf dem ganzen Weg
Weil der Flash Player weiterhin ältere SWFs abspielen können
nach oben in der Vererbungskette zu suchen!
muss, enthält der Flash Player 9 tatsächlich zwei vollständige
Interpreter: AVM1 und AVM2. Setzen Sie in einem SWF Action- Die neue virtuelle Maschine schafft einen Ausgleich. Sie er-
Script 3.0 ein, läuft es in der AVM2: Das ist bei allen Flex 2-An- möglicht Ihnen, das Prototyp-Objekt zu verwenden, kollabiert

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 ActionScript 3.0 

aber auch Ihre Klassen. In der AVM2 werden alle Klassen als Java sind new und delete die wesentlichen Mittel zur Verwal-
flache Strukturen gespeichert. Das bedeutet zwei Dinge: Klas- tung Ihres Speichers. Das Schlüsselwort delete ist in AS3 al-
sen nehmen erheblich weniger Speicher ein, und das Nach- lerdings stark beschränkt. Es ist üblicher, Referenzen auf null
schlagen von Methoden und Eigenschaften ist eine direkte zu setzen, um zu erlauben, dass Objekte eingesammelt wer-
Operation. All das muss ich wegen einer wichtigen Implika- den. In ActionScript 3.0 können Sie Konstruktoren schreiben,
tion erwähnen. Die Verwendung statisch typisierter Variablen aber keine Destruktoren. Die AVM2 nutzt einen Mark-and-
ist nicht einfach nur eine Prüfung Ihrer Arbeit – sie optimiert Sweep-Algorithmus für die Durchführung der Garbage Collec-
Ihr Programm. tion.
Durch die Verwendung von Just-in-Time-Kompilierung (JIT )
ECMA-Script for XML (E4X)
erhält die AVM2 ebenfalls einen gewaltigen Geschwindig-
keitszuwachs. Im Vergleich zur direkten Ausführung von An- Ein willkommenes neues Feature des AS3-Sprachkerns ist die
weisungen auf der CPU Ihres Rechners kann die Interpretie- Einbindung von XML als nativem Datentyp mit Literalen und
rung von Bytecode ziemlich langsam sein. Just-in-Time-Kom- intuitiven Operatoren. Dieses Feature wird als ECMAScript for
pilierung erstellt während der Ausführung Profile Ihres Pro- XML (E4X) bezeichnet und ist ein weiterer ECMA Internatio-
gramms, entdeckt Codeabschnitte, die häufig ausgeführt nal-Standard mit dem schlecht zu merkenden offiziellen Na-
werden, und kompiliert diese darüber hinaus zu nativem men ECMA-357. Es vereinfacht und beschleunigt nicht nur die
Code – und all das, während Ihr Programm läuft. Die Compi- Verwendung von XML, sondern macht XML auch zu einem
ler-Optimierung ist ein Vorgang, der sich im Wesentlichen im hilfreichen Typ für die interne Speicherung und Manipulation
Hintergrund abspielt und an dem Sie unglücklicherweise von Informationen.
nicht herumschrauben können. Seine Auswirkungen sind aber Die neue Klasse XML wird von einer sehr nützlichen Klasse na-
nicht zu unterschätzen. Beispielsweise haben Javas Verbesse- mens XMLList begleitet. Eine XMLList lockert eine der Schlüs-
rungen bei der JIT mit den Jahren eine anfänglich negative selanforderungen von wohlgeformtem XML: den einen Wur-
Wahrnehmung seiner Geschwindigkeit vollkommen umge- zelknoten. Es ist auch der typische Rückgabetyp für alle Filte-
wandelt. rungen, die mit E4X-Methoden durchgeführt werden, und
Die AVM2 bietet eine Garbage Collection-Einrichtung. AS3 ist enthält nützliche Methoden zur Manipulation ihres Inhalts.
eine vollständig speicherverwaltete Sprache. Wenn Refe- Sie werden feststellen, dass es sehr komfortabel ist, eine XML-
renzen nicht mehr gültig sind und keine (starken) Referenzen List zu verwenden, um beliebige Happen von XML-Daten zu
auf sie bleiben, werden sie aus dem Speicher entfernt. Wie in 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 ver- //Wer steht in der ersten Reihe? (Das name-Attribut des
einfacht es, alten Code zu portieren. //ersten person-Elements finden.)
trace(roster.person[0].@name); //Ezra
Im Folgenden sehen Sie ein Beispiel, das gerade mal in den
Anfängen einiges davon zeigt, was Sie mit E4X machen kön-
//Herausfinden, was Roger hier tun soll.
nen.
//(Der Inhalt des title-Knotens im person-Element, dessen
//Geben Sie das XML einfach inline an! //name-Attribut Roger ist.)
//Der <?xml version="1.0"?>-Prolog ist nicht erforderlich. trace(roster.person.(@name == "Roger").title); //Ihr
var roster:XML = <root> //demütiger Autor.
<person name="Ezra" skill="flash"/>
<person name="Joey" skill="flex"/> //Schauen wir nach, wie viele Flexperten es gibt.
<person name="Danny" skill="flash"/> //(Die Länge der XMLList aus den person-Elementen
<person name="Mims" skill="flex"> //mit dem skill-Attribut flex.)
<title>Meister der Schnäuzer.</title> trace(roster.person.(@skill == "flex").length()); //3
</person>
<person name="Geoff" skill="javascript"/> //Diese Zeile können Sie für das Ende des Buchs speichern.
<person name="Paul" skill="flash"/> //(Eine Referenz auf das person-Element mit dem
<person name="Robert" skill="flash"/> //name-Attribut LieberLeser.)
<person name="Roger" skill="flex"> //(Setzt das skill-Attribut für dieses person-Element.)
<title>Ihr demütiger Autor.</title> var you:XMLList = roster.person.(@name == "LieberLeser");
</person> you.@skill = "flex";
</root>;
//Ein neuer Flexperte ist aufgetaucht!
//Sie können jetzt Teil des Teams werden! (Ein neues Kind //(Die Länge der XMLList aus den person-Elementen mit dem
//hinzufügen.) //skill-Attribut flex.)
roster.appendChild(<person name="LieberLeser" trace(roster.person.(@skill == "flex").length()); //4
skill="learning"/>);
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 auch eine Reihe von String-Methoden so aktualisiert, dass sie
können Kinder auswählen, indem Sie den Namen des Kind- reguläre Ausdrücke als Argumente akzeptieren. Hier ist ein
knotens in einen Punktpfad ( roster.person.title ) einfügen, Beispiel dafür, wie reguläre Ausdrücke in ActionScript 3.0 ver-
und Sie können Knoten positionell mit einer dem Array-Zu- wendet werden können.
griff vergleichbaren Notation mit eckigen Klammern ( roster. var str:String = "Rub a dub dub, three men in a tub. And who
person[0] ) auswählen. Sie können mit dem At-Zeichen ( @ ) zu do you think they be?";
den Attributen navigieren und Knoten auswählen, die in ih- //Im String nach allem suchen, bei dem auf einen Buchstaben
rem Pfad beliebigen Bedingungen (nicht nur Gleichheit) ge- //"ub" folgt.
nügen. Die Klasse XMLList bietet mehr Achsenselektoren, als str.match(/\wub/g); //Rub, dub, dub, tub
in diesem Beispiel gezeigt werden, die den Fähigkeiten von //Einen regulären Ausdruck machen, der auf "dub dub" passt.
XPath entsprechen. var re:RegExp = new RegExp("dub dub");
Während Sie in Flex 2 mit XML-Daten arbeiten, können Sie //Den String auf die Existenz des Musters prüfen.
sich die Dokumentation und die am Ende dieses TecFeeds re.test(str); //true
aufgeführten Ressourcen ansehen, um mehr über E4X zu er- //Das Muster durch unseren Text ersetzen.
fahren. str.replace(re, "glub glub"); //Rub a glub glub, three men in
//a tub ...
Reguläre Ausdrücke //Nach allen Wörtern mit drei Buchstaben suchen.
Ein weiteres nützliches und lang erwartetes Feature in AS3 //Beachten Sie, dass replace() den String zurückgeliefert,
sind reguläre Ausdrücke. Diese Objekte machen das Parsen //aber nicht verändert hat.
von komplexen Strings zu einem Kinderspiel. Es gibt eine Un- str.match(/\b\w{3}\b/g); //Rub, dub, dub, men, tub, And,
menge von Büchern und Artikeln zu diesem Thema, wie bei- who, you
spielweise Reguläre Ausdrücke, 2. Auflage von Jeffrey Friedl //Die Position des ersten "a"-Zeichens finden.
(O’Reilly Verlag). AS3 unterstützt reguläre Ausdrücke als Lite- str.search(/a/); //4
rale – die durch einen Ausdruck angezeigt werden, der von
Beachten Sie, dass Literale für reguläre Ausdrücke in AS3 nur
Backslashs eingeschlossen wird ( /Hallo/ ) – und als Instanzen
verwendet werden, um reguläre Ausdrücke zu deklarieren,
der Klasse RegExp . Es können nicht nur RegExp-Objekte auf
nicht, um sie auszuführen. Sie sehen also keine Konstrukte
Strings ausgeführt werden, indem sie als Argumente an die
wie m/fnord/ (das in vielen Programmiersprachen nach dem
RegExp-Instanzmethoden übergeben werden, es wurden
Muster »fnord« suchen würde).

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 ActionScript 3.0 12

Anzeigeliste flash.display.MovieClip
Die Flash Player-API für die Verwaltung visueller Elemente Die Klasse MovieClip ist ihrem Gegenstück in früheren Ver-
(wie MovieClip) wurde vollständig überarbeitet. Ganz gleich, sionen von ActionScript sehr ähnlich: ein visuelles Element
ob Sie Flash 9 verwenden oder nicht, es ist wichtig, dass Sie mit einer unabhängigen Timeline, die beliebige andere An-
das verstehen, weil Flex 2 das gleiche Paradigma verwendet. zeigeobjekte enthalten kann. Beachten Sie, dass alle Eigen-
Das neue Modell basiert auf einer Anzeigeliste. schaften, denen früher ein Unterstrich vorangestellt wurde,
wie _alpha und _rotation , den Unterstrich verloren und zu
Jedes visuelle Element, das Kinder haben kann, besitzt eine
alpha und rotation geworden sind. Beachten Sie auch, dass
Anzeigeliste. Sie können sich das als eine Liste vorstellen, weil
die Klasse von der obersten Ebene in das Paket flash.dis-
Sie sie genau so verwalten und weil auf diese Weise die Sta-
play gewandert ist.
pelordnung bestimmt wird. Nur Elemente, die einer Anzeige-
liste hinzugefügt wurden, werden gerendert, wenn das erfor- flash.display.Sprite
derlich ist. Die Liste wird von hinten nach vorne gerendert, Wie ein MovieClip kann ein Sprite eine beliebige Art von
und die Dinge, die vorne in der Liste stehen, werden über de- Anzeigeobjekt enthalten und mit den gleichen Eigen-
nen gerendert, die hinten in der Liste stehen. schaften transformiert werden. Sprites haben allerdings
Zusätzlich zu der Art und Weise der Verwaltung wurden auch keine Timelines und sind deswegen effizienter, insbeson-
die Klassen selbst organisiert und ausgebaut, die visuelle Ele­ dere wenn sie in großer Zahl vorkommen. Für viele Ent-
mente repräsentieren. In SWF-Dateien, die für Flash Player 9 wickler werden Sprites MovieClips als Standardbaustein er-
veröffentlicht werden, ist alles, was auf dem Bildschirm sicht- setzen.
bar ist, in einer Anzeigeliste organisiert und für Code zugreif- flash.display.Loader
bar, sogar statische Textfelder und einfache Shapes. Alle An- Loader werden verwendet, um Inhalt zu fassen, der zur
zeigeobjekte erweitern die abstrakte Basisklasse Display Laufzeit geladen wird, SWFs und Grafiken gleichermaßen.
Object , und Objekte, die selbst andere Anzeigeobjekte enthal- Beide ersetzen die Klasse MovieClipLoader und die Methode
ten können, erweitern DisplayObjectContainer . Im Folgenden loadMovie() von vorherigen Versionen von ActionScript.
finden Sie die wichtigsten Anzeigeobjekte, die in AS3 verfüg-
Diese und die anderen Anzeigeobjekte sind für Anwen-
bar sind.
dungen 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 nahm, können Sie ihn einfach aus der Anzeigeliste entfernen,
eher Flex 2-Komponenten verwenden werden als diese Klassen. die ihn enthält. Die Anzeigeliste kann weiterhin von Ihnen
Die Möglichkeiten, Anzeigeobjekte zu manipulieren, sind verwendet werden (solange Sie eine Referenz darauf halten),
ebenfalls vollkommen anders als bei vorherigen Versionen aber es wird keine Zeit mehr damit verschwendet, sie zu ren-
von ActionScript. Vergessen Sie alles, was Sie über create­ dern oder ihre Timeline auszuführen.
EmptyMovieClip, attachMovie und swapDepths wissen, und box.removeChild(jack);
konzentrieren Sie sich auf die Anzeigeobjekte und Anzeige­ royalFlush.addChild(jack);
listen:
Sie können Objekten sogar andere Eltern geben und sie in
var box:Sprite = new Sprite();
ganz andere Container verschieben. Hier nehmen wir jack aus
addChild(box);
der box und nutzen ihn stattdessen, um unseren royalFlush
var jack:Sprite = new Sprite();
vollständig zu machen. Sie sind am gewinnen!
box.addChild(jack);
ActionScript-Kerntypen
Die erste Zeile erzeugt einen neuen leeren Sprite. Die zweite
Zeile fügt die box unserer Anzeigeliste hinzu und macht sie ActionScript 3.0 fügt ein paar neue Kerntypen hinzu und un-
sichtbar. Dann erzeugen wir einen weiteren neuen Sprite, terstützt weiterhin alle, die in AS2 vorhanden waren. Es sei
diesmal einen Jack , und stecken jack in die box . nochmals erwähnt, dass AS3 eine echte objektorientierte
Sprache ist und all diese Typen Klassen sind. Zu den Kern-
Inhalte werden als Unterklassen behandelt. Wenn Sie tatsäch- typen, die von vorherigen Versionen von ActionScript geerbt
lich ein Bild mit jack verknüpft hätten, könnten Sie ihm den wurden, zählen:
Namen »Jack« geben und Jack wäre dann eine Unterklasse
von Sprite . Jetzt ist die Klasse Jack einfach eine besondere Number
Art von Sprite, die eine bestimmte Erscheinung hat. Das Kon- Eine Gleitkommazahl doppelter Genauigkeit.
zept ersetzt Linkage-Namen und ist in Flex 2 und Flash 9 zu
Date
finden.
Eine Darstellung eines bestimmten Zeitpunkts.
Anstatt die Eigenschaft _visible aus früheren Versionen von
Flash zu verwenden, die häufig dafür verantwortlich war, dass String
der unsichtbare Clip in jedem Frame Ressourcen in Anspruch Ein String, ganz ähnlich wie ein Java-String. Es gibt keinen
Typ für ein einzelnes Zeichen.

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 ActionScript 3.0 14

Boolean Namespace
Ein Boolescher Wert, der true oder false ist. Die Repräsentation eines Namensraums.

Array Error
Eine nicht typisierte (sie kann Objekte unterschiedlicher Der Basistyp für alle Exceptions.
Typen enthalten), automatisch größenangepasste Liste.
Sichtbarkeit
Object
ActionScript 3.0 bietet eine größere Granularität für das Set-
Ein anonymes Objekt und die Wurzelklasse aller Klassen­
zen der Sichtbarkeit von Eigenschaften und Methoden als
hierarchien in AS3. Eigenschaften können zur Laufzeit hin-
vorherige Versionen von ActionScript. Zusätzlich dazu hat
zugefügt werden. Das macht sie als Wörterbücher nützlich,
sich die Bedeutung einiger Sichtbarkeitsmodifizierer seit
die String-Schlüssel unterstützen.
ActionScript 2 geändert.
Function
public
Eine Funktion.
Wird verwendet, um Klassen, Eigenschaften, Methoden und
AS3 führt einige neue Kerntypen ein: Namensräume zu deklarieren, auf die jeder Aufrufer zugrei-
int fen kann.
Eine vorzeichenhaftete (Zweierkomplement) 32-Bit-Ganz- protected
zahl. Wird nur innerhalb von Klassendefinitionen verwendet, um
uint Eigenschaften, Konstanten, Methoden und Namensräume
Eine vorzeichenlose 32-Bit-Ganzzahl. zu deklarieren, die für die deklarierende Klasse und all ihre
Subklassen zugreifbar sind.
XML
XML-Daten. private
Wird in Klassendefinitionen verwendet, um Eigenschaften,
Class Konstanten, Methoden und Namensräume zu deklarieren,
Eine Laufzeitdarstellung einer Klasse. Speichert die stati­ die nur in der deklarierenden Klasse verfügbar sind. Stren-
schen Eigenschaften und Methoden einer Klasse. Klassen- ger als seine Bedeutung in ActionScript 2.
referenzen können mit dem new -Operator verwendet wer-
den, um Instanzen der Klasse zu erzeugen.

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 ActionScript 3.0 15

internal sind ziemlich gradlinig. Alle typisierten Parameter eines Funk-


Wird verwendet, um Klassen, Eigenschaften, Methoden und tionsaufrufs oder die Operanden eines Operators müssen in
Namensräume zu deklarieren, auf die aus dem Paket zuge- kompatiblen Typen angegeben werden. Bei Zuweisungen
griffen werden kann, in dem sie deklariert wurden. müssen eine Variable (die linke Seite) und der Ausdruck oder
Wenn Sie ein Sichtbarkeitsattribut bei einer Deklaration in ei- Wert, den Sie ihr zuweisen, kompatible Typen haben. Und ei-
ner Klassendefinition weglassen, weist AS3 implizit das Attri- nen Ausdruck oder ein Wert, der mit dem Schlüsselwort re-
turn zurückgeliefert wird, muss dem Typ der Funktion ent-
but internal zu.
sprechen.
Außerdem ermöglicht Ihnen AS3, eigene Namensräume zu er-
zeugen und zu verwenden. Klassen, Eigenschaften und Me- Außerdem speichert die AVM2 Typinformationen für alle Vari-
thoden, die in einem eigenen Namensraum deklariert werden, ablen, die mit einem Typ deklariert werden. In vorherigen Ver-
sind für anderen Code im gleichen Namensraum und Code sionen von ActionScript hat der Compiler zur Kompilierzeit
zugreifbar, der den Namensraum durch Verwendung der Di- Typprüfungen durchgeführt, aber unter der AVM1 waren alle
rektive use namespace geöffnet hat. Oder Sie können den Na- Objekte dynamisch typisiert. So konnten Sie den Typ von Vari-
mensqualifizierungsoperator ( :: ) verwenden, um den Na- ablen zur Laufzeit verändern und damit die Compiler-Prü-
mensraum anzugeben, in dem eine Eigenschaft zu finden ist. fungen umgehen, beispielsweise indem Sie eine Variable über
Für Ihren Namensraum können Sie jeden gültigen Bezeich- einen Suchvorgang referenzierten. Die AVM2 kann Typsicher-
nernamen verwenden. Sie können ihn auch an einen URI (Uni- heit auch zur Laufzeit erzwingen. Inkompatible Typzuwei-
form Resource Identifier) binden. Wenn Sie eine Klasse, Eigen- sungen lösen dann eine TypeError -Exception aus. Das sind
schaft oder Methode in einem eigenen Namensraum dekla- gute Nachrichten, weil inkompatible Zuweisungen, die an-
rieren, können Sie nicht gleichzeitig einen der vordefinierten dernfalls stillschweigend scheitern können – und später Feh-
Namensräume wie public oder private verwenden. ler verursachen und Sie zu Nachforschungen veranlassen –,
jetzt unmittelbar identifizierbar sind.
Typmanipulation Den Typ eines Werts können Sie mit dem is -Operator unter-
ActionScript 3.0 bietet eine große Menge an Werkzeugen zur suchen. Der is -Operator ersetzt den instanceof -Operator von
sicheren und intelligenten Manipulation von Typen. Der Com- ActionScript 2 und bietet die gleiche Funktionalität wie der
piler führt Typprüfungen für Ihr Programm durch und kann, instanceof -Operator von Java. Betrachten Sie folgenden Aus-
wenn Sie typisierte Variablen verwenden, bereits zur Laufzeit druck:
viele Fehler abfangen. Die Regeln, die erzwungen werden, 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 lie- eatDessert(chocolateCupcake); //chocolateCupcake wird als
fert true , wenn B gefunden werden kann, indem der Typhier- //Dessert behandelt.
archie von A nach oben, d.h. in Richtung von Object , gefolgt trace(chocolateCupcake is Dessert); //true
wird. Beispielsweise gilt a is B , wenn:
Dieses Beispiel übergibt einer Funktion, die ein Dessert er-
• A die gleiche Klasse ist wie B wartet, einen Cupcake. Aber die Typen sind kompatibel und
• A B erweitert der Code damit gültig. Eine andere Situation, in der Typen
kompatibel sind, ist, wenn AS3 weiß, wie man einen Typ in ei-
• A B implementiert
nen anderen umwandelt. In bestimmten Situationen führt
• A eine Kombination aus Obigem ist, z.B. A s Super-Super- AS3 automatisch diese Typerzwingung durch, zum Beispiel:
klasse B implementiert
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 Das zwingt den Integer 2099 zu einem String, den der + -Ope-
gleichen Typhierarchie befinden und allgemeiner sind. Bei- rator in einem String-Kontext erwartet.
spielsweise ist Dessert allgemeiner als Cupcake. Sie könnten auf Es ist eine erwünschte Praxis in der objektorientierten Pro-
einen bestimmten Cupcake (das ist übrigens eine Art Muffin) grammierung, gegen Schnittstellen und nicht gegen Imple-
also problemlos als ein Dessert verweisen. ActionScript 3.0 mentierungen zu programmieren. Wenn Sie all Ihren Variab­
lässt Sie ohne Schwierigkeiten Werte Variablen eines allge- len den Typ IEdible geben, wie erhalten Sie dann einen
meineren Typs zuweisen. Sie könnten also leicht Folgendes C­ upcake zurück, wenn Sie einen brauchen? Gelegentlich ist es
machen: erforderlich, Typen in die spezifischeren Typen umzuwandeln,
public function eatDessert(somethingTasty:Dessert):void und AS3 ermöglicht Ihnen, das mit zwei Arten expliziter Typ-
{ umwandlung zu erreichen: einem Cast und einem bedingten
trace("hmm ... das ist gut " + Cast.
somethingTasty.toString()); Casting zwingt Variablen des einen Typs, einen anderen Typ
} anzunehmen. Um das Ergebnis dieser Operation einzufangen,
var chocolateCupcake:Cupcake = Magnolia.getCupcake sollten Sie es einer neuen Variablen des gewünschten Typs
("Schokolade"); 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 sonderen Eigenschaften des as -Operators, kreativ kompakten
den Ausdruck, nicht den Typ umgeben. Wenn diese Typum- Code wie in diesem Beispiel zu erstellen:
wandlung unmöglich ist, das heißt, wenn das Objekt, das Sie var cookie:Cookie;
casten, nicht tatsächlich den Typ hat, den Sie anfordern, oder for each (var dessert:Dessert in desserts)
mit dem von Ihnen angeforderten Typ nicht kompatibel ist, {
wird ein TypeError ausgelöst. In diesem Beispiel muss Ihr some- //Den as-Operator verwenden, um alle Cookies in einer
thingTasty , das aktuell den Typ Dessert hat, ursprünglich ein
//Dessert-Liste zu frosten.
Cupcake gewesen sein.
//Liefert null, wenn der Cast scheitert, und überspringt
var cupcake:Dessert = new Cupcake(); //einen Cupcake als //dann den if-Block.
//Dessert verwenden, OK if (cookie = dessert as Cookie)
var baklava:Dessert = new Baklava(); //eine Baklava als {
//Dessert verwenden, OK cookie.frost();
Cupcake(cupcake).addSprinkles(); //OK, weil es sein Leben als }
//Cupcake begonnen hat. }
Cupcake(baklava).addSprinkles(); //NICHT OK! Baklava ist mit
//Cupcake nicht kompatibel! Es ist hier auch erwähnenswert, wie sich ActionScript 3.0 um
Initialisierungswerte kümmert. Wenn einer Variablen kein
Der as -Operator führt einen bedingten Cast durch. Wenn die Wert zugewiesen wurde, sie aber einen bestimmten Typ hat,
angeforderte Typumwandlung nicht möglich ist, liefert der ist der Standardwert von diesem Typ abhängig. Ein int , dem
Ausdruck einfach null zurück, anstatt einen TypeError auszu- kein Wert zugewiesen wurde, hat beispielsweise den Wert 0 ,
lösen. Das hat Ähnlichkeiten mit einem dynamic_cast in C++ eine Number , der kein Wert zugewiesen wurde, den Wert NaN ,
und dem Identitätsoperator in C#. Außerdem entspricht es und alle komplexen Typen haben den Standardwert null .
mehr oder weniger dem Verhalten von Casts unter Action- Kerntypen, die Standardwerte haben, kann nicht null oder un-
Script 2. Wenn Sie das Ergebnis eines bedingten Casts nicht defined zugewiesen werden. Der Wert undefined existiert noch,
prüfen können oder bereits geprüft haben, dass die Typen aber nur, um nicht typisierte Variablen, denen nichts zugewie-
kompatibel sind, sollten Sie stattdessen einen normalen Cast sen wurde, zu repräsentieren. Im Allgemeinen können AS2-
verwenden. Auf diese Weise können Sie eventuelle Probleme Entwickler, die zu AS3 wechseln, die verwirrenden Unter-
als Exceptions abfangen. Außerdem ermöglichen es die be- schiede 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 Element spiegeln. Elemente, die in einem Paketblock dekla-
Pakete sind ein Mittel, Code zu organisieren und Namenskolli- riert werden, dürfen nur die folgenden beiden Zugriffsmodifi-
sionen zu vermeiden. In ActionScript 2 würden Sie die Klas- zierer tragen: public und internal.
sendateien in eine Ordnerstruktur packen, die ihren vollstän- Üblicherweise schreiben Sie Dateien mit einem Paketblock,
dig qualifizierten Klassennamen definiert. Beispielsweise der eine öffentliche Klasse oder Funktion enthält. Eine Aus-
würde die Klasse com.partlyhuman.Banana in der Datei com/ nahme bildet die gebräuchliche Implementierung des Single-
partlyhuman/Banana.as definiert. In ActionScript 3.0 sind Pa- ton-Musters, das globalen Zugriff auf eine einzige Instanz bie-
kete mehr als Dateinamen. Sie müssen den package -Block ver- tet und die Instantiierung weiterer Instanzen verhindert. Weil
wenden, um Pakete zu deklarieren, und nur Code, der inner- AS3 keine privaten Konstruktoren erlaubt, erfordert das Mus-
halb eines Paketblocks gefunden wird, ist außerhalb einer Da- ter, dass ein Objekt an den Konstruktor übergeben wird, des-
tei sichtbar. Pakete werden auch eingesetzt, um den Zugriff sen Typ nur in dieser Datei sichtbar ist, damit zu dieser Klasse
zu steuern, wie Sie bei internal gesehen haben. externer Code nicht dazu in der Lage ist, ein geeignetes Argu-
Klassen werden in einem class -Block definiert. Um Ihre Klas- ment an den Konstruktor zu übergeben. Das macht den Kons-
sen außerhalb der Datei sichtbar zu machen, in der sie ge- truktor so gut wie privat:
schrieben wurde, müssen Sie sie in einem geeigneten Paket- package com.partlyhuman
block einfügen und als public deklarieren: {
//in Datei com/partlyhuman/Banana.as public class SingletonDemonstration
package com.partlyhuman {
{ private static var instance:SingletonDemonstration;
public class Banana 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 //Ballon initialisieren
{ }
if (instance == null) public function pop():void
{ {
instance = new SingletonDemonstration(new //Sie müssen die Methoden aller Interfaces
SingletonEnforcer()); //implementieren. Methoden aus einem Interface sind
} //immer öffentlich.
return instance; }
} public function inflate():void
} {
} //aufblasen
class SingletonEnforcer {} }
}
ActionScript 3.0 unterstützt ähnliche Vererbungsmuster wie public final class Blimp extends Balloon
Java. Klassen können eine Klasse erweitern und mehrere Inter­ {
faces implementieren. public function Blimp()
public interface IPoppable {
{ //den Superklassenkonstruktor aufrufen
function pop():void super();
} //noch mehr nette Sachen machen
public interface IInflatable }
{ public function fly():void
function inflate():void {
} //Ein Blimp ist wie ein Ballon, der fliegen kann,
public class Balloon implements IPoppable, IInflatable //oder was Ähnliches.
{ }
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 Methoden und Eigenschaften
unterstützt, die in den Interfaces IPoppable und IInflatable Fügen wir der Klasse Blimp noch etwas hinzu:
definiert werden. Diese Interfaces können nur Methoden defi-
public final class Blimp extends Balloon
nieren, und Sie müssen die Sichtbarkeit der Methoden nicht
{
angeben: Alle müssen als public implementiert werden.
private const TAKEOFF_PRESSURE:Number = 10000;
Abstrakte Klassen oder virtuelle oder abstrakte Methoden private var currentPressure:Number;
sind nicht Teil von AS3. Sie können Abstraktheit zur Laufzeit public function Blimp()
erzwingen, indem Sie im Konstruktor Ihrer abstrakten Klasse {
oder in Ihrer abstrakten Methode Fehler auslösen. super();
Das Beispiel oben zeigt auch ein Beispiel einer finalen Klasse. currentPressure = 100;
Finale Klassen können nicht erweitert werden. Sie sind die }
letzten Klassen in ihrer Klassenhierarchie. Das verhindert, dass override public function pop():void
irgendjemand Ihren hart erarbeiteten Blimp -Code nimmt und {
zum Bösen wendet, indem er MissileBlimps und LaserBlimps //Schiff verlassen!
erzeugt. In der Realität kann das für Klassen benutzt werden, }
die zur Verwendung angeboten werden, aber nicht erweitert override public function inflate():void
werden sollen, beispielsweise flash.system.Security . {
//auf gleiche Weise aufblähen wie einen Ballon
Klassen können auch als dynamic deklariert werden. Wird
//und eigene Verhalten ergänzen
dieses Schlüsselwort nicht verwendet, sind Klassen versiegelt:
super.inflate();
Ihre Eigenschaften und Methoden sind in Stein gemeißelt
if (currentPressure >= TAKEOFF_PRESSURE) fly();
und können zur Laufzeit nicht verändert werden. Mit dynamic
}
können Sie zur Laufzeit auf die Eigenschaften und Methoden
public function fly():void
von Klassen zugreifen und diese verändern. Das kann nützlich
{
sein, um einfache Wrapper für Daten zu erzeugen, beispiels-
//flieg, flieg, majestätischer Blimp!
weise 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


è Inhalt Schnelleinstieg in Flex 2 ActionScript 3.0 21

In AS3 wurden ein paar neue Features eingeführt, die hier de- Statische Variablen oder Klassenvariablen sind in ActionScript
monstriert werden. ActionScript 3.0 schließt einige Konstan- 3.0 wie in AS2 möglich. Statische Variablen werden mit dem
ten ein, Variablen, deren Wert nicht verändert werden kann. Schlüsselwort static deklariert. Diese Variablen gehören zur
Der Compiler hält Sie auf, wenn Sie versuchen, eine zweite Klasse selbst und sind über alle Instanzen einer Klasse gleich.
Zuweisung zu einer Konstanten oder eine Zuweisung von au- Das könnte in Ihrem Blimp verwendet werden, um Eigen-
ßerhalb der Klassendefinition zu machen. Die inflate() -Me- schaften zu speichern, die in allen Blimps gleich sein sollten,
thode von Blimp nutzt die Konstante TAKEOFF_PRESSURE , um zu wie die Anzahl der Räder oder die Landevorrichtung.
prüfen, ob der Blimp abhebebereit ist. Konstanten werden mit ActionScript 3.0 unterstützt implizite wie explizite Akzessor-
dem Schlüsselwort const statt dem Schlüsselwort var dekla- methoden. Explizite Akzessormethoden sind gewöhnliche
riert. Methoden, die Werte abrufen oder setzen. Ein Beispiel dafür
Vielleicht ist Ihnen auch aufgefallen, dass die Methode pop() wäre, wenn die Klasse Blimp setAltitude() - und getAltitude() -
als override und als public gekennzeichnet ist. ActionScript Methoden hätte, die die interne Höhe des Blimps manipulie-
3.0 erlaubt Ihnen, Methoden zu schreiben, die auch in der Su- ren. Akzessormethoden bieten eine Alternative zur Deklara-
perklasse vorhanden sind. Aber Sie müssen dem Compiler mit tion öffentlicher Instanzvariablen und geben Ihrer Klasse die
dem Schlüsselwort override bestätigen, dass Sie diese Me- Möglichkeit, den zu setzenden Wert zu prüfen oder zusätz-
thode bewusst überschreiben. Die überschreibende Methode liche Operationen auszuführen, wenn der Wert gesetzt wird.
kann die ursprüngliche Implementierung aufrufen, indem sie Das ist eine gute Praxis, der Sie folgen sollten, um die Kapse-
die gleiche Methode auf dem super -Objekt aufruft, das eine lung zu wahren. Implizite Akzessormethoden ermöglichen es
Referenz auf die Superklasse der Klasse ist. Die Signatur der Clientcode, die Illusion aufrechtzuerhalten, eine Eigenschaft
überschreibenden Methode muss vollständig der Signatur direkt auf Ihrer Klasse zu setzen, und erlauben Ihnen trotz-
der überschriebenen Methode entsprechen. ActionScript 3.0 dem, in den Vorgang einzugreifen. An Stelle von
unterstützt nur eine Methode mit dem gleichen Namen. Das public function setAltitude(newAltitude:Number):void {…}
bedeutet, dass Sie keine Überladungen machen können, bei public function getAltitude():Number {…}
denen eine Methode auf Basis der Eingaben unterschiedliche myBlimp.setAltitude(10);
Operationen ausführen kann. Allerdings können Sie immer
eine variable Argumentliste verwenden (siehe unten), um das
zu erreichen.

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 ActionScript 3.0 22

könnten Sie implizite Akzessormethoden verwenden, indem stehen, kompatible Typen haben, und es dürfen keine Para-
Sie Folgendes schreiben: meter fehlen. ActionScript 3.0 ergänzt allerdings einige Werk-
public function set altitude(newAltitude:Number):void {…}
zeuge, die es ermöglichen, diese Anforderungen zu entspan-
public function get altitude():Number {…}
nen und Bequemlichkeit sowie Flexibilität liefern.
myBlimp.altitude = 10; Standardwerte sind eine neue Ergänzung zu ActionScript, die
aus der C++-Welt stammt. Sie können einige Parameter für
Schließlich unterstützt ActionScript 3 Methoden-Closures Ihre Funktion optional machen, indem Sie direkt in der Argu-
oder gebundene Methoden. Eine Closure ist eine Funktion, mentliste Standardwerte für diese Argumente deklarieren.
die auf Variablen im umgebenden Block verweisen kann, egal Beispielsweise könnten Sie eine komplexe Operation mit vie-
von wo sie aufgerufen wird. Das ist, als würden Sie eine Funk- len Optionen haben:
tion in einen eigenen Geltungsbereich einpacken. Vielen AS2-
function makeDagwood(layers:int, meat:String, cheese:String,
Entwicklern wird Code wie der folgende vertraut sein:
bread:String, mayo:Boolean,
var closure:Function = Delegate.create(this, doFoo); mustard:Boolean, lettuce:Boolean):
Sandwich {…}
der eine Closure erzeugt. Jedes Mal, wenn Sie closure() aus-
führen, wird doFoo() im ursprünglichen Geltungsbereich auf- Sie wollen zwar, dass Benutzer vollständige Kontrolle über ihr
gerufen, aus dem Sie Delegate.create() aufgerufen hatten. In Sandwich haben, wollen Ihren Code aber auch kompakt hal-
AS3 sind alle Methoden in einer Klasse ohne weitere Arbeit ten und geben vernünftige Standardwerte vor:
an diese Klasse gebunden. Selbst wenn Sie diese Methoden
function makeDagwood(layers:int, meat:String, cheese:String,
aus einem Event-Handler oder über eine Referenz auf die Me-
bread:String, mayo:Boolean = true,
thode aufrufen, die als Funktion übergeben wurde, kann die
mustard:Boolean = true, lettuce:
Methode also auf die Methoden und Eigenschaften der Besit-
Boolean = true):Sandwich {…}
zerklasse zugreifen.
Wenn ein Kunde mit den Beilagen auf seinem Sandwich zu-
Argumente
frieden ist, kann er den Funktionsaufruf einfach halten:
Der ActionScript 3.0-Compiler erzwingt, dass Ihre Funkti-
makeDagwood(3, "Turkey", "Muenster", "Wheat");
onsaufrufe den Signaturen der Funktionen entsprechen. Im
//standardmäßig keine Beilagen
Allgemeinen müssen Parameter in der richtigen Reihenfolge

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 ActionScript 3.0 23

makeDagwood(3, "Roast Beef", "Swiss", "Rye", false, false, addSandwichRecipe("PB&J", bread, peanutButter, jelly,
true); //keine Mayo, kein Senf bread);
addSandwichRecipe("The English King", englishMuffin,
Alle Parameter mit Standardwerten müssen am Ende der Ar- peanutButter, banana, honey);
gumentliste stehen und sind beim Funktionsaufruf dann opti- addSandwichRecipe("The Ultra Slim"); //Das ist zulässig! Es
onal. //muss ein Luft-Sandwich sein.
Sie können auch eine Funktion definieren, die eine variable
Anzahl von Argumenten annimmt. Das arguments -Array von Eine letzte Bemerkung zu Parametern für ActionScript 2-Ent-
ActionScript 2 gibt es noch. Jedes Function -Objekt enthält die wickler: Um Funktionen anzugeben, die null Parameter verlan-
Eigenschaft arguments , die ein Array aller Parameter ist, die der gen, verwenden Sie function foo() und nicht function
foo(Void) wie unter AS2.
Funktion übergeben wurden. ActionScript 3.0 verlangt aller-
dings, dass Sie Ihre Parameter ordentlich angeben, deswegen
Events
wurde das Schlüsselwort ... eingeführt. Es ermöglicht Ihnen,
ein paar Parameter zu verlangen und nach ihnen eine belie- ActionScript 3.0 bietet Ihnen ein einheitliches, eingebautes
bige Zahl weiterer Parameter zuzulassen. und standardbasiertes Event-Framework, über das Sie Ihre
Anwendung über Benutzereingaben steuern und Ihre kolla-
function addSandwichRecipe(sandwichName:String,
borierenden Klassen entkoppeln können.
... layers):void {…}
Mit der Methode addEventListener() können Sie Events abon-
Innerhalb von addSandwichRecipe() enthält das Array layers nieren. Diese Methode wird von allen Klassen definiert, die
alle zusätzlichen Parameter, die der Funktion übergeben wur- IEventDispatcher implementieren, und dazu zählt eine ganze
den. Sie können jeden gültigen Bezeichner verwenden, um Menge von Klassen. Das neue Event-Modell ersetzt alle Call-
die zusätzlichen Parameter zu speichern. Ein typischer Name back-Methoden aus früheren ActionScript-Versionen. Bei-
für dieses Array ist rest . Gelegentlich hören Sie deswegen spielsweise nutzen wir das Event-Modell, um die onClick() -
vielleicht, dass das Schlüsselwort ... als das Rest-Schlüssel- Funktion auf einem Button zu definieren:
wort bezeichnet wird. Weil es vor dem Rest-Schlüsselwort ein myButton.addEventListener(MouseEvent.CLICK, onButtonClicked);
normales Argument gibt, erfordert diese Methode einen Re- function onButtonClicked(event:MouseEvent):void
zeptnamen: {
myButton.label = "Hör mit der Klickerei auf!";

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 ActionScript 3.0 24

myButton.removeEventListener(MouseEvent.CLICK, einen Klick auf myButton angestoßen wurde, wird sie immer
onButtonClicked); 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
Die erste Zeile richtet einen Event-Listener für einzelne Klicks bindet die Listener-Funktion an ihren Eigentümer; damit wird
auf dem Butten myButton ein. Bei Anklicken des Buttons wird das Schreiben von Event-Handlern intuitiver. Schreiben Sie sie
die Methode onButtonClicked() aufgerufen. Beachten Sie, dass einfach wie jede andere Methode und referenzieren Sie sie,
die Event-Handler-Methode, die Sie bei einem Event-Listener ohne Delegate.create() zu verwenden. Das Objekt, das das
registrieren, ein Event als Parameter akzeptieren muss. In die- Event absetzt, ist immer über event.target verfügbar.
sem Fall wissen wir, dass das Event ein MouseEvent sein wird,
und geben event den Typ MouseEvent , eine Subklasse von Das Beispiel zeigt auch, wie man einen Event-Listener ent-
Event . fernt, nachdem das Label des Buttons verändert wurde. Es ist
wichtig, dass Sie Ihre Event-Listener bereinigen, wenn sie
Eine einfache, aber entscheidende Verbesserung in den ein- nicht mehr gültig sind. Sollten Sie vergessen, einen Event-Lis-
gebauten Events ist, dass AS3 Konstanten verwendet, um alle tener zu entfernen, wird das Objekt nicht durch die Garbage
Event-Typen zu definieren. Hier repräsentiert MouseEvent.CLICK Collection erfasst und kann weiterleben und Speicherplatz
einen Event-Typ, der überwacht werden soll. Aber dieser verschwenden. Diese nicht eingesammelten Objekte können
Event-Typ ist einfach ein String. Irgendwo in der Klasse Mouse­ sich häufen und nach und nach Auswirkungen auf die Leis-
Event steht: tung Ihrer Anwendung haben.
public static const CLICK:String = "click"; Um diesen Effekt, eine Art von Speicherleck, zu vermeiden, er-
möglicht Ihnen ActionScript 3.0, einen Event-Listener mit ei-
Über die ganze neue AS3-API verteilt und insbesondere in
ner schwachen Referenz anzuknüpfen, die es erlaubt, dass das
den Event-Paketen werden Sie sehen, dass magische Strings
Objekt auch dann gelöscht wird, wenn der Event-Listener
durch Konstanten ersetzt werden. Wenn Sie Konstanten ver-
nicht explizit entfernt wurde. Um eine schwache Referenz zu
wenden, kann der Compiler Tippfehler abfangen, bevor sie zu
aktivieren, übergeben Sie true an den letzten Parameter von
Fehlern werden.
addEventListener() , weakRef :
Zurück zu unserem Button-Beispiel: Vielleicht ist Ihnen auch
myButton.addEventListener(MouseEvent.CLICK, onButtonClicked,
aufgefallen, dass der Event-Handler, onButtonClicked() , auf my-
false, 0, true);
Button statt auf this verweist. Auch wenn die Funktion durch

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 ActionScript 3.0 25

Das ActionScript 3.0-Event-Modell ist eng an die Anzeigeliste


gebunden. Events durchlaufen drei Phasen, nachdem sie ab-
gesetzt wurden. Das verschafft Ihnen eine feinstufige Steue-
rung darüber, wann und wo Sie sie einfangen und auf sie rea-
gieren 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 Abb. 2 Event-Bubbling ist wie Bubble Bobble: Es gibt Einfang-, Ziel-
und Bubbling-Phasen.
jedem Punkt der Reise die Möglichkeit haben, es abzufangen,
zu untersuchen und eventuell sogar anzuhalten. ein Vorfahr des Buttons ist, können Sie auf den Klick reagie-
Ich denke, dass der Event-Flow so was wie das Bubble Bobble- ren, bevor der Button das macht, obwohl das Event eigentlich
Spiel ist, das in Abbildung 2 gezeigt wird. In Bubble Bobble für den Button gedacht ist.
steuern Sie einen kleinen Drachen, der die Fähigkeit hat, Dann schließt die Blase den Feind ein. Das ist die Ziel-Phase.
kleine Blasen nach vorn zu blasen. Wenn Sie sich auf einer Li- Damit wird das target eines Event-Objekts auf diesen Button
nie mit einem Feind befinden und Ihre Blase weit genug gesetzt, und von jetzt an ist der Feind in der Blase einge-
kommt, um ihn zu treffen, wird der Feind in der Blase einge- sperrt. Wenn Sie den Button direkt abonniert haben, ohne die
schlossen. Dann schwebt die Blase mit dem hilflosen Feind an Einfang-Phase anzugeben, ist das der Punkt, an dem Sie das
den oberen Rand des Bildschirms und wartet darauf, dass Sie Event erhalten. Das ist der gradlinigste Weg, mit Events umzu-
sie platzen lassen. Wäre dieses Spiel der Event-Flow, wäre der gehen, und der, der ActionScript 2-Entwicklern am vertrautes-
Feind der Gegenstand eines Events. Das Spielfeld würde Ihre ten ist.
Möglichkeiten repräsentieren, das Event zu untersuchen oder
zu unterbrechen. Schließlich steigt die Blase in der Bubbling-Phase auf dem
Bildschirm nach oben auf. Während im Event immer noch das
Nehmen wir an, der Benutzer klickt auf einen Button. Erst bla- richtige target gesetzt ist, steigt das Event wieder zur Wurzel
sen Sie eine Blase, die sich auf den Weg zum Feind macht. Das des Anzeigebaums auf, damit die Vorfahren des Buttons eine
wird als die Einfang-Phase bezeichnet. Im Flash Player reist Möglichkeit erhalten, das Event zu untersuchen oder zu ver-
das Event in der Hierarchie der Anzeigeobjekte nach unten, wenden. Dieses Bubbling erfolgt automatisch, wenn die bubb­
von der Wurzel der Anzeigeliste (der Bühne) bis zu dem But- les -Eigenschaft Ihres Events true ist. Die Bubbling-Phase ist
ton, der angeklickt wurde. Wenn Sie einen Event-Listener für nützlich, wenn Sie ein eigenes Event an die Außenseite eines
die Einfang-Phase auf einem Objekt eingerichtet haben, das

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 ActionScript 3.0 26

komplexen Subsystems übergeben möchten. Nehmen wir an, nen Sie über die Notation mit den eckigen Klammern immer
das alarm -Event wird von einem vibrierenden Quarzkristall in noch dynamisch auf Eigenschaften zugreifen. Allerdings
Ihrer Uhr ausgelöst. Ohne zusätzliche Arbeiten auszuführen durchläuft eine einfache Schleife nur noch die dynamisch
oder das Gehäuse Ihrer Uhr zu zerbrechen, um den Quarz di- hinzugefügten Eigenschaften.
rekt zu betrachten, können Sie informiert werden, dass es Zeit Diese Art von Reflection, Introspektion, bietet zur Laufzeit In-
für einen Snack ist, wenn Sie sich dafür bei Ihrer Uhr registrie- formationen zu Typen und Objekten. AS3 stellt viel bessere
ren. Das Alarm-Event steigt vom Quarzkristall zur Uhr auf. Werkzeuge für die Introspektion zur Verfügung. Die Funktion
Während jeder dieser Phasen können viele Events mit den flash.utils.describeType(classOrClassInstance) bietet Ihnen
Methoden stopPropogation() und stopImmediatePropogation() zu der übergebenen Klasse beinahe lächerlich ausführliche
abgebrochen werden. Das ist, als würde Ihr Drache die Blase Informationen in XML, die die vollständige Typhierachie, Me-
mit seinem stacheligen Rücken zum Platzen bringt, um zu si- thoden und Parameter mit Typen, Eigenschaften und Akzes-
chern, dass andere Spieler sie nicht erreichen können. Das sormethoden einschließt. Die Klasse mx.utils.ObjectUtil bie-
Event muss allerdings als cancelable deklariert sein. Es gibt tet außerdem eine getClassInfo() -Funktion, die so ziemlich
also einige harte Blasen, die Sie nicht zum Platzen bringen das Gleiche macht.
können. Neben der Entdeckung von Informationen zu einer Klasse, auf
die Sie bereits eine Referenz halten, lässt AS3 Sie Klassen, Na-
Reflection
mensräume und Funktionen auf Grundlage von Strings su-
ActionScript 3.0 bietet Reflection-Features. Reflection ist eine chen. Das kann äußerst mächtig sein, beispielsweise um einen
Einrichtung, die es einem Programm ermöglicht, sich zur Lauf- Anwendungszustand und Klassenabhängigkeiten zu Text zu
zeit seines Verhaltens bewusst zu sein und es zu verändern, serialisieren und die Klassen dann aus Text zu rekonstruieren.
insbesondere durch die Entdeckung und Erzeugung von Ob- Hier speichern wir den Namen einer Anzeigeobjekt-Klasse
jekten und ausführbaren Konstrukten. und erzeugen ein Objekt einer anderen allein auf Basis des
Frühere Versionen von ActionScript ermöglichten Ihnen eine Klassennamens:
rudimentäre Reflection, indem die verfügbaren Methoden ei- import flash.utils.*;
ner Klasse mit einer for...in -Schleife aufgelistet wurden und var mySprite:Sprite = new Sprite();
die Eigenschaften und Methoden von Klassen über den Na- var className:String = getQualifiedClassName(mySprite);
men in einer Notation mit eckigen Klammen angegeben wur- trace(className); //flash.display.Sprite
den, beispielsweise obj["method"]() . In ActionScript 3.0 kön-

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 27

Alert; //Erzwingt die Kompilierung der Klasse, damit Dieser TecFeed bietet keine Behandlung des Designmodus
//Laufzeitcode sie nutzen kann. von Flex Builder 2. Alle Beispiele können in den MXML-Editor
try von Flex Builder 2 oder einen Texteditor Ihrer Wahl einge­
{ geben und mit dem Flex 2-SDK kompiliert werden.
var ClassReference:Class = getDefinitionByName
Außerdem wird dieser TecFeed Sie an den wichtigsten Klas-
("mx.controls.Alert") as Class;
sen schnuppern lassen, ist aber in keiner Weise ein erschöp-
addChild(new ClassReference());
fendes Handbuch. Ihre erste Adresse für Informationen rund
} catch (error:ReferenceError) {
um die im Flex-Framework verfügbaren Klassen sollte die Flex
trace("Wir konnten diese Klasse nicht nachschlagen");
2-Dokumentation unter http://www.flex.org sein, die auch mit
}
Ihrem Exemplar des Flex Builder 2 gebündelt ist. Im Zweifels-
Beachten Sie, wie wir Klassen als Objekte speichern und sie fall gilt: RTFM!
dann tatsächlich mit new instantiieren können.
Flex ist immer ActionScript
Zusammenfassung Wahrscheinlich sind Sie begierig darauf, endlich mit dem Pro-
ActionScript 3.0 führt eine Menge neuer Fähigkeiten und eine grammieren anzufangen. Es gibt aber ein Konzept, das Ihnen
vollständig überarbeitete API ein, die gemeinsam Flex 2 mög- unglaublich helfen kann. Sie sollten es verstanden haben, be-
lich machen. Mit diesen Grundlagen können Sie jetzt anfangen vor Sie Ihre erste Zeile MXML geschrieben haben: Flex ist im-
zu lernen, wie Sie das Flex-Framework und MXML einsetzen. mer ActionScript, auch MXML.
Wenn Sie Ihr Flex 2-Projekt kompilieren, werden Ihre MXML-
Dateien als Zwischenschritt auf dem Weg zu einem SWF tat-
Was Flex mitbringt sächlich in ActionScript 3.0-Dateien umgewandelt. Alles, was
Flex ist gut geeignet für Rapid-Prototyping. Beginnen wir also Sie in MXML programmieren, können Sie in ActionScript pro-
damit, eine Anwendung aufzubauen. Das Ziel dieses Abschnitts grammieren. MXML ist eine eigenständige Sprache, aber Sie
ist es, die Fähigkeiten zu illustrieren, die Flex 2 mit im Gepäck können sie sich als eine andere Form vorstellen, ActionScript
hat, indem wir eine Anwendung entwickeln und dazu die vor- zu schreiben. Im Folgenden finden Sie die Regeln, die MXML
handene Menge an Flex 2-Komponenten verwenden. definieren.

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 28

Tag-Namen Blitz) oder einem Effekt-Trigger (blaues Leuchten) vervollstän-


Wenn Sie <mx:Button/> schreiben, reden Sie eigentlich nur digt werden.
über die Klasse Button . Schreiben Sie drei <mx:Label/> , erhal-
ten Sie drei Instanzen von Label . Die Attribute eines Tags werden zu Eigenschaften
der Instanz.
Tags erzeugen Instanzen der Klasse, die durch den
Tag-Namen angegeben wird.
id-Attribut
Das wichtigste aller Attribute ist das Attribut id . Das Attribut
Tag-Attribute
id kann auf jedem Tag gesetzt werden. Wie im (X)HTML DOM
Wenn Sie in ein Tag Attribute schreiben, setzen Sie die Attri- ist die id eines Elements das Handle, über das Sie auf das Ele-
bute dieser Klasseninstanz: Eigenschaften, Event-Handler und ment zugreifen können. Aber weil Tags zu Klasseninstanzen
Effekt-Trigger. In Abbildung 3 erzeugt das Tag namens <mx: werden, wird die id zum Namen der Instanz. Weisen Sie einem
Button/> eine Instanz der Klasse Button , setzt aber auch seine Tag so eine ID zu:
label - und width -Eigenschaften und seine font-size - und
<Button id="mrClicker"/>
font-family -Styles.
ist das das Gleiche, als würden Sie in der gleichen Datei Fol-
gendes 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 Buil-
der 2 einsetzen, um sich einen Hinweis auf den Typ des Attri-
Geschachtelte Tags
buts geben zu lassen, das vorgeschlagen wird. Oben könnten
die mit »c« beginnenden Attribute zu einer Eigenschaft (der In MXML ist das Schachteln eine Metapher für die Zusammen-
grüne Kreis), einem Style (lila Kasten), einem Event (gelber setzung. Das heißt, die folgenden beiden Zeilen repräsentie-
ren 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 <mx:Label text="My Label"/>


erzeugen--> <mx:Label>
(new Box()).addChild(new Button()); //einen Button in einer <mx:text>My Label</mx:text>
//Box erzeugen </mx:Label>
<mx:Label>My Label</mx:Label>
Flex Builder 2 unterstützt Sie sogar noch mehr, wenn Sie Ihren
Code im MXML-Editor schreiben. Nutzen Sie die Autovervoll- Alle hier angegebenen Labels sind identisch. Das letzte Bei-
ständigung, wenn sich der Cursor innerhalb eines Tags befin- spiel illustriert eine Default-Eigenschaft. Wenn eine Kompo-
det, zeigt Flex Builder nur die Tags an, die an der aktuellen nente eine Default-Eigenschaft hat und Sie einen Klartext-
Cursorposition innerhalb des Eigentümer-Tags zulässig sind. knoten in das Tag einschließen, wird dieser Text der Default-
Beispielsweise würde er in der Autovervollständigungsliste in Eigenschaft zugewiesen. In diesem Fall ist die Default-Eigen-
einem Button das Tag <mx:Button/> nicht zeigen, weil Sie in ei- schaft von Label text .
nen Button keinen anderen Button stecken können.
Klassen und Dateien
Kind-Tags werden Kind-Komponenten. Jede MXML-Datei repräsentiert eine AS3-Klasse, bei der der
Name der Datei und der Ort in der Ordnerstruktur den Paket-
und 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 lo-
Attribut-Tags und Default-Eigenschaften gisch. Betrachten Sie als Beispiel fr/louvre/MonaLisa.mxml :
Manchmal ist es nützlich, wenn man Attribute in ein Tag <?xml version="1.0" encoding="utf-8"?>
setzt, statt sie als XML-Attribute anzugeben, beispielsweise <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
wenn das Attribut mehrere Zeilen Inhalt hat oder selbst wei- width="210" height="310">
teren Text enthält. Sie können jedes Attribut für ein Tag <mx:toolTip>Die Mona Lisa, von Leonardo da Vinci
durch ein Kind-Tag ersetzen, dessen Name der Attributname </mx:toolTip>
ist. Sie können auf einen Blick sagen, wann ein Tag ein Attri- <mx:Image source="monalisa.jpg" width="100%"
but repräsentiert, weil der Tag-Name dann in Kleinbuchsta- height="100%"/>
ben notiert ist. </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 In MXML erfüllen XML-Namensräume ungefähr die gleiche
mit einem Tooltip an (beachten Sie die Kleinbuchstaben: Aufgabe wie Importanweisungen in ActionScript.
toolTip ist eine Eigenschaft der Canvas -Instanz, keine eigen-
ständige Klasse). XML-Namensräume
Das Wurzel-Tag jeder MXML-Datei ist die Klasse, die sie erwei- Ein Namensraum in XML dient dem gleichen Zweck wie ein
tert. Jede MXML-Datei muss ein Wurzel-Tag haben, also muss Paketname in ActionScript: Er dient dazu, Namenskollisio­
jede Klasse, die von einer erzeugt wird, irgendetwas erweitern nen zu vermeiden und Klassen zu organisieren. Wahrschein-
– und wenn es Object ist. MonaLisa erweitert Canvas . lich ist Ihnen das mx: -Präfix vor all den Tags für eingebaute
Flex 2-Komponenten aufgefallen. Es ist erforderlich, um an-
Jetzt, daSie eine MonaLisa -Klasse haben, können Sie außerdem
zugeben, dass die Tag-Namen in den MXML-Namensraum
Instanzen von ihr erzeugen, entweder in MXML oder in
gehören. Das gilt für alle Klassen, die von Flex 2 definiert
ActionScript. Indem Sie Gruppen von zusammenarbeitenden
werden. Der mx -Namensraum wird automatisch definiert,
Komponenten zusammen in Dateien platzieren, können Sie
wenn Sie eine MXML-Anwendung in Flex Builder 2 erstellen.
Ihre Anwendung auf viele MXML-Dateien aufteilen, so wie Sie
Die Syntax für die Deklaration und Verwendung eines XML-
einen Flash-Film in viele Klassen und MovieClips segmentie-
Namensraums sieht folgendermaßen aus:
ren können.
<rootTag xmlns:Präfix="URI oder Paket" … > <Präfix:childTag />
Sie könnten eine MonaLisa folgendermaßen in ActionScript
einschließen: Das Präfix wird bei der Deklaration nach dem Doppelpunkt
import fr.louvre.MonaLisa; angegeben. Bei der Verwendung geben Sie es vor dem Dop-
addChild(new MonaLisa()); pelpunkt an, um anzuzeigen, wo nach einer Klasse gesucht
werden soll. Ein XML-Namensraum muss einen eindeutigen
Aber wenn Sie in einer MXML-Datei die richtige Klasse refe- Bezeichner haben, der dem Compiler sagt, was er gerade vor
renzieren wollen, müssen Sie in das Wurzel-Tag einen XML- sich hat, da das Präfix willkürlich ist und von Ihnen frei an-
Namensraum einschließen: gegeben werden kann. Wenn Sie http://www.adobe.com/2006/
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" mxml schreiben, zieht der Compiler nicht wirklich raus und
xmlns:louvre="fr.louvre.*"> prüft diese URL. Sie wird nur genutzt, um festzustellen, dass
<louvre:MonaLisa /> Sie den MXML-Namensraum referenzieren.
</mx:Application>

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 METHODEN");
zu verweisen, nutzen Sie den Paketnamen, wenn Sie auf ein }
Paket verweisen. Außerdem müssen Sie einen separaten Na- ]]>
mensraum für alle Klassen in einem anderen Paket erzeu- </mx:Script>
gen. Wenn Sie die Klassen fruit.Apple , fruit.Orange und
Objektorientierte Programmierung führt also Klassen ein, die
cheese.Swiss haben, müssen Sie zwei Namensräume erzeu-
Daten und die Operationen auf diesen Daten vereinen. Dekla-
gen: einen für fruit.* und einen für cheese.* . Sie nutzen den
rative Markup-Sprachen wie MXML können Daten, Operatio­
Namensraum * , um auf das lokale Paket zu verweisen.
nen und sichtbare Schnittstellen vereinen. Wie, fragen Sie sich
vielleicht, kann man dann die Trennung der Verantwortlich-
ActionScript hinzufügen
keiten bewahren, wo doch die Bewegung, die uns überhaupt
Sie können nicht nur Komponenten, die zusammenarbeiten, erst zu deklarativem Markup geführt hat, die Trennung von
zu einer funktionalen Einheit gruppieren, Sie können in eine Verhalten, Stil und Inhalt gepredigt hat. Die einfache Antwort
MXML-Datei in einem Script -Block auch ActionScript 3.0- ist, dass die Trennung Ihrem eigenen Programmierstil und Ih-
Code einbetten. Diese Blöcke sollten den Code in einem rer Diskretion überlassen bleibt. Wie Sie sehen werden, ist
CDATA-Abschnitt enthalten, um sicherzustellen, dass Sie eine vollständige Trennung mitunter ein Irrweg und manch-
Dinge wie einen Kleiner-gleich-Vergleich nicht maskieren mal sogar gar nicht möglich.
müssen (denken Sie daran, dass MXML immer noch gültiges
XML ist). Code aus einem Script -Block wird in die Klasse ein- Generiertes ActionScript betrachten
gefügt, die aus Ihrem MXML generiert wird, damit er im Gel-
Sie können Einblick in die ActionScript-Dateien nehmen, zu
tungsbereich der umgebenden Klasse operieren kann. Die
denen Ihr MXML kompiliert wird, um sie als Lernmittel zu
Ausnahme bilden Importanweisungen, die in einen Script -
verwenden oder um seltenen Compiler-Fehlern oder -War-
Block kommen (obwohl sie normalerweise in einem Paket-
nungen auf den Grund zu gehen, die auf das generierte
block außerhalb der Klasse erscheinen würden), zum Beispiel:
ActionScript verweisen.
<mx:Script>
Übergeben Sie dem Flex-Compiler einfach das Argument
<![CDATA[
–keep . Beim nächsten Erstellen erscheinen die generierten
private function taunt():void
ActionScript 3.0-Dateien im Ordner generated/ .
{
trace("BIN IN DEINER KLASSE UND ERGÄNZE EIN PAAR 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 <mx:Panel width="75%" height="75%" layout="vertical"


Um zu zeigen, wie sich Flex beim Aufbau von Anwendungen title="Neue E-Mail"/>
hervortut, werden wir einen minimalistischen E-Mail-Client
Für die meisten Breiten und Höhen können Sie Prozentwerte
zusammenbasteln, der tatsächlich E-Mails liest. Wir werden
oder numerische Werte angeben. Einfache Zahlen werden in
mit einigen sehr kleinen Teilen der Anwendung beginnen
Pixeln gemessen, und Prozentwerte geben den Anteil des ver-
und sie dann ausbauen. Der Quellcode für das fertige Produkt
fügbaren Platzes an. Wenn Sie in ActionScript Maße setzen,
steht unter http://www.partlyhuman.com/books/flexshortcut/
werden für Pixelwerte die Attribute width und height verwen-
zum Download bereit.
det. Sie müssen die separaten Parameter percentWidth und
percentHeight setzen, um Maße über Prozentwerte anzugeben.
Application
Die erste Klasse, mit der Sie arbeiten werden, ist eine Applica- Boxen
tion . Eine Subklasse von Application definiert eine neue Flex
Boxen sind einfache Layoutelemente, die verwendet werden,
2-Anwendung. Wir werden die Datei Mail.mxml mit einer lee-
um Objekte zusammenfließen zu lassen. Sie können entweder
ren Application erzeugen. Unsere Klasse Mail erweitert also
eine Box oder die spezifischeren Subklassen HBox und VBox ver-
Application und macht sonst nichts:
wenden. Eine HBox hat ein horizontal fließendes Layout: Wenn
<?xml version="1.0" encoding="utf-8"?> Sie Elemente hinzufügen, fließen diese von links nach rechts
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> wie die Wörter auf einer Zeile oder wie in HTML, wenn der
</mx:Application> display -Style auf inline gesetzt ist. Eine VBox hat ein vertikal
fließendes Layout: Wenn Sie Elemente hinzufügen, werden
Führen Sie diese Anwendung aus, sollten Sie einen leeren
diese von oben nach unten gestapelt wie Absätze oder auf-
Bildschirm sehen (mit dem Signaturgradienten von Flex 2 im
einanderfolgende HTML-Elemente, deren display -Styles auf
Hintergrund).
block gesetzt sind oder die durch <br/> -Tags getrennt werden.
Boxen und Panels sind beides Container, weil sie andere Kom-
Panel
ponenten enthalten oder anordnen sollen.
Wir beginnen mit dem Fenster zum Schreiben von E-Mails. Wir
können ein Panel , das ein Container mit ein paar Dekoratio­ Eine VBox oder HBox kann aus einer Box erzeugt werden, in-
nen für einen Titel und einem fensterartigen Rahmen ist, als dem die layout -Eigenschaft der Box auf vertical oder hori-
unser Verfassen-Fenster erzeugen: zontal 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 <mx:TextInput width="100%"/>
verhalten. Das haben wir beispielsweise oben gemacht, als </mx:HBox>
wir das Panel erstellt haben. <mx:HBox width="100%">
<mx:Label text="Betreff:"/>
Erzeugen wir etwas, um die Box zu füllen, und kehren wir
<mx:TextInput width="100%"/>
dann zu nützlicheren Layouteigenschaften zurück.
</mx:HBox>
Label </mx:VBox>

Wir beginnen damit, dass wir der E-Mail-Verfassen-Kompo- Wie in Abbildung 4 zu sehen, habe ich eine VBox eingesetzt,
nente An:- und Betreff:-Zeilen hinzufügen. Das Label ist ein um zwei Zeilen vertikal aufeinanderzustapeln, und zwei HBo-
einzeiliges, nicht interaktives Textstück. Genau das Richtige xen, die die einzelnen Zeilen horizontal ausrichten. Jeder Con-
für die Beschriftung anderer Komponenten. tainer wird auf 100% skaliert, damit er die gesamte horizontale
<mx:VBox width="100%" horizontalAlign="left"> Breite einnimmt. Ohne das würden alle Elemente ihre vom In-
<mx:Label text="An:"/> halt abhängige Default-Größe oder ihre natürliche Größe an-
<mx:Label text="Betreff:"/> nehmen.
</mx:VBox>

Wir können Labels links oder rechts ausrichten oder zentrie-


ren, 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%">
Abb. 4 Das Beispiel bisher
<mx:Label text="An:"/>

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 34

Das sieht ziemlich gut aus. Aber wahrscheinlich sollten wir bildung 5 sehen. Auf diese Weise können Sie flexible Layouts
auch die linken Ränder der beiden Textfelder ausrichten. Wir erzeugen, die sich ausdehnen, um jede Breite auszufüllen, die
brauchen also so etwas wie eine Tabelle. Sie ihnen geben.

Grid
Wir können die Zeilen der beiden HBoxen mit der Grid -Kom-
ponente 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%"> Abb. 5 Die Verwendung eines Rasters führt zu nett ausgerichteten
<mx:GridItem><mx:Label text="Betreff:"/></mx:GridItem> Feldern.
<mx:GridItem width="100%"><mx:TextInput width="100%"/>
</mx:GridItem> Button
</mx:GridRow> Sie haben in vorangegangenen Beispielen bereits eine Menge
</mx:Grid> Buttons gesehen – fügen wir dem Formular also ohne grö-
ßere Umstände einen Abbrechen- und einen Senden-Button
Das Flex 2- Grid entspricht einer Tabelle in HTML: Grid ent-
hinzu.
spricht <table> , GridRow entspricht <tr> und GridItem <td> .
Wir nutzen eine HBox mit 100% Breite und richten sie rechts
All die 100% -Breiten, die Sie oben sehen, sind erforderlich, um
aus, um die beiden Buttons an der rechten Seite des Bild-
zu sichern, dass TextInput die gesamte GridRow einnimmt, die
schirms zu platzieren:
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-

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 35

<mx:HBox width="100%" horizontalAlign="right"> wenn sie benötigt wird (wenn es in der TextArea mehr Text
<mx:Button label="Abbrechen"/> gibt, als in die aktuelle Größe passt).
<mx:Button label="Senden"/>
</mx:HBox> ColorPicker und Slider
Fügen wir ein paar einfache Steuerelemente hinzu, mit denen
Weil die HBox die gesamte Breite einnimmt und die Elemente
man das Erscheinungsbild des Textinhalts verändern kann.
rechts ausgerichtet sind, bleiben die beiden Buttons auf der
Wir werden sie gemeinsam mit einigen Labels auf ein Zeile
rechten Seite des Panels, egal wie breit es gemacht wird.
setzen:
TextArea <mx:HBox horizontalGap="0" paddingTop="5" paddingBottom="5"
Natürlich können Sie keine E-Mails verfassen, wenn es keinen backgroundAlpha="0.1" backgroundColor="black">
Ort gibt, an dem Sie den Inhalt der E-Mail eingeben können.
Wir werden ein mehrzeiliges Texteingabefeld, eine TextArea, <mx:Label text="color"/>
hinzufügen, das dem <textarea> -Tag in HTML ähnelt. Weil das <mx:ColorPicker id="fontColorPicker"
Panel vertikal ausgerichtet ist, stecken wir die TextArea in die selectedColor="black"/>
Mitte zwischen die Eingabefelder und die Buttons. Wir wollen
außerdem, dass das Textfeld nicht nur horizontal, sondern <mx:Label text="size"/>
auch vertikal den gesamten verfügbaren Raum einnimmt. Die <mx:HSlider id="fontSizeSlider" minimum="8" maximum="36"
Eingabefelder und die Buttons haben eine festgelegte Höhe, snapInterval="1" liveDragging="true" value="10"/>
aber da der Container vertikal wächst, sollten Sie vertikal
mehr Platz für den Inhalt Ihrer Nachricht erhalten: </mx:HBox>

<mx:TextArea width="100%" height="100%" Das Tag ColorPicker erzeugt einen Farbwähler mit einer Pop-
verticalScrollPolicy="auto"/> up-Palette, wie man ihn aus dem Flash-Entwicklungswerkzeug
kennt. Sie können die Farben anpassen, die auf der Palette an-
Wie Sie wahrscheinlich erraten haben, steuert verticalScroll- gezeigt werden, aber dieses Beispiel verwendet die Standard-
Policy die Verwendung vertikaler Scrollleisten auf der Text­ farben. Die Tags HSlider und VSlider erzeugen Schieber, über
Area. auto sorgt dafür, dass die Scrollleiste nur angezeigt wird, 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 Scripting und Events


Styles, die das Erscheinungsbild dieser Zeile mit Steuerele- Es ist recht einfach, einer MXML-Komponente wie unserem
menten setzen und sie visuell hervorheben. (Im nächsten Ab- neuen E-Mail-Formular Verhalten hinzuzufügen. Es gibt keine
schnitt werden Styles ausführlicher behandelt.) Wir landen speziellen Verhalten, besondere Arten, Listener zu registrie-
bei etwas, wie Abbildung 6 es zeigt. ren, magische Schlüsselwörter oder Zaubersprüche: Alle
Wir haben etwas aufgebaut, das ganz ordentlich aussieht. Event-gesteuerten Verhalten sind einfach Teil des Event-Mo-
Aber natürlich macht es bisher noch nichts. Sie können diese dells, das wir im letzten Kapitel besprochen haben.
Lobes-E-Mail erst erhalten, wenn der Absenden-Button funk­ Gehen wir eine einfache Aufgabe an und bringen den Abbre-
tioniert. chen-Button dazu, alle Felder im Formular zurückzusetzen.
Erst werden wir sichern, dass das neue E-Mail-Formular in ei-
ner eigenen Komponente existiert. Dann werden wir den
Code zum Zurücksetzen der Felder schreiben. Schließlich wer-
den wir MXML-Event-Handler nutzen, um die Funktion aufzu-
rufen.

Vorbereitung
Das neue E-Mail-Formular, das wir aufgebaut haben, wird
nicht nur die sichtbare Schnittstelle, sondern auch alle Verhal-
ten enthalten, die für neue E-Mail-Formulare erforderlich sind,
mit anderen Worten: die erforderlichen Methoden. Jetzt se-
hen 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,
Abb. 6 Eine verfrühte Lobes-E-Mail verfassen und alle Tags, die in der Anwendung eingesetzt werden
könnten, in eine gewaltige Datei zu packen, werden wir Kap-
selung 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 <mx:HBox horizontalGap="0" paddingTop="5"
MXML-Datei eine Klasse ist. paddingBottom="5" backgroundAlpha="0.1"
backgroundColor="black">
All das Gerede bedeutet einfach nur, dass wir eine MXML-
<mx:Label text="Farbe"/>
­D atei, ComposeView.mxml , im Paket com.partlyhuman.books.flex-
<mx:ColorPicker id="fontColorPicker"
shortcut.mail erstellen und das Panel und seinen Inhalt in
selectedColor="black"/>
diese Datei verschieben. Als Wiederholung: Unsere Compose-
<mx:Label text="Größe"/>
View.mxml -Datei sollte so aussehen:
<mx:HSlider id="fontSizeSlider" minimum="8"
<?xml version="1.0" encoding="utf-8"?> maximum="36" snapInterval="1" liveDragging="true"
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" value="10"/>
title="Neue E-Mail" </mx:HBox>
width="75%" height="75%" layout="vertical" paddingLeft="5" <mx:TextArea width="100%" height="100%"
paddingRight="5" paddingTop="5" paddingBottom="5"> verticalScrollPolicy="auto"/>
<mx:Grid width="100%"> <mx:HBox width="100%" horizontalAlign="right">
<mx:GridRow width="100%"> <mx:Button id="resetButton" label="Abbrechen"/>
<mx:GridItem><mx:Label text="An:"/></mx:GridItem> <mx:Button id="sendButton" label="Senden"/>
<mx:GridItem width="100%"><mx:TextInput </mx:HBox>
width="100%"/></mx:GridItem> </mx:Panel>
</mx:GridRow>
<mx:GridRow width="100%"> Und unsere Anwendungsdatei kann diese Klasse jetzt über
<mx:GridItem><mx:Label text="Betreff:"/> das entsprechende Tag referenzieren:
</mx:GridItem>
<?xml version="1.0" encoding="utf-8"?>
<mx:GridItem width="100%"><mx:TextInput
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"/></mx:GridItem>
xmlns:mail="com.partlyhuman.books.flexshortcut.mail.*"
</mx:GridRow>
verticalAlign="middle" horizontalAlign="center">
</mx:Grid>
<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 Jetzt müssen wir uns nur noch darum kümmern, dass der Ab-
über einen Script -Block hinzugefügt werden kann. Wir wer- brechen-Button reset() aufruft, wenn er angeklickt wird.
den das nutzen, um eine Methode zu ergänzen, die das For- Wenn Sie in MXML Komponenten erzeugen, können Sie Tag-
mular zurücksetzt. Fügen wir den beiden TextInput-Feldern Attribute einsetzen, um Event-Handler zu definieren. Geben
und der TextArea id s hinzu, damit wir sie aus unserem Code Sie das ActionScript einfach direkt innerhalb des Attributs an:
referenzieren können. Wir nennen sie toField , subjectField <mx:Button label="Reset" click="reset()"/>
und messageField . Wir werden unsere Methode zum Zurück-
setzen des Formulars reset() nennen und ComposeView.mxml Das click -Attribut entspricht dem Event namens click . Wenn
folgenden Code hinzufügen: der Button das click -Event absetzt, wird der Code ausgeführt,
<mx:Script> der in MXML innerhalb des click -Event-Handlers angegeben
<![CDATA[ wurde. Haben Sie diesen Code angeknüpft, sollten Sie auf Ab-
brechen klicken und sehen können, wie alle Felder geleert
public function reset():void werden.
{ Code, den Sie in einem Event-Handler-Attribut schreiben,
toField.text = subjectField.text = messageField.text = läuft im Geltungsbereich der Klasse, nicht in dem des Event-
null; Ziels. Sie haben in Code, den Sie in einem Event-Attribut ge-
} schrieben haben, also Zugriff auf event , das Event-Objekt
selbst, wenn Sie es manipulieren oder an eine externe Event-
]]> Handler-Funktion weiterreichen wollen. Es ist ein guter Ge-
</mx:Script> danke, für alle mit Ausnahme der einfachsten Event-gesteuer-
ten Aktionen Funktionen zu schreiben: Das verhindert, dass
Dieser Code setzt die text -Eigenschaft aller Felder auf null Sie Code in einem Attribut schreiben (der sehr leicht dazu
und leert damit die Ansicht. Die Komponenten mit id wurden führt, dass Ihr XML ungültig wird), trennt die visuellen Ele-
zu öffentlichen Eigenschaften der Klasse, und alles im Script - mente vom Verhalten und gibt Ihnen die Möglichkeit, das Ver-
Block wird in die Klasse eingefügt. reset() wird also zu einer halten von anderen Events oder anderen Klassen aus auszu-
Instanzmethode der Klasse, die Instanzvariablen der Klasse re- lösen.
ferenziert.

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 39

Event-Listener in ActionScript einrichten gerweise durch ein Event ausgelöst wird. Es gibt zwei Heran-
Die Arbeit mit dem Event-Modell lässt sich auch einfach mit gehensweisen für dieses Problem. Die strukturiertere Lösung
ActionScript durchführen. Um dem Abbrechen-Button das wäre die Erzeugung einer Handler-Funktion, die reset() auf-
gleiche Verhalten zu geben, geben Sie ihm zuerst eine id: ruft:
<mx:Button id="resetButton" label="Reset"/> protected function onResetButtonClicked(event:Event):void
{
und fügen den Listener an geeigneter Stelle Ihres Script - reset();
Blocks mit ActionScript hinzu: }
resetButton.addEventListener("click", reset);
Das bewahrt die Trennung von Event-Handler und Funktiona-
Die Eingabe eines Strings wie "click" ist allerdings eine ge- lität. Und das ist auch das, was der MXML-Compiler automa-
fährliche Sache. Wenn Sie ihn aus Versehen falsch schreiben, tisch für Sie macht. Der gesamte Code, den Sie in das click -
kann der Compiler den Fehler nicht abfangen. Deswegen und Attribut schreiben, wird in eine Funktion eingefügt, die auto-
um Sie im Editor durch die Autovervollständigung zu unter- matisch erzeugt wird, wenn Ihr Projekt kompiliert wird:
stützen, werden alle Strings mit einer besonderen Bedeutung public function __resetButton_click(event:flash.events.
in den Flex- und der Flash-API als öffentliche, statische Kons- MouseEvent):void
tanten veröffentlicht. Statt "click" zu schreiben, um auf einen {
Mausklick zu referenzieren, sollten Sie Folgendes schreiben: reset();
resetButton.addEventListener(MouseEvent.CLICK, reset); }

Aber wenn Sie das ActionScript 3.0-Event-Modell verwenden, Das erklärt auch, warum eine Variable namens event in MXML
müssen Event-Handler-Funktionen das Event als Parameter in jedem Event-Attribut verfügbar ist: Der Code landet in ei-
akzeptieren. Unsere aktuelle reset() -Methode bringt es nicht! ner Funktion, der ein Parameter namens event übergeben
Gehen wir hier einen Schritt zurück und betrachten wir den wird.
Zweck dieser Methode. Ist reset() eine Methode, die wir an- Ein nützlicher Hack erlaubt einer Methode, zugleich als Event-
deren Methoden und nach außen verfügbar machen wollen? Handler und als gewöhnliche öffentliche Methode zu agieren.
Wenn das der Fall ist, sollten wir nicht verlangen, dass der Ermöglichen Sie es, dass der Event-Parameter den Standard-
Aufrufer ein Event übergibt, weil der Aufruf nicht notwendi- wert 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 Signa- Diese Initialisierungsevents sind für das E-Mail-Client-Beispiel
tur von reset() folgendermaßen ändern: nützlich. Wir können einen Standarderläuterungstext in den
public function reset(event:Event = null):void
Feldern An und Betreff (siehe Abbildung 7) erscheinen lassen
und dafür sorgen, dass dieser Text ausgewählt wird, wenn Sie
Das funktioniert natürlich nur, wenn Ihre Methode nicht un- in das Feld klicken oder über die Tabulator-Taste zu ihm navi-
bedingt von dem Event oder anderen Parametern abhängig gieren, damit das, was Sie eintippen, direkt die Auswahl – den
ist. Es sieht etwas schlampig aus, kann aber hilfreich sein. Erläuterungstext – ersetzt:
<mx:Panel title="Neue E-Mail" … initialize="onInitialize
Code ausführen, wenn Ihre Komponente sichtbar wird
(event)">
Eine Sache, die Ihnen bei der Verwendung von MXML-Klassen
schnell auffallen wird, ist, dass Sie keine eigenen Konstruktor- protected function onInitialize(event:Event):void
funktionen deklarieren können. Selbst wenn Sie Code im {
Konstruktor einer MXML-Klasse ausführen könnten, hätte die- toField.text = "An wen soll diese E-Mail gehen";
ser eventuell nicht den gewünschten Effekt. Kindkomponen- subjectField.text = "Hier kommt Ihr Betreff hin";
ten werden nach der Konstruktionsphase erzeugt. Versuche, toField.addEventListener(FocusEvent.FOCUS_IN,
in einem Konstruktor Kinder zu referenzieren, führen also zu onFieldFocus);
einem Fehler. subjectField.addEventListener(FocusEvent.FOCUS_IN,
Flex bietet zwei Events, die Sie einfangen sollten, wenn Sie onFieldFocus);
eine Initialisierung durchführen wollen: initialize und crea- }
tionComplete . Das erste Event, initialize , wird abgesetzt,
wenn Ihre Komponente konstruiert wird und Kinder verarbei- protected function onFieldFocus(event:Event):void
tet werden, aber bevor etwas so weit ist, dass es tatsächlich {
auf dem Bildschirm erscheinen kann. Umgekehrt wird creati- var target:TextInput = event.target.owner as TextInput;
onComplete abgesetzt, nachdem die Komponente erzeugt, ei- if (target) target.setSelection(0, target.text.length);
ner Anzeigeliste hinzugefügt, berechnet, eingeflossen und }
gezeichnet wurde. Wenn Ihr Initialisierungscode von der Posi-
Dieser Code nutzt eine weitere gute Technik: Er nutzt event.
tion der Kinder abhängig sein könnte, wäre es besser, ihn aus-
target als Gegenstand Ihres Event-Handling-Codes. Auf diese
zuführen, wenn dieses Event abgesetzt wird.

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 Lebensversiche-
rung 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 Operati-
onen verlangen, um einen Sensor, einen Funksender, einen
Schaltkreis und einen komplexen Zündmechanismus einzu-
richten. 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-Funkti-
onen schreiben, Events absenden, Events abonnieren oder
Aktualisierungsfunktionen schreiben. Mit Flex 2 richten wir
Abb. 7. Wird das An:-Feld angewählt, wird der Erläuterungstext eine Bindung ein, indem wir mit einer besonderen Syntax auf
markiert.
die Eigenschaft verweisen und Flex die ganze harte Arbeit
überlassen.
Weise können Sie den gleichen Event-Handler an mehrere
Komponenten knüpfen. Und etwas Sicherheit ist auch einge-
Beispiel: Styles auf dem Text setzen
baut. Der as -Test weist target null zu, wenn der Eigentümer
Der Farbwähler und der Größenschieber in unserem Formular
des Event-Ziels kein TextInput ist, und der if -Test überspringt
zum Verfassen von E-Mails machen noch nichts. Nutzen wir
den Code, der von einer Methode von TextInput abhängig ist,
Bindungen, um zu erreichen, dass diese Steuerelemente das
wenn das Ziel kein TextInput ist.
Erscheinungsbild des Textinhalts steuern. Wir möchten, dass
Bindungen die Schriftgröße den Wert des Größenschiebers wiedergibt
und die Schriftfarbe die im Farbwähler ausgewählte Farbe,
Bindung ist ein mächtiges Konzept, das in vielen deklarativen
auch wenn sie geändert werden (siehe Abbildung 8). Um die
Sprachen zu finden ist. Bindungen erzeugen eine Verknüp-
Bindungen in Aktion zu bringen, umgeben Sie die Eigen-
fung zwischen zwei Werten und nutzen Events, um den einen
schaft, die Sie binden wollen, mit geschweiften Klammern:
Wert zu ändern, wenn sich der andere ändert. Normalerweise

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 42

<mx:TextArea width="100%" height="100%" Bindungen erzeugen


verticalScrollPolicy="auto" id="messageField" Dieses Beispiel nutzt eine von drei Möglichkeiten, Daten zu
fontSize="{fontSizeSlider.value}" binden. Indem eine Eigenschaft mit geschweiften Klammern
color="{fontColorPicker.selectedColor}"/> umgeben wird, sagen Sie dem Compiler, dass er die Eigen-
schaft 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 brin-
gen, 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ßer-
halb der Objekte, die sie zusammenbinden, und definieren
eine Quelle ( source ) und ein Ziel ( destination ).
Sie können Bindungen mit der Klasse mx.binding.utils.Bin-
dingUtils auch in ActionScript erzeugen. Dieser Weg bietet
die besten Steuerungsmöglichkeiten darüber, wie man mit
Aktualisierungen in der Quelle umgeht.
Abb. 8 Die Schriftgröße über eine Bindung an einen Schieber
­a ktualisieren Bindungen zur Auswertung verwenden
Bindungen mit geschweiften Klammern haben noch andere
Vielleicht ist dieses Beispiel trivial, aber in echten Anwen-
Anwendungsmöglichkeiten, deswegen werden Sie sich häufig
dungen gibt es viele Fälle wie diesen, und der Einsatz von
dabei ertappen, dass Sie Bindungen nutzen, ohne irgendwel-
Bindungen kann das schnell erledigen.
che Eigenschaften oder Daten zu binden. Wenn es in einem
Eine sehr interessante Sache in diesem Beispiel ist, dass es die von geschweiften Klammern umgebenen Ausdruck keine
Werte von Eingabeelementen nicht bloß an Eigenschaften, bindbaren Eigenschaften gibt, wird der Ausdruck einfach aus-
sondern auch an Styles bindet. gewertet.

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 Bei Letzterem könnten Sie prüfen, ob der Benutzer in das
auf ein anderes Objekt oder auf irgendwelche Daten setzen Feld etwas Neues eingegeben hat, indem Sie den Text mit
müssen. Wenn Sie in ein Tag eine ID oder einen Ausdruck ein- dem Standardwert vergleichen:
tippen, wird dieser einfach literal als String interpretiert. Des-
var isTextChanged:Boolean = (input.text != INPUT_START_
wegen werden Sie geschweifte Klammern häufig verwenden,
VALUE);
um bloß auf ein anderes Objekt zu verweisen. Beispielsweise
könnten wir den Default-Button unseres Formulars auf den Dieses Verfahren kann Ihnen dabei helfen, Ihren Code wart-
Senden-Button setzen: barer zu halten und Fehler auf Grund von Tippfehlern zu
<mx:Panel title="New Mail" … defaultButton="{sendButton}"> verhindern, genau wie die eingebauten Event-Namen, die
als Konstanten gespeichert sind.
Binden an Konstanten
Wann Bindungen verwendet werden sollten
Wenn Sie in Ihrem Code Strings verwenden, können Sie
diese durch Konstanten und eine Bindung auf sie ersetzen. Es gibt viele Klassen, bei denen Ihnen Bindungen helfen kön-
Das funktioniert besonders gut, wenn Sie diese Strings auch nen, Ihren Code kompakt zu halten. Das Binden von Views an
noch an anderen Stellen verwenden müssen – beispielweise Daten (Modelle) ist besonders nützlich, wie Sie im folgenden
wenn Sie ihn mit dem Wert eines Strings vergleichen wollen Abschnitt sehen werden. Das Binden von Komponenten, um
oder wenn Sie für irgendetwas die Eigenschaft name statt der ihr Erscheinungsbild synchron zu halten, ist ebenfalls verbrei-
Eigenschaft id verwenden. (Während id zu einer Eigenschaft tet. Inspektoren, d.h. Benutzerschnittstellen, die es Ihnen er-
der Klasse wird, bleibt name einfach ein String, der auf der In- möglichen, die Eigenschaft von Objekten auf dem Bildschirm
stanz definiert ist, auf der Sie die Eigenschaft angeben). in Echtzeit einzusehen, sind für Bindungen ebenfalls gut ge-
eignet.
Statt:
Wenn Sie eine große Kontrolle über die Reihenfolge der Ope-
<mx:TextInput id="input" text="Standardwert"/> rationen haben oder nach bzw. vor dem Festschreiben kom-
plexe Operationen durchführen müssen, können Datenbin-
könnten Sie Folgendes schreiben:
dungen ein zu simpler Mechanismus sein. Anstatt damit zu
private const INPUT_START_VALUE:String = "Standardwert"; kämpfen, sie Ihrem Willen zu unterwerfen, sollten Sie Daten-
<mx:TextInput id="input" text="{INPUT_START_VALUE}"/> bindung verwenden, um Code in einfachen Fällen einfach zu
machen.

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 44

Gebundene Eigenschaften müssen bindbar sein Stellen Sie einer Eigenschaft, die Sie bindbar machen wollen,
Nur bindbare Eigenschaften können die Quelle von Bin- einfach das Metadaten-Tag Bindable voran:
dungen sein, die laufend aktualisiert werden. Im Flex 2-Frame­ [Bindable]
work gibt es viele Eigenschaften, die bereits bindbar sind. public var numToes:Number = 10;
Aber um Ihre eigenen Eigenschaften bindbar zu machen,
müssen Sie ein Metadaten-Tag verwenden. Außerdem können Sie Getter bindbar machen und das Meta-
daten-Tag Bindable so anpassen, dass es ein Event Ihrer Wahl
Metadaten absetzt, wenn der Wert aktualisiert wird.
Metadaten sind Informationen, die der Flex-Compiler nutzt, Bindbare Eigenschaften funktionieren nur in Klassen, die
um spezielle Aktionen durchzuführen. Technisch betrachtet, Events absetzen können. Das schließt alle Benutzerschnitt-
sind sie nicht Teil der Sprache ActionScript 3.0, sondern stellen-Komponenten ein, die von Flex definiert werden. Und
Compiler-Direktiven. Metadaten werden durch Ausdrücke in wenn Sie eine nicht visuelle Klasse als Modell schreiben, müs-
eckigen Klammern erzeugt. Die gebräuchlichsten Meta- sen Sie einfach nur flash.events.EventDispatcher erweitern.
daten, die Sie verwenden könnten, und ihre Bedeutungen
sind: Model-View-Controller mit Bindungen
• [Bindable] erlaubt, dass die nachfolgende Eigenschaft als Besonders nützlich ist Datenbindung bei einer Model-View-
Quelle von Bindungen verwendet wird. Controller-Architektur (MVC). Sie können eine leichtgewich-
tige View-Komponente erstellen und diese dann, anstatt eine
• [Embed] sagt dem Compiler, dass er ein externes Asset ab-
Schar von Funktionen zu schreiben, die sich darum kümmern,
rufen und in das SWF einkompilieren soll. diese zu aktualisieren, über Datenbindung direkt an ein Mo-
• [Event] definiert Events, denen direkt in den Attributen dell binden.
des Tags Handler zugewiesen werden können. Die Einfachheit dieses Verfahrens sehen Sie, wenn wir Kompo-
• [Style] erzeugt benutzerdefinierte Styles. nenten für einen Posteingang mit einer Nachrichtenliste und
Viele dieser Ausdrücke werden in den nachfolgenden Ab- einen E-Mail-Reader erstellen.
schnitten behandelt.
Daten in MXML einbetten
Es ist möglich, Modelldaten direkt in Ihr MXML einzubetten.
Aber es ist unwahrscheinlich, dass Sie das außer zu Testzwe-

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 45

cken oder beim Aufbau von sehr kleinen Anwendungen ma- In MXML können wir das XML inline schreiben. Bei HTML-
chen werden. Und genau das müssen wir hier tun: Wir müssen Nachrichten wäre es allerdings ratsam, den Inhalt des message -
ein paar schnelle Dummy-Daten erzeugen, damit wir den Knotens in einen CDATA-Abschnitt einzuschließen.
View aufbauen und die Bindungen testen können.
DataGrid
Skizzieren wir ein XML-Modell für Nachrichten. Weil XML so
leicht mit E4X manipuliert werden kann und wir kein objekt- Es gibt verschiedene eingebaute Flex-Komponenten, die für
relationale Datenbanken oder eine massive serverseitige Inte- die Anzeige von Datensätzen ideal sind. List und TileList
gration haben, die den Aufbau von Modellklassen für E-Mails sind gut geeignet für Listen mit Daten, und sie können mit
erforderlich machen, ist die Verwendung von XML ideal. Renderern für Elemente kombiniert werden, um eine Liste mit
Schnittstellen aufzubauen, die komplexer als eine einfache
Erzeugen wir eine neue MXML-Komponente – InboxView.mxml  – Liste mit Text ist. Tree ist natürlich gut geeignet, um in hierar-
zum Lesen von Nachrichten und stecken wir in sie ein paar chischen Daten zu navigieren. Wir würden unseren Postein-
Dummy-Nachrichtendaten: gang gern in dem vertrauten Raster mit Spalten sehen, über
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" die wir sortieren und die wir anpassen können (siehe Abbil-
width="100%" height="100%" title="Nachrichten"> dung 9). Flex 2 besitzt eine Komponente, die dafür perfekt ist,
DataGrid .
<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>

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


</mx:Panel>

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 46

Wir fügen dem Posteingang eine DataGrid-Komponente Eine selbst definierte Komponente an ein Modell binden
hin­zu, passen ihre Spalten an und knüpfen sie dann an unsere Hier ist unser Ansatz, einen »dummen« View zu erstellen. Er
Dummy-Daten, indem wir ihre dataProvider-Eigenschaft binden: wird einen leeren Platz bieten, in dem ein Modell eingefügt
<mx:DataGrid id="messageList" width="100%" height="100%" werden kann, und bindet an die Eigenschaften dieses Mo-
dataProvider="{inbox}"> dells, damit der View automatisch aktualisiert wird, wenn
<mx:columns> dieses Modell bereitgestellt wird.
<mx:DataGridColumn dataField="from" Wir erzeugen eine weitere Komponente für den Nachrichten-
headerText="Sender"/> View – MessageView.mxml – und fügen alle Felder ein, die wir
<mx:DataGridColumn dataField="subject" anzeigen möchten. Wir sollten oben einen Block für die Hea-
headerText="Betreff"/> der haben und unten einen großen skrollbaren Textbereich:
<mx:DataGridColumn dataField="date"
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
headerText="Datum"/>
</mx:columns>
<!-- hier kommt das Modell hin -->
</mx:DataGrid>
<mx:Object id="msg"/>
Mit nur ein paar Zeilen haben wir eine scrollbare Nachrich-
tenliste, größenveränderbare Spalten und die Möglichkeit er- <mx:Grid id="header" backgroundColor="black"
halten, über beliebige Spalten in aufsteigender oder abstei- backgroundAlpha="0.1" width="100%">
gender Folge zu sortieren. Aber wir haben gerade erst ange- <mx:GridRow>
fangen. Das DataGrid ist ein vorgefertigter View, der für die <mx:GridItem horizontalAlign="right"><mx:Label
Anzeige tabellarischer Daten geeignet ist und keine Anpas- text="Von:"/></mx:GridItem>
sungen erfordert. Es wusste, wie es jeden XML-Knoten in Ihrer <mx:GridItem><mx:Text truncateToFit="true"
Nachrichtenliste betrachten und das < subject> -Kind für das text="{msg.from}"/></mx:GridItem>
Betreff-Feld herausziehen musste, weil Sie das in der data- </mx:GridRow>
Field -Eigenschaft der Betreffspalte angegeben haben. <mx:GridRow>
<mx:GridItem horizontalAlign="right"><mx:Label
Bauen wir einen selbst definierten View auf und sagen wir text="Datum:"/></mx:GridItem>
ihm, wie er seinen Inhalt darstellen soll. Das wird natürlich <mx:GridItem><mx:Text truncateToFit="true"
das Lesefenster sein, das die vollständige E-Mail zeigt. text="{msg.date}"/></mx:GridItem>

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 47

</mx:GridRow> einnimmt, durch eine horizontale Leiste, die der Benutzer ver-
<mx:GridRow> schieben kann, um die relative Größe des oberen und unteren
<mx:GridItem horizontalAlign="right"><mx:Label Bereichs anzupassen wie bei einem HTML-Frameset mit
text="An:"/></mx:GridItem> einem sichtbaren Rahmen. Natürlich bietet Flex 2 auch eine
<mx:GridItem><mx:Text truncateToFit="true" HDividedBox , die ihren Bereich horizontal teilt.
text="{msg.to}"/></mx:GridItem>
Schließlich fügen wir der change -Eigenschaft des DataGrid ei-
</mx:GridRow>
nen Event-Handler hinzu, der selectedItem aus dem Modell in
<mx:GridRow>
den Nachrichtenplatzerhalter des Lesebereichs für das Modell
<mx:GridItem horizontalAlign="right"><mx:Label
einfügt:
text="Betreff:"/></mx:GridItem>
<mx:GridItem><mx:Text truncateToFit="true" <mx:VDividedBox width="100%" height="100%"
text="{msg.subject}"/></mx:GridItem> liveDragging="true">
</mx:GridRow>
</mx:Grid> <mx:DataGrid id="messageList" width="100%" height="100%"
dataProvider="{inbox}" change="reader.msg = messageList.
<mx:TextArea width="100%" height="100%"editable="false" selectedItem">
verticalScrollPolicy="auto" htmlText="{msg.message}"/> <mx:columns>
<mx:DataGridColumn dataField="from"
</mx:VBox> headerText="Sender"/>
<mx:DataGridColumn dataField="subject"
Wir haben dieses Element zu einer VBox gemacht statt zu headerText="Betreff"/>
einem vollständigen Panel, damit wir es neben der Nachrich- <mx:DataGridColumn dataField="date"
tenliste anzeigen können. Beachten Sie, wie einfach das ist: headerText="Datum"/>
Wir haben ein Objekt, msg , an das alle Komponenten ihre </mx:columns>
Werte binden. </mx:DataGrid>
Jetzt müssen wir es nur noch einbinden. Wir nutzen eine VDi-
videdBox , um die Nachrichtenliste und das Lesefenster zu tren- <mail:MessageView id="reader" width="100%"/>
nen. Diese Container-Komponente trennt den Bereich, den sie
</mx:VDividedBox>

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 48

Mehr brauchen Sie nicht. Der Lesefenster-View aktualisiert Daten laden und senden
seine Bindungen und zeigt die E-Mail an, wenn Sie sie in der Nachdem wir einen View aufgebaut und nachgewiesen ha-
Liste auswählen (siehe Abbildung 10). ben, dass er an ein Modell gebunden werden kann, können
wir die Daten in den E-Mail-Nachrichten laden. Flex 2 stellt Ih-
nen eine Menge Optionen für das Laden von Daten, die un-
terschiedliche Verfahren verwenden, zur Verfügung.

Eine Datei laden


Flash Player 9 führt neue Wege ein, Daten über HTTP zu la-
den. 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 . Wer-
den Informationen von einer URL angefordert, nutzen beide
Klassen die Klasse flash.net.URLRequest , um die URL gemein-
sam mit zusätzlichen Daten zur Anfrage, wie Headern, MIME-
Typen 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-Funk-
tion XML() , um die von URLLoader geladenen Textdaten in
Abb. 10 Ein umwerfender Spam-Reader, der mit nur 50 Zeilen XML zu transformieren.
­g eschrieben wurde
Beachten Sie, dass das eine von mehreren Top-Level-Funktio­
nen ist, die sich als Cast-Operator maskieren. Aber das ist eine
nützliche Maskierung. Sie liefert nicht nur ein XML-Objekt zu-

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 //.message ist ein E4X-Operator, der eine XMLList aller
seine XML-Darstellung. //Kindknoten mit dem Knotennamen <message> liefert
inbox = XML(loader.data).message;
Die Verwendung von URLLoader ähnelt der Verwendung von
}
MovieClipLoader in ActionScript 2. Erst erzeugen Sie das Ob-
jekt. Dann abonnieren Sie seine Events, die Progress-, Comple- Fügen Sie dem vorangehenden Code InboxView.mxml hinzu
tion-, Status- und Error-Events einschließen. Schließlich for- und leeren Sie ihr XMLList -Tag, kann die E-Mail-Liste ihre
dern Sie es auf, den URLRequest zu senden und die Antwort zu Dummy-Daten aus einer externen XML-Datei laden.
laden. Nachdem das Laden abgeschlossen ist, können Sie auf
die geladenen Daten über die nicht typisierte Eigenschaft HTTPService
data zugreifen: Das vorangehende Beispiel funktioniert in Flash 9 und Flex 2.
<!-- im MXML --> Flex 2 bietet Ihnen mit der Klasse HTTPService aber auch ein
<XMLList id="inbox"/> <!-- das Posteingang-XML leeren, aber noch einfacheres Verfahren. Der HTTPService kann überall
einen Platzhalter lassen --> verwendet werden, wo ein URLLoader verwendet werden
könnte, bietet aber einige Vorteile. Sie können die Anfrage
//im Script-Block: völlig trivial wiederholen, indem Sie send() auf dem HTTPSer-
protected var loader:URLLoader; vice aufrufen. Sie können direkt eine Bindung an das Ergebnis
des letzten Aufrufs des Diensts einrichten und machen damit
public function updateMessages():void eine Aktualisierungsfunktion oder einen zwischengeschalte-
{ ten Modellort überflüssig.
loader = new URLLoader(); Wir könnten das ganze ActionScript, das URLLoader verwen-
loader.addEventListener(Event.COMPLETE, onDataComplete); det, durch ein einziges Flex 2-Tag ersetzen:
loader.load(new URLRequest(
<mx:HTTPService id="inbox" resultFormat="e4x"
"http://partlyhuman.com/books/flexshortcut/mail/services/
url="http://partlyhuman.com/books/flexshortcut/mail/services/
inbox.xml"));
inbox.xml"/>
}
Wir ändern auch das DataGrid, um direkt eine Bindung mit
protected function onDataComplete(event:Event):void dem Service zu erstellen an Stelle einer Bindung an ein Mo-
{ dell, das wir manuell füllen:

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 50

<mx:DataGrid id="messageList" … dataProvider="{inbox. Natürlich ist auch HTTPService gut für REST geeignet. Das HT-
lastResult.message}">… TPService -Tag unterstützt eine request -Eigenschaft, die auf
eine Vielzahl von Typen gesetzt werden kann.
Jetzt muss nur noch inbox.send() aufgerufen werden, um die
E-Mail-Liste aufzufrischen. Ganz gleich, ob das Ziel eine ein- <mx:HTTPService id="flickr" resultFormat="e4x"
fache XML-Datei oder ein Skript ist, das XML ausgibt – HTTP- url="http://api.flickr.com/services/rest"/>
Service kann das Laden von Daten trivial machen.
flickr.request = {
REST method: "flickr.photos.getRecent",
api_key: "<<hier kommt Ihr API-Schlüssel hin>>"
Die URLLoader-Methode für die Verwendung von REST ab-
};
zuändern ist gradlinig. Fügen Sie der data -Eigenschaft des
flickr.send();
URLRequest einfach Variablen hinzu, entweder indem Sie data
auf einen URL-kodierten String setzen oder indem Sie sie Wie oben können Sie die Eigenschaft request in ActionScript
einem URLVariables-Objekt hinzufügen. Das Senden der Vari- setzen oder direkt als ein Attribut des HTTPService -Tags in
ablen in der HTTP-Anfrage und das Laden der XML-Antwort MXML. Im Attribut können Sie geschweifte Klammern verwen-
ist alles, was für die Verwendung von REST erforderlich ist. den, um ein Objekt einzubetten, oder das Attribut als Kind-
Unten ist ein einfaches Fragment, das die letzten Fotos abruft, knoten schreiben und eingebettetes XML nutzen, um die zu
die auf Flickr hochgeladen wurden: sendenden Variablen zu beschreiben:
var request:URLRequest = new URLRequest("http://api.flickr. <mx:HTTPService … request="{{method: 'flickr.photos.
com/services/rest"); getRecent'}}"/>
request.data = new URLVariables(); <!-- ist identisch mit -->
request.data.method = "flickr.photos.getRecent"; <mx:HTTPService>
request.data.api_key = "<<hier kommt Ihr API-Schlüssel <mx:request>
hin>>"; <method>flickr.photos.getRecent</method>
request.method = URLRequestMethod.GET; </mx:request>
loader = new URLLoader(); </mx:HTTPService>
loader.addEventListener(Event.COMPLETE, onComplete);
loader.load(request);

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 51

SOAP und WSDL </mx:operation>


Über die Klasse WebService können Sie leicht RPC (Remote </mx:WebService>
Procedure Calls) über SOAP ausführen. Wenn das WebService-
Objekt eine WSDL-Datei lokalisieren und laden kann – die die <mx:HBox>
Operationen, die der Service unterstützt, und ihre Parameter <mx:Label text="Symbol name:"/>
beschreibt –, können Sie über die Punktnotation auf Operati- <mx:TextInput id="symbolInput" maxChars="5"/>
onen auf dem Service zugreifen, selbst wenn Sie sie nicht im <mx:Button id="searchButton" enabled="false" label="GO"
Voraus deklariert haben. click="stockService.getQuote.send();"/>
</mx:HBox>
Die Klasse WebService muss erfolgreich ein WSDL-Datei laden,
<mx:Text text="{stockService.getQuote.lastResult}"/>
bevor irgendwelche Remote Procedure Calls gesendet wer-
</mx:Application>
den. 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 Ak-
tienkurse für einen NASDAQ-Wert zu erhalten:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:WebService id="stockService"
Abb. 11 Ein Aktienticker unter Verwendung eines
wsdl="http://services.xmethods.net/soap/urn: SOAP-Webservices
xmethods-delayed-quotes.wsdl"
load="searchButton.enabled = true;" Wenn der WebService oben die WSDL-Datei lädt, aktiviert er
fault="trace(event.fault.faultString)"> den Suchen-Butten, der standardmäßig deaktiviert ist. Das
<mx:operation name="getQuote" resultFormat="object"> ­s ichert, dass das getTemp -Objekt bereit ist, wenn es aufgerufen
<mx:request> wird.
<symbol>{symbolInput.text}</symbol>
In das Beispiel oben wurde das operation -Attribut des Web-
</mx:request>
Service zu unserer eigenen Bequemlichkeit und als Selbst­

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 52

dokumentation eingeschlossen. Da die Informationen für die MIT-Lizenz veröffentlichte AS3 Lightweight Remoting Frame-
verfügbaren Operationen in die WSDL-Datei einkodiert sind, work von Danny Patterson verwenden, das unter http://as3lrf.
hätten wir unsere eigene Beschreibung der getQuote -Opera- riaforge.org/ verfügbar ist. Das Framework ermöglicht Ihnen,
tion weglassen können. Dann hätten wir aber manuell den einen Service zu kapseln, der wie jeder andere Webservice
symbol -Parameter setzen müssen, anstatt eine Bindung zu ver- Flash Remoting unterstützt.
wenden, bevor wir den Prozeduraufruf abschicken könnten.
Die Verwendung von Datenbindung zur direkten Bindung Flex Data Services
eines Parameters an den Wert, mit dem er abgeschickt wird, Flex Data Services (FDS) unter http://www.adobe.com/pro-
wird als Parameter-Bindung bezeichnet. ducts/flex/dataservices/ ist ein Adobe-Produkt in der Flex-Fa-
Die WebService-Schnittstelle kann erheblich bequemer sein milie. Es ermöglicht Flex 2-Anwendungen, intelligenter und
als der HTTPService, insbesondere wenn man viele verschie- effizienter mit einer Datenschicht zu kommunizieren. FDS ist
dene Methoden aufruft, weil eine Service-Referenz mehrere eine Java-Anwendung, die auf einer vorhandenen Business-
Operationen verwalten kann. Logik auf dem Server läuft und von der von Ihnen gewählten
Datenbankkommunikation unabhängig ist. Auch wenn es
JSON eine separate Anwendung ist, enthält Flex 2 Features, die aus-
Für Services, die JSON-kodierte Daten zurückliefern, gibt es drücklich für die Arbeit mit FDS gedacht sind. Das Produkt
keinen eingebauten Konvertierer. eval() ist in ActionScript 3 muss separat erworben werden und ist in verschiedenen Ver-
nicht implementiert, um den AS3-Compiler aus dem Flash sionen und Preislagen verfügbar.
Player herauszuhalten. Adobe Labs hostet unter http://labs. FDS bietet eine ganze Menge an Features, die in verschiedene
adobe.com/wiki/index.php/ActionScript_3:resources:apis:libra- Kategorien eingeteilt werden können: Konnektivität, RPC-Ser-
ries aber ein freies Projekt namens corelib, das einen JSON- vices, Data-Management-Services und Messaging-Services.
Parser einschließt. FDS und Flex können über AMF3 kommunizieren. Das ist ein
binäres, komprimiertes Format, das Typen bewahrt. FDS kann
Flash Remoting
über RTMP (Real-Time Messaging Protocol) oder über HTTP
Weder Flex noch AS3 bieten neben dem Flex Data Service, der mit Flex kommunizieren und bietet gute Ausweichmechanis-
unten erwähnt wird, eine besondere API für das Flash Remo- men. FDS kann Nachrichten für vorübergehend nicht erreich-
ting. Remoting-Aufrufe können über die NetConnection -API bare Clients in Warteschlangen stellen und zustandsbehaftete
durchgeführt werden. Alternativ können Sie das unter einer Transaktionen mit Flex-Clients abwickeln.

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 53

FDS bildet Proxies für andere Remote-Services, um Logging, ent-Klasse, die die Nachrichten von einem echten E-Mail-Ser-
Sicherheit, Konfiguration und gegebenenfalls Lokalisierungen ver abruft und das Modell füllt, während sie geladen werden.
zu zentralisieren. Unten ist eine kondensierte Version der Klasse POPConnection .
Flex-Anwendungen, die den Flex Data Server nutzen, um mit Den vollständigen Code finden Sie auf der Verlatgs-Website
der Business-Logik von Anwendungen zu kommunizieren, und der Website des Autors. Die Kommunikation mit einem
können aktuelle Kopien zentralisierter Daten halten, ohne POP-Server schließt eine Reihe von Schritten ein. Sie müssen
sich um Synchronisierung, Sperren oder Aktualisierungen Folgendes machen, um mit einem POP-Server zu kommuni-
kümmern zu müssen. FDS kann Flex-Anwendungen eine Ko- zieren:
pie der Daten bieten, die immer automatisch aktuell ist. 1. Einen Benutzernamen senden.
Schließlich ermöglichen Flex Data Services Push-Messaging in 2. Auf eine Antwort warten.
Echtzeit vom Server und über den Server zwischen den Peers.
3. Ein Passwort senden.
Sockets 4. Auf eine Antwort warten.
Zum ersten Mal unterstützt Flash Player 9 TCP/IP-Socket-Ver- 5. Eine Liste von Nachrichten anfordern.
bindungen und ermöglicht Ihnen damit, mit beliebigen Ser- 6. Die Liste mit Nachrichten parsen.
vern zu sprechen und dabei vollständige Kontrolle über die
Daten zu haben, die empfangen und gesendet werden. 7. Die Nachrichten einzeln abrufen.
­S ockets sind eine Abstraktion einer TCP/IP-Verbindung als Weil das Socket nur ein einziges Event für alle einkommenden
Stream. Sie können aus dem Stream so viel lesen, wie verfüg- Daten veröffentlicht, nutzt die Klasse eine Statusvariable und
bar ist, oder in ihn in einer beliebigen Kombination von For- den zuletzt gesendeten Befehl, um festzuhalten, wo sie sich
maten schreiben. Um ein Socket zu verwenden, erzeugen Sie im Kommunikationsablauf befindet und wie sie mit den emp-
es, stellen eine Verbindung mit dem Server her, lesen und fangenen Daten umgehen muss. Die Klasse greift stark auf re-
schreiben Daten aus ihm bzw. in es und schließen es dann. guläre Ausdrücke zurück, um die Serverantworten in XML zu
parsen und die Werte mit E4X in das Datenmodell einzufügen:
Unter Verwendung von Sockets können wir unsere E-Mail-An-
wendung mit einem echten Mailserver verbinden. Um die E- final public class POPConnection extends EventDispatcher
Mail-Anwendung funktional zu machen, verschieben wir das {
Modell an einen zentralen Ort und erzeugen eine POP3-Cli- public function POPConnection(user:String, pass:String,
host:String, port:int)

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 54

{ private function sendCommand(command:String,


//… ... args): void
sock = new Socket(); {
sock.addEventListener(Event.CONNECT, onConnected); var output:String = command + " " + args.join(" ") +
sock.addEventListener(SecurityErrorEvent. CMD_END;
SECURITY_ERROR, onError); sock.writeUTFBytes(output);
sock.addEventListener(IOErrorEvent.IO_ERROR, onError); sock.flush();
sock.addEventListener(ProgressEvent.SOCKET_DATA, //Timeouts starten …
onData); }
private function processResponse():void
connect(); {
} var response:String = responseBuffer;
private function connect():void var isOk:Boolean = (response.search(/^\+OK/) == 0);
{ switch (state)
//… {
sock.connect(host, port); case POPState.CONNECTED:
//… if (isOk)
} {
private function onData(event:Event):void state = POPState.WAIT_FOR_USER;
{ sendCommand("USER", user);
responseBuffer += sock.readUTFBytes(sock. }
bytesAvailable); break;
//andere Zustände für die Authentifizierung …
//wenn das Ende des Puffers das Antwortendezeichen ist case POPState.WAITING_MULTILINE:
{ if (command == "LIST")
processResponse(); {
} parseList(response);
} currentIndex = 1;
getNextMessage();

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 55

} else if (command == "TOP" || msg.to = headers.to;


command == "RETR") { msg.date = headers.dateparsed;
if (isOk) msg.subject = headers.subject;
{ msg.message = undoubleNewlines(message);
parseMessage(response); }
getNextMessage(); }
} else {
getNextMessage(); Weil das DataGrid an die XMLList für den Posteingang gebun-
} den ist, spiegelt sich jede Änderung der Daten in der Liste wi-
} der: Während der POP-Client nacheinander die Nachrichten
break; lädt, erscheinen diese nach und nach im Posteingang und
default: können von Ihnen gelesen werden, ohne dass Sie warten
state = POPState.TRANSACTION; müssen, bis alle geladen sind.
}
States
responseBuffer = "";
} Flex 2 macht es leicht, die Benutzerschnittstelle im Vorüber-
private function parseMessage(messageSrc:String):void gehen zu verändern. Sie können den Benutzern eine Schnitt-
{ stelle präsentieren, die sich ihren aktuellen Aufgaben oder
var inbox:XMLList = MessageRepository.getInstance(). Anforderungen entsprechend ändert. Es kann allerdings cha-
inbox; otisch werden, wenn man Code nutzt, um die Benutzer-
var msg:XML = inbox.(id == currentIndex)[0]; schnittstelle anzupassen: Wenn die Anzahl der möglichen Per-
var cut:int = messageSrc.indexOf(HEADER_END); mutationen der Komponenten steigt, müssen Sie bei der Ver-
var header:String = messageSrc.substring(0, cut); waltung möglicher Zustandsübergänge immer vorsichtiger
var message:String = messageSrc. werden. States bieten Struktur und Indikation für Änderungen
substring(cut, messageSrc.length); an der Benutzerschnittstelle.
Einer der Vorteile von Flex States ist der Umstand, dass sie in
var headers:Object = parseHeaders(header); sich selbst abgeschlossen sind. Sie können die Schritte kap-
msg.from = headers.from; seln, die erforderlich sind, um einen Modus der Schnittstelle

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 56

in einen anderen State zu überführen, und diesem State ei- sis-State zurückzukehren, setzen Sie currentState einfach auf
nen Namen geben. Anstatt Ihre Schnittstelle zu inspizieren null . Wir fügen InboxView.mxml Folgendes hinzu:
oder eine manuell aktualisierte Variable zu prüfen, um zu se- <mx:states>
hen, in welchem State sich die Schnittstelle befindet, können <mx:State name="collapsed">
Sie jetzt einfach den Namen des aktuellen States inspizieren. <mx:SetProperty target="{reader}" name="height"
Ein weiterer Vorteil ist, dass Flex die Arbeit ermittelt und aus- value="0"/>
führt, die für den Übergang von einem State zu einem ande- </mx:State>
ren erforderlich ist. Sie deklarieren einfach die Eigenschaften, </mx:states>
die sich ändern müssen, und wenn Sie diesen State anfordern,
werden die Änderungen angewandt. Dieser Code sagt: Es gibt in dieser Komponente einen State
namens collapsed , der die height des Lesefensters auf 0 setzt.
Wenn Sie in Ihrer Anwendung States verwenden, können Sie Beachten Sie, wie eine Bindung eingesetzt wird, um die id des
sie außerdem als Event-Trigger benutzen und Übergänge an- Lesefenster-Panels zu referenzieren.
wenden, die auf ihnen basieren.
Sie können einen Button hinzufügen, der diese Veränderung
Beispiel: E-Mail-Liste des States anstößt und das Lesefenster-Panel kollabiert:
Wenn Sie dazu in der Lage sein wollen, die Nachrichtenliste <mx:Button label="Hide Reader" click="currentState =
zu kollabieren und das Lesefenster in der E-Mail-Anwendung 'collapsed'"/>
zu verbergen, können Sie für dieses Erscheinungsbild einen Dazu wäre es nett, wenn man das Lesefenster-Panel durch ei-
State erzeugen. Alles, was wir dazu tun müssen, ist, in einem nen einfachen Doppelklick auf eine Nachricht in der Liste
State -Tag, dem Sie einen zu referenzierenden Namen geben, wieder zurückholen könnte:
die Änderungen anzugeben, die durchgeführt werden müs- <mx:DataGrid id="messageList" …
sen. Dann werden alle Änderungen am State durchgeführt, doubleClickEnabled="true"
wenn die Eigenschaft currentState auf den Namen eines doubleClick="currentState = null">…</mx:DataGrid>
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-

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 57

An Konstanten binden Wir nutzen den gleichen HTTPService-Code wie oben und
setzen ihn ein, um ein Raster mit Fotos aufzubauen. Als wir
Weil Sie auf einen State über seinen name verweisen müssen,
mit einem DataGrid die Nachrichtenliste aufbauten, haben
der einfach nur ein String ist, sind States ein perfekter Ort
wir gesehen, dass ein DataGrid bereits weiß, wie es seine Da-
für die Anwendung des Binden-an-Konstanten-Verfahrens.
ten wiedergeben muss. Und diese Fähigkeiten dieser und an-
Mit ein paar Änderungen könnten Sie diesen Code tippfeh-
derer eingebauter Komponenten können wir tatsächlich aus-
lersicher machen. Fügen Sie einfach eine Konstante für je-
bauen, indem wir ihnen einen itemRenderer geben: Das ist
den State ein, den Sie in Ihrer Klasse verwenden werden:
eine Klasse, die sich um die Anzeige der einzelnen Datenteile
protected const STATE_COLLAPSED:String = "collapsed"; kümmert. Auf diese Weise kann sich eine Liste darum küm-
und nutzen Sie dann geschweifte Klammern, um sie zu de­ mern, die Daten durchzusehen, die erforderliche Anzahl von
referenzieren, anstatt den Namen des States einzugeben: Zellen anzulegen, sie vertikal anzuordnen und zu scrollen,
während sich der itemRenderer darum kümmert, die einzelnen
<mx:State name="{STATE_COLLAPSED}">… Elemente zu zeichnen. Die TileList ist eine weitere einge-
<mx:Button click="currentState = STATE_COLLAPSED"/> baute Datenkomponente, der neue Renderer zugewiesen
werden können, und wir lassen diese die Arbeit machen, die
State-Berechtigungen
Fotos in einem Raster anzuordnen. Während ein DataGrid Da-
Das Setzen einer Eigenschaft ist eins der Dinge, die States tun ten in Zellen anzeigt und dabei jeweils ein Element in jede
dürfen. Außerdem können sie Zeile stellt, zeigt TileList seinen Inhalt in einem Raster ange-
• einen Style mit <mx:SetStyle/> modifizieren, ordnet an, mit einem Element pro Zelle und ohne Zeilen-
• der Komponente mit <mx:AddChild/> Kinder hinzufügen, oder Spaltenköpfe:

• mit <mx:RemoveChild/> Kinder entfernen und <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"


initialize="flickr.send()">
• mit <mx:SetEventHandler/> einen Event-Handler setzen.

<mx:HTTPService id="flickr"
Beispiel: Flickr-Vorschau
url="http://api.flickr.com/services/rest"
Kehren wir zum kanonischen Flickr-Beispiel zurück. Wir wollen
requestTimeout="5000" resultFormat="e4x">
ein Raster mit Fotos ansehen und entweder einen Titel oder
<mx:request>
das Bild selbst sehen. Wir werden zwei Ansichten jedes Bilds
<method>flickr.people.getPublicPhotos</method>
als State speichern.

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 58

<user_id>40732543741@N01</user_id> dem XML herauszuziehen, konstruieren damit eine Grafik-URL


<per_page>200</per_page> und nutzen ein Image , um die Grafik anzuzeigen:
<api_key><!-- hier kommt der API-Schlüssel hin -->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
</api_key>
</mx:request>
<mx:Script><![CDATA[
</mx:HTTPService>
private function photoToImage(photo:*):String
{
<mx:TileList
var p:XML = photo as XML;
selectable="false"
return "http://static.flickr.com/" + p.@server + "/"
paddingLeft="0" paddingRight="0"
+ p.@id + "_" + p.@secret + "_s.jpg";
columnWidth="75" rowHeight="75"
}
width="100%" height="100%"
]]></mx:Script>
dataProvider="{flickr.lastResult.photos.photo}"
itemRenderer="com.partlyhuman.books.flexshortcut.flickr.
<mx:Image id="img" width="75" height="75"
FlickrTile"/>
source="{photoToImage(data)}"/>

</mx:Application>
</mx:Canvas>
Die itemRenderer -Eigenschaft der TileList gibt an, welche
Jetzt fügen wir über der Grafik ein Overlay mit dem Titel
Klasse erzeugt wird, um die einzelnen Felder des Rasters zu
hinzu:
füllen. Indem wir ihr den Namen der Klasse FlickrTile geben,
geben wir an, dass jedes Feld mit einem FlickrTile gefüllt <mx:HBox id="caption" width="75" height="75"
werden soll. Diese Klasse kümmert sich dann um die visuelle backgroundColor="black">
Darstellung einer einzigen Datenzeile. <mx:Text height="100%" width="100%"
truncateToFit="true" selectable="false" color="white"
Der Rest der Anwendung befindet sich in der Klasse Flickr-
text="{data.@title}"/>
Tile . Innerhalb eines ItemRenderer gibt es die Eigenschaft
</mx:HBox>
data , die auf die Datenzeile gesetzt wird, die der Renderer re-
präsentieren soll. Wir nutzen E4X, um die Eigenschaften aus

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 59

Dann ergänzen wir einige States. An Stelle des Standard- sichtbar zu machen. Wie in Abbildung 12 gezeigt, ist es ein
States haben wir dieses Mal zwei States, inaktiv und aktiv: Mikro-Mini-Browser.
<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>

Sie haben die Wahl, ob Sie mehrere benannte States verwen-


den 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 An-
wendung 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 Abb. 12 States werden als Rollover ausgetauscht.
hinzufügen:
Wann man States (nicht) verwenden sollte
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"…
States sind für Änderungen nützlich, die lokal sind, insbeson-
mouseOver="currentState='active'"
dere für solche, die sich nur auf das Erscheinungsbild auswir-
mouseOut="currentState='inactive'"
ken. Weil Sie beliebigen Code ausführen können, wenn Sie in
currentState="inactive">
einen State eintreten, indem Sie ihn an das enterState -Event
Und das ist alles. Jetzt können wir die Maus über dem Raster des States binden, ist es verführerisch, States zur Implemen-
schweben lassen, um die Bilder hinter den Überschriften tierung 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 welche Styles verfügbar sind, oder einen Blick in den Styles-
einsetzen, um in sich selbst abgeschlossene Änderungen der Abschnitt der Dokumentation der Klasse werfen.
Benutzerschnittstelle zu verwalten. Wenn sie in Tag-Attributen verwendet werden, unterliegen
Eine Schwäche von States ist, dass sie öffentlich sind: Jeder Style-Namen einer einfachen Übersetzungsregel. Ein Style-
externe Code kann die currentState -Eigenschaft Ihrer Klasse Name in einem Stylesheet darf (und tut das häufig auch) wie
und damit den State Ihrer Klasse ändern. States sind demnach in font-family Minuszeichen verwenden, um Wörter zu tren-
komfortabel, aber nur zu haben, wenn man auf Kapselung nen. Wenn sie als Attribute in einem Tag verwendet werden,
verzichtet. werden die Minuszeichen in Camel-Case umgewandelt, bei-
spielsweise wie in fontFamily . Das erfolgt programmatisch, da-
Styles mit sogar die benutzerdefinierten Styles, die Sie erzeugen,
Styles machen es leicht, sämtliche Erscheinungsbilder Ihrer umgewandelt werden können. Außerdem dürfen Sie in einem
Anwendung anzupassen, und bieten Ihnen verschiedene Stylesheet entweder die Camel-Case-Form oder die Form mit
Wege, Erscheinungsbilder mit Objekten zu verknüpfen. Styles dem Minuszeichen verwenden: Beide Formen werden akzep-
sind ziemlich vielfältig: Sie können Styles zur Laufzeit ändern, tiert.
um Ihre Anwendung reaktionsfähiger zu machen, Sie können Um das Erscheinungsbild einer einzelnen Instanz zu ändern
sie in MXML oder ActionScript setzen, und Sie können sie an (siehe Abbildung 13), können Sie Inline-Styles verwenden:
Datenquellen binden.
<mx:Text width="100%" text="Flau, langweilig, stillos. Macht
Inline-Styles keinen Eindruck."/>
<mx:Text width="100%"
In MXML sind Styles eine Gruppe von Attributen von Tags. An-
fontSize="18"
ders als bei einigen anderen deklarativen XML-Sprachen tei-
color="white"
len in MXML die Attribute für Event-Namen, -Styles, -Effekt-
fontFamily="Futura"
Trigger und -Instanzeigenschaften alle einen Namensraum.
fontStyle="italic"
Sie können die Icons im Pop-up der Autovervollständigung
text="ABSCHLIESSBARKEIT sorgt für WACHSENDE PRODUKTIVITÄT
von Flex Builder 2 verwenden, um Styles auseinanderzuhalten
in der WEBDESIGN-MODELLOLOGIE"/>
und zu sehen, welche Styles auf welcher Komponente verfüg-
bar 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.

color, Benannte Farben und Ganzzahlwerte wie


backgroundColor 0x5566AA , # 5566AA , werden unterstützt, Kurz-
formen wie #AAA nicht.

backgroundAlpha Alpha-Werte sind reelle Zahlen zwischen 0 und 1.


Abb. 13 Texten etwas Stil spendieren
borderStyle, Statt wie in CSS border-left , border-right usw.
Häufig verwendete Styles borderSides zu setzen, setzen Sie border-style auf einen
Es gibt eine Hand voll Styles, die Sie in Flex 2 häufig verwen- einzigen Style und border-sides auf eine kom-
den werden. Viele davon scheinen mit W3C CSS-Styles iden- maseparierte Liste mit top , left , right , bottom .
tisch zu sein, sind häufig aber etwas anders. Diese Unter- horizontalCen- Ermöglicht Ihnen eine Positionierung auf Basis
schiede können problematisch werden, deswegen finden Sie ter, einer Mittelinie statt der linken oberen Ecke. Set-
entsprechende Hinweise dazu in der folgenden Liste. verticalCenter zen Sie für beide Werte 0, wird der Mittelpunkt
eines Objekts auf den Mittelpunkt seiner Eltern-
Wie oben gesagt, werden alle Maßeinheiten in Pixeln angege- komponente gesetzt.
ben. Deswegen sollte kein Wert Einheiten einschließen. Ein
horizontalGap, Modifiziert Abstände bei Layout-Containern wie
weiterer wichtiger Punkt ist, dass die Eigenschaften x , y , width
verticalGap HBox .
und height keine Styles sind und von Styles nicht gesteuert
werden können. Aber top , bottom , left und right sind Styles, Tab. 1 Häufig vorkommende Styles und Anmerkungen:
die die gleiche Bedeutung haben wie in W3C CSS.
Styles in ActionScript setzen

fontFace Kommaseparierte Listen werden nicht unter- Um auf einer einzelnen Komponenteninstanz mit ActionScript
stützt. Verwenden Sie _typewriter , _sans , _se- einen Style zu setzen, verwenden Sie setStyle(styleName,
rif statt CSS-Vorgaben wie sans. ­v alue) , zum Beispiel:
fontSize Alle Maßeinheiten werden in Pixeln angegeben. <mx:Button id="myButton" click="myButton.
Hängen Sie keine Einheiten an. setStyle('borderColor', 'red')" label="Red"/>

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Was Flex mitbringt 62

Style-Vererbung fentlicht, die Code teilen: Sie können in jeder Top-Level-Appli-


In Abhängigkeit vom jeweiligen Style kann das Setzen eines cation unterschiedliche .css -Dateien einschließen, die nur
Styles auf einer Container-Komponente bewirken, dass er Styles enthalten, die in dieser Anwendung verwendet werden.
auch auf den Kindern des Containers gesetzt wird. Das ist ein Wenn Sie mit CSS arbeiten, denken Sie daran, dass Flex auch
anderes Phänomen als kaskadierende Styles, weil es sich CSS in ActionScript kompiliert. Ihre CSS-Dateien werden nicht
nicht auf Style-Regeln bezieht, sondern auf Anzeigelisten. Es zur Laufzeit geladen oder angewandt. In Bezug auf den Wech-
wird als Style-Vererbung bezeichnet und gilt üblicherweise sel von Styles zur Laufzeit ist aber nicht alle Hoffnung verlo-
für Farben und Text-Styles. Die Flex 2 Language Reference do- ren. Über die Klasse StyleManager können Sie Styles einsehen
kumentiert die Vererbungseigenschaft jedes Styles. und modifizieren und sogar neue Selektoren hinzufügen,
während Ihre Anwendung läuft. Sie können zwar nicht ein-
Cascading Style Sheets
fach ein neues Stylesheet laden, aber ActionScript verwen-
Flex 2 unterstützt Cascading Style Sheets mit der gleichen den, um CSS-Styles zu modifizieren und zu sehen, wie Ihre
Syntax wie W3C CSS und dem gleichen Kaskadierungsmodell, Anwendung mit diesen Änderungen aufgefrischt wird.
aber mit ganz anderer Unterstützung für Selektoren. Wenn Sie
Der Hauptunterschied zwischen W3C CSS- und Flex 2-Style-
beginnen, Flex 2-Stylesheets zu verwenden, würde ich Ihnen
sheets sind die Arten von Selektoren, die unterstützt werden.
raten, alles zu vergessen, was Sie über CSS wissen. Oder schie-
ben Sie es zumindest beiseite, bis Sie das nächste Mal wieder
Typ-Selektoren
HTML und CSS verwenden.
Nutzen Sie Typ-Selektoren, um Styles für jede Instanz einer
Sie können CSS direkt in einen Style -Block in MXML schreiben bestimmten Klasse zu setzen. Diese können nicht nur auf ein-
oder eine externe CSS-Datei referenzieren: gebaute Komponenten wie ComboBox und ProgressBar verwei-
<mx:Style source="styles.css"/> sen, sondern auch auf MXML- und ActionScript-Klassen, die
Sie selbst schreiben. Ganz ähnlich, wie Sie die folgende Zeile
Allerdings können Sie CSS-Style-Blöcke nur aus der Wurzel- in W3C CSS verwenden könnten, um alle geordneten und un-
Application Ihres Projekts einlesen. Wenn Sie an einer großen geordneten Listen weiß erscheinen zu lassen:
Anwendung arbeiten, sollten Sie überlegen, ob Sie Ihre Styles
ul, ol {color: white}
nicht in mehrere .css -Dateien aufteilen, die sich mit verschie-
denen Subsystemen befassen. Das ist besonders vorteilhaft,
wenn Sie an einem Projekt arbeiten, das mehrere SWFs veröf-

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 La- Achtung: Sie können auf einem Element nicht, wie in HTML-
bel- und Text-Komponenten weiß erscheinen zu lassen: Code bei <a class="external, big"> mehrere Style-Klassen an-
Label, Text {color: white}
wenden.

Der global-Selektor
Klassen-Selektoren
Nutzen Sie Klassen-Selektoren, um einen allgemeinen Style zu Wie der * -Selektor von W3C CSS gilt der global -Selektor in
erzeugen, den beliebige Instanzen verwenden können. Um ei- Flex 2 CSS für alles. Er ist allerdings die allgemeinste Regel
nen Kassen-Selektor zu benutzen, müssen Sie sich nur einen und kann von einer spezifischeren Regel überschrieben wer-
Klassennamen einfallen lassen, ihn in CSS mit dem Style defi- den. Das kann nützlich sein, um eine globale Schriftart zu set-
nieren, den Sie darauf anwenden möchten, und den Klassen- zen oder, noch besser, um auf einmal Animationen in allen
namen auf den Instanzen setzen, die auf diese Weise erschei- Flex 2-Komponenten zu beschleunigen oder abzuschalten.
nen sollen. global {
openDuration: 0;
Beispielsweise können Sie eine Klasse red erzeugen, die nur
closeDuration: 0;
ein paar spezifische Komponenten auf dem Bildschirm ver-
}
wenden werden:
<mx:Style> Nicht implementierte Selektoren
.red {color: red}
Über die drei oben erwähnten Selektoren hinaus sind keine
</mx:Style>
weiteren Selektoren implementiert. Das bedeutet, dass Sie
<mx:Button styleName="red" label="Roter Button"/>
Folgendes nicht verwenden können:
<mx:Label styleName="red" label="Rotes Label"/>
<mx:Button label="Normaler Button"/> • Typ-spezifische Klassen wie Button.bigButton
• ID-Selektoren wie #logo
Die Nomenklatur wird hier verwirrend, weil wir bereits ein
ganz anderes Konzept dafür haben, was eine »Klasse« ist. • alle Arten von Nachfahren- oder Familien-Selektoren wie
Auch wenn die Dinger immer noch »Klassen-Selektoren« ge- Panel LinkButton
nannt werden, nutzen Sie das Attribut styleName , um Style- • Pseudoklassen wie .fancyLabel:hover
Klassen 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 in Flex 2-Anwendungen kommt der Inhalt oft von einer exter-
Flex 2 führt mit der mangelhaften Selektorenunterstützung nen Quelle und wird verwendet, um den View zu füllen. Wenn
und der Klassifizierung visueller Eigenschaften wie width und Sie in MXML Views schreiben, geben Sie also eine Darstellung
height als Nicht-Styles einen Doppelschlag aus. Es gibt zwar vor, die bereits locker an einen Inhalt gebunden ist. Die Dar-
gute Gründe dafür, diese Eigenschaften nicht als Styles zu be- stellung noch weiter in Struktur und Style aufzuteilen ist
handeln, führt aber dazu, dass der Haupteil des visuellen Er- Zweck der Externalisierung von CSS. Das ist nützlich, um Kom-
scheinungsbilds häufig in einer externen CSS-Datei gespei- ponenten zu schreiben, die mit einem anderen Style wieder-
chert wird, während Teile fest im MXML verankert bleiben. verwendet werden könnten. Andererseits könnten Sie sich bei
Der Mangel an Selektoren bedeutet, dass Sie eventuell keine Einwegkomponenten selbst behindern, wenn Sie den Style
andere Wahl haben, als unhandliche Style-Klassennamen zu wie beim Rest der MXML-Darstellung in eine separate Datei
konstruieren, um Namenskonflikte zu vermeiden, wenn Sie stecken.
bestimmte Komponenten in einem Stylesheet (mit globaler Die Verwendung von externem CSS – ihre Einschränkungen
Gültigkeit) anvisieren. vorausgesetzt – kann Ihren Code entweder vereinfachen oder
Wenn es sinnvoll ist, könnten Sie Inline-Styles für Styles ver- komplizierter machen. Finden Sie eine Strategie, die gut mit
wenden, die nur auf einzelnen Instanzen verwendet werden, Ihren Styles und Ihrer Anwendung funktioniert und ihre Kom-
oder statt Style-Klassen »Mikroklassen« erzeugen. Nehmen plexität und Organisation berücksichtigt.
wir an, Sie wollten beispielsweise den folgenden Effekt erzie-
len:
Flex zum Glänzen bringen
#topPanel Button.redButton {background-color: red; width: 50}
Viele Entwickler (und noch mehr Designer), die sich zum ers-
Sie könnten sich entschließen, an Stelle der Style-klasse .top- ten Mal mit Flex beschäftigen, sind zunächst skeptisch, was
PanelRedButton tatsächlich eine Klasse RedButton.mxml zu ma- das Erscheinungsbild von Flex-Anwendungen angeht. Das
chen, die sich vielleicht im gleichen Paket befindet wie Ihr Standardtheme wird in so vielen Flex 2-Demos verwendet,
topPanel und aus Folgendem besteht: dass es scheint, als hätte man keine Auswahlmöglichkeiten:
<mx:Button backgroundColor="red" width="50"/> Anwendungen scheinen viele Formen annehmen zu können,
vorausgesetzt sie sind Blaugrün, haben abgerundete Ecken
Bewährte Praktiken der Webstandards-Gemeinschaft würden und nutzen Verdana als Schrift. Wäre das der Fall, wäre es
uns auf eine Trennung von Inhalt und Style verpflichten. Aber schwierig, Kunden von Flex 2 zu überzeugen.

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Flex zum Glänzen bringen 65

Glücklicherweise ist dem nicht so. Ohne viel Aufwand können Sie können die folgenden Inhalte einbetten:
Sie Flex 2-Anwendungen entwickeln, die keinerlei Ähnlich- • JPG-/JPEG-Grafikdateien
keiten mit dem Standardtheme haben. Denken Sie daran: Im
wahren Leben kann das Aussehen Ihrer Anwendung fast so • GIF-Grafikdateien
wichtig sein wie ihre Funktionalität. • PNG-Grafikdateien
• SVG-/SVGZ-Vektorgrafikdateien (unterstützt eine Unter-
Assets
menge von SVG 1.1)
Mit den eingebauten Style-Eigenschaften können Sie nur be-
schränkt Dinge erreichen. Sie können Rahmen, Farben und • MP3-Sounddateien
Abstände ändern, aber um wirklich das Erscheinungsbild Ihrer • TTF-Schriftdateien
Anwendung zu ändern, brauchen Sie Assets.
• installierte Systemschriften
Flex 2 behandelt Assets ganz anders als beispielsweise Flash
• SWF-Dateien und spezielle Symbole in SWFs
8. Erstens kompiliert Flex 2 direkt von den Quelldateien. Die
IDE besitzt weder Bibliotheks-Panel noch -Schnittstelle für Von diesen können SVG-Dateien und Schriftdateien nicht zur
den Import von Assets. Aber auch wenn es auf den ersten Laufzeit geladen werden.
Blick nicht so scheinen mag, ist Flex 2 absolut dazu in der
Assets über Styles einbetten
Lage, in kompilierten SWFs gemeinsam mit Ihrem Code Multi-
media-Inhalte einzuschließen. Das einfachste und üblichste Verfahren, Assets in Ihre Anwen-
dung zu bekommen, ist die Verwendung von Styles. Da die
Asset-Typen Grafikeinbettung einfach dort platziert wird, wo die Grafik
Sie können Schriften, Soundobjekte, Grafiken und sogar an- verwendet wird, ist dieses Verfahren intuitiv und leicht ver-
dere SWFs in Ihre Anwendung einbetten. Wenn Sie in eine wendbar. Flex 2 nutzt die Embed() -Notation, eine Flex-Erweite-
Anwendung Assets einbetten, haben Sie keine Möglichkeit, rung zu CSS im Gefolge von url() .
die Qualitätseinstellungen zu steuern. Können Sie die Kompri- Die funktionale Notation Embed() kann mehrere Parameter an-
mierungseinstellungen dieser Dateien steuern, müssen Sie nehmen, von denen einige nur bei bestimmten Typen von As-
diese also über externe Programme anpassen. sets 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 können. Zunächst scheint das vielleicht ziemlich weit weg, er-
Embed() -Notation normal: gibt in Bezug auf die neue Anzeigearchitektur von Flash
<mx:Style>
Player 9 aber schnell Sinn. Die Methode zur Erstellung eines
MonaLisa {
beliebigen Typs von Anzeigeobjekt ist eben einfach new . Wenn
background-image: Embed("/assets/monalisa.jpg");
Sie neue Komponenten erzeugen, die vorhandene erweitern,
background-size: "100%";
werden auch diese noch mit new erzeugt. Bitmap-Assets sind
}
also Subklassen von BitmapAsset (und die wiederum Sub-Sub-
</mx:Style>
klassen von Bitmap ), die eben die Funktionalität einer leeren
Bitmap erweitern, indem sie stattdessen eine bestimmte Grafik
<louvre:MonaLisa/>
anzeigen
Und wenn Sie Styles inline als Attribute von Tags schreiben, var a:Button = new Button(); addChild(a);
schreiben Sie stattdessen @Embed() : var b:Panel = new Panel(); addChild(b);
<mx:Image source="@Embed('/assets/monalisa.jpg')" var c:TextInput = new TextInput(); addChild(c);
width="100%" height="100%"/> var d:InboxView = new InboxView(); addChild(d);
//benutzerdefinierte Komponente
Embed() nutzt Pfade, die relativ zu der Datei sind, in die sie ge- var e:MonaLisaBitmap = new MonaLisaBitmap(); addChild(e);
schrieben wurden, und die Wurzel des Pfads ist der Quellord- //Asset!
ner, wie er in den Projekteinstellungen von Flex Builder 2 ge-
setzt wurde. Wenn Sie nicht gerade einen guten Grund haben, Wenn Sie in CSS Assets einbetten, generiert der Flex 2-Compi-
etwas anderes zu machen, sollten Sie absolute Pfade verwen- ler automatisch Namen für die Klassen. Wollen Sie auf sie au-
den, damit das Verschieben von Quellcode-Dateien keine Aus- ßerhalb von CSS zugreifen, können Sie Assets einbetten, in-
wirkungen hat. dem Sie in ActionScript Metadaten verwenden.

Assets in der Runtime Assets mit ActionScript einbetten

Assets, die Sie einbetten, werden zu einem Teil der Anwen- Sie können das Metadaten-Tag Embed verwenden, um Assets in
dung und sind gleichermaßen für den Code, den Sie schrei- ActionScript einzubetten. Eingebettete Assets sind mit der
ben, und zur Laufzeit für die Anwendung verfügbar. Das Class-Referenz verknüpft, die Sie angeben. Sie können auch
Tollste an Assets ist, dass sie in Klassen verwandelt werden 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")] bare Komponente verwendet wird. Während die Ränder in der


private const DeleteAsset:Class; ursprünglichen Größe bleiben, können Sie durch die Skalie-
rung der Mitte viele Grafiken dehnen, ohne die wichtigen De-
<!-- direkt inline in CSS einbetten --> tails in den Ecken zu deformieren. Sie definieren zwei Linien
<mx:Button icon="@Embed(source='/assets/delete.gif')" auf jeder Achse, die die Grafik in ein Raster mit neun Untertei-
label="Löschen"/> lungen aufgliedern. Die Positionen der vertikalen Linien wer-
<!-- an über Metadaten eingebettete Klasse binden --> den in Pixeln von der linken Seite gemessen und die der hori-
<mx:Button icon="{DeleteAsset}" label="Löschen"/> zontalen Linien von oben (da der Ursprung im Flash Player
die linke obere Ecke ist). Beispielsweise könnten wir Folgen­
Weil Variablen, die Klassen referenzieren, nicht als Typen ver- des verwenden, um die Größe eines Rahmens in einem ein­
wendet werden können, können Sie nicht var foo:DeleteAsset gerahmten Bild zu bewahren:
schreiben. Möchten Sie Referenzen auf Assets übergeben,
müssen Sie stattdessen die Superklasse verwenden. Bitmaps <mx:Image source="@Embed(source='/assets/
werden als BitmapAssets eingebettet, Schriften als FontAssets , monalisa-framed.jpg', scaleGridTop=22, scaleGridLeft=22,
SVG als SpriteAsset usw. Sie können als Typ auch die allge- scaleGridRight=395, scaleGridBottom=575)" width="100%"
meine Schnittstelle IFlexAsset verwenden. height="100%"/>

Schriften einbetten
Einbettungsoptionen
Um eine Schrift in ein Stylesheet einzubetten, können Sie
Unabhängig davon, ob Sie Embed() in einem Metadaten-Tag, in url() statt Embed() verwenden. Nutzen Sie den speziellen Se-
einem Inline-Style oder einem Stylesheet verwenden, können lektor @font-face , um die Schrift zu definieren, und setzen Sie
Sie mit ihm immer Parameter verwenden. Bei allen Typen von font-family , um ihren Namen zu erzeugen:
Assets unterstützt es die Eigenschaften source und mimeType ,
die verwendet werden, um die Quelldatei und den MIME-Typ /* die Schrift einbetten */
des Objekts anzugeben. @font-face {
src: url("/assets/fonts/caecilia-light.ttf");
Grafische Assets unterstützen außerdem Eigenschaften zur font-family: "Caecilia";
Angabe von Scale-9-Segmentierungen. Scale-9 ermöglicht Ih- }
nen, eine Grafik diskontinuierlich zu skalieren, die üblicher- /* die Schrift verwenden */
weise als Hintergrund oder als Skin für eine größenveränder- .partlyhuman {

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Flex zum Glänzen bringen 68

font-family: "Caecilia"; }
font-size: 32; @font-face {
} src: url("assets/fonts/caecilia.swf");
font-family: "Caecilia";
Zur Verwendung der Schrift müssen Sie einfach nur die font- font-style: italic;
family referenzieren, die Sie bei der Einbettung deklariert ha- font-weight: bold;
ben. }
Sie können eine Schrift aus einer TTF-Datei, aus einer True­
Type-Schrift, die auf Ihrem System installiert ist, oder aus ei- Symbole einbetten
ner Schrift einbetten, die in ein SWF eingebettet ist. Wenn Sie Sie können gleichermaßen SWFs selbst und Symbole aus der
PostScript- oder OTF-Schriften verwenden müssen, betten Sie Bibliothek eines SWF in Ihre Flex-Anwendung einbetten.
diese in ein SWF ein und nutzen dann das SWF als Ziel Ihrer Wenn Sie ein vollständiges SWF einbetten, können Sie den
src -Eigenschaft. Wenn Sie Schriften aus einem SWF verwen- Code darin verwenden, als wäre er mit ActionScript 3 für
den, müssen Sie ein @font-face -Element für jeden Style ( bold , Flash Player 9 oder höher veröffentlicht worden, oder Sie kön-
italic , bold italic ) erstellen, den Sie verwenden wollen: nen mit älteren SWFs über eine LocalConnection im Host und
@font-face {
im eingebetteten SWF kommunizieren. Eingebettete SWFs
src: url("assets/fonts/caecilia.swf");
werden als Subklassen von mx.core.MovieClipLoaderAsset er-
font-family: "Caecilia";
zeugt, die MovieClip erweitert.
} Sie können SWFs auch als Bibliotheken einsetzen, um gra-
@font-face { fische Assets zu organisieren, die Ihre Flex-Anwendung nutzt,
src: url("assets/fonts/caecilia.swf"); und dann die Flash-Entwicklungsumgebung nutzen, um Ihre
font-family: "Caecilia"; Assets zu verwalten. Alle Symbole, die für ActionScript als
font-style: italic Button- oder MovieClip-Typen veröffentlicht werden, sind
} über ihren Linkage-Namen verfügbar. Aus eingebetteten
@font-face { Symbolen wird der gesamte Code herausgezogen. Sie werden
src: url("assets/fonts/caecilia.swf"); am besten also nur für Grafiken verwendet. Um ein Symbol
font-family: "Caecilia"; anzugeben, das aus einem SWF eingebettet werden soll, nut-
font-weight: bold; zen 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 Button {


einem SWF mit einer Sammlung von Gemälden zu verwen- up-skin: Embed("/assets/button-up.png");
den: down-skin: Embed("/assets/button-down.png");
over-skin: Embed("/assets/button-over.png");
<mx:Image id="laJoconde" source="@Embed(source='paintings.
}
swf', symbol='monaLisa')"/>

Skinning
Das Einbetten von Grafiken kann für sich genommen schon
die visuelle Wirkung Ihrer Anwendung erhöhen. Üblicher-
weise 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. Abb. 14 Skinning lässt Ihre Anwendung
Skinning kann ganz einfach durchgeführt, indem Grafiken in schnell einzigartig aussehen.

Skin-Style-Eigenschaften eingebettet werden. Eingebaute


Wenn Sie sich sicher sind, dass kein Button in der Anwendung
Flex UI-Komponenten veröffentlichen mehrere Style-Eigen-
deaktiviert oder ausgewählt ist, reichen diese drei Styles aus.
schaften für das Skinning. Diese lassen sich leicht identifizie-
Andernfalls könnte ihr sorgfältig geskinnter Button seine
ren, da sie mit »-skin« enden. Skin-Style-Eigenschaften gibt es
Maske fallen lassen und im Standard-Style erscheinen, wenn
in Gruppen, die auf den möglichen Interaktionen der Kompo-
er deaktiviert oder ausgewählt wird. Selbst wenn Sie nicht
nente basieren. Beispielsweise zählen Skins für Buttons seine
alle Zustände in Ihren Skins verwenden, wäre es also empfeh-
acht möglichen Zustände auf: up , down , over , disabled – und all
lenswert, alle Skin-Eigenschaften zuzuweisen, beispielsweise
diese noch mal, während sie ausgewählt sind (um Buttons zu
indem Sie die Skin-Eigenschaften für den ausgewählten Zu-
unterstützen, die ein- und ausgeschaltet werden können). Un-
stand auf die gleichen Grafiken zeigen lassen wie die Skin-Ei-
ten ist das CSS für den benutzerdefinierten Button-Style, den
genschaften für den nicht ausgewählten Zustand. Werfen Sie
Sie in Abbildung 14 sehen.
in der Dokumentation bei den einzelnen Komponenten einen
Blick in den Styles-Abschnitt, um seine skinbaren Eigen-
schaften 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 ei- BEST setzen, Flash Player 9 transformiert Bitmaps immer mit
ner Komponente verknüpft sind und seine Skins begleiten. einem schnellen Nächster-Nachbar-Algorithmus. Das bedeu-
Buttons haben die Eigenschaften disabled-color , text- tet, dass bei skalierten Grafiken ein Treppeneffekt zu sehen
­r ollover-color und text-selected-color , um die Farbe des sein kann. Dass dabei die Anzeigequalität der Geschwindig-
Texts in Abhängigkeit von diesen Zuständen zu ändern. keit geopfert wird, ist in der Regel eine gute Sache und eine
Eine Anforderung von Skin-Styles ist, dass sie eingebettete vernünftige Standardeinstellung: In Animationen ist die
Grafiken sein müssen. Während andere Styles wie background- Frame-Rate wichtiger als die Qualität der einzelnen Frames.
image entweder über eine url() -Notation angegeben und zur Allerdings bietet Ihnen Flex keine einfache Medizin, wenn
Laufzeit geladen oder aber mit der Embed() -Notation angege- die Bildqualität für eine bestimmte Grafik entscheidend ist.
ben und eingebettet werden können, müssen Skin-Eigen- Es gibt eine Boolesche Eigenschaft namens smoothing , die
schaften immer eingebettet werden. Das sichert, dass Sie sich auf Bitmap -Instanzen definiert ist, eine bilineare Filterung ak-
nicht mit dem Ladevorgang und der Möglichkeit befassen tiviert und ein glatteres Bild auf Kosten von mehr Berech-
müssen, dass Ihre Schnittstelle unsichtbar oder nicht ver- nungen liefert. Die eigentliche Bitmap ist allerdings tief in
wendbar ist, solange das Laden noch nicht abgeschlossen ist. der Komponente vergraben, die sie tatsächlich verwendet,
Ob ein Grafik-Style das Laden zur Laufzeit erlaubt, können Sie und es gibt keinen allgemeinen Weg, an diese innere Bitmap
ermitteln, indem Sie sich den Typ des Styles anschauen. Wenn heranzukommen.
Sie eine Style-Eigenschaft mit dem Typ Class sehen, können Der Code für diesen TecFeed schließt eine Klasse namens
Sie annehmen, dass Sie ein eingebettetes Asset erwartet. com.partlyhuman.fx.SmoothingEnabler ein, die alle Bitmaps
Denken Sie daran, dass das Ergebnis eines Metadaten-Tags findet, die in einer Komponente vergraben sind, und für sie
Embed eine Class-Referenz ist: Eine Inline- Embed() -Notation er- das Glätten einschaltet. Sie können sie folgendermaßen auf
füllt also die Style-Eigenschaft-Anforderungen für einen jedem Anzeigeobjekt verwenden:
Class -Typ.
import com.partlyhuman.fx.SmoothingEnabler;
SmoothingEnabler.enableSmoothing(myDisplayObject);
Bitmap-Glättung
Flash Player 9 und Flex 2 wollen Ihnen wirklich helfen, dass Die statische Methode baut rekursiv eine Liste des Inhalts
Ihre Anwendung schneller läuft. Egal ob Sie eine Grafik ein- des Objekts auf und aktiviert das Glätten auf allen gefunde-
betten, sie zur Laufzeit laden oder die Abspielqualität auf nen 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 Methode updateDisplayList() , damit sie sich selbst zeichnen


Indem Sie die Drawing-API von ActionScript 3.0 einsetzen, kann. Indem Sie die Styles untersuchen, die auf Ihrer Klasse
können Sie programmatisch Grafiken auf dem Bildschirm gesetzt werden (die von den Styles übergeben werden, die
zeichnen. Wenn das von Ihnen beabsichtigte Look-and-Feel auf der Komponente gesetzt werden, der sie ein Theme gibt),
mit wenigen Strichen, Füllungen und Gradienten erreichbar können Sie anpassen, wie Ihr Skin gezeichnet wird.
ist, wenn Sie ein anpassbares Theme benötigen, wenn Sie Haben Sie Ihre Skin-Klasse erstellt, können Sie Skin-Styles mit
Themes auf Elemente mit sehr unterschiedlicher Dateigröße einer zusätzlichen Notation namens ClassReference() darauf
anwenden müssen oder wenn die Dateigröße die entschei- setzen, die auch in Inline-CSS eingefügt werden kann, indem
dende Rolle spielt, sollten Sie überlegen, ob Sie Ihre Skins mit ihr das At-Symbol (@) vorangestellt wird:
Code generieren.
Button {
Das eingebaute »halo«-Theme von Flex 2 ist vollständig pro- up-skin: ClassReference('com.partlyhuman.books.
grammatisch. Das bedeutet: flexshortcut.CustomButtonSkin');
• Sie können die Farbe und die Gradienten des Skins mit }
Styles anpassen.
Ein Theme erzeugen
• Das Erscheinungsbild fällt nicht auseinander, wenn Sie in
das Theme zoomen oder das Theme auf eine extrem große Es ist möglich, all Ihre geskinnten Klassen, Assets und Styles
oder eine extrem kleine Komponente anwenden. Vektor- zu einer SWC-Datei zu kompilieren und diese für mehrere
grafiken, die mit der Drawing-API erzeugt werden, werden SWFs zu verwenden oder sie als ein Theme zu verteilen. Eine
unabhängig von der Skalierung immer verlässlich ge- SWC-Datei ist ein Archiv, das kompilierten Code und Assets
rendert. enthält, gegen die vom Compiler gelinkt werden kann, ohne
dass ihr Inhalt neu kompiliert werden muss. Wenn Sie sich
• Die Dateigröße für das gesamte Theme ist sehr klein. Es entscheiden, eine SWC-Datei dynamisch zu linken, kann sie
sind keine Bitmap-Grafiken eingebettet, und kompilierter außerhalb der SWF-Datei vorliegen und auf Anforderung ge-
Code ist extrem kompakt. laden werden. Das ist eine sehr gute Taktik, wenn Sie eine An-
Um programmatisch einen Skin für einen Style zu erzeugen, wendung in mehrere SWFs aufspalten, weil ein geteiltes
erstellen Sie eine Klasse, die eine geeignete abstrakte Klasse Theme dann nur einmal heruntergeladen und nicht in alle
aus dem mx.skins -Paket erweitert, und implementieren die 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 <mx:Fade alphaFrom="0" duration="500"


dem Kommandozeilen-Argument –theme , um Theme-Dateien easingFunction="{Cubic.easeOut}"/>
zu erstellen. Die Flex 2-Dokumentation erklärt diesen Vorgang </mx:completeEffect>
ausführlich. </mx:Image>

Effekte Dieser Code nutzt einen Kindknoten, um ein Attribut zuzu-


weisen, damit wir darin ein Objekt einbetten können. Der Ef-
Ein paar gut platzierte reaktive Animationen können eine
fekt-Trigger ist hier completeEffect , und der Effekt ist ein Fade :
deutliche Wirkung auf den Eindruck haben, den ein Benutzer
Das Objekt wird eingeblendet, wenn das Laden abgeschlos-
von einem Stück Software bekommt. Animationen können
sen ist. Dass ein Attribut ein Effekt-Trigger ist, können Sie an-
dem Benutzer durch visuelle Reaktionen Feedback geben.
hand eines Icons im Autovervollständigungs-Pop-up von Flex
Glüchlicherweise gibt Flex 2 Entwicklern mit Effects eine
Builder 2 sehen, indem Sie im Effekte-Abschnitt der Flex 2-Do-
Wunderwaffe. Der Einsatz von Effekten und Effekt-Triggern
kumentation einer Komponente nachschlagen, oder an dem
kann Ihre Anwendung herausputzen, ohne Sie ins Schwitzen
Umstand, dass sein Name auf -Effect endet. Wie in diesem
zu bringen.
Fall spiegelt der Name eines Effekt-Triggers den Namen des
Effekte sind Klassen im Paket mx.effect , die Effect erweitern. korrespondierenden Events: Ist das Laden abgeschlossen,
Indem Sie die Eigenschaften einer Effect-Instanz setzen, kön- setzt die Komponente ein complete -Event ab und stößt das
nen Sie ändern, worauf der Effekt Auswirkungen hat, und die Abspielen von completeEffect an, wenn es einen gibt.
Parameter der Animation festlegen. Dann können Sie den Ef-
Effekte versuchen, Sie durch vernünftige Standardwerte zu
fekt so einrichten, dass er von bestimmten Triggern ausgelöst
unterstützen. Der Code oben gibt an, dass der anfängliche Al-
wird, indem Sie den Effekt einem Effekt-Trigger auf Ihrer Kom-
pha-Wert 0 (vollständig transparent) sein sollte, spart aber
ponente zuweisen.
den abschließenden Alpha-Wert ( alphaTo ) aus. In der Realität
Unten haben wir einen einfachen Effekt hinzugefügt, um die können Sie alphaFrom ebenfalls weglassen, weil der Effekt
Grafiken in unserem Flickr-Raster einzublenden zu lassen, standardmäßig ein Fade-in von 0 zu 1 verwendet.
wenn sie vollständig geladen sind:
Unten werden verschiedene Effekte auf verschiedene Trigger
<mx:Image id="img" width="75" height="75" auf dem gleichen Button angewandt:
source="{photoToImage(data)}">
<mx:Button styleName="skinnedButton" label="Effect">
<mx:completeEffect>
<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>
Abb. 15 Über den linken Button mit
<mx:Glow color="#ffa0a0" duration="500"
Rollover-Skin und Effekt streichen
easingFunction="{Cubic.easeIn}"
blurXFrom="20" blurXTo="20" Effekt-Attribute
blurYFrom="20" blurYTo="20" Die meisten Effekt-Attribute sind für den Effekt spezifisch,
alphaFrom="0.5" alphaTo="0"/> den sie repräsentieren, aber es gibt einige, die die Animation
</mx:rollOutEffect> im Allgemeinen steuern. Die nützlichsten sind:
<mx:addedEffect>
<mx:Resize heightFrom="0" widthFrom="0" duration="500"
duration
easingFunction="{Cubic.easeOut}"/>
In Millisekunden die Zeit, die es dauert, bis die Animation
</mx:addedEffect>
abgeschlossen ist.
</mx:Button> easingFunction
Eine Referenz auf eine Funktion, die steuert, wie die ani-
Der Button wird von einem Punkt ausgehend vergrößert,
mierten Eigenschaften über die Zeit interpoliert werden.
wenn er hinzugefügt wird, und leuchtet in Reaktion auf Ihre
Sie können die eingebauten Funktionen referenzieren, die
Maus. Aber das Leuchten erscheint nicht einfach, sondern
im Paket mx.effects.easing angeboten werden. Das sind die
wird allmählich ein- und ausgeblendet (siehe Abbildung 15).
Easing-Funktionen von Robert Penner, die in den meisten
Sie sollten Ihrem Boss nicht verraten, wie einfach das ist.
Tweening-Paketen für Flash und Flex verwendet werden.

startDelay
Die Verzögerung, bevor die Animation beginnt, in Millise-
kunden.

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Flex zum Glänzen bringen 74

repeatCount und repeatDelay Zusammengesetzte Animationen aufbauen


Wie oft der Effekt wiederholt werden soll und die Verzöge- Effekte schränken Sie nicht auf reine Eine-Eigenschaft-Anima-
rung zwischen den einzelnen Wiederholungen in Millise- tionen ein. Indem Sie verschiedene Effekte kombinieren, kön-
kunden. nen Sie beliebig komplexe Animationen erzeugen. Das Effekt-
system nutzt die Art deklarativer Animationen, die in der Syn-
target oder targets
chronized Multimedia Integration Language (SMIL) des W3C
Die Instanz oder ein Array der Instanzen, auf die sich der
standardisiert sind.
Effekt auswirken soll. Der Standardwert ist das Objekt, das
das Event ausgelöst hat. Es gibt nur zwei Klassen, die das Timing von Animationsgrup-
pen steuern, Parallel und Sequence , und diese sind leicht zu
Ein Wort zu Easing-Funktionen: Da Sie diese Eigenschaft nur verstehen. Kinder eines <mx:Parallel> -Tags beginnen alle zur
auf eine Funktionsreferenz setzen können, ist nicht unmittel- gleichen Zeit und laufen zur gleichen Zeit parallel ab. Kinder
bar klar, wie Sie die Eigenschaften von Tweening-Funktionen eines <mx:Sequence> -Tags werden nacheinander in vorgege-
anpassen, die zusätzliche Parameter erwarten. Die Lösung ist bener Reihenfolge abgespielt. Diese beiden Klassen erweitern
der Einsatz einer partiellen Funktion, einer Funktion, für die ebenfalls Effect . Der Effekt, den Sie einem Effekt-Trigger zu-
einige Eingaben bereits definiert sind. In einigen funktionalen weisen, kann also Parallel oder Sequence als Wurzelknoten ha-
Programmiersprachen wird das direkt in der Syntax unter- ben.
stützt, aber in ActionScript 3.0 können wir einfach eine Con-
tainer-Funktion konstruieren: Häufig verwendete Effekte

private const CUSTOM_BACK_S:Number = 100; Der Satz der zur Verfügung stehenden Effect-Klassen und die
private const backEaseOutCustom:Function = Möglichkeit, diese zu komplexeren Effekten zusammenzuset-
function(a:Number, b:Number, c:Number, d:Number):Number zen, bedeutet, dass Sie nur selten Ihre eigenen Effect-Subklas-
{ sen schreiben müssen.
return Back.easeOut(a, b, c, d, CUSTOM_BACK_S);
Filtereffekte
};
Fade ändert die Transparenz des Ziels. Blur und Glow wen-
den Ihre jeweiligen Filter auf ihre Ziele an und ändern die
<mx:Resize duration="1000"
Eigenschaften dieses Filters. Dissolve erzeugt eine Schicht
easingFunction="{backEaseOutCustom}"/>
ü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 75

Transformationseffekte Weitem nicht vollständige Liste von Ideen dazu, wo Sie Ihre
Resize , Rotate und Move ändern die Größe, Rotation und Po- Effekte anwenden können.
sition ihres Ziels. Der Rotate -Effekt kann das Zentrum einer
Focus-Feedback
Rotation angeben. Der Zoom ändert wie Resize die Größe
Nutzen Sie rollOutEffect und rollOverEffect auf beliebigen
seines Ziels, ermöglicht Ihnen aber, einen Mittelpunkt an-
Komponenten. Sie sollten in Betracht ziehen, die gleichen
zugeben.
Effekte für focusInEffect und focusOutEffect zu verwenden,
Maskeneffekte um Ihre Animationen auch bei der Navigation mit der Tas-
WipeLeft , WipeRight , WipeUp und WipeDown erzeugen rechte- tatur anzuwenden.
ckige Masken und verschieben sie, um ihr Ziel zu verber-
Größenänderungen glätten
gen oder zu offenbaren. All diese Effekte erweitert Mask­
Sie können einen Resize -Effekt gemeinsam mit dem resi-
Effect . Sie können eigene Subklassen bilden, um andere
zeEffect -Trigger verwenden, um sicherzustellen, dass keine
Maskenformen vorzugeben.
Größenänderungen eines Containers abrupt sind.
Soundeffekte
Abrakadabra! Mit Flair erscheinen und verschwinden
Der beschreibend benannte SoundEffect spielt einen
Nutzen Sie addedEffect / removedEffect für Kinder, die einer
Soundeffekt in Ihrem Effekt. Indem Sie diese mit Ihren visu-
Komponente hinzugefügt werden, oder andernfalls creation­
ellen Effekten in einem Sequence - oder Parallel -Effekt zu-
CompleteEffect , um die Komponente mit Pep ins Leben zu
sammensetzen, können Sie Ihrer Anwendung auch aurales
bringen oder aus dem Leben zu nehmen.
Feedback hinzufügen.
View-Übergänge
Häufig verwendete Effekt-Trigger Schalten Sie zwischen den Kindern eines ViewStack (wie
Das Flex 2-Framework veröffentlicht eine große Vielzahl nütz- TabNavigator ) um, indem Sie ihre visible -Eigenschaft an-/
licher Trigger für Ihre Effekte. Obwohl Sie sie vielleicht nicht ausschalten. Änderungen an der Eigenschaft visible kön-
alle abonnieren, senden die eingebauten Komponenten von nen einen hideEffect und einen showEffect anstoßen. Sie
Flex 2 alle möglichen Arten von Events aus, während es sich können diese also verwenden, um Panels ein- und auszu-
für Sie darum kümmert, ein UI aufzubauen und zu verwalten. blenden und Überblendung zwischen Tabs zu gestalten.
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 blurXFrom="{GLOW_BLUR_MIN}"


Effektinstanzen direkt in die Tags zu schreiben, die sie ansto- blurXTo="{GLOW_BLUR_MAX}"
ßen, ist Demonstrationszwecken in Ordnung, aber kein gutes blurYFrom="{GLOW_BLUR_MIN}"
Verfahren, um wiederverwendbaren, lesbaren Code zu schaf- blurYTo="{GLOW_BLUR_MAX}"
fen. Es gibt mehrere Dinge, die Sie tun können, um Ihren Ef- alphaFrom="{GLOW_ALPHA_MIN}"
fektcode kompakt zu halten. alphaTo="{GLOW_ALPHA_MAX}"/>
</mx:rollOverEffect>
Erst können Sie die literalen Zahlen aus den Effekt-Tags ent-
<mx:rollOutEffect>
fernen und durch Konstanten ersetzen, die Sie unter Verwen-
<mx:Glow color="{GLOW_COLOR}"
dung geschweifter Klammern binden. Viele dieser Zahlen sind
duration="{GLOW_DURATION}"
verknüpft. Beispielsweise verwenden Effekte, die symmetrisch
easingFunction="{GLOW_EASE}"
ein- und ausgeschaltet werden, die gleichen Werte für die
blurXFrom="{GLOW_BLUR_MAX}"
Dauer und wechseln die Eigenschaften from- und to- . Indem
blurXTo="{GLOW_BLUR_MIN}"
Sie sie in Konstanten in einem Script -Block verschieben, kön-
blurYFrom="{GLOW_BLUR_MAX}"
nen Sie diese an einem Platz so anpassen, wie Sie es möchten:
blurYTo="{GLOW_BLUR_MIN}"
private const GLOW_BLUR_MAX:Number = 20; alphaFrom="{GLOW_ALPHA_MAX}"
private const GLOW_BLUR_MIN:Number = 0; alphaTo="{GLOW_ALPHA_MIN}"/>
private const GLOW_ALPHA_MIN:Number = 0; </mx:rollOutEffect>
private const GLOW_ALPHA_MAX:Number = 0.5; </mx:Button>
private const GLOW_DURATION:Number = 500;
private const GLOW_COLOR:uint = 0xffa0a0; Wenn Sie den gleichen Effekt wie anzunehmen für mehrere
private const GLOW_EASE:Function = mx.effects.easing.Cubic. Instanzen wiederverwenden, können Sie Ihren Effektinstan-
easeOut; zen eine id geben und Bindung verwenden, um auf den ge-
samten Effekt zu verweisen:
<mx:Button> <mx:Glow id="buttonGlowIn" … />
<mx:rollOverEffect> <mx:Button rollOverEffect="{buttonGlowIn}" … />
<mx:Glow color="{GLOW_COLOR}"
duration="{GLOW_DURATION}" Der nächste Schritt, den Sie vornehmen könnten, ist, all Ihre
easingFunction="{GLOW_EASE}" 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 weil Effect-Konstruktoren einen Parameter erwarten. Sie
einen Effekt daraus benötigen. Sie könnten beispielsweise et- könnten eigene Effekte wie ButtonGlowIn.as schreiben wie
was wie CommonEffects.mxml erzeugen: hier:
<mx:Object xmlns:mx="http://www.adobe.com/2006/mxml"> package com.partlyhuman.books.flexshortcut.effects
<mx:Glow id="buttonGlowIn" … /> {
<mx:Glow id="buttonGlowOut" … /> import mx.effects.Glow;
</mx:Object> import mx.effects.easing.Cubic;

und folgendermaßen verwenden: public class ButtonGlowIn extends Glow


<fx:CommonEffects id="common"/> {
<mx:Button rollOverEffect="{common.buttonGlowIn}" public function ButtonGlowIn(target:Object = null)
rollOutEffect="{common.buttonGlowOut}"/> {
super(target);
Oder Sie könnten eine »Mikroklasse« für einen Button des er- duration = 500;
forderlichen Stils erstellen: Erzeugen Sie eine MXML-Klasse, color = 0xffa0a0;
die Button erweitert und alle Effekte hat, die Sie darauf setzen //…
wollen. Dann nutzen Sie das Tag für Ihre Klasse dort, wo Sie alphaTo = 0.5;
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
Dann wenden Sie sie in Ihren CSS-Dateien an:
Styles implementiert! Sie können in ActionScript auf einer
Komponente setStyle("effectTrigger", EffectClass) aufru- Button {
fen, um Effekte zu setzen. Um Effekte innerhalb eines Style- up-skin: Embed("/assets/button-up.png");
sheets zu verwenden, nutzen Sie die ClassReference() -Nota- down-skin: Embed("/assets/button-down.png");
tion, um entweder eine eingebaute Effect-Klasse oder eine over-skin: Embed("/assets/button-over.png");
von Ihnen erzeugte Subklasse zu lokalisieren. Beachten Sie, roll-over-effect: ClassReference('com.partlyhuman.books.
dass Sie in MXML keine Effect-Subklasse erzeugen können, 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. dert werden, sondern diese als Teil einer übergeordneten
flexshortcut.effects.ButtonGlowOut'); Timeline auslösen. Um die Änderungen zu terminieren, gibt
} es besondere Effekte, die Sie in einen zusammengesetzten Se-
quence -Effekt einfügen können, einen für jede mögliche State-
Das ermöglicht Ihnen, die Macht von Styles und Effekten zu Aktion: Ein AddChildAction -Effekt stößt ein AddChild im ent-
kombinieren, um Styles zu erzeugen, die sich nicht nur mit sprechenden State an, SetStyleAction ein SetStyle und so
der Erscheinung, sondern auch mit Bewegung und sogar weiter. Im Beispiel ist SetPropertyAction überflüssig, weil alle
Sound befassen. Aktionen parallel sind – SetProperty wird immer am Anfang
ausgeführt. Wenn es mehrere Überschreibungen des gleichen
Transitions
Typs gibt, können Sie die erwünschte angeben, indem Sie an
Transitions (Übergänge) wenden die Animationsmacht von das gleiche target binden, wie der folgende Code und Abbil-
Effekten auf die Rekonfigurationsmacht von States an. Eine dung 16 zeigen:
Transition ermöglicht Ihnen, die Eigenschaften zu animieren,
<mx:transitions>
die ein State ändert und definiert, wie ein State-Übergang mit
<mx:Transition toState="inactive">
der Zeit ablaufen kann.
<mx:Parallel>
Eine Transition ist eine Objekt, das angibt, welche States es <mx:SetPropertyAction/>
auslösen kann und welcher Effekt abgespielt wird. Geben Sie <mx:Blur target="{img}" blurXTo="{BLUR_AMT}"
fromState , toState oder beides für die Transition an, um Re- blurYTo="{BLUR_AMT}" duration="{DURATION}"/>
geln für ihre Auslösung zu erstellen. Wir haben die Flickr-Ras- <mx:Fade target="{caption}" alphaFrom="0"
ter-Anwendung mit einigen Styles und Transitions aktuali- alphaTo="{CAPTION_ALPHA}" duration="{DURATION}"/>
siert. Dabei haben wir eine Transition erzeugt, die vom State </mx:Parallel>
active , und eine, die vom State inactive angestoßen wird, in- </mx:Transition>
dem die toState -Eigenschaften der Transitions gesetzt wer- <mx:Transition toState="active">
den. <mx:Parallel>
Wenn Sie Effekte als Transitions verwenden, können Sie die <mx:SetPropertyAction/>
für eine State-Änderung erforderlichen Operationen als Teil <mx:Fade target="{caption}" alphaTo="0"
Ihres Effekt ordnen. Anders gesagt: Transitions können nicht duration="{DURATION}"/>
nur die Eigenschaften animieren, die von einem State geän- <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}"/> einen Fade-Effekt erzeugen, indem Sie die Eigenschaft filter


</mx:Parallel> auf "add" setzen. Der Fade-Effekt wird dann auf alle hinzuge-
</mx:Transition> fügten Komponenten angewandt. Mögliche Filter sind hide ,
</mx:transitions> 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 Low-
Level-Fähigkeiten nutzen.
Auf jedem DisplayObjekt ist ein filters-Array verfügbar – da-
mit also auf jeder Flex-Komponente –, das eine beliebige An-
zahl von Filtern aufnehmen kann. Flash Player 9 unterstützt
eine Vielzahl eingebauter Filter, die nützlich sein können, ein-
schließlich Weichzeichnern, Leuchten, Schlagschatten, Kanten-
abflachung, Faltungsmatrizen, Farbtransformationen und Dis-
placement-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 zei-
Abb. 16. Zustandsübergänge lassen die Überschrift verblassen und gen.
die Grafik verschwimmen, während sich Ihre Maus bewegt. Jede Komponente hat als DisplayObject auch eine blendMode -
Eigenschaft, die, wenn sie gesetzt wird, die Art ändert, wie es
Bei komplexeren Transitions kann die filter -Eigenschaft des sich auf die Grafiken unter ihm auswirkt. Flash Player 9 und da-
Effekts hilfreich sein. Statt konkrete Referenzen als Ziele anzu- mit Flex 2 bieten eine Menge Blend-Modi, die Ihnen die Mög-
geben, kann die filter -Eigenschaft verwendet werden, um lichkeit verschaffen, Effekte aus Photoshop oder einem ähn-
Ziele auf Grundlage einer Regel zu definieren. Wenn ein State lichen Programm zur Laufzeit zu reproduzieren.
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 Klassennamen dem preloader -Attribut Ihrer Application zu.


Wenn Sie nun Ihre Anwendung bis in die letzte Ecke geskinnt Dann ist das Skinning abgeschlossen:
haben, wenn Sie Pakete mit Stylesheets und Effekten haben, <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
wenn Sie aus Ihrer Anwendung alle Gradienten, jedes Auftau- preloader="com.partlyhuman.books.flexshortcut.CustomPreloader">
chen 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).
Flex erweitern
Die Programmierung in Flex 2 ist ganz anders als die Flash-
Programmierung. Als Flex-Entwickler haben Sie die Aufgabe
herauszufinden, wie Sie das bestehende, umfassende Frame-
work am besten einsetzen, um Ihr Ziel zu erreichen. Flash-Ent-
wickler verbringen mehr Zeit damit, Funktionalitäten von
Grund auf aufzubauen. Das gibt ihnen mehr Freiheiten, aber
weniger Veränderungsspielraum und eine geringere Ge-
schwindigkeit.
Abb. 17. Ihre sorgfältig angepasste Anwendung
lüftet das Inkognito: »Ich bin Flex!« Außerdem liefert Flex 2 seine besten Leistungen bei Anwen-
dungen. Gebräuchliche Schnittstellen, die Sie von Desktop-
Nachdem Sie sich diese ganze Mühe gemacht haben, werden Anwendungen, Formularen und HTML-Seiten kennen, werden
Sie erfreut erfahren, dass Sie auch einen eigenen Loader in Flex 2 direkt und häufig in identischen Strukturen unter-
schreiben können. Erzeugen Sie eine Subklasse der Klasse stützt. Wie Sie gesehen haben, kann es trivial sein, eine An-
DownloadProgressBar , die ihre eigenen Fortschritts-Events wendung zu erzeugen, die aus gebräuchlichen UI-Komponen-
abonniert, um ihre Anzeige zu aktualisieren. Weil sie ange- ten besteht.
zeigt wird, bevor das Flex-Framework vollständig initialisiert Diese Stärke birgt allerdings keine entsprechende Schwäche.
wurde, ist die DownloadProgressBar ein Sprite und keine UI- Anders als HTML kommt Ihnen Flex offen entgegen. Jede
Component. In ihr können Sie deswegen keine Flex-Kompo- Klasse in der Bibliothek steht als ActionScript-Quellcode zur
nenten verwenden. Nachdem Sie eine eigene DownloadPro- Verfügung, und Hunderte von Klassen sind nicht finale Klas-
gressBar -Subklasse haben, weisen Sie den entsprechenden
sen, die nur darauf warten, erweitert und Ihren Bedürfnissen

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Flex zum Glänzen bringen 81

entsprechend angepasst zu werden! Das Framework ist kon- eine besondere Art von Panel . Wenn Sie die Komponentenar-
sistent, damit Sie es lernen und Ihre eigenen Komponenten, chitektur verstehen, können Sie allerdings Komponenten auf
Effekte, Skins, Styles oder andere Dinge schreiben können. Weisen erstellen, die mit der Zusammensetzung anderer Kom-
Flex 2 kommt mit einem wunderbaren Satz von Funkionali- ponenten nicht möglich sind.
täten, und wenn etwas nicht da ist, können Sie es selbst auf-
Große Anwendungen strukturieren
bauen.
Die bisher präsentierten Beispiele haben eine Menge gezeigt,
Vollständige Flexibilität aber die erforderliche Kürze der Darstellung hat eine Diskus-
Die beste Sache am Flex-Framework ist, dass Sie es an jedem sion über die Probleme bei der Erstellung großer Anwendun­
beliebigen Punkt erweitern können. Sie können konkrete, gen verhindert. Flex 2 und insbesondere MXML sind sehr mäch­
vollständig verwendbare Klassen wie CheckBox erweitern. Sie tige Werkzeuge. Es gibt viele Wege, wie Sie sich selbst damit
können abstrakte Basisklassen wie Container erweitern. Und verletzen können. Auch wenn es zu weit ginge, hier über
Sie können reines AS3 schreiben, das nur die Flash Player 9- ­A nwendungsarchitektur im Allgemeinen zu referieren, gibt
API nutzt. Sie können Klassen in MXML oder ActionScript 3.0 es Techniken, die für Flex 2-Anwendungen spezifisch und eine
schreiben. Erörterung wert sind.

So erhalten Flex 2-Entwickler das Beste aus beiden Welten: Sie Entwerfen für die Separation
können eigenen Code schreiben, wenn das erforderlich ist, Mit seiner großen Sammlung von Tags ermöglicht Ihnen
und können nützliche Klassen verwenden, um die Teile zu be- MXML – und scheint dazu auch zu ermutigen – eine Kombina-
wältigen, für die keine Modifikationen erforderlich sind. tion aus Daten, Struktur, Style und Verhalten. Sie könnten Ihre
Alle Klassen, die wir in den Beispielen dieses TecFeeds ge- Anwendung problemlos als eine MXML-Datei strukturieren,
schrieben haben, haben bereits Komponenten erweitert. Den- mit einem Durcheinander an XML-, Script-, Style-, Transition-,
ken Sie daran, dass eine MXML-Komponente eigentlich eine Effect- und Komponenten-Tags. Um Ihren Code modular zu
ActionScript 3.0-Klasse ist, die die Klasse erweitert, die als ihr halten, Abhängigkeiten zu minimieren, mehr Codewiederver-
Wurzel-Tag angegeben ist. Die Beispiele definieren Subklas- wendung zu erlauben, simultane Entwicklung zu ermöglichen
sen von Flex-Klassen für sehr bestimmte Zwecke. Beispiels- und die Veränderung zu vereinfachen, können Sie diese Ver-
weise ist die Flickr-Vorschau eine besondere Art von Anwen- antwortlichkeiten trennen. Nutzen Sie externe Stylesheets,
dung, Application und das Panel zum Verfassen von E-Mails 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, zeugt und ihre relevanten Datenfelder als bindbar deklariert,
funktionelle und wiederholbare Einheiten aufbrechen und für dass man in MXML View-Klassen erzeugt, die direkt an ihre
sie individuelle Klassen erzeugen, anstatt die gesamte Schnitt­ Modellobjekte binden, und dass man ActionScript-Klassen er-
stelle in eine tiefen MXML-Datei zu schreiben. Im E-Mail-Bei- zeugt, um die Anwendung zu steuern. Weil die Vorteile von
spiel haben wir separate Klassen für die Hauptanwendung, MXML in der kompakten Beschreibung von visuellen Kompo-
den Posteingang und das Lesefenster erzeugt. Auch wenn alle nenten besteht, funktionieren View-Klassen am besten als
direkt geschachtelt und in eine Datei geschrieben werden MXML-Dateien.
könnten, ist die Trennung der Verantwortlichkeiten zwischen Es ist nicht notwendig, dass man Controller und View trennt,
ihnen klar, und Veränderungen werden ermöglicht, wenn sie wenn sie direkt diesen einen View und nichts anderes steu-
auf diese Weise erstellt werden. ern. Beispielsweise funktioniert die Behandlung von Maus-
Vergessen Sie nicht die Option, reine ActionScript-Klassen zu Events als Teil der View-Klasse besser als bei einer externen
schreiben. Sammeln Sie allgemeine Funktionalitäten in Hilfs- Klasse, insbesondere bei dem Event-Modell von ActionScript
klassen. Erzeugen Sie Klassen für nicht sichtbare Objekte wie 3.0. Operationen, die Auswirkungen auf die ganze Anwen-
POPConnection . dung haben, gehören aber immer noch in Controller-Klassen.
Beispielsweise würde der Controller einer Anwendung ein
MVC modifizieren
Modell und Views erzeugen, die Events des Views abonnieren
Das Model-View-Controller-Muster (MVC) wurde in unzähli- und auf Basis der Views systemweite Operationen durchfüh-
gen Anwendungen und als Kernprinzip vieler Frameworks ren. Ein Klick auf einen E-Mail senden-Button in einem View
vorteilhaft eingesetzt. Kurz gesagt, ist es eine Struktur, die könnte einen Click-Handler innerhalb des Views anstoßen, der
drei Komponenten isoliert: eine reine Datenrepräsentation View sendet dann allgemein ein Event aus, das der Controller
des Gegenstands, einen View, der dem Benutzer den Zustand interpretiert, um dann eine Aktion auszuführen: Er sendet die
dieser Daten anzeigt, und einen Controller, der Benutzerdaten E-Mail.
interpretiert und entweder View oder Modell manipulieren
kann. MVC ermutigt uns, Klassen für diese drei Kategorien Die Wurzel einer Flex 2-Anwendung muss eine Subklasse von
Application sein. Diese kann als Haupt-Controller der Anwen-
aufzubauen, und hilft, die Verantwortlichkeiten Verhalten,
Struktur und Style zu trennen. dung verwendet werden, indem die Modelle, Views und un-
terstützenden Controller instantiiert werden, wenn ihr eige-
Flex 2 funktioniert sehr gut mit einem MVC-Modell. Es scheint nes initialize -Event abgesetzt wird.
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 vom Setzen eines Styles bis zum Aufruf einer Methode. Sehen
Als Flex 2-Entwickler haben Sie (fast) immer die Wahl, eine Sie sich Folgendes an:
Klasse in ActionScript 3.0 oder MXML zu schreiben. Alles, was <mx:Button><mx:rollOverEffect>
Sie in MXML tun können, geht ebenfalls in ActionScript, auch <mx:Fade effectStart="trace('Von einem Effekt angestoßener
wenn das manchmal nicht sehr erstrebenswert ist. Für Klas- Code')"/>
sen, die folgende Kriterien erfüllen, ist es viel einfacher, MXML </mx:rollOverEffect></mx:Button>
zu verwenden:
• starke Verwendung von Bindungen
Bei Aktionen, die Seiteneffekte hervorbringen, sollten Sie die
Seiteneffekte in Methoden speichern und die Aktionen diese
• Verwendung von Transitions, Effekten oder States Methoden aufrufen lassen, damit Sie die Verhalten, die Ihre
• viele sichtbare Komponenten Klasse unterstützt, zentralisieren und explizit machen können.
In anderen Worten: Erzeugen Sie eine private API für Klassen,
Zum Schreiben von Klassen folgender Art ist ActionScript ge-
die intern angestoßene Aktionen haben.
eigneter:
Sie müssen auch eine Entscheidung über die öffentliche API
• ein Konstruktor mit einem oder mehreren Parametern ist
Ihrer Klasse treffen. Sie könnten es Clients Ihrer Klasse erlau-
erforderlich
ben, Aktionen durch den Aufruf von Methoden ( foo.doBar-
• keine visuelle Repräsentation Mode() ), das Setzen von Eigenschaften ( foo.mode = "bar" ), das
• Kindkomponenten sollten ncht als public entblößt werden Ändern eines States ( foo.currentState = "barState" ) oder so-
gar etwas noch Subtileres anzustoßen. Auch wenn es die ord-
Sie können in MXML auch Interfaces verwenden, indem Sie im
nungsgemäße Lösung zu sein scheint, äußeren Code darauf
Wurzel-Tag Ihrer Klasse ein implements -Attribut angeben:
zu beschränken, Methoden auf Ihren Klassen aufzurufen,
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" macht es Flex 2 in den meisten Fällen bequemer, implizite Set-
implements="ISomeInterface" … > ter statt Methoden zu verwenden. Wenn Sie die API Ihrer Klasse
um implizite Akzessoren und damit Eigenschaften entwerfen,
Implizite Akzessoren in einer API werden die folgenden Dinge erleichtert:
Flex 2 ist mit Seiteneffekten sehr flexibel. Alle Arten von Ope-
• das Binden des Ergebnisses einer Funktion, da man an ei-
rationen können so gestaltet werden, dass sie Effekte haben –
nen Getter binden kann,
um Code auszuführen oder irgendeine Aktion durchzuführen –,

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- ken, obwohl ihre Ergebnisse erst gezeigt werden, wenn die
zeugt wurden, indem ihre Eigenschaften gesetzt/ihre Set- Komponente neu gezeichnet wird.
ter als Attribute des MXML-Tags aufgerufen werden, Flex löst dieses Problem, indem es erlaubt, dass bestimmte
• das Durchführen von Aktionen als Teil eines States oder Ef- Attribute immer wieder gesetzt werden können, aber mit der
fekts, indem die Aktion SetProperty verwendet wird. Berechnung der Auswirkungen dieser Attribute wartet, bis es
die Komponente neu zeichnen muss. Es hält nach, was aktua-
Eigene UI-Komponenten erstellen lisiert werden muss, indem es diese Attribute invalidiert und,
Um nahtlos funktionierende UI-Komponenten zu erstellen, ist unmittelbar bevor die Komponente gerendert wird, wieder
es entscheidend, dass Sie verstehen, wie das Flex-Framework validiert, indem es ihre Effekte berechnet.
Komponenten implementiert. Funktionalitäten, die allen Kom- UIComponents können ihre Eigenschaften, Größe und Anzei-
ponenten im Flex-Framework gemeinsam sind, befinden sich geliste invalidieren. Die Eigenschaften, deren Effekte hinaus-
in der Basisklasse UIComponent , die alle Flex-Komponenten er- geschoben werden, werden von einer besonderen Kompo-
weitern. nente definiert, und Sie können die Entwertungssequenz nut-
zen, um die teuren Operationen Ihrer eigenen Komponenten
Invalidierung
hinauszuzögern, indem Sie die Validität Ihrer eigenen Eigen-
UIComponents sind träge (im wünschenswerten, computer- schaften nachhalten.
wissenschaftlichen Sinn): Sie schieben Arbeiten hinaus, wenn
Invalidierung und Validierung werden durch Methodenpaare
das möglich ist. Es gibt keine Grenze dafür, wie häufig Code
auf UIComponent implementiert.
die Eigenschaften einer Komponente ändern kann. Kompo-
nenten werden aber nur mit einer maximalen Rate neu ge- invalidateProperties() commitProperties()
zeichnet, die von Ihrer Anwendung definiert wird. Wenn Ihre
invalidateSize() measure()
Anwendung mit 30 Frames pro Sekunde läuft, kann eine Kom-
ponente in einer Sekunde maximal 30-Mal neu gezeichnet invalidateDisplayList() updateDisplayList()
werden, während Sie problemlos eine Schleife entwerfen layoutChrome()
könnten, die eine Eigenschaft einer Komponente 1000-Mal so
schnell setzt, wie das ausgeführt werden könnte. Das Ergebnis
Wenn auf Ihrer benutzerdefinierten Komponente eine Eigen-
dieser Zuweisung könnte aufwendige Operationen wie die
schaft gesetzt ist, die eins dieser Attribute entwertet, rufen
Berechnung des Layouts der Kinder der Komponente bewir-
Sie die Invalidierungsmethode auf. Natürlich enthält UICom-

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Flex erweitern 85

ponent bereits die richtigen Invalidierungen für eingebaute beiten, in der eine UIComponent das atomare Element ist. In
Eigenschaften: Wird width gesetzt, wird invalidateSize() be- Wirklichkeit enthalten Komponenten Hintergründe, Rahmen
reits aufgerufen. und die Shapes und Textfelder, aus denen sie bestehen. Flex
Sie können die Validierungsmethoden überschreiben, um ei- lässt Sie die Kreise und Textfelder vergessen und stattdessen
gene Verhalten anzubieten. Beispielsweise können Sie einen an Radiobuttons denken.
»bleed«-Effekt erreichen, indem Sie die Größe Ihrer Kompo- Diese Abstraktion bedeutet auch, dass addChild() in einer
nente in measure() bewusst falsch darstellen. Sie können die Flex-Komponente eine Komponente erwartet. Sie können ei-
Verarbeitung der benutzerdefinierten Eigenschaften, die Sie ner Komponente mit addChild() keine einfachen DisplayOb-
einer Komponente hinzugefügt haben, verzögern, indem Sie jects wie Bitmaps, TextFields oder Sprites hinzufügen. Wenn
eigene Instanzvariablen ergänzen und ihre Validität nachhal- Sie eigene Komponenten mit Verhalten aufbauen wollen, das
ten und commitProperties() überschreiben, um die Ergebnisse unter Flex nicht normal ist, und Sie mehr Steuerungsmöglich-
invalider Eigenschaften zu verarbeiten. Sie können Kindkom- keiten haben wollen, sollten Sie eventuell zu einfachen Dis-
ponenten, die Sie manuell verwalten wollen, bewegen, hinzu- playObjects zurückgehen.
fügen und entfernen, indem Sie updateDisplayList() über- Sie können diese Abstraktion umgehen, indem Sie über die
schreiben. Wenn Sie die Validierungsmethode überschreiben, rawChildren -Eigenschaft einer Container-Klasse gehen. Dieses
sollten Sie darauf achten, dass Sie den Aufruf der überschrie- Objekt nutzt die gleichen Methoden für den Zugriff auf Kin-
benen Methode ihrer Superklasse einschließen, damit die der, enthält aber alle Kinder des Eigentümers, der eine Kom-
Komponente, die Sie erweitern, ordentlich funktioniert. ponente oder etwas anderes sein kann, zum Beispiel:
Sie sollten nie eine der Invalidierungsmethoden überschrei- var vbox:VBox = new VBox();
ben müssen, da diese nur ein invalid-Flag setzen. Sie können var sprite:Sprite = new Sprite();
sie aber manuell aufrufen. //Im Sprite ein paar Grafiken zeichnen.
vbox.addChild(sprite); //NICHT OK, Sprite ist keine
Kinder
//UIComponent
Flex 2-Komponenten teilen eine nützliche Notlüge – eine vbox.rawChildren.addChild(sprite); //OK!
Abstraktion – über die Kinder, die sie enthalten. Sie über-
schreiben alle Methoden zur Manipulation von Kindern wie Kinder, die Sie als rohe Kinder hinzufügen, werden vom Flex-
addChild() und getChildAt() , damit sie sich nur mit Kompo- Framework nicht wie andere Komponenten manipuliert. Sie
nenten befassen müssen. Sie lassen Sie in einer Flex-Welt ar- 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 Methode wird aufgerufen, wenn die Komponente einer El-
werden. Sie können rohe Kinder in einer Methode, die für das ternkomponente hinzugefügt wird. Es kann also möglich sein,
Neuzeichnen verantwortlich ist wie updateDisplayList() , aller- dass sie auf einer Instanz einer Komponente mehrfach aufge-
dings manuell manipulieren. rufen wird, wenn dieser neue Eltern gegeben werden. In die-
Alternativ kann die Image -Komponente verwendet werden, sem Fall können Sie einen Schalter verwenden oder die vor-
um die Kernanzeigetypen anzuzeigen und mit einem UICom- handenen Kinder prüfen, um zu verhindern, das die Kompo-
ponent-Wrapper zu umgeben, der ihnen die Fähigkeiten einer nente doppelt oder öfter konstruiert wird.
gewöhnlichen Komponente gibt: Styles, Effekte, States setzen,
updateDisplayList()
sie in ein Layout einschließen usw.
Die Methode updateDisplayList() wird aufgerufen, wenn die
//Ein Sprite erzeugen und zeichnen.
Anzeigeliste invalidiert wurde. Das tritt automatisch ein, wenn
var image:Image = new Image();
sich die Größe ändert, die der Komponente zur Verfügung
addChild(image);
steht, oder wenn sich das Layout des Eltern-Containers der
image.source = sprite;
Komponente ändert. Nutzen Sie updateDisplayList() , um die
Komponente auszurichten und zu zeichnen. Bereiten Sie die
Wichtige UIComponent-Methoden
Komponente in dieser Methode auf die neue Größe vor, in-
Sie können einer Komponente eigene Verhalten hinzufügen, dem Sie die Größe der Kinder anpassen, diese ausrichten und
indem Sie eine oder mehrere dieser Methoden überschreiben. größenabhängige Elemente neuzeichnen.
In den meisten Fällen sollten Sie daran denken, vor Ihrem ei-
genen Code die Superklassenimplementierung der Methode commitProperties()
aufzurufen. commitProperties() wird aufgerufen, um alle Änderungen zu
aktualisieren und zu validieren, die durch invalidateProper-
createChildren()
ties() hinausgeschoben wurden. Sie können diese Methode
In MXML-Komponenten würden die Tags, die die Komponente einsetzen, um Ihre eigenen Eigenschaften für eine hinausge-
beschreiben, in der Methode createChildren() in eine tatsäch- schobene Ausführung zu ergänzen. Wenn Ihre Komponente
liche Kindkomponente umgewandelt. Sie können diese Me- zwischen so unterschiedlichen Dingen wie Äpfeln und Birnen
thode überschreiben, um zusätzliche Kinder hinzuzufügen umschalten muss, möchten Sie diesen Übergang vielleicht
oder der Liste der rohen Kinder Kinder hinzuzufügen. Diese hinausschieben:

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Flex erweitern 87

private var isFruitInvalid:Boolean = false; measure()


private var _fruit:String; measure() wird aufgerufen, wenn der Wert der Komponente
public function set fruit(newFruit:String):void nicht explizit gesetzt wird und es dem Container überlassen
{ bleibt, die Größe zu bestimmen, in der der Container erschei-
if (_fruit == newFruit) return; nen soll. Eine Implementierung dieser Methode sollte
_fruit = newFruit; measuredWidth und measuredHeight des Objekts setzen und
isFruitInvalid = true; wahrscheinlich auch die entsprechenden measuredMinWidth
invalidateProperties(); und – Height sowie measuredMaxWidth und – Height . Diese
} Gruppe von Eigenschaften repräsentiert die gewünschte
override protected function commitProperties():void Größe der Komponente und die minimale und maximale ak-
{ zeptable Größe. Der Container der Komponente nutzt diese
super.commitProperties(); Informationen, um die endgültige Größe der Komponente
if (isFruitInvalid) festzulegen. Das Setzen dieser Eigenschaften garantiert die
{ Größe der Komponente nicht. Werden width und height expli-
//Hier die nötige Arbeit für das Tauschen zit gesetzt, garantiert das jedoch die Größe und umgeht alle
//von Äpfeln und Birnen machen. Anforderungen von measure() .
isFruitInvalid = false;
} Die Lebensdauer von Komponenten
} Wenn eine Komponente erzeugt wird, führt Flex eine Reihe
von Schritten aus, bevor die Komponente bereit ist, auf dem
styleChanged() Bildschirm zu erscheinen. In jeder Phase der Initialisierung ei-
Wenn Sie benutzerdefinierte Styles erzeugt haben oder einen ner Komponente wird ein FlexEvent abgesetzt, damit Sie Code
Style manuell implementieren müssen oder zusätzlichen bis zum erforderlichen Moment hinausschieben können,
Code ausführen müssen, wenn Styles geändert werden, kön- wenn der Code von visuellen Aspekten der Komponente ab-
nen Sie styleChanged() überschreiben, um das zu ermögli- hängig ist.
chen. Die Methode hat ein Argument, den Namen des Styles,
Nach der Instantiierung einer Komponente mit new können
der gesetzt wird. Um den Wert für diesen Style abzurufen, ver-
Sie auf der neuen Instanz Eigenschaften setzen und Metho-
wenden Sie getStyle() , das den neuen Wert zurückliefert.
den aufrufen. Sind diese aber von visuellen Eigenschaften

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Flex erweitern 88

oder Kindern der Komponenten abhängig, könnten Sie Lauf- • Das updateComplete -Event wird abgesetzt. Dieses Event wird
zeitfehler erhalten. jedes Mal abgesetzt, wenn die Position, die Größe oder das
Wenn Sie die Komponente mit addChild() einer Anzeigeliste Layout der Komponente geändert wird.
hinzufügen, erfolgt der Rest der Instantiierung.
Benutzerdefinierte Styles
• Die parent -Eigenschaft der Komponente wird gesetzt.
Flex ermöglicht Ihnen, der vorhandenen Menge von Styles
• Auf der Komponente werden die Styles berechnet. Ihre eigenen Styles hinzuzufügen. Um diese zu implementie-
• Das preinitialize -Event wird abgesetzt. Die Komponente ren, müssen Sie ein Style -Metadaten-Tag erzeugen und den
wurde immer noch nicht gemessen, noch wurden ihre Kin- Code schreiben, der erforderlich ist, um Ihren Style bei der
der erzeugt. ­I nitialisierung der Komponente und bei der Änderung des
Werts des Styles wiederzugeben, indem Sie styleChanged()
• createChildren() wird auf der Komponente aufgerufen. überschreiben.
• Alle Invalidierungsmethoden werden aufgerufen. Die Syntax eines Style -Metadaten-Tags ist:
• Das initialize -Event wird abgesetzt. Die Kinder der Kom- [Style(name="customBorderColor", type="uint",
ponente wurden noch nicht initialisiert, und der Kompo- format="Color")]
nente wurde bisher weder Größe noch Layout gegeben,
noch wurden hinausgeschobene Eigenschaften validiert. Sie können nur bestimmte String-Werte erlauben, indem Sie
• Flex wartet darauf, dass das nächste render -Event abgesetzt die Eigenschaft enumeration setzen:
wird. [Style(name="customBorderType", type="String",
• Alle Validierungsmethoden werden aufgerufen: commitPro- enumeration="squiggly,wiggly,jiggly")]
perties() , measure() , layoutChrome() und updateDisplay-
Das Metadaten-Tag sollte in jede Klasse platziert werden, auf
List() in dieser Reihenfolge. Das wird beim nächsten
die Sie den Style anwenden. Aber wenn Sie die inherit -Eigen-
render -Event wiederholt, wenn eine der Validierungsmetho-
schaft des Styles auf yes setzen, wird er automatisch auf Sub-
den eine Eigenschaft wieder invalidiert. klassen der Klasse angewendet, in die er eingeschlossen ist.
• Die Komponente wird auf sichtbar gesetzt, und das crea­ Das Tag sollte entweder in ActionScript vor der Klassendefini-
tionComplete -Event wird abgesetzt. tion 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 Validierer
mit setStyle() , inline oder in externem CSS gesetzt werden. Das Paket mx.validators enthält Klassen, die Werte unmittel-
Flex Builder 2 schließt benutzerdefinierte Styles sogar in die bar validieren und ein grafisches Feedback liefern können. Sie
Autovervollständigung seines CSS-Modus ein. können prüfen, ob Eingaben gültige E-Mail-Adressen, Kredit-
kartennummern, Postleitzahlen usw. sind. Sie können auch
leicht einen regulären Ausdruck einbinden, um beliebige For-
Weitere Features mate zu validieren.
Die vorangehenden Abschnitte dieses TecFeeds behandeln
die Kernthemen der Flex 2-Entwicklung und streifen die Flex- Formatierer
Bibliothek mit ihren über 600 Klassen nur. Ich bin mir be- Das Paket mx.formatters enthält Klassen, die Daten und
wusst, dass dieser TecFeed nicht alle Themen vollständig be- Strings unmittelbar in »schön gedruckte« Strings mit einer
handelt, aber ich hoffe, dass ich Ihnen eine Idee davon ver- besonderen Formatierung für Telefonnummern, Datumsanga-
mitteln kann, was es alles gibt und wo Sie Informationen dazu ben, Währungsangaben usw. umwandeln.
finden. Sie werden einiges an Zeit sparen, wenn Sie auf exis-
tierende Einrichtungen zurückgreifen, anstatt sie selbst zu Repeater
schaffen. Wenn Sie mehrere Kopien eines Blocks von MXML einschlie-
ßen wollen, können Sie ihn mit einem <mx:Repeater> -Tag ver-
Cursor-Verwaltung sehen. Verwenden Sie es nur für festgelegte UI-Blöcke. Seine
Sie können den Standardzeiger mit der Klasse CursorManager Verwendung ist kompliziert, und es ist nicht das richtige
leicht durch ein eingebettetes Cursor-Bild austauschen. Werkzeug für dynamische Daten.

Drag-and-Drop Diagramme
Sie können Ihren Benutzern mit ein paar einfachen Attributen Flex Charting (http://www.adobe.com/products/flex/charting/)
( dragEnabled , dropEnabled ) die Möglichkeit geben, Objekte in ist ein eigenständiges Produkt, das von Adobe angeboten
Datenkomponenten per Drag-and-Drop zu verschieben. Au- wird und Ihnen ermöglicht, in Flex 2 Diagramme mit lau-
ßerdem können Sie mit der Klasse DragManager eigene Drag- fender Aktualisierung, Styles und Animationen einzubinden.
and-Drop-Verhalten erzeugen.

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt Schnelleinstieg in Flex 2 Zusammenfassung 90

Logging Zusammenfassung
Flex 2 kommt mit einer vollständigen Logging-API, die Ihnen Ich hoffe, dass Ihnen dieser TecFeed Flex näher bringen
eine Protokollierung ermöglicht, um Ausgaben und Dateien konnte. Auch wenn ich mich auf das Wichtigste beschränken
nachzuhalten, Log-Verkehr zu filtern sowie unterschiedliche musste, hoffe ich, dass ich viele Fragen beantworten konnte,
Logging-Stufen und -Katagorien zu verwenden. Diese Klassen die Neulinge in der Flex-Programmierung haben. Mein Ziel
finden Sie im Paket mx.logging . war es, Sie mit so viel Flex 2 aufzuladen, dass Sie mit der Ar-
beit an der nächsten großen Web 2.0-Anwendung beginnen,
Internationalisierung und Lokalisierung
reich werden und früh in Rente gehen können. Ihre Kommen-
Sie können die ResourceBundle-API verwenden, um String- tare sind mehr als willkommen: Nehmen Sie an der Diskussion
Ressourcen und Assets aus lokalisierten Bundles zu referen- unter http://www.partlyhuman.com/books/flexshortcut/ teil.
zieren, die ausgetauscht werden können, indem dem Flex 2-
Wenn Sie mehr zu den hier präsentierten Themen herausfin-
Compiler ein locale -Parameter übergeben wird. Das Meta-
den wollen, bietet O'Reilly viele Ressourcen, die mit diesem
daten-Tag [ResourceBundle] und die MXML-Direktive @resource
TecFeed verwandt sind, insbesondere die Bände der Adobe
bieten Zugriff auf die Bundles.
Developer Library:
Testing • Programming Flex 2.0 von Chafic Kazoun und Joey Lott
FlexUnit (http://labs.adobe.com/wiki/index.php/ActionScript_3: • Flex 2.0 User Interface Design & Development von Matt Voer-
resources:apis:libraries) ist ein freies Adobe Labs-Framework man und Simon Reid
für die Automatisierung von Unit-Tests.
• Flex 2.0 Cookbook von Chafic Kazoun, Joey Lott et al.
Verlaufsverwaltung • ActionScript 3.0 Cookbook von Joey Lott, Darron Schall und
Die Klasse HistoryManager kann Navigationszustände mit den Keith Peters
Zurück- und Vor-Verlaufsfunktionen des Browsers verknüpfen, • Essential ActionScript 3.0 von Colin Moock
wenn Ihre Flex-Anwendung in einem Webbrowser läuft. In-
• ActionScript 3.0 Quick Reference von William Sanders
dem Sie das Interface IHistoryManagerClient implementieren,
können Sie auch Zustände Ihrer eigenen, selbst definierten • ActionScript 3.0 Design Patterns von William Sanders und
Komponenten mit dem Browserverlauf verknüpfen. 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 Die Originalausgabe erschien 2007 unter dem Titel
erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen Introduction to Flex 2.0 bei O’Reilly Media, Inc.
­werden. Verlag, Autoren und Übersetzer übernehmen keine juristische
Verantwortung oder irgendeine Haftung für eventuell verbliebene Die Adobe Developer Library bietet Wissen aus erster Hand für Entwickler
Fehler und deren Folgen. von plattformunabhängigen Webanwendungen. Sie umfasst Publikatio­
nen und Online-Ressourcen zur Entwicklung von Rich Internet Applica-
Alle Warennamen werden ohne Gewährleistung der freien Verwend-
tions mit Adobe-Technologien. Die Adobe Developer Library ist eine Ko­
barkeit benutzt und sind möglicherweise eingetragene Warenzeichen.
operation zwischen O'Reilly Media und Adobe Systems, Inc. Mehr darüber
Der Verlag richtet sich im wesentlichen nach den Schreibweisen der
erfahren Sie unter www.adobedeveloperlibrary.com.
Hersteller. Das Werk einschließlich aller seiner Teile ist urheberrechtlich
geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung,
Die technische Lektorin für dieses Dokument war Stacey Mulcahy. Sie ist
Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung
eine Flash-/Flex-Entwicklerin, die ihre Zeit damit verbringt, Rich Internet
in elektronischen Systemen.
Applications zu erstellen, die häufig sogar Designern gefallen. Ihre Nächte
Texte, Abbildungen und Design dieses eBooklets sind urheberrecht- verbringt sie damit, einer Spielsucht nachzugehen, die zu verbergen sie
lich geschützt. Der Kauf berechtigt lediglich zur persönlichen Nutzung sich nicht einmal die Mühe macht. In ihrem Flash-/Flex-orientierten Blog
des PDF-Dokuments. Das Kopieren, Weitergeben, Vertreiben und Ver- ereifert sie sich mehr, als dass sie schwärmt. Sie finden es unter:
öffentlichen des eBooklets in gedruckter oder elektronischer Form ist www.bitchwhocodes.com
­u ntersagt.
Übersetzung und deutsche Bearbeitung: Lars Schulten, Köln
Kommentare und Fragen können Sie gerne an uns richten: Lektorat: Inken Kiupel, Köln
O’Reilly Verlag Korrektorat: Sibylle Feldmann, Düsseldorf
Balthasarstraße 81 Reihenlayout: Theo Spangenberg, Neunkirchen-Seelscheid
50670 Köln Satz: Conrad Neumann, München
Tel.: 0221/9731600 Finishing, Satz Werbeseiten: G&U Language & Publishing Services GmbH,
Fax: 0221/9731608 (www.GundU.com)
E-Mail: kommentar@oreilly.de Produktion: Andrea Miß, Köln

Copyright: ISBN 978-3-89721-625-9


© 2007 by O’Reilly Verlag GmbH & Co. KG

TecFeeds © 2007 by O’Reilly Verlag


è Inhalt TecFeeds – Wissen zu aktuellen Technologien Ergänzende O’Reilly-Titel 92

Chafic Kazoun & Joey Lott Hans Weigl


Deutsche Übersetzung 1. Auflage September 2007
von Sascha Kersken & Peter Klicman ISBN 978-3-89721-634-1
1. Auflage Oktober 2007 60 Seiten, PDF ca. 3 MB
ISBN 978-3-89721-726-3 EUR 8,90
560 Seiten, gebundene Ausgabe
EUR 54,90, SFR 88,90

Schnelleinstieg in Adobe AIR (TecFeed)


Programmieren mit Flex 2 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
Adobe Flex ist ein Framework für die Entwicklung plattformübergreifender Rich Internet
auf Daten aus dem Web als auch auf den Desktop des Users zugreifen – und das auf der
Applications, die im Flash-Player laufen. Die Anwendungen sind zwar webbasiert, dabei
Basis gängiger Webtechnologien wie HTML, CSS, JavaScript, Flash und Flex.
jedoch so schlank, dass man den Eindruck hat, auf dem eigenen Desktop zu arbeiten.
In diesem TecFeed lernen Sie anhand von konkreten Beispielen die Struktur und Funk­
Programmieren mit Flex 2 richtet sich an Programmierer, die die Gelegenheit nutzen wol-
tionsweise von AIR-Anwendungen kennen und erfahren, wie Sie sie debuggen, kompi-
len, in die Entwicklung von RIAs einzusteigen, ohne Flash zu lernen. Das Buch bietet einen
lieren und eine AIR-Installationsdatei packen. Der Zugriff auf das lokale Verzeichnissys-
kompakten Einstieg in ActionScript 3 und den XML-Dialekt MXML sowie in jede Menge
tem, die Einbindung von PDF-Dateien und SQLite werden ebenso behandelt.
Features, die das Framework von Hause aus mitbringt. Konzepte werden anschaulich ver-
mittelt, und durch die vielen Beispiele wird sofort plastisch, was Flex 2 leisten kann. Schnelleinstieg in Adobe AIR richtet sich an Leser, die Kenntnisse in einer Programmier-
sprache mitbringen und sich mit HTML, JavaScript und ActionScript auskennen.

Colin Moock Joey Lott, Darron Schall & Keith Peters


1. Auflage Juni 2007 1. Auflage Oktober 2006
ISBN 978-0-596-52694-8 ISBN 978-0-596-52695-5
946 Seiten, Broschur 586 Seiten, Broschur
EUR 53,00, SFR 84,90 EUR 38,00, SFR 64,90

Essential ActionScript 3.0 ActionScript 3.0 Cookbook


More than two years in the making, ActionScript 3.0 presents perhaps the most substan- Solutions for Flash Platform and Flex Application Developers
tial upgrade to Flash's programming language ever. The enhancements to ActionScript's
performance, feature set, ease of use, cleanliness, and sophistication are simply staggering. Well before Ajax and Windows Presentation Foundation, Macromedia Flash provided the
Revolutionary improvements abound. Essential ActionScript 3.0 is an update to Essential first method for building »rich« web pages. Now, Adobe is making Flash a full-fledged
ActionScript 2.0, once again focusing on the core language and object-oriented program- ­development environment, and learning ActionScript 3.0 is key. That's a challenge for
ming with some coverage of the Flash Player API. Approximately half of the book focuses even the most experienced Flash developer. This Cookbook offers more than 300 solu-
on the new features and functionality of ActionScript 3.0, while the rest focuses on chan­ tions to solve a wide range of coding dilemmas, so you can learn to work with the new
ges between the 2 and 3 releases. 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 Mike Chambers, Rob Dixon, & Jeff Swartz
1. Auflage Juli 2007 1. Auflage April 2007
ISBN 978-0-596-52846-1 ISBN 978-0-596-51391-7
532 Seiten, Broschur 138 Seiten, Broschur
EUR 43,00, SFR 71,90 EUR 14,00, SFR 22,90

ActionScript 3.0 Design Patterns Apollo for Adobe Flex Developers Pocket Guide
Object Oriented Programming Techniques A Developer's Reference for Apollo's Alpha Release
If you're an experienced Flash or Flex developer ready to tackle sophisticated program- Now you can build and deploy Flash-based Rich Internet Applications (RIAs) to the desk-
ming techniques with ActionScript 3.0, this hands-on introduction to design patterns top using Adobe's Flex framework. Written by members of the Apollo product team, this
takes you step by step through the process. You learn about various types of design pat- is the official guide to the Alpha release of Adobe Apollo, the new cross platform desktop
terns and construct small abstract examples before trying your hand at building full- runtime from Adobe Labs. Numerous examples illustrate how Apollo works so you can
fledged working applications outlined in the book. start building RIAs for the desktop right away.

Sascha Kersken Mike Chambers, Daniel Dura & Kevin Hoyt


3. Auflage September 2007 1. Auflage Juli 2007
ISBN 978-3-89721-721-8 ISBN 978-0-596-51519-5
416 Seiten, Broschur 174 Seiten, Broschur
inkl. DVD EUR 14,00, SFR 22,90
EUR 24,90, SFR 41,90

Praxiswissen Flash CS3 Adobe Integrated Runtime (AIR) for


Praxiswissen Flash CS3 ist eine Einführung für all diejenigen, die HTML-Grundkenntnisse JavaScript Developers Pocket Guide
besitzen und einen schnellen und praxisbezogenen Einstieg in Flash suchen. In verständ-
lichen Worten stellt Ihnen der Autor alle wichtigen Features von Flash CS3 vor und demons­ This book explains how you can use AIR to build and deploy HTML and JavaScript-based
triert sie anhand eines durchgängigen Beispiels im praktischen Einsatz. 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
Für die Neuauflage wurde dieses Buch komplett überarbeitet und alle zentralen neuen
you can start building applications with AIR right away.
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.

TecFeeds © 2007 by O’Reilly Verlag