Kostenloser des Buches als PDF (ca. 4.5 MB)

Kostenloser des Buches als PDF (ca. 4.5 MB)
Inhalt
Schnelleinstieg in Flex 2
Flex 2 kennenlernen | 2
ActionScript 3.0 | 6
Roger Braunstein
Übersetzung von Lars Schulten
Was Flex mitbringt | 27
Flex ist ein umfassendes Framework zur Entwicklung Flash-basierter Rich Internet Applications. Obwohl die Umgebung noch sehr
jung ist, gibt es schon jetzt viele moderne Webanwendungen, die
mit Flex 2 realisiert wurden. Auch für Desktop-Anwendungen ist
Flex optimal geeignet, wenn es zusammen mit Adobe Apollo zum
Einsatz kommt.
Flex erweitern | 80
Flex zum Glänzen bringen | 64
Weitere Features | 89
Zusammenfassung | 90
Impressum | 91
Ergänzende O’Reilly-Titel | 92
Dieses Dokument bietet eine vollständige Einführung in die Programmierung mit Flex 2 und berücksichtigt dabei auch MXML und
ActionScript 3.0. Es ist für alle geeignet, die Kenntnisse in einer
objektorientierten Programmiersprache und XML haben.
Den Beispielcode zu diesem TecFeed finden Sie auf der Website
des Autors unter http://partlyhuman.com/books/flexshortcut/.
TecFeeds
www.tecfeeds.de
è Inhalt
Schnelleinstieg in Flex 2
Flex 2 kennenlernen
Flex 2 ist eine deklarative XML-UI-Sprache
Das wahrscheinlich markanteste Kennzeichen von Flex 2 ist
MXML, eine neue Sprache, die Sie einsetzen können, um FlexAnwendungen zu erstellen. Wenn Sie Ihren ersten <mx:Button>
sehen, können Sie sicher sein, dass Sie MXML und Flex vor
sich haben.
Vielleicht haben Sie schon erraten, dass das »ML« in MXML für
»Markup-Sprache« steht. Und ein Blick auf MXML-Code macht
die Ähnlichkeit mit XHTML oder anderen Markup-Sprachen
deutlich. MXML ist eine deklarative XML-Sprache. Das bedeutet, dass Sie, einfach indem Sie deklarieren, schon etwas machen. Wenn Sie Folgendes schreiben:
<mx:Panel><mx:Button></mx:Panel>
erhalten Sie also einen Button in einem Panel. Die Erzeugung
und Zusammensetzung dieser Komponenten wird bereits von
der Struktur des Markups impliziert.
Beachten Sie, dass nicht der gesamte Code in einer Flex 2-Anwendung MXML sein muss. In Flex 2 haben Sie immer die
Wahl zwischen MXML und ActionScript 3.0, auch wenn Sie nur
in Flex 2 MXML verwenden können. Der Gebrauch von deklarativem XML kann bei der Programmierung sehr vorteilhaft
sein. Es ist erheblich kompakter, wenn man viele Komponenten aufbaut. Es kann eingesetzt werden, um Design und Code
zu trennen. Außerdem kann es extern gestylt und mit visuellen Werkzeugen gestaltet werden.
TecFeeds © 2007 by O’Reilly Verlag
Flex 2 kennenlernen
Einige Unternehmen haben deklarative XML-Sprachen als
Mittel zur Erstellung von UIs entdeckt. Man kann also MXML
leicht mit Microsofts XAML, AOLs Boxely, Laszlos OpenLaszlo
und Netscapes XUL vergleichen. Schon die Vertrautheit mit
HTML und JavaScript sorgt dafür, dass Sie sich bei MXML zu
Hause fühlen.
Flex 2 ist ein Windowing-Toolkit
Flex 2 fügt den Fähigkeiten von Flash Player 9 ein mächtiges,
erweiterbares, gut organisiertes und gut dokumentiertes Windowing-Toolkit hinzu. Ein großer Teil des Werts von Flex 2
steckt im Framework: den Hunderten von Klassen, die bereitstehen, damit Sie sie nutzen und erweitern können.
Die meisten dieser Klassen kümmern sich gleichermaßen um
Layout und Anzeige vertrauter GUI-Komponenten wie Buttons, Textfelder und Werkzeugleisten. Wie jedes WindowingToolkit soll es Ihnen ersparen, jemals eine weitere Scrollleiste
(oder irgendeine andere GUI-Komponente) schreiben zu müssen. Sie können Flex eine Menge lästiger Details überlassen –
das Zentrieren von Objekten, das Ersetzen des Mauszeigers
des Benutzers oder das Füllen von Auswahllisten mit Daten –
und sich gleich den wichtigen Teilen Ihrer Anwendung zuwenden.
Neben den Komponenten, die Flex 2 von Haus aus mitbringt,
können Sie auch fast alle Klassen nutzen, die verwendet werden, um Flex 2 selbst aufzubauen. Die Quellen aller Klassen
werden in rohem ActionScript angeboten. Das ermöglicht Ihnen, eigene Komponenten oder unkonventionelle Benutzer-
è Inhalt
Schnelleinstieg in Flex 2
schnittstellen zu erzeugen, die Funktionalitäten von beliebigen Teilen der Flex 2-Bibliothek ausleihen.
Wenn Sie sich einmal daran gewöhnt haben, Flex 2 an Ihrer
Seite zu haben, empfindet man es als geradezu lästig, Benutzerschnittstellen in Flash zu programmieren. Das soll jedoch
nicht heißen, dass Flex Flash vollständig ersetzt. Flex besitzt
keinen Grafikeditor, keine Timeline, keine Animationswerkzeuge und keine Bibliotheksverwaltung wie Flash. Es soll auf
einer höheren Ebene arbeiten und bietet Komponenten statt
Shapes. Generell könnte man sagen, dass Flex 2 am besten für
den Aufbau datengesteuerter, benutzerfreundlicher Benutzerschnittstellen geeignet ist.
Flex 2 kennenlernen
programmieren und jeden Teil der Flash 9-API aufrufen. Flex ist
eine Obermenge von Flash.
Weniger Worte, mehr Code
Kürzen wir das Geschwatze ab und sehen wir uns eine einfache (allerdings etwas unnütze) Flex 2-Anwendung an. Indem Sie sich etwas Beispielcode ansehen, bekommen Sie ein
Gespür dafür, wie Flex 2-Anwendungen erstellt werden, bevor
wir uns den Einzelheiten zuwenden. Abbildung 1 zeigt ein
Werkzeug zur Temperaturumrechnung, das Celsius in Fahrenheit und Fahrenheit in Celsius umrechnet.
Flex 2 basiert auf Flash
Wenn Sie eine Flex 2-Anwendung ausführen, lassen Sie sie im
Flash Player (Version 9 und höher) laufen. Egal ob es das Flash
Player-Plugin in Ihrem Browser, der Standalone Flash Player
oder eine Desktop-Anwendung ist, die über Appolo läuft,
Flex 2-Anwendungen laufen innerhalb des Flash Players. Das
bedeutet, dass alles, was Sie in Flex 2 schreiben, an den gleichen Orten läuft wie ein Flash-Film: in unterschiedlichen
Browsern, auf unterschiedlichen Computern und unter unterschiedlichen Betriebssystemen.
Außerdem sind Flex 2-Anwendungen Flash-Filme. Obwohl Sie
sie nicht in der Flash-IDE entwerfen und einen anderen Compiler nutzen, sind Flex 2-Anwendungen in jeder Weise ganz gewöhnliche SWFs. Flex ist also eine Flash-Technologie. Beim Aufbau von Flex 2-Anwendungen können Sie in ActionScript 3.0
TecFeeds © 2007 by O’Reilly Verlag
Abb. 1 Ein Temperaturumrechner
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
currentState="FtoC">
<mx:Script>
<![CDATA[
è Inhalt
Schnelleinstieg in Flex 2
private const C_INPUT_TEXT:String =
"Geben Sie eine Temperatur in Celsius ein:";
private const F_INPUT_TEXT:String =
"Geben Sie eine Temperatur in Fahrenheit ein:";
private const CF_STATE:String = "CtoF";
private const FC_STATE:String = "FtoC";
private function convertTemp():void
{
var inputTemp:Number =
parseFloat(inputTempField.text);
var outputTemp:Number;
switch(currentState)
{
case CF_STATE:
outputTemp = convertCtoF(inputTemp);
outputTempField.text =
outputTempFormatter.format(outputTemp);
outputTempField.text += "°F";
break;
case FC_STATE:
outputTemp = convertFtoC(inputTemp);
outputTempField.text =
outputTempFormatter.format(outputTemp);
outputTempField.text += "°C";
TecFeeds © 2007 by O’Reilly Verlag
Flex 2 kennenlernen
break;
default:
throw new Error("Unerwarteter Zustand");
}
}
private function clearTemp():void
{
outputTempField.text = "";
}
private function convertCtoF(celsius:Number):Number
{
return 9/5 * (celsius + 32);
}
private function convertFtoC(fahrenheit:Number):
Number
{
return 5/9 * (fahrenheit - 32);
}
]]>
</mx:Script>
<mx:Style>
.outputTemp {font-size: 18; font-weight: bold;
color: red}
</mx:Style>
è Inhalt
Schnelleinstieg in Flex 2
<mx:states>
<mx:State name="{FC_STATE}" enterState="convertTemp()">
<mx:SetProperty target="{inputLabel}" name="text"
value="{F_INPUT_TEXT}"/>
</mx:State>
<mx:State name="{CF_STATE}" enterState="convertTemp()">
<mx:SetProperty target="{inputLabel}" name="text"
value="{C_INPUT_TEXT}"/>
</mx:State>
</mx:states>
<mx:NumberValidator source="{inputTempField}"
property="text"
triggerEvent="change" valid="convertTemp()"
invalid="clearTemp()"/>
<mx:NumberFormatter id="outputTempFormatter"
precision="2"/>
<mx:Panel title="Temperaturumrechnung"
layout="vertical" horizontalAlign="center">
<mx:HBox horizontalAlign="center"
verticalAlign="middle">
<mx:Label id="inputLabel"/>
<mx:TextInput id="inputTempField" maxChars="5"/>
<mx:Spacer width="10"/>
<mx:Text id="outputTempField"
styleName="outputTemp" width="100"/>
</mx:HBox>
TecFeeds © 2007 by O’Reilly Verlag
Flex 2 kennenlernen
<mx:HBox horizontalAlign="center"
creationComplete="conversionMode.selectedValue =
currentState;">
<mx:RadioButtonGroup id="conversionMode"
change="currentState =
conversionMode.selectedValue as String"/>
<mx:RadioButton group="{conversionMode}"
label="Fahrenheit in Celsius" value="FtoC"/>
<mx:RadioButton group="{conversionMode}"
label="Celsius in Fahrenheit" value="CtoF"/>
</mx:HBox>
</mx:Panel>
</mx:Application>
Dieser Hauruck-Temperaturumrechner nutzt Elemente aus
vielen verschiedenen Teilen von Flex 2. Mit dieser und den
anderen Anwendungen in diesem TecFeed können Sie auf der
Begleit-Website zu diesem TecFeed experimentieren (dort
können Sie auch den jeweiligen Code herunterladen oder
einsehen): http://www.partlyhuman.com/books/flexshortcut/.
Inhalte dieses TecFeeds
Im Rest dieses Dokuments werden Sie alle Elemente sehen,
die in das vorangehende Beispiel mit eingeflossen sind, und
noch vieles mehr. Dieser TecFeed ist in vier übergeordnete
Abschnitte eingeteilt. Der erste ist eine Einführung in ActionScript 3.0, die Sie brauchen, um Flex 2-Anwendungen zu
schreiben. Der zweite Abschnitt befasst sich mit den am häu-
è Inhalt
Schnelleinstieg in Flex 2
figsten verwendeten und nützlichsten Komponenten, die Sie
in der Flex 2-Bibliothek finden können, und damit, wie Sie direkt aus ihnen Anwendungen aufbauen. Im dann folgenden
Abschnitt geht es darum, wie Sie erreichen, dass diese Anwendungen gut aussehen. Der letzte große Teil dieses TecFeeds dreht sich darum, wie man an das Flex-Framework anknüpft, um eigene Komponenten zu erstellen.
Wollen Sie sich so schnell wie möglich in die eigentliche FlexEntwicklung stürzen, können Sie das folgende Kapitel zu
ActionScript 3.0 erst mal überspringen und gegebenenfalls
zurückblättern, wenn die Beispiele komplexer werden und
mehr Scripting erfordern.
Konventionen
Die Codeauszüge in diesem TecFeed wurden gelegentlich gekürzt, um den Schwerpunkt mehr auf die eigentliche Bedeutung des Auszugs zu legen. Sie können nebeneinander Abschnitte mit ActionScript 3.0 und MXML enthalten. Das impliziert, dass das MXML Teil einer MXML-Datei ist und dass das
AS3 in einen <mx:Script> -Block oder eine externen ActionScript-Datei eingeschlossen ist. Gleichermaßen sollte CSS in
eine externe CSS-Datei gepackt werden. Importanweisungen
und die XML-Deklaration <?xml version="1.0"?> werden in die
Auszüge nicht eingeschlossen.
TecFeeds © 2007 by O’Reilly Verlag
ActionScript 3.0
ActionScript 3.0
Die gemeinsame Sprache von Flex 2-Anwendungen ist
ActionScript 3.0. Sie können keine älteren Versionen von
ActionScript verwenden, und es ist nicht möglich, ganz ohne
ActionScript 3.0 eine funktionierende Anwendung zu erstellen. Außerdem werden wir bald sehen, dass MXML und AS3
grundlegend miteinander verwandt sind. ActionScripts dritte
Inkarnation ist eine ausgereifte Sprache und substantiell anders als ActionScript 2.
Dieses Kapitel wird alle wesentlichen Aspekte von ActionScript 3.0 kurz behandeln, ist aber in keiner Weise eine vollständige Einführung. Am Ende dieses TecFeeds befindet sich
eine Liste mit weiterem nützlichen Lesestoff, der ergänzende
Anleitungen bietet.
Was bringen Sie mit?
Leser, die ActionScript 2 verstehen, dürften mit dem Übergang zu ActionScript 3.0 keine Probleme haben. Das folgende
Kapitel widmet sich speziell den Konzepten, die seit AS2 eingeführt wurden. Lesen Sie also weiter!
Leser mit Erfahrungen in C# oder Java werden sich bei AS3
nach kurzer Zeit zu Hause fühlen, sollten aber auf ein paar
Unterschiede in der Syntax und bei den Features achten. Auf
alle Fälle setzt dieses Kapitel zumindest Grundkenntnisse in
der objektorientierten Programmierung voraus.
è Inhalt
Schnelleinstieg in Flex 2
Haupt-Features von ActionScript
ActionScript ist eine ECMAScript-Sprache. ActionScript 3.0 implementiert den Entwurf von ECMAScript Edition 4 (ECMA262). Das bedeutet zwei Dinge: Erstens ist der eigentliche
Name lächerlich, Sie brauchen ihn sich also nicht zu merken.
Zweitens handelt es sich um einen Entwurf, der sich in Zukunft noch verändern kann. Ecma International ist eine internationale Standardisierungsorganisation, die ECMAScript und
andere technologische Standards überwacht. JavaScript ist
eine andere Implementierung von ECMAScript. Es ist also
mehr als wahrscheinlich, dass ActionScript 3.0 mit JavaScript
identisch sein wird, wenn Browser die Version 4 von ECMAScript implementieren.
ActionScript 3.0 ist eine echte objektorientierte Sprache, in
der alle Typen, die Basistypen eingeschlossen, Klassen sind.
Selbst auf einem Literal wie 5 können direkt Number-Methoden aufgerufen werden. AS3 unterstützt Einfachvererbung:
Jede Klasse kann nur eine einzige Klasse erweitern.
Die Prototyp-Natur früherer Versionen von ECMAScript wird
langsam verdeckt und der klassischen Verwendung geopfert.
Einige Teile von AS3 ermöglichen Ihnen, es als Prototyp-basierte Sprache zu verwenden, aber diese Fähigkeit wird selten
verwendet und hier nicht behandelt. Die virtuelle Maschine
ist so ausgerichtet, dass sie am besten funktioniert, wenn Sie
auf klassische Weise programmieren.
AS3 ist auch eine funktionelle Sprache. Funktionen sind Objekte – Bürger erster Klasse – und können gespeichert und
TecFeeds © 2007 by O’Reilly Verlag
ActionScript 3.0
herumgereicht werden. Lambda-Funktionen (oder anonyme
Funktionen) werden unterstützt. Außerdem arbeitet die
Klasse Array als eine Liste und unterstützt viele der üblichen
Listenoperationen aus der funktionellen Programmierung.
ActionScript 3.0 unterstützt dynamisch und statisch typisierte
Variablen gleichermaßen. Dynamisch typisierte oder »untypisierte« Variablen können ihren Typ zur Laufzeit ändern. Dann
wird Typ-Inferenz eingesetzt, um den Typ auf Basis des Werts
anzupassen, den Sie zuweisen. AS3 führt den Typ * ein, um
eine untypisierte Variable anzuzeigen. Der Compiler prüft den
Typ aller typisierten Variablen und versiegelten Klassen. Die
Verwendung statisch typisierter Variablen hilft dem Compiler
also, die Richtigkeit Ihrer Programme zu sichern. Klassen sind
standardmäßig versiegelt: Sie können ihnen zur Laufzeit
keine Eigenschaften oder Methoden hinzufügen. Dynamische
Klassen bleiben allerdings weiterhin möglich, indem man das
Schlüsselwort dynamic verwendet.
ActionScript 3.0 hat ein natives Event-Modell. Anders als vorherige Versionen von ActionScript, in denen man ein EventFramework auswählen musste und unter denen zu einem
Zeitpunkt mehrere verschiedene Event-Handling-Schemata
im Einsatz sein konnten, bietet AS3 ein flexibles, mehrphasi­
ges Event-Modell. Dieses Modell basiert auf dem DOM Level 3,
einem W3C-Standard.
Die Behandlung von Laufzeitfehlern wurde durch die stark
verbesserte Verwendung von Exceptions unter AS3 vereinfacht. Viele Fehler, die in vorherigen Versionen von Action-
è Inhalt
Schnelleinstieg in Flex 2
Script stumm blieben, lösen jetzt Exceptions aus. Das vereinfacht das Debugging und ermöglicht umfassendere Ausweichstrategien.
ActionScript Virtual Machine 2 (AVM2)
Ein Großteil der Kraft von ActionScript 3.0 steckt in einer vollständig neuen virtuellen Maschine, der ActionScript Virtual
Machine 2 (AVM2).
Die virtuelle Maschine ist das, was ermöglicht, dass SWF-Dateien auf einem Mac, einem PC, unter Linux oder auf einem
Pocket PC laufen. AS3-Code wird zu Bytecode, d.h. Anweisungen werden auf einer maschinennahen Ebene kompiliert.
Die virtuelle Maschine im Flash Player führt diesen Bytecode
aus. Früher wurde Quellcode zu Anweisungen für eine CPU
kompiliert. Das führt aber dazu, dass dieses Programm nur auf
Rechnern mit der gleichen CPU läuft. Viele moderne Sprachen
sind dazu übergegangen, virtuelle Maschinen zu verwenden,
die den gleichen Bytecode ausführen. Beispiele dafür sind
­J avas JRE und .NETs CLR. Weil auf Ihrer Maschine eine virtuelle
Maschine läuft, die die Anweisungen für die VM in Anweisungen umwandelt, die Ihre CPU verstehen kann, können
Bytecode-interpretierte Sprachen langsamer sein als native
Programme, gewinnen aber Interoperabilität, Sicherheit und
Flexibilität.
Weil der Flash Player weiterhin ältere SWFs abspielen können
muss, enthält der Flash Player 9 tatsächlich zwei vollständige
Interpreter: AVM1 und AVM2. Setzen Sie in einem SWF ActionScript 3.0 ein, läuft es in der AVM2: Das ist bei allen Flex 2-An-
TecFeeds © 2007 by O’Reilly Verlag
ActionScript 3.0
wendungen der Fall. Die AVM2 wurde, mit der Leistung im
Blick, von Grund auf neu geschaffen. Ihre Geschwindigkeit
und Stabilität machen Flex 2 möglich.
AVM2 und damit AS3 behandeln Klassen grundlegend anders
als vorherige Versionen von ActionScript. ActionScript-Klassen begannen als prototypische Objekte: In ActionScript 1
und JavaScript kann man »Klassen« erstellen, indem man
einem im Speicher vorhandenen Prototyp-Objekt Methoden
und Variablen hinzufügt. Vererbung wurde behandelt, indem
der Prototyp der Superklasse kopiert wurde und ihm Methoden und Eigenschaften hinzugefügt wurden, um ihn so zu erweitern und eine Prototyp-Kette zu schaffen. In ActionScript 2
konnte man Klassen in der vertrauten Struktur mit einem
class -Block schreiben. Aber das war nur syntaktischer Zuckerguss: Der ActionScript 2-Compiler hat diese einfach für Sie in
Prototyp-Objekte umgewandelt. Prototyp-basierte Klassen
haben allerdings einige schwerwiegende Probleme. Klassen
können zur Laufzeit modifiziert werden. Methoden und Variablen können referenziert werden, ohne dass sie deklariert
wurden, oder können umgekehrt zur Laufzeit überschrieben
werden. Aber am wichtigsten ist vielleicht, dass jeder Methoden- oder Eigenschaftenzugriff auf einer Klasseninstanz die
AVM auf eine wilde Jagd nach dieser Ressource schickt, um
erst in einer Hashtable im Objekt, dann in seinem Prototyp,
dem Prototyp der Superklasse und dann auf dem ganzen Weg
nach oben in der Vererbungskette zu suchen!
Die neue virtuelle Maschine schafft einen Ausgleich. Sie ermöglicht Ihnen, das Prototyp-Objekt zu verwenden, kollabiert
è Inhalt
Schnelleinstieg in Flex 2
aber auch Ihre Klassen. In der AVM2 werden alle Klassen als
flache Strukturen gespeichert. Das bedeutet zwei Dinge: Klassen nehmen erheblich weniger Speicher ein, und das Nachschlagen von Methoden und Eigenschaften ist eine direkte
Operation. All das muss ich wegen einer wichtigen Implikation erwähnen. Die Verwendung statisch typisierter Variablen
ist nicht einfach nur eine Prüfung Ihrer Arbeit – sie optimiert
Ihr Programm.
Durch die Verwendung von Just-in-Time-Kompilierung (JIT )
erhält die AVM2 ebenfalls einen gewaltigen Geschwindigkeitszuwachs. Im Vergleich zur direkten Ausführung von Anweisungen auf der CPU Ihres Rechners kann die Interpretierung von Bytecode ziemlich langsam sein. Just-in-Time-Kompilierung erstellt während der Ausführung Profile Ihres Programms, entdeckt Codeabschnitte, die häufig ausgeführt
werden, und kompiliert diese darüber hinaus zu nativem
Code – und all das, während Ihr Programm läuft. Die Compiler-Optimierung ist ein Vorgang, der sich im Wesentlichen im
Hintergrund abspielt und an dem Sie unglücklicherweise
nicht herumschrauben können. Seine Auswirkungen sind aber
nicht zu unterschätzen. Beispielsweise haben Javas Verbesserungen bei der JIT mit den Jahren eine anfänglich negative
Wahrnehmung seiner Geschwindigkeit vollkommen umgewandelt.
Die AVM2 bietet eine Garbage Collection-Einrichtung. AS3 ist
eine vollständig speicherverwaltete Sprache. Wenn Referenzen nicht mehr gültig sind und keine (starken) Referenzen
auf sie bleiben, werden sie aus dem Speicher entfernt. Wie in
TecFeeds © 2007 by O’Reilly Verlag
ActionScript 3.0
Java sind new und delete die wesentlichen Mittel zur Verwaltung Ihres Speichers. Das Schlüsselwort delete ist in AS3 allerdings stark beschränkt. Es ist üblicher, Referenzen auf null
zu setzen, um zu erlauben, dass Objekte eingesammelt werden. In ActionScript 3.0 können Sie Konstruktoren schreiben,
aber keine Destruktoren. Die AVM2 nutzt einen Mark-andSweep-Algorithmus für die Durchführung der Garbage Collection.
ECMA-Script for XML (E4X)
Ein willkommenes neues Feature des AS3-Sprachkerns ist die
Einbindung von XML als nativem Datentyp mit Literalen und
intuitiven Operatoren. Dieses Feature wird als ECMAScript for
XML (E4X) bezeichnet und ist ein weiterer ECMA International-Standard mit dem schlecht zu merkenden offiziellen Namen ECMA-357. Es vereinfacht und beschleunigt nicht nur die
Verwendung von XML, sondern macht XML auch zu einem
hilfreichen Typ für die interne Speicherung und Manipulation
von Informationen.
Die neue Klasse XML wird von einer sehr nützlichen Klasse namens XMLList begleitet. Eine XMLList lockert eine der Schlüsselanforderungen von wohlgeformtem XML: den einen Wurzelknoten. Es ist auch der typische Rückgabetyp für alle Filterungen, die mit E4X-Methoden durchgeführt werden, und
enthält nützliche Methoden zur Manipulation ihres Inhalts.
Sie werden feststellen, dass es sehr komfortabel ist, eine XMLList zu verwenden, um beliebige Happen von XML-Daten zu
speichern. Es sollte erwähnt werden, dass die XML-Klasse von
è Inhalt
Schnelleinstieg in Flex 2
ActionScript 2 als die Klasse XMLDocument fortbesteht. Das vereinfacht es, alten Code zu portieren.
Im Folgenden sehen Sie ein Beispiel, das gerade mal in den
Anfängen einiges davon zeigt, was Sie mit E4X machen können.
//Geben Sie das XML einfach inline an!
//Der <?xml version="1.0"?>-Prolog ist nicht erforderlich.
var roster:XML = <root>
<person name="Ezra" skill="flash"/>
<person name="Joey" skill="flex"/>
<person name="Danny" skill="flash"/>
<person name="Mims" skill="flex">
<title>Meister der Schnäuzer.</title>
</person>
<person name="Geoff" skill="javascript"/>
<person name="Paul" skill="flash"/>
<person name="Robert" skill="flash"/>
<person name="Roger" skill="flex">
<title>Ihr demütiger Autor.</title>
</person>
</root>;
//Sie können jetzt Teil des Teams werden! (Ein neues Kind
//hinzufügen.)
roster.appendChild(<person name="LieberLeser"
skill="learning"/>);
ActionScript 3.0
10
//Wer steht in der ersten Reihe? (Das name-Attribut des
//ersten person-Elements finden.)
trace(roster.person[0].@name); //Ezra
//Herausfinden, was Roger hier tun soll.
//(Der Inhalt des title-Knotens im person-Element, dessen
//name-Attribut Roger ist.)
trace(roster.person.(@name == "Roger").title); //Ihr
//demütiger Autor.
//Schauen wir nach, wie viele Flexperten es gibt.
//(Die Länge der XMLList aus den person-Elementen
//mit dem skill-Attribut flex.)
trace(roster.person.(@skill == "flex").length()); //3
//Diese Zeile können Sie für das Ende des Buchs speichern.
//(Eine Referenz auf das person-Element mit dem
//name-Attribut LieberLeser.)
//(Setzt das skill-Attribut für dieses person-Element.)
var you:XMLList = roster.person.(@name == "LieberLeser");
you.@skill = "flex";
//Ein neuer Flexperte ist aufgetaucht!
//(Die Länge der XMLList aus den person-Elementen mit dem
//skill-Attribut flex.)
trace(roster.person.(@skill == "flex").length()); //4
Dieses Beispiel ist ein kleiner Auszug dessen, was mit E4X
möglich ist. Sie können komplexe Suchen aufbauen, indem
TecFeeds © 2007 by O’Reilly Verlag
è Inhalt
Schnelleinstieg in Flex 2
Sie einen punktseparierten Abfragepfad konstruieren. Sie
können Kinder auswählen, indem Sie den Namen des Kindknotens in einen Punktpfad ( roster.person.title ) einfügen,
und Sie können Knoten positionell mit einer dem Array-Zugriff vergleichbaren Notation mit eckigen Klammern ( roster.
person[0] ) auswählen. Sie können mit dem At-Zeichen ( @ ) zu
den Attributen navigieren und Knoten auswählen, die in ihrem Pfad beliebigen Bedingungen (nicht nur Gleichheit) genügen. Die Klasse XMLList bietet mehr Achsenselektoren, als
in diesem Beispiel gezeigt werden, die den Fähigkeiten von
XPath entsprechen.
Während Sie in Flex 2 mit XML-Daten arbeiten, können Sie
sich die Dokumentation und die am Ende dieses TecFeeds
aufgeführten Ressourcen ansehen, um mehr über E4X zu erfahren.
Reguläre Ausdrücke
Ein weiteres nützliches und lang erwartetes Feature in AS3
sind reguläre Ausdrücke. Diese Objekte machen das Parsen
von komplexen Strings zu einem Kinderspiel. Es gibt eine Unmenge von Büchern und Artikeln zu diesem Thema, wie beispielweise Reguläre Ausdrücke, 2. Auflage von Jeffrey Friedl
(O’Reilly Verlag). AS3 unterstützt reguläre Ausdrücke als Literale – die durch einen Ausdruck angezeigt werden, der von
Backslashs eingeschlossen wird ( /Hallo/ ) – und als Instanzen
der Klasse RegExp . Es können nicht nur RegExp-Objekte auf
Strings ausgeführt werden, indem sie als Argumente an die
RegExp-Instanzmethoden übergeben werden, es wurden
TecFeeds © 2007 by O’Reilly Verlag
ActionScript 3.0
11
auch eine Reihe von String-Methoden so aktualisiert, dass sie
reguläre Ausdrücke als Argumente akzeptieren. Hier ist ein
Beispiel dafür, wie reguläre Ausdrücke in ActionScript 3.0 verwendet werden können.
var str:String = "Rub a dub dub, three men in a tub. And who
do you think they be?";
//Im String nach allem suchen, bei dem auf einen Buchstaben
//"ub" folgt.
str.match(/\wub/g); //Rub, dub, dub, tub
//Einen regulären Ausdruck machen, der auf "dub dub" passt.
var re:RegExp = new RegExp("dub dub");
//Den String auf die Existenz des Musters prüfen.
re.test(str); //true
//Das Muster durch unseren Text ersetzen.
str.replace(re, "glub glub"); //Rub a glub glub, three men in
//a tub ...
//Nach allen Wörtern mit drei Buchstaben suchen.
//Beachten Sie, dass replace() den String zurückgeliefert,
//aber nicht verändert hat.
str.match(/\b\w{3}\b/g); //Rub, dub, dub, men, tub, And,
who, you
//Die Position des ersten "a"-Zeichens finden.
str.search(/a/); //4
Beachten Sie, dass Literale für reguläre Ausdrücke in AS3 nur
verwendet werden, um reguläre Ausdrücke zu deklarieren,
nicht, um sie auszuführen. Sie sehen also keine Konstrukte
wie m/fnord/ (das in vielen Programmiersprachen nach dem
Muster »fnord« suchen würde).
è Inhalt
Schnelleinstieg in Flex 2
Anzeigeliste
Die Flash Player-API für die Verwaltung visueller Elemente
(wie MovieClip) wurde vollständig überarbeitet. Ganz gleich,
ob Sie Flash 9 verwenden oder nicht, es ist wichtig, dass Sie
das verstehen, weil Flex 2 das gleiche Paradigma verwendet.
Das neue Modell basiert auf einer Anzeigeliste.
Jedes visuelle Element, das Kinder haben kann, besitzt eine
Anzeigeliste. Sie können sich das als eine Liste vorstellen, weil
Sie sie genau so verwalten und weil auf diese Weise die Stapelordnung bestimmt wird. Nur Elemente, die einer Anzeigeliste hinzugefügt wurden, werden gerendert, wenn das erforderlich ist. Die Liste wird von hinten nach vorne gerendert,
und die Dinge, die vorne in der Liste stehen, werden über denen gerendert, die hinten in der Liste stehen.
Zusätzlich zu der Art und Weise der Verwaltung wurden auch
die Klassen selbst organisiert und ausgebaut, die visuelle Ele­
mente repräsentieren. In SWF-Dateien, die für Flash Player 9
veröffentlicht werden, ist alles, was auf dem Bildschirm sichtbar ist, in einer Anzeigeliste organisiert und für Code zugreifbar, sogar statische Textfelder und einfache Shapes. Alle Anzeigeobjekte erweitern die abstrakte Basisklasse Display
Object , und Objekte, die selbst andere Anzeigeobjekte enthalten können, erweitern DisplayObjectContainer . Im Folgenden
finden Sie die wichtigsten Anzeigeobjekte, die in AS3 verfügbar sind.
TecFeeds © 2007 by O’Reilly Verlag
ActionScript 3.0
12
flash.display.MovieClip
Die Klasse MovieClip ist ihrem Gegenstück in früheren Versionen von ActionScript sehr ähnlich: ein visuelles Element
mit einer unabhängigen Timeline, die beliebige andere Anzeigeobjekte enthalten kann. Beachten Sie, dass alle Eigenschaften, denen früher ein Unterstrich vorangestellt wurde,
wie _alpha und _rotation , den Unterstrich verloren und zu
alpha und rotation geworden sind. Beachten Sie auch, dass
die Klasse von der obersten Ebene in das Paket flash.display gewandert ist.
flash.display.Sprite
Wie ein MovieClip kann ein Sprite eine beliebige Art von
Anzeigeobjekt enthalten und mit den gleichen Eigenschaften transformiert werden. Sprites haben allerdings
keine Timelines und sind deswegen effizienter, insbesondere wenn sie in großer Zahl vorkommen. Für viele Entwickler werden Sprites MovieClips als Standardbaustein ersetzen.
flash.display.Loader
Loader werden verwendet, um Inhalt zu fassen, der zur
Laufzeit geladen wird, SWFs und Grafiken gleichermaßen.
Beide ersetzen die Klasse MovieClipLoader und die Methode
loadMovie() von vorherigen Versionen von ActionScript.
Diese und die anderen Anzeigeobjekte sind für Anwendungen wesentlich, die die Player 9-Anzeigeliste verwenden.
Wenn Sie Flex 2 verwenden, haben Sie Zugriff auf die Flash
è Inhalt
Schnelleinstieg in Flex 2
Player-API und diese Klassen. Aber denken Sie daran, dass Sie
eher Flex 2-Komponenten verwenden werden als diese Klassen.
Die Möglichkeiten, Anzeigeobjekte zu manipulieren, sind
ebenfalls vollkommen anders als bei vorherigen Versionen
von ActionScript. Vergessen Sie alles, was Sie über create­
EmptyMovieClip, attachMovie und swapDepths wissen, und
konzentrieren Sie sich auf die Anzeigeobjekte und Anzeige­
listen:
var box:Sprite = new Sprite();
addChild(box);
var jack:Sprite = new Sprite();
box.addChild(jack);
Die erste Zeile erzeugt einen neuen leeren Sprite. Die zweite
Zeile fügt die box unserer Anzeigeliste hinzu und macht sie
sichtbar. Dann erzeugen wir einen weiteren neuen Sprite,
diesmal einen Jack , und stecken jack in die box .
Inhalte werden als Unterklassen behandelt. Wenn Sie tatsächlich ein Bild mit jack verknüpft hätten, könnten Sie ihm den
Namen »Jack« geben und Jack wäre dann eine Unterklasse
von Sprite . Jetzt ist die Klasse Jack einfach eine besondere
Art von Sprite, die eine bestimmte Erscheinung hat. Das Konzept ersetzt Linkage-Namen und ist in Flex 2 und Flash 9 zu
finden.
Anstatt die Eigenschaft _visible aus früheren Versionen von
Flash zu verwenden, die häufig dafür verantwortlich war, dass
der unsichtbare Clip in jedem Frame Ressourcen in Anspruch
TecFeeds © 2007 by O’Reilly Verlag
ActionScript 3.0
13
nahm, können Sie ihn einfach aus der Anzeigeliste entfernen,
die ihn enthält. Die Anzeigeliste kann weiterhin von Ihnen
verwendet werden (solange Sie eine Referenz darauf halten),
aber es wird keine Zeit mehr damit verschwendet, sie zu rendern oder ihre Timeline auszuführen.
box.removeChild(jack);
royalFlush.addChild(jack);
Sie können Objekten sogar andere Eltern geben und sie in
ganz andere Container verschieben. Hier nehmen wir jack aus
der box und nutzen ihn stattdessen, um unseren royalFlush
vollständig zu machen. Sie sind am gewinnen!
ActionScript-Kerntypen
ActionScript 3.0 fügt ein paar neue Kerntypen hinzu und unterstützt weiterhin alle, die in AS2 vorhanden waren. Es sei
nochmals erwähnt, dass AS3 eine echte objektorientierte
Sprache ist und all diese Typen Klassen sind. Zu den Kerntypen, die von vorherigen Versionen von ActionScript geerbt
wurden, zählen:
Number
Eine Gleitkommazahl doppelter Genauigkeit.
Date
Eine Darstellung eines bestimmten Zeitpunkts.
String
Ein String, ganz ähnlich wie ein Java-String. Es gibt keinen
Typ für ein einzelnes Zeichen.
è Inhalt
Schnelleinstieg in Flex 2
ActionScript 3.0
Boolean
Ein Boolescher Wert, der true oder false ist.
Namespace
Die Repräsentation eines Namensraums.
Array
Eine nicht typisierte (sie kann Objekte unterschiedlicher
Typen enthalten), automatisch größenangepasste Liste.
Error
Der Basistyp für alle Exceptions.
Object
Ein anonymes Objekt und die Wurzelklasse aller Klassen­
hierarchien in AS3. Eigenschaften können zur Laufzeit hinzugefügt werden. Das macht sie als Wörterbücher nützlich,
die String-Schlüssel unterstützen.
Function
Eine Funktion.
AS3 führt einige neue Kerntypen ein:
int
Eine vorzeichenhaftete (Zweierkomplement) 32-Bit-Ganzzahl.
uint
Eine vorzeichenlose 32-Bit-Ganzzahl.
XML
XML-Daten.
Class
Eine Laufzeitdarstellung einer Klasse. Speichert die stati­
schen Eigenschaften und Methoden einer Klasse. Klassenreferenzen können mit dem new -Operator verwendet werden, um Instanzen der Klasse zu erzeugen.
TecFeeds © 2007 by O’Reilly Verlag
14
Sichtbarkeit
ActionScript 3.0 bietet eine größere Granularität für das Setzen der Sichtbarkeit von Eigenschaften und Methoden als
vorherige Versionen von ActionScript. Zusätzlich dazu hat
sich die Bedeutung einiger Sichtbarkeitsmodifizierer seit
ActionScript 2 geändert.
public
Wird verwendet, um Klassen, Eigenschaften, Methoden und
Namensräume zu deklarieren, auf die jeder Aufrufer zugreifen kann.
protected
Wird nur innerhalb von Klassendefinitionen verwendet, um
Eigenschaften, Konstanten, Methoden und Namensräume
zu deklarieren, die für die deklarierende Klasse und all ihre
Subklassen zugreifbar sind.
private
Wird in Klassendefinitionen verwendet, um Eigenschaften,
Konstanten, Methoden und Namensräume zu deklarieren,
die nur in der deklarierenden Klasse verfügbar sind. Strenger als seine Bedeutung in ActionScript 2.
è Inhalt
Schnelleinstieg in Flex 2
internal
Wird verwendet, um Klassen, Eigenschaften, Methoden und
Namensräume zu deklarieren, auf die aus dem Paket zugegriffen werden kann, in dem sie deklariert wurden.
Wenn Sie ein Sichtbarkeitsattribut bei einer Deklaration in einer Klassendefinition weglassen, weist AS3 implizit das Attribut internal zu.
Außerdem ermöglicht Ihnen AS3, eigene Namensräume zu erzeugen und zu verwenden. Klassen, Eigenschaften und Methoden, die in einem eigenen Namensraum deklariert werden,
sind für anderen Code im gleichen Namensraum und Code
zugreifbar, der den Namensraum durch Verwendung der Direktive use namespace geöffnet hat. Oder Sie können den Namensqualifizierungsoperator ( :: ) verwenden, um den Namensraum anzugeben, in dem eine Eigenschaft zu finden ist.
Für Ihren Namensraum können Sie jeden gültigen Bezeichnernamen verwenden. Sie können ihn auch an einen URI (Uniform Resource Identifier) binden. Wenn Sie eine Klasse, Eigenschaft oder Methode in einem eigenen Namensraum deklarieren, können Sie nicht gleichzeitig einen der vordefinierten
Namensräume wie public oder private verwenden.
Typmanipulation
ActionScript 3.0 bietet eine große Menge an Werkzeugen zur
sicheren und intelligenten Manipulation von Typen. Der Compiler führt Typprüfungen für Ihr Programm durch und kann,
wenn Sie typisierte Variablen verwenden, bereits zur Laufzeit
viele Fehler abfangen. Die Regeln, die erzwungen werden,
TecFeeds © 2007 by O’Reilly Verlag
ActionScript 3.0
15
sind ziemlich gradlinig. Alle typisierten Parameter eines Funktionsaufrufs oder die Operanden eines Operators müssen in
kompatiblen Typen angegeben werden. Bei Zuweisungen
müssen eine Variable (die linke Seite) und der Ausdruck oder
Wert, den Sie ihr zuweisen, kompatible Typen haben. Und einen Ausdruck oder ein Wert, der mit dem Schlüsselwort return zurückgeliefert wird, muss dem Typ der Funktion entsprechen.
Außerdem speichert die AVM2 Typinformationen für alle Variablen, die mit einem Typ deklariert werden. In vorherigen Versionen von ActionScript hat der Compiler zur Kompilierzeit
Typprüfungen durchgeführt, aber unter der AVM1 waren alle
Objekte dynamisch typisiert. So konnten Sie den Typ von Variablen zur Laufzeit verändern und damit die Compiler-Prüfungen umgehen, beispielsweise indem Sie eine Variable über
einen Suchvorgang referenzierten. Die AVM2 kann Typsicherheit auch zur Laufzeit erzwingen. Inkompatible Typzuweisungen lösen dann eine TypeError -Exception aus. Das sind
gute Nachrichten, weil inkompatible Zuweisungen, die andernfalls stillschweigend scheitern können – und später Fehler verursachen und Sie zu Nachforschungen veranlassen –,
jetzt unmittelbar identifizierbar sind.
Den Typ eines Werts können Sie mit dem is -Operator untersuchen. Der is -Operator ersetzt den instanceof -Operator von
ActionScript 2 und bietet die gleiche Funktionalität wie der
instanceof -Operator von Java. Betrachten Sie folgenden Ausdruck:
a is B
è Inhalt
Schnelleinstieg in Flex 2
a ist ein Objekt von Typ A , und B ist ein Typ. Der Ausdruck liefert true , wenn B gefunden werden kann, indem der Typhierarchie von A nach oben, d.h. in Richtung von Object , gefolgt
wird. Beispielsweise gilt a is B , wenn:
• A die gleiche Klasse ist wie B
• A B erweitert
• A B implementiert
• A eine Kombination aus Obigem ist, z.B. A s Super-Superklasse B implementiert
Weiter oben habe ich den Grundgedanken kompatibler Typen
erwähnt. Ein Typ ist mit allen Typen kompatibel, die sich in der
gleichen Typhierarchie befinden und allgemeiner sind. Beispielsweise ist Dessert allgemeiner als Cupcake. Sie könnten auf
einen bestimmten Cupcake (das ist übrigens eine Art Muffin)
also problemlos als ein Dessert verweisen. ActionScript 3.0
lässt Sie ohne Schwierigkeiten Werte Variablen eines allgemeineren Typs zuweisen. Sie könnten also leicht Folgendes
machen:
public function eatDessert(somethingTasty:Dessert):void
{
trace("hmm ... das ist gut " +
somethingTasty.toString());
}
var chocolateCupcake:Cupcake = Magnolia.getCupcake
("Schokolade");
ActionScript 3.0
eatDessert(chocolateCupcake); //chocolateCupcake wird als
//Dessert behandelt.
trace(chocolateCupcake is Dessert); //true
Dieses Beispiel übergibt einer Funktion, die ein Dessert erwartet, einen Cupcake. Aber die Typen sind kompatibel und
der Code damit gültig. Eine andere Situation, in der Typen
kompatibel sind, ist, wenn AS3 weiß, wie man einen Typ in einen anderen umwandelt. In bestimmten Situationen führt
AS3 automatisch diese Typerzwingung durch, zum Beispiel:
var coerce:String = "Party like it's " + 2099;
Das zwingt den Integer 2099 zu einem String, den der + -Operator in einem String-Kontext erwartet.
Es ist eine erwünschte Praxis in der objektorientierten Programmierung, gegen Schnittstellen und nicht gegen Implementierungen zu programmieren. Wenn Sie all Ihren Variab­
len den Typ IEdible geben, wie erhalten Sie dann einen
C­ upcake zurück, wenn Sie einen brauchen? Gelegentlich ist es
erforderlich, Typen in die spezifischeren Typen umzuwandeln,
und AS3 ermöglicht Ihnen, das mit zwei Arten expliziter Typumwandlung zu erreichen: einem Cast und einem bedingten
Cast.
Casting zwingt Variablen des einen Typs, einen anderen Typ
anzunehmen. Um das Ergebnis dieser Operation einzufangen,
sollten Sie es einer neuen Variablen des gewünschten Typs
zuweisen, zum Beispiel
var cupcake:Cupcake = Cupcake(somethingTasty);
TecFeeds © 2007 by O’Reilly Verlag
16
è Inhalt
Schnelleinstieg in Flex 2
Java- und C-Entwickler sollten auf die Klammern achten, die
den Ausdruck, nicht den Typ umgeben. Wenn diese Typumwandlung unmöglich ist, das heißt, wenn das Objekt, das Sie
casten, nicht tatsächlich den Typ hat, den Sie anfordern, oder
mit dem von Ihnen angeforderten Typ nicht kompatibel ist,
wird ein TypeError ausgelöst. In diesem Beispiel muss Ihr somethingTasty , das aktuell den Typ Dessert hat, ursprünglich ein
Cupcake gewesen sein.
var cupcake:Dessert = new Cupcake(); //einen Cupcake als
//Dessert verwenden, OK
var baklava:Dessert = new Baklava(); //eine Baklava als
//Dessert verwenden, OK
Cupcake(cupcake).addSprinkles(); //OK, weil es sein Leben als
//Cupcake begonnen hat.
Cupcake(baklava).addSprinkles(); //NICHT OK! Baklava ist mit
//Cupcake nicht kompatibel!
Der as -Operator führt einen bedingten Cast durch. Wenn die
angeforderte Typumwandlung nicht möglich ist, liefert der
Ausdruck einfach null zurück, anstatt einen TypeError auszulösen. Das hat Ähnlichkeiten mit einem dynamic_cast in C++
und dem Identitätsoperator in C#. Außerdem entspricht es
mehr oder weniger dem Verhalten von Casts unter ActionScript 2. Wenn Sie das Ergebnis eines bedingten Casts nicht
prüfen können oder bereits geprüft haben, dass die Typen
kompatibel sind, sollten Sie stattdessen einen normalen Cast
verwenden. Auf diese Weise können Sie eventuelle Probleme
als Exceptions abfangen. Außerdem ermöglichen es die be-
TecFeeds © 2007 by O’Reilly Verlag
ActionScript 3.0
17
sonderen Eigenschaften des as -Operators, kreativ kompakten
Code wie in diesem Beispiel zu erstellen:
var cookie:Cookie;
for each (var dessert:Dessert in desserts)
{
//Den as-Operator verwenden, um alle Cookies in einer
//Dessert-Liste zu frosten.
//Liefert null, wenn der Cast scheitert, und überspringt
//dann den if-Block.
if (cookie = dessert as Cookie)
{
cookie.frost();
}
}
Es ist hier auch erwähnenswert, wie sich ActionScript 3.0 um
Initialisierungswerte kümmert. Wenn einer Variablen kein
Wert zugewiesen wurde, sie aber einen bestimmten Typ hat,
ist der Standardwert von diesem Typ abhängig. Ein int , dem
kein Wert zugewiesen wurde, hat beispielsweise den Wert 0 ,
eine Number , der kein Wert zugewiesen wurde, den Wert NaN ,
und alle komplexen Typen haben den Standardwert null .
Kerntypen, die Standardwerte haben, kann nicht null oder undefined zugewiesen werden. Der Wert undefined existiert noch,
aber nur, um nicht typisierte Variablen, denen nichts zugewiesen wurde, zu repräsentieren. Im Allgemeinen können AS2Entwickler, die zu AS3 wechseln, die verwirrenden Unterschiede zwischen undefined und null vergessen und bei null
bleiben.
è Inhalt
Schnelleinstieg in Flex 2
Pakete und Klassen
Pakete sind ein Mittel, Code zu organisieren und Namenskollisionen zu vermeiden. In ActionScript 2 würden Sie die Klassendateien in eine Ordnerstruktur packen, die ihren vollständig qualifizierten Klassennamen definiert. Beispielsweise
würde die Klasse com.partlyhuman.Banana in der Datei com/
partlyhuman/Banana.as definiert. In ActionScript 3.0 sind Pakete mehr als Dateinamen. Sie müssen den package -Block verwenden, um Pakete zu deklarieren, und nur Code, der innerhalb eines Paketblocks gefunden wird, ist außerhalb einer Datei sichtbar. Pakete werden auch eingesetzt, um den Zugriff
zu steuern, wie Sie bei internal gesehen haben.
Klassen werden in einem class -Block definiert. Um Ihre Klassen außerhalb der Datei sichtbar zu machen, in der sie geschrieben wurde, müssen Sie sie in einem geeigneten Paketblock einfügen und als public deklarieren:
//in Datei com/partlyhuman/Banana.as
package com.partlyhuman
{
public class Banana
{
}
}
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
ActionScript 3.0
18
Element spiegeln. Elemente, die in einem Paketblock deklariert werden, dürfen nur die folgenden beiden Zugriffsmodifizierer tragen: public und internal.
Üblicherweise schreiben Sie Dateien mit einem Paketblock,
der eine öffentliche Klasse oder Funktion enthält. Eine Ausnahme bildet die gebräuchliche Implementierung des Singleton-Musters, das globalen Zugriff auf eine einzige Instanz bietet und die Instantiierung weiterer Instanzen verhindert. Weil
AS3 keine privaten Konstruktoren erlaubt, erfordert das Muster, dass ein Objekt an den Konstruktor übergeben wird, dessen Typ nur in dieser Datei sichtbar ist, damit zu dieser Klasse
externer Code nicht dazu in der Lage ist, ein geeignetes Argument an den Konstruktor zu übergeben. Das macht den Konstruktor so gut wie privat:
package com.partlyhuman
{
public class SingletonDemonstration
{
private static var instance:SingletonDemonstration;
public function SingletonDemonstration(enforcer:
SingletonEnforcer)
{
//Initialisierungscode
}
è Inhalt
Schnelleinstieg in Flex 2
public static function getInstance():
SingletonDemonstration
{
if (instance == null)
{
instance = new SingletonDemonstration(new
SingletonEnforcer());
}
return instance;
}
}
}
class SingletonEnforcer {}
ActionScript 3.0 unterstützt ähnliche Vererbungsmuster wie
Java. Klassen können eine Klasse erweitern und mehrere Inter­
faces implementieren.
public interface IPoppable
{
function pop():void
}
public interface IInflatable
{
function inflate():void
}
public class Balloon implements IPoppable, IInflatable
{
public function Balloon()
TecFeeds © 2007 by O’Reilly Verlag
ActionScript 3.0
19
{
//Ballon initialisieren
}
public function pop():void
{
//Sie müssen die Methoden aller Interfaces
//implementieren. Methoden aus einem Interface sind
//immer öffentlich.
}
public function inflate():void
{
//aufblasen
}
}
public final class Blimp extends Balloon
{
public function Blimp()
{
//den Superklassenkonstruktor aufrufen
super();
//noch mehr nette Sachen machen
}
public function fly():void
{
//Ein Blimp ist wie ein Ballon, der fliegen kann,
//oder was Ähnliches.
}
}
è Inhalt
Schnelleinstieg in Flex 2
Hier wurde eine Balloon -Klasse erzeugt, die die Operationen
unterstützt, die in den Interfaces IPoppable und IInflatable
definiert werden. Diese Interfaces können nur Methoden definieren, und Sie müssen die Sichtbarkeit der Methoden nicht
angeben: Alle müssen als public implementiert werden.
Abstrakte Klassen oder virtuelle oder abstrakte Methoden
sind nicht Teil von AS3. Sie können Abstraktheit zur Laufzeit
erzwingen, indem Sie im Konstruktor Ihrer abstrakten Klasse
oder in Ihrer abstrakten Methode Fehler auslösen.
Das Beispiel oben zeigt auch ein Beispiel einer finalen Klasse.
Finale Klassen können nicht erweitert werden. Sie sind die
letzten Klassen in ihrer Klassenhierarchie. Das verhindert, dass
irgendjemand Ihren hart erarbeiteten Blimp -Code nimmt und
zum Bösen wendet, indem er MissileBlimps und LaserBlimps
erzeugt. In der Realität kann das für Klassen benutzt werden,
die zur Verwendung angeboten werden, aber nicht erweitert
werden sollen, beispielsweise flash.system.Security .
Klassen können auch als dynamic deklariert werden. Wird
dieses Schlüsselwort nicht verwendet, sind Klassen versiegelt:
Ihre Eigenschaften und Methoden sind in Stein gemeißelt
und können zur Laufzeit nicht verändert werden. Mit dynamic
können Sie zur Laufzeit auf die Eigenschaften und Methoden
von Klassen zugreifen und diese verändern. Das kann nützlich
sein, um einfache Wrapper für Daten zu erzeugen, beispielsweise um beliebige Daten in Object-Instanzen zu speichern.
Dynamische Klassen können aus einigen der Optimierungen
der AVM2 keinen Vorteil ziehen. Nutzen Sie sie also nur, wenn
es erforderlich ist.
TecFeeds © 2007 by O’Reilly Verlag
ActionScript 3.0
Methoden und Eigenschaften
Fügen wir der Klasse Blimp noch etwas hinzu:
public final class Blimp extends Balloon
{
private const TAKEOFF_PRESSURE:Number = 10000;
private var currentPressure:Number;
public function Blimp()
{
super();
currentPressure = 100;
}
override public function pop():void
{
//Schiff verlassen!
}
override public function inflate():void
{
//auf gleiche Weise aufblähen wie einen Ballon
//und eigene Verhalten ergänzen
super.inflate();
if (currentPressure >= TAKEOFF_PRESSURE) fly();
}
public function fly():void
{
//flieg, flieg, majestätischer Blimp!
}
}
20
è Inhalt
Schnelleinstieg in Flex 2
In AS3 wurden ein paar neue Features eingeführt, die hier demonstriert werden. ActionScript 3.0 schließt einige Konstanten ein, Variablen, deren Wert nicht verändert werden kann.
Der Compiler hält Sie auf, wenn Sie versuchen, eine zweite
Zuweisung zu einer Konstanten oder eine Zuweisung von außerhalb der Klassendefinition zu machen. Die inflate() -Methode von Blimp nutzt die Konstante TAKEOFF_PRESSURE , um zu
prüfen, ob der Blimp abhebebereit ist. Konstanten werden mit
dem Schlüsselwort const statt dem Schlüsselwort var deklariert.
Vielleicht ist Ihnen auch aufgefallen, dass die Methode pop()
als override und als public gekennzeichnet ist. ActionScript
3.0 erlaubt Ihnen, Methoden zu schreiben, die auch in der Superklasse vorhanden sind. Aber Sie müssen dem Compiler mit
dem Schlüsselwort override bestätigen, dass Sie diese Methode bewusst überschreiben. Die überschreibende Methode
kann die ursprüngliche Implementierung aufrufen, indem sie
die gleiche Methode auf dem super -Objekt aufruft, das eine
Referenz auf die Superklasse der Klasse ist. Die Signatur der
überschreibenden Methode muss vollständig der Signatur
der überschriebenen Methode entsprechen. ActionScript 3.0
unterstützt nur eine Methode mit dem gleichen Namen. Das
bedeutet, dass Sie keine Überladungen machen können, bei
denen eine Methode auf Basis der Eingaben unterschiedliche
Operationen ausführen kann. Allerdings können Sie immer
eine variable Argumentliste verwenden (siehe unten), um das
zu erreichen.
TecFeeds © 2007 by O’Reilly Verlag
ActionScript 3.0
21
Statische Variablen oder Klassenvariablen sind in ActionScript
3.0 wie in AS2 möglich. Statische Variablen werden mit dem
Schlüsselwort static deklariert. Diese Variablen gehören zur
Klasse selbst und sind über alle Instanzen einer Klasse gleich.
Das könnte in Ihrem Blimp verwendet werden, um Eigenschaften zu speichern, die in allen Blimps gleich sein sollten,
wie die Anzahl der Räder oder die Landevorrichtung.
ActionScript 3.0 unterstützt implizite wie explizite Akzessormethoden. Explizite Akzessormethoden sind gewöhnliche
Methoden, die Werte abrufen oder setzen. Ein Beispiel dafür
wäre, wenn die Klasse Blimp setAltitude() - und getAltitude() Methoden hätte, die die interne Höhe des Blimps manipulieren. Akzessormethoden bieten eine Alternative zur Deklaration öffentlicher Instanzvariablen und geben Ihrer Klasse die
Möglichkeit, den zu setzenden Wert zu prüfen oder zusätzliche Operationen auszuführen, wenn der Wert gesetzt wird.
Das ist eine gute Praxis, der Sie folgen sollten, um die Kapselung zu wahren. Implizite Akzessormethoden ermöglichen es
Clientcode, die Illusion aufrechtzuerhalten, eine Eigenschaft
direkt auf Ihrer Klasse zu setzen, und erlauben Ihnen trotzdem, in den Vorgang einzugreifen. An Stelle von
public function setAltitude(newAltitude:Number):void {…}
public function getAltitude():Number {…}
myBlimp.setAltitude(10);
è Inhalt
Schnelleinstieg in Flex 2
könnten Sie implizite Akzessormethoden verwenden, indem
Sie Folgendes schreiben:
public function set altitude(newAltitude:Number):void {…}
public function get altitude():Number {…}
myBlimp.altitude = 10;
Schließlich unterstützt ActionScript 3 Methoden-Closures
oder gebundene Methoden. Eine Closure ist eine Funktion,
die auf Variablen im umgebenden Block verweisen kann, egal
von wo sie aufgerufen wird. Das ist, als würden Sie eine Funktion in einen eigenen Geltungsbereich einpacken. Vielen AS2Entwicklern wird Code wie der folgende vertraut sein:
var closure:Function = Delegate.create(this, doFoo);
der eine Closure erzeugt. Jedes Mal, wenn Sie closure() ausführen, wird doFoo() im ursprünglichen Geltungsbereich aufgerufen, aus dem Sie Delegate.create() aufgerufen hatten. In
AS3 sind alle Methoden in einer Klasse ohne weitere Arbeit
an diese Klasse gebunden. Selbst wenn Sie diese Methoden
aus einem Event-Handler oder über eine Referenz auf die Methode aufrufen, die als Funktion übergeben wurde, kann die
Methode also auf die Methoden und Eigenschaften der Besitzerklasse zugreifen.
Argumente
Der ActionScript 3.0-Compiler erzwingt, dass Ihre Funktionsaufrufe den Signaturen der Funktionen entsprechen. Im
Allgemeinen müssen Parameter in der richtigen Reihenfolge
TecFeeds © 2007 by O’Reilly Verlag
ActionScript 3.0
22
stehen, kompatible Typen haben, und es dürfen keine Parameter fehlen. ActionScript 3.0 ergänzt allerdings einige Werkzeuge, die es ermöglichen, diese Anforderungen zu entspannen und Bequemlichkeit sowie Flexibilität liefern.
Standardwerte sind eine neue Ergänzung zu ActionScript, die
aus der C++-Welt stammt. Sie können einige Parameter für
Ihre Funktion optional machen, indem Sie direkt in der Argumentliste Standardwerte für diese Argumente deklarieren.
Beispielsweise könnten Sie eine komplexe Operation mit vielen Optionen haben:
function makeDagwood(layers:int, meat:String, cheese:String,
bread:String, mayo:Boolean,
mustard:Boolean, lettuce:Boolean):
Sandwich {…}
Sie wollen zwar, dass Benutzer vollständige Kontrolle über ihr
Sandwich haben, wollen Ihren Code aber auch kompakt halten und geben vernünftige Standardwerte vor:
function makeDagwood(layers:int, meat:String, cheese:String,
bread:String, mayo:Boolean = true,
mustard:Boolean = true, lettuce:
Boolean = true):Sandwich {…}
Wenn ein Kunde mit den Beilagen auf seinem Sandwich zufrieden ist, kann er den Funktionsaufruf einfach halten:
makeDagwood(3, "Turkey", "Muenster", "Wheat");
//standardmäßig keine Beilagen
è Inhalt
Schnelleinstieg in Flex 2
makeDagwood(3, "Roast Beef", "Swiss", "Rye", false, false,
true); //keine Mayo, kein Senf
Alle Parameter mit Standardwerten müssen am Ende der Argumentliste stehen und sind beim Funktionsaufruf dann optional.
Sie können auch eine Funktion definieren, die eine variable
Anzahl von Argumenten annimmt. Das arguments -Array von
ActionScript 2 gibt es noch. Jedes Function -Objekt enthält die
Eigenschaft arguments , die ein Array aller Parameter ist, die der
Funktion übergeben wurden. ActionScript 3.0 verlangt allerdings, dass Sie Ihre Parameter ordentlich angeben, deswegen
wurde das Schlüsselwort ... eingeführt. Es ermöglicht Ihnen,
ein paar Parameter zu verlangen und nach ihnen eine beliebige Zahl weiterer Parameter zuzulassen.
function addSandwichRecipe(sandwichName:String,
... layers):void {…}
Innerhalb von addSandwichRecipe() enthält das Array layers
alle zusätzlichen Parameter, die der Funktion übergeben wurden. Sie können jeden gültigen Bezeichner verwenden, um
die zusätzlichen Parameter zu speichern. Ein typischer Name
für dieses Array ist rest . Gelegentlich hören Sie deswegen
vielleicht, dass das Schlüsselwort ... als das Rest-Schlüsselwort bezeichnet wird. Weil es vor dem Rest-Schlüsselwort ein
normales Argument gibt, erfordert diese Methode einen Rezeptnamen:
TecFeeds © 2007 by O’Reilly Verlag
ActionScript 3.0
23
addSandwichRecipe("PB&J", bread, peanutButter, jelly,
bread);
addSandwichRecipe("The English King", englishMuffin,
peanutButter, banana, honey);
addSandwichRecipe("The Ultra Slim"); //Das ist zulässig! Es
//muss ein Luft-Sandwich sein.
Eine letzte Bemerkung zu Parametern für ActionScript 2-Entwickler: Um Funktionen anzugeben, die null Parameter verlangen, verwenden Sie function foo() und nicht function
foo(Void) wie unter AS2.
Events
ActionScript 3.0 bietet Ihnen ein einheitliches, eingebautes
und standardbasiertes Event-Framework, über das Sie Ihre
Anwendung über Benutzereingaben steuern und Ihre kollaborierenden Klassen entkoppeln können.
Mit der Methode addEventListener() können Sie Events abonnieren. Diese Methode wird von allen Klassen definiert, die
IEventDispatcher implementieren, und dazu zählt eine ganze
Menge von Klassen. Das neue Event-Modell ersetzt alle Callback-Methoden aus früheren ActionScript-Versionen. Beispielsweise nutzen wir das Event-Modell, um die onClick() Funktion auf einem Button zu definieren:
myButton.addEventListener(MouseEvent.CLICK, onButtonClicked);
function onButtonClicked(event:MouseEvent):void
{
myButton.label = "Hör mit der Klickerei auf!";
è Inhalt
Schnelleinstieg in Flex 2
myButton.removeEventListener(MouseEvent.CLICK,
onButtonClicked);
}
Die erste Zeile richtet einen Event-Listener für einzelne Klicks
auf dem Butten myButton ein. Bei Anklicken des Buttons wird
die Methode onButtonClicked() aufgerufen. Beachten Sie, dass
die Event-Handler-Methode, die Sie bei einem Event-Listener
registrieren, ein Event als Parameter akzeptieren muss. In diesem Fall wissen wir, dass das Event ein MouseEvent sein wird,
und geben event den Typ MouseEvent , eine Subklasse von
Event .
Eine einfache, aber entscheidende Verbesserung in den eingebauten Events ist, dass AS3 Konstanten verwendet, um alle
Event-Typen zu definieren. Hier repräsentiert MouseEvent.CLICK
einen Event-Typ, der überwacht werden soll. Aber dieser
Event-Typ ist einfach ein String. Irgendwo in der Klasse Mouse­
Event steht:
public static const CLICK:String = "click";
Über die ganze neue AS3-API verteilt und insbesondere in
den Event-Paketen werden Sie sehen, dass magische Strings
durch Konstanten ersetzt werden. Wenn Sie Konstanten verwenden, kann der Compiler Tippfehler abfangen, bevor sie zu
Fehlern werden.
Zurück zu unserem Button-Beispiel: Vielleicht ist Ihnen auch
aufgefallen, dass der Event-Handler, onButtonClicked() , auf myButton statt auf this verweist. Auch wenn die Funktion durch
TecFeeds © 2007 by O’Reilly Verlag
ActionScript 3.0
24
einen Klick auf myButton angestoßen wurde, wird sie immer
noch im Geltungsbereich des Codes ausgeführt, in dem sie
hinzugefügt wurde. ActionScript 3.0 erzeugt eine gebundene
Methode für sie, wenn Sie addEventListener() aufrufen, und
bindet die Listener-Funktion an ihren Eigentümer; damit wird
das Schreiben von Event-Handlern intuitiver. Schreiben Sie sie
einfach wie jede andere Methode und referenzieren Sie sie,
ohne Delegate.create() zu verwenden. Das Objekt, das das
Event absetzt, ist immer über event.target verfügbar.
Das Beispiel zeigt auch, wie man einen Event-Listener entfernt, nachdem das Label des Buttons verändert wurde. Es ist
wichtig, dass Sie Ihre Event-Listener bereinigen, wenn sie
nicht mehr gültig sind. Sollten Sie vergessen, einen Event-Listener zu entfernen, wird das Objekt nicht durch die Garbage
Collection erfasst und kann weiterleben und Speicherplatz
verschwenden. Diese nicht eingesammelten Objekte können
sich häufen und nach und nach Auswirkungen auf die Leistung Ihrer Anwendung haben.
Um diesen Effekt, eine Art von Speicherleck, zu vermeiden, ermöglicht Ihnen ActionScript 3.0, einen Event-Listener mit einer schwachen Referenz anzuknüpfen, die es erlaubt, dass das
Objekt auch dann gelöscht wird, wenn der Event-Listener
nicht explizit entfernt wurde. Um eine schwache Referenz zu
aktivieren, übergeben Sie true an den letzten Parameter von
addEventListener() , weakRef :
myButton.addEventListener(MouseEvent.CLICK, onButtonClicked,
false, 0, true);
è Inhalt
Schnelleinstieg in Flex 2
Das ActionScript 3.0-Event-Modell ist eng an die Anzeigeliste
gebunden. Events durchlaufen drei Phasen, nachdem sie abgesetzt wurden. Das verschafft Ihnen eine feinstufige Steuerung darüber, wann und wo Sie sie einfangen und auf sie reagieren wollen. Gemeinsam werden diese drei Phasen als
Event-Flow bezeichnet. Stellen Sie sich das als eine Reise vor,
die Ihr Event durch die Anzeigeliste macht und bei der Sie an
jedem Punkt der Reise die Möglichkeit haben, es abzufangen,
zu untersuchen und eventuell sogar anzuhalten.
Ich denke, dass der Event-Flow so was wie das Bubble BobbleSpiel ist, das in Abbildung 2 gezeigt wird. In Bubble Bobble
steuern Sie einen kleinen Drachen, der die Fähigkeit hat,
kleine Blasen nach vorn zu blasen. Wenn Sie sich auf einer Linie mit einem Feind befinden und Ihre Blase weit genug
kommt, um ihn zu treffen, wird der Feind in der Blase eingeschlossen. Dann schwebt die Blase mit dem hilflosen Feind an
den oberen Rand des Bildschirms und wartet darauf, dass Sie
sie platzen lassen. Wäre dieses Spiel der Event-Flow, wäre der
Feind der Gegenstand eines Events. Das Spielfeld würde Ihre
Möglichkeiten repräsentieren, das Event zu untersuchen oder
zu unterbrechen.
Nehmen wir an, der Benutzer klickt auf einen Button. Erst blasen Sie eine Blase, die sich auf den Weg zum Feind macht. Das
wird als die Einfang-Phase bezeichnet. Im Flash Player reist
das Event in der Hierarchie der Anzeigeobjekte nach unten,
von der Wurzel der Anzeigeliste (der Bühne) bis zu dem Button, der angeklickt wurde. Wenn Sie einen Event-Listener für
die Einfang-Phase auf einem Objekt eingerichtet haben, das
TecFeeds © 2007 by O’Reilly Verlag
ActionScript 3.0
25
Abb. 2 Event-Bubbling ist wie Bubble Bobble: Es gibt Einfang-, Zielund Bubbling-Phasen.
ein Vorfahr des Buttons ist, können Sie auf den Klick reagieren, bevor der Button das macht, obwohl das Event eigentlich
für den Button gedacht ist.
Dann schließt die Blase den Feind ein. Das ist die Ziel-Phase.
Damit wird das target eines Event-Objekts auf diesen Button
gesetzt, und von jetzt an ist der Feind in der Blase eingesperrt. Wenn Sie den Button direkt abonniert haben, ohne die
Einfang-Phase anzugeben, ist das der Punkt, an dem Sie das
Event erhalten. Das ist der gradlinigste Weg, mit Events umzugehen, und der, der ActionScript 2-Entwicklern am vertrautesten ist.
Schließlich steigt die Blase in der Bubbling-Phase auf dem
Bildschirm nach oben auf. Während im Event immer noch das
richtige target gesetzt ist, steigt das Event wieder zur Wurzel
des Anzeigebaums auf, damit die Vorfahren des Buttons eine
Möglichkeit erhalten, das Event zu untersuchen oder zu verwenden. Dieses Bubbling erfolgt automatisch, wenn die bubb­
les -Eigenschaft Ihres Events true ist. Die Bubbling-Phase ist
nützlich, wenn Sie ein eigenes Event an die Außenseite eines
è Inhalt
Schnelleinstieg in Flex 2
komplexen Subsystems übergeben möchten. Nehmen wir an,
das alarm -Event wird von einem vibrierenden Quarzkristall in
Ihrer Uhr ausgelöst. Ohne zusätzliche Arbeiten auszuführen
oder das Gehäuse Ihrer Uhr zu zerbrechen, um den Quarz direkt zu betrachten, können Sie informiert werden, dass es Zeit
für einen Snack ist, wenn Sie sich dafür bei Ihrer Uhr registrieren. Das Alarm-Event steigt vom Quarzkristall zur Uhr auf.
Während jeder dieser Phasen können viele Events mit den
Methoden stopPropogation() und stopImmediatePropogation()
abgebrochen werden. Das ist, als würde Ihr Drache die Blase
mit seinem stacheligen Rücken zum Platzen bringt, um zu sichern, dass andere Spieler sie nicht erreichen können. Das
Event muss allerdings als cancelable deklariert sein. Es gibt
also einige harte Blasen, die Sie nicht zum Platzen bringen
können.
Reflection
ActionScript 3.0 bietet Reflection-Features. Reflection ist eine
Einrichtung, die es einem Programm ermöglicht, sich zur Laufzeit seines Verhaltens bewusst zu sein und es zu verändern,
insbesondere durch die Entdeckung und Erzeugung von Objekten und ausführbaren Konstrukten.
Frühere Versionen von ActionScript ermöglichten Ihnen eine
rudimentäre Reflection, indem die verfügbaren Methoden einer Klasse mit einer for...in -Schleife aufgelistet wurden und
die Eigenschaften und Methoden von Klassen über den Namen in einer Notation mit eckigen Klammen angegeben wurden, beispielsweise obj["method"]() . In ActionScript 3.0 kön-
TecFeeds © 2007 by O’Reilly Verlag
ActionScript 3.0
26
nen Sie über die Notation mit den eckigen Klammern immer
noch dynamisch auf Eigenschaften zugreifen. Allerdings
durchläuft eine einfache Schleife nur noch die dynamisch
hinzugefügten Eigenschaften.
Diese Art von Reflection, Introspektion, bietet zur Laufzeit Informationen zu Typen und Objekten. AS3 stellt viel bessere
Werkzeuge für die Introspektion zur Verfügung. Die Funktion
flash.utils.describeType(classOrClassInstance) bietet Ihnen
zu der übergebenen Klasse beinahe lächerlich ausführliche
Informationen in XML, die die vollständige Typhierachie, Methoden und Parameter mit Typen, Eigenschaften und Akzessormethoden einschließt. Die Klasse mx.utils.ObjectUtil bietet außerdem eine getClassInfo() -Funktion, die so ziemlich
das Gleiche macht.
Neben der Entdeckung von Informationen zu einer Klasse, auf
die Sie bereits eine Referenz halten, lässt AS3 Sie Klassen, Namensräume und Funktionen auf Grundlage von Strings suchen. Das kann äußerst mächtig sein, beispielsweise um einen
Anwendungszustand und Klassenabhängigkeiten zu Text zu
serialisieren und die Klassen dann aus Text zu rekonstruieren.
Hier speichern wir den Namen einer Anzeigeobjekt-Klasse
und erzeugen ein Objekt einer anderen allein auf Basis des
Klassennamens:
import flash.utils.*;
var mySprite:Sprite = new Sprite();
var className:String = getQualifiedClassName(mySprite);
trace(className); //flash.display.Sprite
è Inhalt
Schnelleinstieg in Flex 2
Alert; //Erzwingt die Kompilierung der Klasse, damit
//Laufzeitcode sie nutzen kann.
try
{
var ClassReference:Class = getDefinitionByName
("mx.controls.Alert") as Class;
addChild(new ClassReference());
} catch (error:ReferenceError) {
trace("Wir konnten diese Klasse nicht nachschlagen");
}
Beachten Sie, wie wir Klassen als Objekte speichern und sie
dann tatsächlich mit new instantiieren können.
Zusammenfassung
ActionScript 3.0 führt eine Menge neuer Fähigkeiten und eine
vollständig überarbeitete API ein, die gemeinsam Flex 2 möglich machen. Mit diesen Grundlagen können Sie jetzt anfangen
zu lernen, wie Sie das Flex-Framework und MXML einsetzen.
Was Flex mitbringt
Flex ist gut geeignet für Rapid-Prototyping. Beginnen wir also
damit, eine Anwendung aufzubauen. Das Ziel dieses Abschnitts
ist es, die Fähigkeiten zu illustrieren, die Flex 2 mit im Gepäck
hat, indem wir eine Anwendung entwickeln und dazu die vorhandene Menge an Flex 2-Komponenten verwenden.
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
27
Dieser TecFeed bietet keine Behandlung des Designmodus
von Flex Builder 2. Alle Beispiele können in den MXML-Editor
von Flex Builder 2 oder einen Texteditor Ihrer Wahl einge­
geben und mit dem Flex 2-SDK kompiliert werden.
Außerdem wird dieser TecFeed Sie an den wichtigsten Klassen schnuppern lassen, ist aber in keiner Weise ein erschöpfendes Handbuch. Ihre erste Adresse für Informationen rund
um die im Flex-Framework verfügbaren Klassen sollte die Flex
2-Dokumentation unter http://www.flex.org sein, die auch mit
Ihrem Exemplar des Flex Builder 2 gebündelt ist. Im Zweifelsfall gilt: RTFM!
Flex ist immer ActionScript
Wahrscheinlich sind Sie begierig darauf, endlich mit dem Programmieren anzufangen. Es gibt aber ein Konzept, das Ihnen
unglaublich helfen kann. Sie sollten es verstanden haben, bevor Sie Ihre erste Zeile MXML geschrieben haben: Flex ist immer ActionScript, auch MXML.
Wenn Sie Ihr Flex 2-Projekt kompilieren, werden Ihre MXMLDateien als Zwischenschritt auf dem Weg zu einem SWF tatsächlich in ActionScript 3.0-Dateien umgewandelt. Alles, was
Sie in MXML programmieren, können Sie in ActionScript programmieren. MXML ist eine eigenständige Sprache, aber Sie
können sie sich als eine andere Form vorstellen, ActionScript
zu schreiben. Im Folgenden finden Sie die Regeln, die MXML
definieren.
è Inhalt
Schnelleinstieg in Flex 2
Tag-Namen
Wenn Sie <mx:Button/> schreiben, reden Sie eigentlich nur
über die Klasse Button . Schreiben Sie drei <mx:Label/> , erhalten Sie drei Instanzen von Label .
Tags erzeugen Instanzen der Klasse, die durch den
Tag-Namen angegeben wird.
Tag-Attribute
Wenn Sie in ein Tag Attribute schreiben, setzen Sie die Attribute dieser Klasseninstanz: Eigenschaften, Event-Handler und
Effekt-Trigger. In Abbildung 3 erzeugt das Tag namens <mx:
Button/> eine Instanz der Klasse Button , setzt aber auch seine
label - und width -Eigenschaften und seine font-size - und
font-family -Styles.
Was Flex mitbringt
28
Blitz) oder einem Effekt-Trigger (blaues Leuchten) vervollständigt werden.
Die Attribute eines Tags werden zu Eigenschaften
der Instanz.
id-Attribut
Das wichtigste aller Attribute ist das Attribut id . Das Attribut
id kann auf jedem Tag gesetzt werden. Wie im (X)HTML DOM
ist die id eines Elements das Handle, über das Sie auf das Element zugreifen können. Aber weil Tags zu Klasseninstanzen
werden, wird die id zum Namen der Instanz. Weisen Sie einem
Tag so eine ID zu:
<Button id="mrClicker"/>
ist das das Gleiche, als würden Sie in der gleichen Datei Folgendes schreiben:
public var mrClicker:Button;
Abb. 3 Attribute der Klasse werden gesetzt, indem sie in das Tag
geschrieben werden.
Sie können die Autovervollständigungsfunktion von Flex Builder 2 einsetzen, um sich einen Hinweis auf den Typ des Attributs geben zu lassen, das vorgeschlagen wird. Oben könnten
die mit »c« beginnenden Attribute zu einer Eigenschaft (der
grüne Kreis), einem Style (lila Kasten), einem Event (gelber
TecFeeds © 2007 by O’Reilly Verlag
Die id eines Tags wird zum Namen einer öffentlichen
Eigenschaft, die diese Instanz enthält.
Geschachtelte Tags
In MXML ist das Schachteln eine Metapher für die Zusammensetzung. Das heißt, die folgenden beiden Zeilen repräsentieren das gleiche Konzept:
è Inhalt
Schnelleinstieg in Flex 2
<mx:Box><mx:Button/></mx:Box> <!-- einen Button in einer Box
erzeugen-->
(new Box()).addChild(new Button()); //einen Button in einer
//Box erzeugen
Flex Builder 2 unterstützt Sie sogar noch mehr, wenn Sie Ihren
Code im MXML-Editor schreiben. Nutzen Sie die Autovervollständigung, wenn sich der Cursor innerhalb eines Tags befindet, zeigt Flex Builder nur die Tags an, die an der aktuellen
Cursorposition innerhalb des Eigentümer-Tags zulässig sind.
Beispielsweise würde er in der Autovervollständigungsliste in
einem Button das Tag <mx:Button/> nicht zeigen, weil Sie in einen Button keinen anderen Button stecken können.
Was Flex mitbringt
29
<mx:Label text="My Label"/>
<mx:Label>
<mx:text>My Label</mx:text>
</mx:Label>
<mx:Label>My Label</mx:Label>
Alle hier angegebenen Labels sind identisch. Das letzte Beispiel illustriert eine Default-Eigenschaft. Wenn eine Komponente eine Default-Eigenschaft hat und Sie einen Klartextknoten in das Tag einschließen, wird dieser Text der DefaultEigenschaft zugewiesen. In diesem Fall ist die Default-Eigenschaft von Label text .
Klassen und Dateien
Kind-Tags werden Kind-Komponenten.
Attribut-Tags und Default-Eigenschaften
Jede MXML-Datei repräsentiert eine AS3-Klasse, bei der der
Name der Datei und der Ort in der Ordnerstruktur den Paketund Klassennamen definieren. Der Inhalt der MXML-Datei ist
das, was die Klasse erzeugen wird, wenn Sie sich entschließen,
sie zu instantiieren und anzuzeigen. Dieser Vorgang ist logisch. Betrachten Sie als Beispiel fr/louvre/MonaLisa.mxml :
Manchmal ist es nützlich, wenn man Attribute in ein Tag
setzt, statt sie als XML-Attribute anzugeben, beispielsweise
wenn das Attribut mehrere Zeilen Inhalt hat oder selbst weiteren Text enthält. Sie können jedes Attribut für ein Tag
durch ein Kind-Tag ersetzen, dessen Name der Attributname
ist. Sie können auf einen Blick sagen, wann ein Tag ein Attribut repräsentiert, weil der Tag-Name dann in Kleinbuchstaben notiert ist.
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
width="210" height="310">
<mx:toolTip>Die Mona Lisa, von Leonardo da Vinci
</mx:toolTip>
<mx:Image source="monalisa.jpg" width="100%"
height="100%"/>
</mx:Canvas>
TecFeeds © 2007 by O’Reilly Verlag
è Inhalt
Schnelleinstieg in Flex 2
Sie erzeugt die Klasse fr.louvre.MonaLisa und zeigt eine Gafik
mit einem Tooltip an (beachten Sie die Kleinbuchstaben:
toolTip ist eine Eigenschaft der Canvas -Instanz, keine eigenständige Klasse).
Das Wurzel-Tag jeder MXML-Datei ist die Klasse, die sie erweitert. Jede MXML-Datei muss ein Wurzel-Tag haben, also muss
jede Klasse, die von einer erzeugt wird, irgendetwas erweitern
– und wenn es Object ist. MonaLisa erweitert Canvas .
Jetzt, daSie eine MonaLisa -Klasse haben, können Sie außerdem
Instanzen von ihr erzeugen, entweder in MXML oder in
ActionScript. Indem Sie Gruppen von zusammenarbeitenden
Komponenten zusammen in Dateien platzieren, können Sie
Ihre Anwendung auf viele MXML-Dateien aufteilen, so wie Sie
einen Flash-Film in viele Klassen und MovieClips segmentieren können.
Sie könnten eine MonaLisa folgendermaßen in ActionScript
einschließen:
import fr.louvre.MonaLisa;
addChild(new MonaLisa());
Aber wenn Sie in einer MXML-Datei die richtige Klasse referenzieren wollen, müssen Sie in das Wurzel-Tag einen XMLNamensraum einschließen:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:louvre="fr.louvre.*">
<louvre:MonaLisa />
</mx:Application>
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
30
In MXML erfüllen XML-Namensräume ungefähr die gleiche
Aufgabe wie Importanweisungen in ActionScript.
XML-Namensräume
Ein Namensraum in XML dient dem gleichen Zweck wie ein
Paketname in ActionScript: Er dient dazu, Namenskollisio­
nen zu vermeiden und Klassen zu organisieren. Wahrscheinlich ist Ihnen das mx: -Präfix vor all den Tags für eingebaute
Flex 2-Komponenten aufgefallen. Es ist erforderlich, um anzugeben, dass die Tag-Namen in den MXML-Namensraum
gehören. Das gilt für alle Klassen, die von Flex 2 definiert
werden. Der mx -Namensraum wird automatisch definiert,
wenn Sie eine MXML-Anwendung in Flex Builder 2 erstellen.
Die Syntax für die Deklaration und Verwendung eines XMLNamensraums sieht folgendermaßen aus:
<rootTag xmlns:Präfix="URI oder Paket" … > <Präfix:childTag />
Das Präfix wird bei der Deklaration nach dem Doppelpunkt
angegeben. Bei der Verwendung geben Sie es vor dem Doppelpunkt an, um anzuzeigen, wo nach einer Klasse gesucht
werden soll. Ein XML-Namensraum muss einen eindeutigen
Bezeichner haben, der dem Compiler sagt, was er gerade vor
sich hat, da das Präfix willkürlich ist und von Ihnen frei angegeben werden kann. Wenn Sie http://www.adobe.com/2006/
mxml schreiben, zieht der Compiler nicht wirklich raus und
prüft diese URL. Sie wird nur genutzt, um festzustellen, dass
Sie den MXML-Namensraum referenzieren.
è Inhalt
Schnelleinstieg in Flex 2
Statt Ihre eigenen Schemata zu erzeugen oder auf eine URL
zu verweisen, nutzen Sie den Paketnamen, wenn Sie auf ein
Paket verweisen. Außerdem müssen Sie einen separaten Namensraum für alle Klassen in einem anderen Paket erzeugen. Wenn Sie die Klassen fruit.Apple , fruit.Orange und
cheese.Swiss haben, müssen Sie zwei Namensräume erzeugen: einen für fruit.* und einen für cheese.* . Sie nutzen den
Namensraum * , um auf das lokale Paket zu verweisen.
ActionScript hinzufügen
Sie können nicht nur Komponenten, die zusammenarbeiten,
zu einer funktionalen Einheit gruppieren, Sie können in eine
MXML-Datei in einem Script -Block auch ActionScript 3.0Code einbetten. Diese Blöcke sollten den Code in einem
CDATA-Abschnitt enthalten, um sicherzustellen, dass Sie
Dinge wie einen Kleiner-gleich-Vergleich nicht maskieren
müssen (denken Sie daran, dass MXML immer noch gültiges
XML ist). Code aus einem Script -Block wird in die Klasse eingefügt, die aus Ihrem MXML generiert wird, damit er im Geltungsbereich der umgebenden Klasse operieren kann. Die
Ausnahme bilden Importanweisungen, die in einen Script Block kommen (obwohl sie normalerweise in einem Paketblock außerhalb der Klasse erscheinen würden), zum Beispiel:
<mx:Script>
<![CDATA[
private function taunt():void
{
trace("BIN IN DEINER KLASSE UND ERGÄNZE EIN PAAR
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
31
METHODEN");
}
]]>
</mx:Script>
Objektorientierte Programmierung führt also Klassen ein, die
Daten und die Operationen auf diesen Daten vereinen. Deklarative Markup-Sprachen wie MXML können Daten, Operatio­
nen und sichtbare Schnittstellen vereinen. Wie, fragen Sie sich
vielleicht, kann man dann die Trennung der Verantwortlichkeiten bewahren, wo doch die Bewegung, die uns überhaupt
erst zu deklarativem Markup geführt hat, die Trennung von
Verhalten, Stil und Inhalt gepredigt hat. Die einfache Antwort
ist, dass die Trennung Ihrem eigenen Programmierstil und Ihrer Diskretion überlassen bleibt. Wie Sie sehen werden, ist
eine vollständige Trennung mitunter ein Irrweg und manchmal sogar gar nicht möglich.
Generiertes ActionScript betrachten
Sie können Einblick in die ActionScript-Dateien nehmen, zu
denen Ihr MXML kompiliert wird, um sie als Lernmittel zu
verwenden oder um seltenen Compiler-Fehlern oder -Warnungen auf den Grund zu gehen, die auf das generierte
ActionScript verweisen.
Übergeben Sie dem Flex-Compiler einfach das Argument
–keep . Beim nächsten Erstellen erscheinen die generierten
ActionScript 3.0-Dateien im Ordner generated/ .
Mehr Informationen zum Setzen von Compiler-Argumenten
finden Sie in der Flex-Dokumentation.
è Inhalt
Schnelleinstieg in Flex 2
Container und Komponenten
Um zu zeigen, wie sich Flex beim Aufbau von Anwendungen
hervortut, werden wir einen minimalistischen E-Mail-Client
zusammenbasteln, der tatsächlich E-Mails liest. Wir werden
mit einigen sehr kleinen Teilen der Anwendung beginnen
und sie dann ausbauen. Der Quellcode für das fertige Produkt
steht unter http://www.partlyhuman.com/books/flexshortcut/
zum Download bereit.
Application
Die erste Klasse, mit der Sie arbeiten werden, ist eine Application . Eine Subklasse von Application definiert eine neue Flex
2-Anwendung. Wir werden die Datei Mail.mxml mit einer leeren Application erzeugen. Unsere Klasse Mail erweitert also
Application und macht sonst nichts:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
</mx:Application>
Führen Sie diese Anwendung aus, sollten Sie einen leeren
Bildschirm sehen (mit dem Signaturgradienten von Flex 2 im
Hintergrund).
Panel
Wir beginnen mit dem Fenster zum Schreiben von E-Mails. Wir
können ein Panel , das ein Container mit ein paar Dekoratio­
nen für einen Titel und einem fensterartigen Rahmen ist, als
unser Verfassen-Fenster erzeugen:
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
32
<mx:Panel width="75%" height="75%" layout="vertical"
title="Neue E-Mail"/>
Für die meisten Breiten und Höhen können Sie Prozentwerte
oder numerische Werte angeben. Einfache Zahlen werden in
Pixeln gemessen, und Prozentwerte geben den Anteil des verfügbaren Platzes an. Wenn Sie in ActionScript Maße setzen,
werden für Pixelwerte die Attribute width und height verwendet. Sie müssen die separaten Parameter percentWidth und
percentHeight setzen, um Maße über Prozentwerte anzugeben.
Boxen
Boxen sind einfache Layoutelemente, die verwendet werden,
um Objekte zusammenfließen zu lassen. Sie können entweder
eine Box oder die spezifischeren Subklassen HBox und VBox verwenden. Eine HBox hat ein horizontal fließendes Layout: Wenn
Sie Elemente hinzufügen, fließen diese von links nach rechts
wie die Wörter auf einer Zeile oder wie in HTML, wenn der
display -Style auf inline gesetzt ist. Eine VBox hat ein vertikal
fließendes Layout: Wenn Sie Elemente hinzufügen, werden
diese von oben nach unten gestapelt wie Absätze oder aufeinanderfolgende HTML-Elemente, deren display -Styles auf
block gesetzt sind oder die durch <br/> -Tags getrennt werden.
Boxen und Panels sind beides Container, weil sie andere Komponenten enthalten oder anordnen sollen.
Eine VBox oder HBox kann aus einer Box erzeugt werden, indem die layout -Eigenschaft der Box auf vertical oder horizontal gesetzt wird. Ein paar weitere Container unterstützen
è Inhalt
Schnelleinstieg in Flex 2
die Eigenschaft layout , um sich automatisch wie eine Box zu
verhalten. Das haben wir beispielsweise oben gemacht, als
wir das Panel erstellt haben.
Erzeugen wir etwas, um die Box zu füllen, und kehren wir
dann zu nützlicheren Layouteigenschaften zurück.
Label
Wir beginnen damit, dass wir der E-Mail-Verfassen-Komponente An:- und Betreff:-Zeilen hinzufügen. Das Label ist ein
einzeiliges, nicht interaktives Textstück. Genau das Richtige
für die Beschriftung anderer Komponenten.
<mx:VBox width="100%" horizontalAlign="left">
<mx:Label text="An:"/>
<mx:Label text="Betreff:"/>
</mx:VBox>
Was Flex mitbringt
<mx:TextInput width="100%"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label text="Betreff:"/>
<mx:TextInput width="100%"/>
</mx:HBox>
</mx:VBox>
Wie in Abbildung 4 zu sehen, habe ich eine VBox eingesetzt,
um zwei Zeilen vertikal aufeinanderzustapeln, und zwei HBoxen, die die einzelnen Zeilen horizontal ausrichten. Jeder Container wird auf 100% skaliert, damit er die gesamte horizontale
Breite einnimmt. Ohne das würden alle Elemente ihre vom Inhalt abhängige Default-Größe oder ihre natürliche Größe annehmen.
Wir können Labels links oder rechts ausrichten oder zentrieren, indem wir den horizontalAlign -Style der VBox anpassen.
TextInput
Wir brauchen einen Ort, um diese Werte einzugeben. Fügen
wir neben den Labels also einige TextInput -Steuerelemente
hinzu. Ein TextInput ist ein Bereich, in den der Benutzer den
Cursor setzen und dann eine Zeile Text eingeben kann.
<mx:VBox width="100%">
<mx:HBox width="100%">
<mx:Label text="An:"/>
TecFeeds © 2007 by O’Reilly Verlag
33
Abb. 4 Das Beispiel bisher
è Inhalt
Schnelleinstieg in Flex 2
Das sieht ziemlich gut aus. Aber wahrscheinlich sollten wir
auch die linken Ränder der beiden Textfelder ausrichten. Wir
brauchen also so etwas wie eine Tabelle.
Was Flex mitbringt
34
bildung 5 sehen. Auf diese Weise können Sie flexible Layouts
erzeugen, die sich ausdehnen, um jede Breite auszufüllen, die
Sie ihnen geben.
Grid
Wir können die Zeilen der beiden HBoxen mit der Grid -Komponente in ein echtes Raster verwandeln:
<mx:Grid width="100%">
<mx:GridRow width="100%">
<mx:GridItem><mx:Label text="An:"/></mx:GridItem>
<mx:GridItem width="100%"><mx:TextInput width="100%"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%">
<mx:GridItem><mx:Label text="Betreff:"/></mx:GridItem>
<mx:GridItem width="100%"><mx:TextInput width="100%"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
Das Flex 2- Grid entspricht einer Tabelle in HTML: Grid entspricht <table> , GridRow entspricht <tr> und GridItem <td> .
All die 100% -Breiten, die Sie oben sehen, sind erforderlich, um
zu sichern, dass TextInput die gesamte GridRow einnimmt, die
GridRow das gesamte Grid füllt und das Grid die gesamte
Breite des Panel füllt, in dem es sich befindet, wie Sie es in Ab-
TecFeeds © 2007 by O’Reilly Verlag
Abb. 5 Die Verwendung eines Rasters führt zu nett ausgerichteten
Feldern.
Button
Sie haben in vorangegangenen Beispielen bereits eine Menge
Buttons gesehen – fügen wir dem Formular also ohne größere Umstände einen Abbrechen- und einen Senden-Button
hinzu.
Wir nutzen eine HBox mit 100% Breite und richten sie rechts
aus, um die beiden Buttons an der rechten Seite des Bildschirms zu platzieren:
è Inhalt
Schnelleinstieg in Flex 2
<mx:HBox width="100%" horizontalAlign="right">
<mx:Button label="Abbrechen"/>
<mx:Button label="Senden"/>
</mx:HBox>
Weil die HBox die gesamte Breite einnimmt und die Elemente
rechts ausgerichtet sind, bleiben die beiden Buttons auf der
rechten Seite des Panels, egal wie breit es gemacht wird.
TextArea
Natürlich können Sie keine E-Mails verfassen, wenn es keinen
Ort gibt, an dem Sie den Inhalt der E-Mail eingeben können.
Wir werden ein mehrzeiliges Texteingabefeld, eine TextArea,
hinzufügen, das dem <textarea> -Tag in HTML ähnelt. Weil das
Panel vertikal ausgerichtet ist, stecken wir die TextArea in die
Mitte zwischen die Eingabefelder und die Buttons. Wir wollen
außerdem, dass das Textfeld nicht nur horizontal, sondern
auch vertikal den gesamten verfügbaren Raum einnimmt. Die
Eingabefelder und die Buttons haben eine festgelegte Höhe,
aber da der Container vertikal wächst, sollten Sie vertikal
mehr Platz für den Inhalt Ihrer Nachricht erhalten:
<mx:TextArea width="100%" height="100%"
verticalScrollPolicy="auto"/>
Wie Sie wahrscheinlich erraten haben, steuert verticalScrollPolicy die Verwendung vertikaler Scrollleisten auf der Text­
Area. auto sorgt dafür, dass die Scrollleiste nur angezeigt wird,
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
35
wenn sie benötigt wird (wenn es in der TextArea mehr Text
gibt, als in die aktuelle Größe passt).
ColorPicker und Slider
Fügen wir ein paar einfache Steuerelemente hinzu, mit denen
man das Erscheinungsbild des Textinhalts verändern kann.
Wir werden sie gemeinsam mit einigen Labels auf ein Zeile
setzen:
<mx:HBox horizontalGap="0" paddingTop="5" paddingBottom="5"
backgroundAlpha="0.1" backgroundColor="black">
<mx:Label text="color"/>
<mx:ColorPicker id="fontColorPicker"
selectedColor="black"/>
<mx:Label text="size"/>
<mx:HSlider id="fontSizeSlider" minimum="8" maximum="36"
snapInterval="1" liveDragging="true" value="10"/>
</mx:HBox>
Das Tag ColorPicker erzeugt einen Farbwähler mit einer Popup-Palette, wie man ihn aus dem Flash-Entwicklungswerkzeug
kennt. Sie können die Farben anpassen, die auf der Palette angezeigt werden, aber dieses Beispiel verwendet die Standardfarben. Die Tags HSlider und VSlider erzeugen Schieber, über
die Benutzer visuell einen Wert innerhalb eines Bereichs verändern können.
è Inhalt
Schnelleinstieg in Flex 2
Die zusätzlichen Eigenschaften im äußeren HBox-Tag sind
Styles, die das Erscheinungsbild dieser Zeile mit Steuerelementen setzen und sie visuell hervorheben. (Im nächsten Abschnitt werden Styles ausführlicher behandelt.) Wir landen
bei etwas, wie Abbildung 6 es zeigt.
Wir haben etwas aufgebaut, das ganz ordentlich aussieht.
Aber natürlich macht es bisher noch nichts. Sie können diese
Lobes-E-Mail erst erhalten, wenn der Absenden-Button funk­
tioniert.
Was Flex mitbringt
36
Scripting und Events
Es ist recht einfach, einer MXML-Komponente wie unserem
neuen E-Mail-Formular Verhalten hinzuzufügen. Es gibt keine
speziellen Verhalten, besondere Arten, Listener zu registrieren, magische Schlüsselwörter oder Zaubersprüche: Alle
Event-gesteuerten Verhalten sind einfach Teil des Event-Modells, das wir im letzten Kapitel besprochen haben.
Gehen wir eine einfache Aufgabe an und bringen den Abbrechen-Button dazu, alle Felder im Formular zurückzusetzen.
Erst werden wir sichern, dass das neue E-Mail-Formular in einer eigenen Komponente existiert. Dann werden wir den
Code zum Zurücksetzen der Felder schreiben. Schließlich werden wir MXML-Event-Handler nutzen, um die Funktion aufzurufen.
Vorbereitung
Abb. 6 Eine verfrühte Lobes-E-Mail verfassen
TecFeeds © 2007 by O’Reilly Verlag
Das neue E-Mail-Formular, das wir aufgebaut haben, wird
nicht nur die sichtbare Schnittstelle, sondern auch alle Verhalten enthalten, die für neue E-Mail-Formulare erforderlich sind,
mit anderen Worten: die erforderlichen Methoden. Jetzt sehen wir uns das Problem an: »Wo schreibe ich den Code für
das Zurücksetzen des Fomulars?« Statt alle Funktionen, die
wir für die verschiedenen Teile der Anwendung brauchen,
und alle Tags, die in der Anwendung eingesetzt werden
könnten, in eine gewaltige Datei zu packen, werden wir Kapselung und Trennung der Verantwortlichkeiten praktizieren,
indem wir alle verwandten Funktionen und Komponenten in
è Inhalt
Schnelleinstieg in Flex 2
eine Klasse stecken und dabei daran denken, dass jede
MXML-Datei eine Klasse ist.
All das Gerede bedeutet einfach nur, dass wir eine MXML­D atei, ComposeView.mxml , im Paket com.partlyhuman.books.flexshortcut.mail erstellen und das Panel und seinen Inhalt in
diese Datei verschieben. Als Wiederholung: Unsere ComposeView.mxml -Datei sollte so aussehen:
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
title="Neue E-Mail"
width="75%" height="75%" layout="vertical" paddingLeft="5"
paddingRight="5" paddingTop="5" paddingBottom="5">
<mx:Grid width="100%">
<mx:GridRow width="100%">
<mx:GridItem><mx:Label text="An:"/></mx:GridItem>
<mx:GridItem width="100%"><mx:TextInput
width="100%"/></mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%">
<mx:GridItem><mx:Label text="Betreff:"/>
</mx:GridItem>
<mx:GridItem width="100%"><mx:TextInput
width="100%"/></mx:GridItem>
</mx:GridRow>
</mx:Grid>
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
37
<mx:HBox horizontalGap="0" paddingTop="5"
paddingBottom="5" backgroundAlpha="0.1"
backgroundColor="black">
<mx:Label text="Farbe"/>
<mx:ColorPicker id="fontColorPicker"
selectedColor="black"/>
<mx:Label text="Größe"/>
<mx:HSlider id="fontSizeSlider" minimum="8"
maximum="36" snapInterval="1" liveDragging="true"
value="10"/>
</mx:HBox>
<mx:TextArea width="100%" height="100%"
verticalScrollPolicy="auto"/>
<mx:HBox width="100%" horizontalAlign="right">
<mx:Button id="resetButton" label="Abbrechen"/>
<mx:Button id="sendButton" label="Senden"/>
</mx:HBox>
</mx:Panel>
Und unsere Anwendungsdatei kann diese Klasse jetzt über
das entsprechende Tag referenzieren:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:mail="com.partlyhuman.books.flexshortcut.mail.*"
verticalAlign="middle" horizontalAlign="center">
<mail:ComposeView/>
</mx:Application>
è Inhalt
Schnelleinstieg in Flex 2
Was Flex mitbringt
38
Schreibmethoden
Event-Attribute in MXML verwenden
Erinnern Sie sich daran, dass ActionScript einer MXML-Klasse
über einen Script -Block hinzugefügt werden kann. Wir werden das nutzen, um eine Methode zu ergänzen, die das Formular zurücksetzt. Fügen wir den beiden TextInput-Feldern
und der TextArea id s hinzu, damit wir sie aus unserem Code
referenzieren können. Wir nennen sie toField , subjectField
und messageField . Wir werden unsere Methode zum Zurücksetzen des Formulars reset() nennen und ComposeView.mxml
folgenden Code hinzufügen:
Jetzt müssen wir uns nur noch darum kümmern, dass der Abbrechen-Button reset() aufruft, wenn er angeklickt wird.
Wenn Sie in MXML Komponenten erzeugen, können Sie TagAttribute einsetzen, um Event-Handler zu definieren. Geben
Sie das ActionScript einfach direkt innerhalb des Attributs an:
<mx:Script>
<![CDATA[
public function reset():void
{
toField.text = subjectField.text = messageField.text =
null;
}
]]>
</mx:Script>
Dieser Code setzt die text -Eigenschaft aller Felder auf null
und leert damit die Ansicht. Die Komponenten mit id wurden
zu öffentlichen Eigenschaften der Klasse, und alles im Script Block wird in die Klasse eingefügt. reset() wird also zu einer
Instanzmethode der Klasse, die Instanzvariablen der Klasse referenziert.
TecFeeds © 2007 by O’Reilly Verlag
<mx:Button label="Reset" click="reset()"/>
Das click -Attribut entspricht dem Event namens click . Wenn
der Button das click -Event absetzt, wird der Code ausgeführt,
der in MXML innerhalb des click -Event-Handlers angegeben
wurde. Haben Sie diesen Code angeknüpft, sollten Sie auf Abbrechen klicken und sehen können, wie alle Felder geleert
werden.
Code, den Sie in einem Event-Handler-Attribut schreiben,
läuft im Geltungsbereich der Klasse, nicht in dem des EventZiels. Sie haben in Code, den Sie in einem Event-Attribut geschrieben haben, also Zugriff auf event , das Event-Objekt
selbst, wenn Sie es manipulieren oder an eine externe EventHandler-Funktion weiterreichen wollen. Es ist ein guter Gedanke, für alle mit Ausnahme der einfachsten Event-gesteuerten Aktionen Funktionen zu schreiben: Das verhindert, dass
Sie Code in einem Attribut schreiben (der sehr leicht dazu
führt, dass Ihr XML ungültig wird), trennt die visuellen Elemente vom Verhalten und gibt Ihnen die Möglichkeit, das Verhalten von anderen Events oder anderen Klassen aus auszulösen.
è Inhalt
Schnelleinstieg in Flex 2
Event-Listener in ActionScript einrichten
Die Arbeit mit dem Event-Modell lässt sich auch einfach mit
ActionScript durchführen. Um dem Abbrechen-Button das
gleiche Verhalten zu geben, geben Sie ihm zuerst eine id:
<mx:Button id="resetButton" label="Reset"/>
und fügen den Listener an geeigneter Stelle Ihres Script Blocks mit ActionScript hinzu:
resetButton.addEventListener("click", reset);
Die Eingabe eines Strings wie "click" ist allerdings eine gefährliche Sache. Wenn Sie ihn aus Versehen falsch schreiben,
kann der Compiler den Fehler nicht abfangen. Deswegen und
um Sie im Editor durch die Autovervollständigung zu unterstützen, werden alle Strings mit einer besonderen Bedeutung
in den Flex- und der Flash-API als öffentliche, statische Konstanten veröffentlicht. Statt "click" zu schreiben, um auf einen
Mausklick zu referenzieren, sollten Sie Folgendes schreiben:
resetButton.addEventListener(MouseEvent.CLICK, reset);
Aber wenn Sie das ActionScript 3.0-Event-Modell verwenden,
müssen Event-Handler-Funktionen das Event als Parameter
akzeptieren. Unsere aktuelle reset() -Methode bringt es nicht!
Gehen wir hier einen Schritt zurück und betrachten wir den
Zweck dieser Methode. Ist reset() eine Methode, die wir anderen Methoden und nach außen verfügbar machen wollen?
Wenn das der Fall ist, sollten wir nicht verlangen, dass der
Aufrufer ein Event übergibt, weil der Aufruf nicht notwendi-
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
39
gerweise durch ein Event ausgelöst wird. Es gibt zwei Herangehensweisen für dieses Problem. Die strukturiertere Lösung
wäre die Erzeugung einer Handler-Funktion, die reset() aufruft:
protected function onResetButtonClicked(event:Event):void
{
reset();
}
Das bewahrt die Trennung von Event-Handler und Funktionalität. Und das ist auch das, was der MXML-Compiler automatisch für Sie macht. Der gesamte Code, den Sie in das click Attribut schreiben, wird in eine Funktion eingefügt, die automatisch erzeugt wird, wenn Ihr Projekt kompiliert wird:
public function __resetButton_click(event:flash.events.
MouseEvent):void
{
reset();
}
Das erklärt auch, warum eine Variable namens event in MXML
in jedem Event-Attribut verfügbar ist: Der Code landet in einer Funktion, der ein Parameter namens event übergeben
wird.
Ein nützlicher Hack erlaubt einer Methode, zugleich als EventHandler und als gewöhnliche öffentliche Methode zu agieren.
Ermöglichen Sie es, dass der Event-Parameter den Standardwert null erhält. In diesem Fall könnten wir, anstatt eine neue
è Inhalt
Schnelleinstieg in Flex 2
Funktion zu schreiben, die reset() aufruft, einfach die Signatur von reset() folgendermaßen ändern:
public function reset(event:Event = null):void
Das funktioniert natürlich nur, wenn Ihre Methode nicht unbedingt von dem Event oder anderen Parametern abhängig
ist. Es sieht etwas schlampig aus, kann aber hilfreich sein.
Code ausführen, wenn Ihre Komponente sichtbar wird
Eine Sache, die Ihnen bei der Verwendung von MXML-Klassen
schnell auffallen wird, ist, dass Sie keine eigenen Konstruktorfunktionen deklarieren können. Selbst wenn Sie Code im
Konstruktor einer MXML-Klasse ausführen könnten, hätte dieser eventuell nicht den gewünschten Effekt. Kindkomponenten werden nach der Konstruktionsphase erzeugt. Versuche,
in einem Konstruktor Kinder zu referenzieren, führen also zu
einem Fehler.
Flex bietet zwei Events, die Sie einfangen sollten, wenn Sie
eine Initialisierung durchführen wollen: initialize und creationComplete . Das erste Event, initialize , wird abgesetzt,
wenn Ihre Komponente konstruiert wird und Kinder verarbeitet werden, aber bevor etwas so weit ist, dass es tatsächlich
auf dem Bildschirm erscheinen kann. Umgekehrt wird creationComplete abgesetzt, nachdem die Komponente erzeugt, einer Anzeigeliste hinzugefügt, berechnet, eingeflossen und
gezeichnet wurde. Wenn Ihr Initialisierungscode von der Position der Kinder abhängig sein könnte, wäre es besser, ihn auszuführen, wenn dieses Event abgesetzt wird.
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
40
Diese Initialisierungsevents sind für das E-Mail-Client-Beispiel
nützlich. Wir können einen Standarderläuterungstext in den
Feldern An und Betreff (siehe Abbildung 7) erscheinen lassen
und dafür sorgen, dass dieser Text ausgewählt wird, wenn Sie
in das Feld klicken oder über die Tabulator-Taste zu ihm navigieren, damit das, was Sie eintippen, direkt die Auswahl – den
Erläuterungstext – ersetzt:
<mx:Panel title="Neue E-Mail" … initialize="onInitialize
(event)">
protected function onInitialize(event:Event):void
{
toField.text = "An wen soll diese E-Mail gehen";
subjectField.text = "Hier kommt Ihr Betreff hin";
toField.addEventListener(FocusEvent.FOCUS_IN,
onFieldFocus);
subjectField.addEventListener(FocusEvent.FOCUS_IN,
onFieldFocus);
}
protected function onFieldFocus(event:Event):void
{
var target:TextInput = event.target.owner as TextInput;
if (target) target.setSelection(0, target.text.length);
}
Dieser Code nutzt eine weitere gute Technik: Er nutzt event.
target als Gegenstand Ihres Event-Handling-Codes. Auf diese
è 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.
Abb. 7. Wird das An:-Feld angewählt, wird der Erläuterungstext
markiert.
Weise können Sie den gleichen Event-Handler an mehrere
Komponenten knüpfen. Und etwas Sicherheit ist auch eingebaut. Der as -Test weist target null zu, wenn der Eigentümer
des Event-Ziels kein TextInput ist, und der if -Test überspringt
den Code, der von einer Methode von TextInput abhängig ist,
wenn das Ziel kein TextInput ist.
Bindungen
Bindung ist ein mächtiges Konzept, das in vielen deklarativen
Sprachen zu finden ist. Bindungen erzeugen eine Verknüpfung zwischen zwei Werten und nutzen Events, um den einen
Wert zu ändern, wenn sich der andere ändert. Normalerweise
TecFeeds © 2007 by O’Reilly Verlag
Wenn der böse Dr. Bad sich entschließt, eine Lebensversicherung abzuschließen, und eine Bombe schafft, die losgeht,
wenn sein Herz anhält, könnte er diese Bombe an sein Herz
binden. In der Realität könnte das einige riskante Operationen verlangen, um einen Sensor, einen Funksender, einen
Schaltkreis und einen komplexen Zündmechanismus einzurichten. Aber in Filmen kümmert sich niemand um so was: Es
ist einfach nur eine Bindung. Das Gleiche gilt für Bindungen
in Flex. In den meisten Fällen müssen wir keine Setter-Funktionen schreiben, Events absenden, Events abonnieren oder
Aktualisierungsfunktionen schreiben. Mit Flex 2 richten wir
eine Bindung ein, indem wir mit einer besonderen Syntax auf
die Eigenschaft verweisen und Flex die ganze harte Arbeit
überlassen.
Beispiel: Styles auf dem Text setzen
Der Farbwähler und der Größenschieber in unserem Formular
zum Verfassen von E-Mails machen noch nichts. Nutzen wir
Bindungen, um zu erreichen, dass diese Steuerelemente das
Erscheinungsbild des Textinhalts steuern. Wir möchten, dass
die Schriftgröße den Wert des Größenschiebers wiedergibt
und die Schriftfarbe die im Farbwähler ausgewählte Farbe,
auch wenn sie geändert werden (siehe Abbildung 8). Um die
Bindungen in Aktion zu bringen, umgeben Sie die Eigenschaft, die Sie binden wollen, mit geschweiften Klammern:
è Inhalt
Schnelleinstieg in Flex 2
<mx:TextArea width="100%" height="100%"
verticalScrollPolicy="auto" id="messageField"
fontSize="{fontSizeSlider.value}"
color="{fontColorPicker.selectedColor}"/>
Was Flex mitbringt
42
Bindungen erzeugen
Dieses Beispiel nutzt eine von drei Möglichkeiten, Daten zu
binden. Indem eine Eigenschaft mit geschweiften Klammern
umgeben wird, sagen Sie dem Compiler, dass er die Eigenschaft als Bindungsausdruck auswerten soll. Das kann auch
ActionScript-Code einschließen: Sie könnten einen Wert mit
zwei multiplizieren, an das Ergebnis einen String ketten und
erhalten dadurch eine Möglichkeit, die Daten in Form zu bringen, bevor sie verarbeitet werden.
Alternativ können Sie Bindungen frei schwebend angeben,
anstatt sie direkt an eine Zieleigenschaft zu binden, indem
Sie das <mx:Binding> -Tag verwenden. Diese Tags stehen außerhalb der Objekte, die sie zusammenbinden, und definieren
eine Quelle ( source ) und ein Ziel ( destination ).
Abb. 8 Die Schriftgröße über eine Bindung an einen Schieber
­a ktualisieren
Vielleicht ist dieses Beispiel trivial, aber in echten Anwendungen gibt es viele Fälle wie diesen, und der Einsatz von
Bindungen kann das schnell erledigen.
Eine sehr interessante Sache in diesem Beispiel ist, dass es die
Werte von Eingabeelementen nicht bloß an Eigenschaften,
sondern auch an Styles bindet.
TecFeeds © 2007 by O’Reilly Verlag
Sie können Bindungen mit der Klasse mx.binding.utils.BindingUtils auch in ActionScript erzeugen. Dieser Weg bietet
die besten Steuerungsmöglichkeiten darüber, wie man mit
Aktualisierungen in der Quelle umgeht.
Bindungen zur Auswertung verwenden
Bindungen mit geschweiften Klammern haben noch andere
Anwendungsmöglichkeiten, deswegen werden Sie sich häufig
dabei ertappen, dass Sie Bindungen nutzen, ohne irgendwelche Eigenschaften oder Daten zu binden. Wenn es in einem
von geschweiften Klammern umgebenen Ausdruck keine
bindbaren Eigenschaften gibt, wird der Ausdruck einfach ausgewertet.
è Inhalt
Schnelleinstieg in Flex 2
In vielen Fällen werden Sie eine Eigenschaft irgendeines Tags
auf ein anderes Objekt oder auf irgendwelche Daten setzen
müssen. Wenn Sie in ein Tag eine ID oder einen Ausdruck eintippen, wird dieser einfach literal als String interpretiert. Deswegen werden Sie geschweifte Klammern häufig verwenden,
um bloß auf ein anderes Objekt zu verweisen. Beispielsweise
könnten wir den Default-Button unseres Formulars auf den
Senden-Button setzen:
<mx:Panel title="New Mail" … defaultButton="{sendButton}">
Binden an Konstanten
Wenn Sie in Ihrem Code Strings verwenden, können Sie
diese durch Konstanten und eine Bindung auf sie ersetzen.
Das funktioniert besonders gut, wenn Sie diese Strings auch
noch an anderen Stellen verwenden müssen – beispielweise
wenn Sie ihn mit dem Wert eines Strings vergleichen wollen
oder wenn Sie für irgendetwas die Eigenschaft name statt der
Eigenschaft id verwenden. (Während id zu einer Eigenschaft
der Klasse wird, bleibt name einfach ein String, der auf der Instanz definiert ist, auf der Sie die Eigenschaft angeben).
Statt:
<mx:TextInput id="input" text="Standardwert"/>
könnten Sie Folgendes schreiben:
private const INPUT_START_VALUE:String = "Standardwert";
<mx:TextInput id="input" text="{INPUT_START_VALUE}"/>
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
43
Bei Letzterem könnten Sie prüfen, ob der Benutzer in das
Feld etwas Neues eingegeben hat, indem Sie den Text mit
dem Standardwert vergleichen:
var isTextChanged:Boolean = (input.text != INPUT_START_
VALUE);
Dieses Verfahren kann Ihnen dabei helfen, Ihren Code wartbarer zu halten und Fehler auf Grund von Tippfehlern zu
verhindern, genau wie die eingebauten Event-Namen, die
als Konstanten gespeichert sind.
Wann Bindungen verwendet werden sollten
Es gibt viele Klassen, bei denen Ihnen Bindungen helfen können, Ihren Code kompakt zu halten. Das Binden von Views an
Daten (Modelle) ist besonders nützlich, wie Sie im folgenden
Abschnitt sehen werden. Das Binden von Komponenten, um
ihr Erscheinungsbild synchron zu halten, ist ebenfalls verbreitet. Inspektoren, d.h. Benutzerschnittstellen, die es Ihnen ermöglichen, die Eigenschaft von Objekten auf dem Bildschirm
in Echtzeit einzusehen, sind für Bindungen ebenfalls gut geeignet.
Wenn Sie eine große Kontrolle über die Reihenfolge der Operationen haben oder nach bzw. vor dem Festschreiben komplexe Operationen durchführen müssen, können Datenbindungen ein zu simpler Mechanismus sein. Anstatt damit zu
kämpfen, sie Ihrem Willen zu unterwerfen, sollten Sie Datenbindung verwenden, um Code in einfachen Fällen einfach zu
machen.
è Inhalt
Schnelleinstieg in Flex 2
Gebundene Eigenschaften müssen bindbar sein
Nur bindbare Eigenschaften können die Quelle von Bindungen sein, die laufend aktualisiert werden. Im Flex 2-Frame­
work gibt es viele Eigenschaften, die bereits bindbar sind.
Aber um Ihre eigenen Eigenschaften bindbar zu machen,
müssen Sie ein Metadaten-Tag verwenden.
Metadaten
Was Flex mitbringt
44
Stellen Sie einer Eigenschaft, die Sie bindbar machen wollen,
einfach das Metadaten-Tag Bindable voran:
[Bindable]
public var numToes:Number = 10;
Außerdem können Sie Getter bindbar machen und das Metadaten-Tag Bindable so anpassen, dass es ein Event Ihrer Wahl
absetzt, wenn der Wert aktualisiert wird.
Metadaten sind Informationen, die der Flex-Compiler nutzt,
um spezielle Aktionen durchzuführen. Technisch betrachtet,
sind sie nicht Teil der Sprache ActionScript 3.0, sondern
Compiler-Direktiven. Metadaten werden durch Ausdrücke in
eckigen Klammern erzeugt. Die gebräuchlichsten Metadaten, die Sie verwenden könnten, und ihre Bedeutungen
sind:
Bindbare Eigenschaften funktionieren nur in Klassen, die
Events absetzen können. Das schließt alle Benutzerschnittstellen-Komponenten ein, die von Flex definiert werden. Und
wenn Sie eine nicht visuelle Klasse als Modell schreiben, müssen Sie einfach nur flash.events.EventDispatcher erweitern.
• [Bindable] erlaubt, dass die nachfolgende Eigenschaft als
Besonders nützlich ist Datenbindung bei einer Model-ViewController-Architektur (MVC). Sie können eine leichtgewichtige View-Komponente erstellen und diese dann, anstatt eine
Schar von Funktionen zu schreiben, die sich darum kümmern,
diese zu aktualisieren, über Datenbindung direkt an ein Modell binden.
Quelle von Bindungen verwendet wird.
• [Embed] sagt dem Compiler, dass er ein externes Asset ab-
rufen und in das SWF einkompilieren soll.
• [Event] definiert Events, denen direkt in den Attributen
des Tags Handler zugewiesen werden können.
• [Style] erzeugt benutzerdefinierte Styles.
Viele dieser Ausdrücke werden in den nachfolgenden Abschnitten behandelt.
Model-View-Controller mit Bindungen
Die Einfachheit dieses Verfahrens sehen Sie, wenn wir Komponenten für einen Posteingang mit einer Nachrichtenliste und
einen E-Mail-Reader erstellen.
Daten in MXML einbetten
Es ist möglich, Modelldaten direkt in Ihr MXML einzubetten.
Aber es ist unwahrscheinlich, dass Sie das außer zu TestzweTecFeeds © 2007 by O’Reilly Verlag
è Inhalt
Schnelleinstieg in Flex 2
cken oder beim Aufbau von sehr kleinen Anwendungen machen werden. Und genau das müssen wir hier tun: Wir müssen
ein paar schnelle Dummy-Daten erzeugen, damit wir den
View aufbauen und die Bindungen testen können.
Skizzieren wir ein XML-Modell für Nachrichten. Weil XML so
leicht mit E4X manipuliert werden kann und wir kein objektrelationale Datenbanken oder eine massive serverseitige Integration haben, die den Aufbau von Modellklassen für E-Mails
erforderlich machen, ist die Verwendung von XML ideal.
Erzeugen wir eine neue MXML-Komponente – InboxView.mxml –
zum Lesen von Nachrichten und stecken wir in sie ein paar
Dummy-Nachrichtendaten:
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" title="Nachrichten">
Was Flex mitbringt
In MXML können wir das XML inline schreiben. Bei HTMLNachrichten wäre es allerdings ratsam, den Inhalt des message Knotens in einen CDATA-Abschnitt einzuschließen.
DataGrid
Es gibt verschiedene eingebaute Flex-Komponenten, die für
die Anzeige von Datensätzen ideal sind. List und TileList
sind gut geeignet für Listen mit Daten, und sie können mit
Renderern für Elemente kombiniert werden, um eine Liste mit
Schnittstellen aufzubauen, die komplexer als eine einfache
Liste mit Text ist. Tree ist natürlich gut geeignet, um in hierarchischen Daten zu navigieren. Wir würden unseren Posteingang gern in dem vertrauten Raster mit Spalten sehen, über
die wir sortieren und die wir anpassen können (siehe Abbildung 9). Flex 2 besitzt eine Komponente, die dafür perfekt ist,
DataGrid .
<mx:XMLList id="inbox">
<message>
<date>01/01/2006</date>
<from>tests@beispiel.com</from>
<to>roger@partlyhuman.com</to>
<subject>Beispiel-E-Mail</subject>
<message>Das ist eine Beispiel-E-Mail.</message>
</message>
<!-- viele weitere Nachrichten aus meinem
Spam-Ordner -->
</mx:XMLList>
</mx:Panel>
TecFeeds © 2007 by O’Reilly Verlag
45
Abb. 9 Das DataGrid macht aus dem XML eine Nachrichtenliste.
è Inhalt
Schnelleinstieg in Flex 2
Wir fügen dem Posteingang eine DataGrid-Komponente
hin­zu, passen ihre Spalten an und knüpfen sie dann an unsere
Dummy-Daten, indem wir ihre dataProvider-Eigenschaft binden:
<mx:DataGrid id="messageList" width="100%" height="100%"
dataProvider="{inbox}">
<mx:columns>
<mx:DataGridColumn dataField="from"
headerText="Sender"/>
<mx:DataGridColumn dataField="subject"
headerText="Betreff"/>
<mx:DataGridColumn dataField="date"
headerText="Datum"/>
</mx:columns>
</mx:DataGrid>
Mit nur ein paar Zeilen haben wir eine scrollbare Nachrichtenliste, größenveränderbare Spalten und die Möglichkeit erhalten, über beliebige Spalten in aufsteigender oder absteigender Folge zu sortieren. Aber wir haben gerade erst angefangen. Das DataGrid ist ein vorgefertigter View, der für die
Anzeige tabellarischer Daten geeignet ist und keine Anpassungen erfordert. Es wusste, wie es jeden XML-Knoten in Ihrer
Nachrichtenliste betrachten und das < subject> -Kind für das
Betreff-Feld herausziehen musste, weil Sie das in der dataField -Eigenschaft der Betreffspalte angegeben haben.
Bauen wir einen selbst definierten View auf und sagen wir
ihm, wie er seinen Inhalt darstellen soll. Das wird natürlich
das Lesefenster sein, das die vollständige E-Mail zeigt.
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
46
Eine selbst definierte Komponente an ein Modell binden
Hier ist unser Ansatz, einen »dummen« View zu erstellen. Er
wird einen leeren Platz bieten, in dem ein Modell eingefügt
werden kann, und bindet an die Eigenschaften dieses Modells, damit der View automatisch aktualisiert wird, wenn
dieses Modell bereitgestellt wird.
Wir erzeugen eine weitere Komponente für den NachrichtenView – MessageView.mxml – und fügen alle Felder ein, die wir
anzeigen möchten. Wir sollten oben einen Block für die Header haben und unten einen großen skrollbaren Textbereich:
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<!-- hier kommt das Modell hin -->
<mx:Object id="msg"/>
<mx:Grid id="header" backgroundColor="black"
backgroundAlpha="0.1" width="100%">
<mx:GridRow>
<mx:GridItem horizontalAlign="right"><mx:Label
text="Von:"/></mx:GridItem>
<mx:GridItem><mx:Text truncateToFit="true"
text="{msg.from}"/></mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem horizontalAlign="right"><mx:Label
text="Datum:"/></mx:GridItem>
<mx:GridItem><mx:Text truncateToFit="true"
text="{msg.date}"/></mx:GridItem>
è Inhalt
Schnelleinstieg in Flex 2
</mx:GridRow>
<mx:GridRow>
<mx:GridItem horizontalAlign="right"><mx:Label
text="An:"/></mx:GridItem>
<mx:GridItem><mx:Text truncateToFit="true"
text="{msg.to}"/></mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem horizontalAlign="right"><mx:Label
text="Betreff:"/></mx:GridItem>
<mx:GridItem><mx:Text truncateToFit="true"
text="{msg.subject}"/></mx:GridItem>
</mx:GridRow>
</mx:Grid>
<mx:TextArea width="100%" height="100%"editable="false"
verticalScrollPolicy="auto" htmlText="{msg.message}"/>
</mx:VBox>
Wir haben dieses Element zu einer VBox gemacht statt zu
einem vollständigen Panel, damit wir es neben der Nachrichtenliste anzeigen können. Beachten Sie, wie einfach das ist:
Wir haben ein Objekt, msg , an das alle Komponenten ihre
Werte binden.
Jetzt müssen wir es nur noch einbinden. Wir nutzen eine VDividedBox , um die Nachrichtenliste und das Lesefenster zu trennen. Diese Container-Komponente trennt den Bereich, den sie
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
47
einnimmt, durch eine horizontale Leiste, die der Benutzer verschieben kann, um die relative Größe des oberen und unteren
Bereichs anzupassen wie bei einem HTML-Frameset mit
einem sichtbaren Rahmen. Natürlich bietet Flex 2 auch eine
HDividedBox , die ihren Bereich horizontal teilt.
Schließlich fügen wir der change -Eigenschaft des DataGrid einen Event-Handler hinzu, der selectedItem aus dem Modell in
den Nachrichtenplatzerhalter des Lesebereichs für das Modell
einfügt:
<mx:VDividedBox width="100%" height="100%"
liveDragging="true">
<mx:DataGrid id="messageList" width="100%" height="100%"
dataProvider="{inbox}" change="reader.msg = messageList.
selectedItem">
<mx:columns>
<mx:DataGridColumn dataField="from"
headerText="Sender"/>
<mx:DataGridColumn dataField="subject"
headerText="Betreff"/>
<mx:DataGridColumn dataField="date"
headerText="Datum"/>
</mx:columns>
</mx:DataGrid>
<mail:MessageView id="reader" width="100%"/>
</mx:VDividedBox>
è Inhalt
Schnelleinstieg in Flex 2
Mehr brauchen Sie nicht. Der Lesefenster-View aktualisiert
seine Bindungen und zeigt die E-Mail an, wenn Sie sie in der
Liste auswählen (siehe Abbildung 10).
Was Flex mitbringt
48
Daten laden und senden
Nachdem wir einen View aufgebaut und nachgewiesen haben, dass er an ein Modell gebunden werden kann, können
wir die Daten in den E-Mail-Nachrichten laden. Flex 2 stellt Ihnen eine Menge Optionen für das Laden von Daten, die unterschiedliche Verfahren verwenden, zur Verfügung.
Eine Datei laden
Flash Player 9 führt neue Wege ein, Daten über HTTP zu laden. Für externe SWFs oder Grafiken gibt es die neue Klasse
flash.display.Loader , die sich um das Laden und Anzeigen
kümmert. Für Text, XML oder URL-kodierte Variablen und rohe
Binärdaten gibt es die neue Klasse flash.net.URLLoader . Werden Informationen von einer URL angefordert, nutzen beide
Klassen die Klasse flash.net.URLRequest , um die URL gemeinsam mit zusätzlichen Daten zur Anfrage, wie Headern, MIMETypen und Formulardaten, zu kapseln.
Abb. 10 Ein umwerfender Spam-Reader, der mit nur 50 Zeilen
­g eschrieben wurde
TecFeeds © 2007 by O’Reilly Verlag
In ActionScript 3.0 ist die Klasse XML einfach nur ein Datentyp
und hat anders als in früheren Versionen von ActionScript
keine Ladefähigkeiten. Stattdessen kümmert sich URLLoader
um das gesamte Laden. Wir nutzen dann die Top-Level-Funktion XML() , um die von URLLoader geladenen Textdaten in
XML zu transformieren.
Beachten Sie, dass das eine von mehreren Top-Level-Funktio­
nen ist, die sich als Cast-Operator maskieren. Aber das ist eine
nützliche Maskierung. Sie liefert nicht nur ein XML-Objekt zu-
è Inhalt
Schnelleinstieg in Flex 2
Was Flex mitbringt
rück, sondern übersetzt auch die Bedeutung des Strings in
seine XML-Darstellung.
Die Verwendung von URLLoader ähnelt der Verwendung von
MovieClipLoader in ActionScript 2. Erst erzeugen Sie das Objekt. Dann abonnieren Sie seine Events, die Progress-, Completion-, Status- und Error-Events einschließen. Schließlich fordern Sie es auf, den URLRequest zu senden und die Antwort zu
laden. Nachdem das Laden abgeschlossen ist, können Sie auf
die geladenen Daten über die nicht typisierte Eigenschaft
data zugreifen:
<!-- im MXML -->
<XMLList id="inbox"/> <!-- das Posteingang-XML leeren, aber
einen Platzhalter lassen -->
//im Script-Block:
protected var loader:URLLoader;
public function updateMessages():void
{
loader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onDataComplete);
loader.load(new URLRequest(
"http://partlyhuman.com/books/flexshortcut/mail/services/
inbox.xml"));
}
protected function onDataComplete(event:Event):void
{
TecFeeds © 2007 by O’Reilly Verlag
49
//.message ist ein E4X-Operator, der eine XMLList aller
//Kindknoten mit dem Knotennamen <message> liefert
inbox = XML(loader.data).message;
}
Fügen Sie dem vorangehenden Code InboxView.mxml hinzu
und leeren Sie ihr XMLList -Tag, kann die E-Mail-Liste ihre
Dummy-Daten aus einer externen XML-Datei laden.
HTTPService
Das vorangehende Beispiel funktioniert in Flash 9 und Flex 2.
Flex 2 bietet Ihnen mit der Klasse HTTPService aber auch ein
noch einfacheres Verfahren. Der HTTPService kann überall
verwendet werden, wo ein URLLoader verwendet werden
könnte, bietet aber einige Vorteile. Sie können die Anfrage
völlig trivial wiederholen, indem Sie send() auf dem HTTPService aufrufen. Sie können direkt eine Bindung an das Ergebnis
des letzten Aufrufs des Diensts einrichten und machen damit
eine Aktualisierungsfunktion oder einen zwischengeschalteten Modellort überflüssig.
Wir könnten das ganze ActionScript, das URLLoader verwendet, durch ein einziges Flex 2-Tag ersetzen:
<mx:HTTPService id="inbox" resultFormat="e4x"
url="http://partlyhuman.com/books/flexshortcut/mail/services/
inbox.xml"/>
Wir ändern auch das DataGrid, um direkt eine Bindung mit
dem Service zu erstellen an Stelle einer Bindung an ein Modell, das wir manuell füllen:
è Inhalt
Schnelleinstieg in Flex 2
<mx:DataGrid id="messageList" … dataProvider="{inbox.
lastResult.message}">…
Jetzt muss nur noch inbox.send() aufgerufen werden, um die
E-Mail-Liste aufzufrischen. Ganz gleich, ob das Ziel eine einfache XML-Datei oder ein Skript ist, das XML ausgibt – HTTPService kann das Laden von Daten trivial machen.
REST
Die URLLoader-Methode für die Verwendung von REST abzuändern ist gradlinig. Fügen Sie der data -Eigenschaft des
URLRequest einfach Variablen hinzu, entweder indem Sie data
auf einen URL-kodierten String setzen oder indem Sie sie
einem URLVariables-Objekt hinzufügen. Das Senden der Variablen in der HTTP-Anfrage und das Laden der XML-Antwort
ist alles, was für die Verwendung von REST erforderlich ist.
Unten ist ein einfaches Fragment, das die letzten Fotos abruft,
die auf Flickr hochgeladen wurden:
var request:URLRequest = new URLRequest("http://api.flickr.
com/services/rest");
request.data = new URLVariables();
request.data.method = "flickr.photos.getRecent";
request.data.api_key = "<<hier kommt Ihr API-Schlüssel
hin>>";
request.method = URLRequestMethod.GET;
loader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onComplete);
loader.load(request);
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
50
Natürlich ist auch HTTPService gut für REST geeignet. Das HTTPService -Tag unterstützt eine request -Eigenschaft, die auf
eine Vielzahl von Typen gesetzt werden kann.
<mx:HTTPService id="flickr" resultFormat="e4x"
url="http://api.flickr.com/services/rest"/>
flickr.request = {
method: "flickr.photos.getRecent",
api_key: "<<hier kommt Ihr API-Schlüssel hin>>"
};
flickr.send();
Wie oben können Sie die Eigenschaft request in ActionScript
setzen oder direkt als ein Attribut des HTTPService -Tags in
MXML. Im Attribut können Sie geschweifte Klammern verwenden, um ein Objekt einzubetten, oder das Attribut als Kindknoten schreiben und eingebettetes XML nutzen, um die zu
sendenden Variablen zu beschreiben:
<mx:HTTPService … request="{{method: 'flickr.photos.
getRecent'}}"/>
<!-- ist identisch mit -->
<mx:HTTPService>
<mx:request>
<method>flickr.photos.getRecent</method>
</mx:request>
</mx:HTTPService>
è Inhalt
Schnelleinstieg in Flex 2
SOAP und WSDL
Über die Klasse WebService können Sie leicht RPC (Remote
Procedure Calls) über SOAP ausführen. Wenn das WebServiceObjekt eine WSDL-Datei lokalisieren und laden kann – die die
Operationen, die der Service unterstützt, und ihre Parameter
beschreibt –, können Sie über die Punktnotation auf Operationen auf dem Service zugreifen, selbst wenn Sie sie nicht im
Voraus deklariert haben.
Die Klasse WebService muss erfolgreich ein WSDL-Datei laden,
bevor irgendwelche Remote Procedure Calls gesendet werden. Deswegen sollten Sie das load -Event eines WebService
abonnieren und Zugriff erst erlauben, nachdem dieses Event
abgesetzt wurde.
Was Flex mitbringt
51
</mx:operation>
</mx:WebService>
<mx:HBox>
<mx:Label text="Symbol name:"/>
<mx:TextInput id="symbolInput" maxChars="5"/>
<mx:Button id="searchButton" enabled="false" label="GO"
click="stockService.getQuote.send();"/>
</mx:HBox>
<mx:Text text="{stockService.getQuote.lastResult}"/>
</mx:Application>
Dieses Beispiel und der Viewer, der in Abbildung 11 gezeigt
wird, nutzen einen Service für Aktienkurse, um verzögerte Aktienkurse für einen NASDAQ-Wert zu erhalten:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:WebService id="stockService"
wsdl="http://services.xmethods.net/soap/urn:
xmethods-delayed-quotes.wsdl"
load="searchButton.enabled = true;"
fault="trace(event.fault.faultString)">
<mx:operation name="getQuote" resultFormat="object">
<mx:request>
<symbol>{symbolInput.text}</symbol>
</mx:request>
TecFeeds © 2007 by O’Reilly Verlag
Abb. 11 Ein Aktienticker unter Verwendung eines
SOAP-Webservices
Wenn der WebService oben die WSDL-Datei lädt, aktiviert er
den Suchen-Butten, der standardmäßig deaktiviert ist. Das
­s ichert, dass das getTemp -Objekt bereit ist, wenn es aufgerufen
wird.
In das Beispiel oben wurde das operation -Attribut des WebService zu unserer eigenen Bequemlichkeit und als Selbst­
è Inhalt
Schnelleinstieg in Flex 2
dokumentation eingeschlossen. Da die Informationen für die
verfügbaren Operationen in die WSDL-Datei einkodiert sind,
hätten wir unsere eigene Beschreibung der getQuote -Operation weglassen können. Dann hätten wir aber manuell den
symbol -Parameter setzen müssen, anstatt eine Bindung zu verwenden, bevor wir den Prozeduraufruf abschicken könnten.
Die Verwendung von Datenbindung zur direkten Bindung
eines Parameters an den Wert, mit dem er abgeschickt wird,
wird als Parameter-Bindung bezeichnet.
Die WebService-Schnittstelle kann erheblich bequemer sein
als der HTTPService, insbesondere wenn man viele verschiedene Methoden aufruft, weil eine Service-Referenz mehrere
Operationen verwalten kann.
JSON
Für Services, die JSON-kodierte Daten zurückliefern, gibt es
keinen eingebauten Konvertierer. eval() ist in ActionScript 3
nicht implementiert, um den AS3-Compiler aus dem Flash
Player herauszuhalten. Adobe Labs hostet unter http://labs.
adobe.com/wiki/index.php/ActionScript_3:resources:apis:libraries aber ein freies Projekt namens corelib, das einen JSONParser einschließt.
Flash Remoting
Weder Flex noch AS3 bieten neben dem Flex Data Service, der
unten erwähnt wird, eine besondere API für das Flash Remoting. Remoting-Aufrufe können über die NetConnection -API
durchgeführt werden. Alternativ können Sie das unter einer
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
52
MIT-Lizenz veröffentlichte AS3 Lightweight Remoting Framework von Danny Patterson verwenden, das unter http://as3lrf.
riaforge.org/ verfügbar ist. Das Framework ermöglicht Ihnen,
einen Service zu kapseln, der wie jeder andere Webservice
Flash Remoting unterstützt.
Flex Data Services
Flex Data Services (FDS) unter http://www.adobe.com/products/flex/dataservices/ ist ein Adobe-Produkt in der Flex-Familie. Es ermöglicht Flex 2-Anwendungen, intelligenter und
effizienter mit einer Datenschicht zu kommunizieren. FDS ist
eine Java-Anwendung, die auf einer vorhandenen BusinessLogik auf dem Server läuft und von der von Ihnen gewählten
Datenbankkommunikation unabhängig ist. Auch wenn es
eine separate Anwendung ist, enthält Flex 2 Features, die ausdrücklich für die Arbeit mit FDS gedacht sind. Das Produkt
muss separat erworben werden und ist in verschiedenen Versionen und Preislagen verfügbar.
FDS bietet eine ganze Menge an Features, die in verschiedene
Kategorien eingeteilt werden können: Konnektivität, RPC-Services, Data-Management-Services und Messaging-Services.
FDS und Flex können über AMF3 kommunizieren. Das ist ein
binäres, komprimiertes Format, das Typen bewahrt. FDS kann
über RTMP (Real-Time Messaging Protocol) oder über HTTP
mit Flex kommunizieren und bietet gute Ausweichmechanismen. FDS kann Nachrichten für vorübergehend nicht erreichbare Clients in Warteschlangen stellen und zustandsbehaftete
Transaktionen mit Flex-Clients abwickeln.
è Inhalt
Schnelleinstieg in Flex 2
FDS bildet Proxies für andere Remote-Services, um Logging,
Sicherheit, Konfiguration und gegebenenfalls Lokalisierungen
zu zentralisieren.
Flex-Anwendungen, die den Flex Data Server nutzen, um mit
der Business-Logik von Anwendungen zu kommunizieren,
können aktuelle Kopien zentralisierter Daten halten, ohne
sich um Synchronisierung, Sperren oder Aktualisierungen
kümmern zu müssen. FDS kann Flex-Anwendungen eine Kopie der Daten bieten, die immer automatisch aktuell ist.
Was Flex mitbringt
ent-Klasse, die die Nachrichten von einem echten E-Mail-Server abruft und das Modell füllt, während sie geladen werden.
Unten ist eine kondensierte Version der Klasse POPConnection .
Den vollständigen Code finden Sie auf der Verlatgs-Website
und der Website des Autors. Die Kommunikation mit einem
POP-Server schließt eine Reihe von Schritten ein. Sie müssen
Folgendes machen, um mit einem POP-Server zu kommunizieren:
1. Einen Benutzernamen senden.
Schließlich ermöglichen Flex Data Services Push-Messaging in
Echtzeit vom Server und über den Server zwischen den Peers.
2. Auf eine Antwort warten.
Sockets
4. Auf eine Antwort warten.
Zum ersten Mal unterstützt Flash Player 9 TCP/IP-Socket-Verbindungen und ermöglicht Ihnen damit, mit beliebigen Servern zu sprechen und dabei vollständige Kontrolle über die
Daten zu haben, die empfangen und gesendet werden.
­S ockets sind eine Abstraktion einer TCP/IP-Verbindung als
Stream. Sie können aus dem Stream so viel lesen, wie verfügbar ist, oder in ihn in einer beliebigen Kombination von Formaten schreiben. Um ein Socket zu verwenden, erzeugen Sie
es, stellen eine Verbindung mit dem Server her, lesen und
schreiben Daten aus ihm bzw. in es und schließen es dann.
5. Eine Liste von Nachrichten anfordern.
Unter Verwendung von Sockets können wir unsere E-Mail-Anwendung mit einem echten Mailserver verbinden. Um die EMail-Anwendung funktional zu machen, verschieben wir das
Modell an einen zentralen Ort und erzeugen eine POP3-Cli-
TecFeeds © 2007 by O’Reilly Verlag
53
3. Ein Passwort senden.
6. Die Liste mit Nachrichten parsen.
7. Die Nachrichten einzeln abrufen.
Weil das Socket nur ein einziges Event für alle einkommenden
Daten veröffentlicht, nutzt die Klasse eine Statusvariable und
den zuletzt gesendeten Befehl, um festzuhalten, wo sie sich
im Kommunikationsablauf befindet und wie sie mit den empfangenen Daten umgehen muss. Die Klasse greift stark auf reguläre Ausdrücke zurück, um die Serverantworten in XML zu
parsen und die Werte mit E4X in das Datenmodell einzufügen:
final public class POPConnection extends EventDispatcher
{
public function POPConnection(user:String, pass:String,
host:String, port:int)
è Inhalt
Schnelleinstieg in Flex 2
{
//…
sock = new Socket();
sock.addEventListener(Event.CONNECT, onConnected);
sock.addEventListener(SecurityErrorEvent.
SECURITY_ERROR, onError);
sock.addEventListener(IOErrorEvent.IO_ERROR, onError);
sock.addEventListener(ProgressEvent.SOCKET_DATA,
onData);
connect();
}
private function connect():void
{
//…
sock.connect(host, port);
//…
}
private function onData(event:Event):void
{
responseBuffer += sock.readUTFBytes(sock.
bytesAvailable);
//wenn das Ende des Puffers das Antwortendezeichen ist
{
processResponse();
}
}
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
54
private function sendCommand(command:String,
... args): void
{
var output:String = command + " " + args.join(" ") +
CMD_END;
sock.writeUTFBytes(output);
sock.flush();
//Timeouts starten …
}
private function processResponse():void
{
var response:String = responseBuffer;
var isOk:Boolean = (response.search(/^\+OK/) == 0);
switch (state)
{
case POPState.CONNECTED:
if (isOk)
{
state = POPState.WAIT_FOR_USER;
sendCommand("USER", user);
}
break;
//andere Zustände für die Authentifizierung …
case POPState.WAITING_MULTILINE:
if (command == "LIST")
{
parseList(response);
currentIndex = 1;
getNextMessage();
è Inhalt
Schnelleinstieg in Flex 2
} else if (command == "TOP" ||
command == "RETR") {
if (isOk)
{
parseMessage(response);
getNextMessage();
} else {
getNextMessage();
}
}
break;
default:
state = POPState.TRANSACTION;
}
responseBuffer = "";
}
private function parseMessage(messageSrc:String):void
{
var inbox:XMLList = MessageRepository.getInstance().
inbox;
var msg:XML = inbox.(id == currentIndex)[0];
var cut:int = messageSrc.indexOf(HEADER_END);
var header:String = messageSrc.substring(0, cut);
var message:String = messageSrc.
substring(cut, messageSrc.length);
var headers:Object = parseHeaders(header);
msg.from = headers.from;
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
55
msg.to = headers.to;
msg.date = headers.dateparsed;
msg.subject = headers.subject;
msg.message = undoubleNewlines(message);
}
}
Weil das DataGrid an die XMLList für den Posteingang gebunden ist, spiegelt sich jede Änderung der Daten in der Liste wider: Während der POP-Client nacheinander die Nachrichten
lädt, erscheinen diese nach und nach im Posteingang und
können von Ihnen gelesen werden, ohne dass Sie warten
müssen, bis alle geladen sind.
States
Flex 2 macht es leicht, die Benutzerschnittstelle im Vorübergehen zu verändern. Sie können den Benutzern eine Schnittstelle präsentieren, die sich ihren aktuellen Aufgaben oder
Anforderungen entsprechend ändert. Es kann allerdings chaotisch werden, wenn man Code nutzt, um die Benutzerschnittstelle anzupassen: Wenn die Anzahl der möglichen Permutationen der Komponenten steigt, müssen Sie bei der Verwaltung möglicher Zustandsübergänge immer vorsichtiger
werden. States bieten Struktur und Indikation für Änderungen
an der Benutzerschnittstelle.
Einer der Vorteile von Flex States ist der Umstand, dass sie in
sich selbst abgeschlossen sind. Sie können die Schritte kapseln, die erforderlich sind, um einen Modus der Schnittstelle
è Inhalt
Schnelleinstieg in Flex 2
in einen anderen State zu überführen, und diesem State einen Namen geben. Anstatt Ihre Schnittstelle zu inspizieren
oder eine manuell aktualisierte Variable zu prüfen, um zu sehen, in welchem State sich die Schnittstelle befindet, können
Sie jetzt einfach den Namen des aktuellen States inspizieren.
Ein weiterer Vorteil ist, dass Flex die Arbeit ermittelt und ausführt, die für den Übergang von einem State zu einem anderen erforderlich ist. Sie deklarieren einfach die Eigenschaften,
die sich ändern müssen, und wenn Sie diesen State anfordern,
werden die Änderungen angewandt.
Wenn Sie in Ihrer Anwendung States verwenden, können Sie
sie außerdem als Event-Trigger benutzen und Übergänge anwenden, die auf ihnen basieren.
Beispiel: E-Mail-Liste
Wenn Sie dazu in der Lage sein wollen, die Nachrichtenliste
zu kollabieren und das Lesefenster in der E-Mail-Anwendung
zu verbergen, können Sie für dieses Erscheinungsbild einen
State erzeugen. Alles, was wir dazu tun müssen, ist, in einem
State -Tag, dem Sie einen zu referenzierenden Namen geben,
die Änderungen anzugeben, die durchgeführt werden müssen. Dann werden alle Änderungen am State durchgeführt,
wenn die Eigenschaft currentState auf den Namen eines
States gesetzt wird. Die Eigenschaft currentState ist auf allen
Flex UI-Komponenten definiert und verweist auf den Namen
des States, in dem sich die Komponente befindet. Um zum Ba-
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
56
sis-State zurückzukehren, setzen Sie currentState einfach auf
null . Wir fügen InboxView.mxml Folgendes hinzu:
<mx:states>
<mx:State name="collapsed">
<mx:SetProperty target="{reader}" name="height"
value="0"/>
</mx:State>
</mx:states>
Dieser Code sagt: Es gibt in dieser Komponente einen State
namens collapsed , der die height des Lesefensters auf 0 setzt.
Beachten Sie, wie eine Bindung eingesetzt wird, um die id des
Lesefenster-Panels zu referenzieren.
Sie können einen Button hinzufügen, der diese Veränderung
des States anstößt und das Lesefenster-Panel kollabiert:
<mx:Button label="Hide Reader" click="currentState =
'collapsed'"/>
Dazu wäre es nett, wenn man das Lesefenster-Panel durch einen einfachen Doppelklick auf eine Nachricht in der Liste
wieder zurückholen könnte:
<mx:DataGrid id="messageList" …
doubleClickEnabled="true"
doubleClick="currentState = null">…</mx:DataGrid>
è Inhalt
Schnelleinstieg in Flex 2
An Konstanten binden
Weil Sie auf einen State über seinen name verweisen müssen,
der einfach nur ein String ist, sind States ein perfekter Ort
für die Anwendung des Binden-an-Konstanten-Verfahrens.
Mit ein paar Änderungen könnten Sie diesen Code tippfehlersicher machen. Fügen Sie einfach eine Konstante für jeden State ein, den Sie in Ihrer Klasse verwenden werden:
protected const STATE_COLLAPSED:String = "collapsed";
und nutzen Sie dann geschweifte Klammern, um sie zu de­
referenzieren, anstatt den Namen des States einzugeben:
<mx:State name="{STATE_COLLAPSED}">…
<mx:Button click="currentState = STATE_COLLAPSED"/>
State-Berechtigungen
Das Setzen einer Eigenschaft ist eins der Dinge, die States tun
dürfen. Außerdem können sie
• einen Style mit <mx:SetStyle/> modifizieren,
• der Komponente mit <mx:AddChild/> Kinder hinzufügen,
• mit <mx:RemoveChild/> Kinder entfernen und
• mit <mx:SetEventHandler/> einen Event-Handler setzen.
Beispiel: Flickr-Vorschau
Kehren wir zum kanonischen Flickr-Beispiel zurück. Wir wollen
ein Raster mit Fotos ansehen und entweder einen Titel oder
das Bild selbst sehen. Wir werden zwei Ansichten jedes Bilds
als State speichern.
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
57
Wir nutzen den gleichen HTTPService-Code wie oben und
setzen ihn ein, um ein Raster mit Fotos aufzubauen. Als wir
mit einem DataGrid die Nachrichtenliste aufbauten, haben
wir gesehen, dass ein DataGrid bereits weiß, wie es seine Daten wiedergeben muss. Und diese Fähigkeiten dieser und anderer eingebauter Komponenten können wir tatsächlich ausbauen, indem wir ihnen einen itemRenderer geben: Das ist
eine Klasse, die sich um die Anzeige der einzelnen Datenteile
kümmert. Auf diese Weise kann sich eine Liste darum kümmern, die Daten durchzusehen, die erforderliche Anzahl von
Zellen anzulegen, sie vertikal anzuordnen und zu scrollen,
während sich der itemRenderer darum kümmert, die einzelnen
Elemente zu zeichnen. Die TileList ist eine weitere eingebaute Datenkomponente, der neue Renderer zugewiesen
werden können, und wir lassen diese die Arbeit machen, die
Fotos in einem Raster anzuordnen. Während ein DataGrid Daten in Zellen anzeigt und dabei jeweils ein Element in jede
Zeile stellt, zeigt TileList seinen Inhalt in einem Raster angeordnet an, mit einem Element pro Zelle und ohne Zeilenoder Spaltenköpfe:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="flickr.send()">
<mx:HTTPService id="flickr"
url="http://api.flickr.com/services/rest"
requestTimeout="5000" resultFormat="e4x">
<mx:request>
<method>flickr.people.getPublicPhotos</method>
è Inhalt
Schnelleinstieg in Flex 2
<user_id>40732543741@N01</user_id>
<per_page>200</per_page>
<api_key><!-- hier kommt der API-Schlüssel hin -->
</api_key>
</mx:request>
</mx:HTTPService>
<mx:TileList
selectable="false"
paddingLeft="0" paddingRight="0"
columnWidth="75" rowHeight="75"
width="100%" height="100%"
dataProvider="{flickr.lastResult.photos.photo}"
itemRenderer="com.partlyhuman.books.flexshortcut.flickr.
FlickrTile"/>
</mx:Application>
Die itemRenderer -Eigenschaft der TileList gibt an, welche
Klasse erzeugt wird, um die einzelnen Felder des Rasters zu
füllen. Indem wir ihr den Namen der Klasse FlickrTile geben,
geben wir an, dass jedes Feld mit einem FlickrTile gefüllt
werden soll. Diese Klasse kümmert sich dann um die visuelle
Darstellung einer einzigen Datenzeile.
Der Rest der Anwendung befindet sich in der Klasse FlickrTile . Innerhalb eines ItemRenderer gibt es die Eigenschaft
data , die auf die Datenzeile gesetzt wird, die der Renderer repräsentieren soll. Wir nutzen E4X, um die Eigenschaften aus
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
58
dem XML herauszuziehen, konstruieren damit eine Grafik-URL
und nutzen ein Image , um die Grafik anzuzeigen:
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
private function photoToImage(photo:*):String
{
var p:XML = photo as XML;
return "http://static.flickr.com/" + p.@server + "/"
+ p.@id + "_" + p.@secret
+ "_s.jpg";
}
]]></mx:Script>
<mx:Image id="img" width="75" height="75"
source="{photoToImage(data)}"/>
</mx:Canvas>
Jetzt fügen wir über der Grafik ein Overlay mit dem Titel
hinzu:
<mx:HBox id="caption" width="75" height="75"
backgroundColor="black">
<mx:Text height="100%" width="100%"
truncateToFit="true" selectable="false" color="white"
text="{data.@title}"/>
</mx:HBox>
è Inhalt
Schnelleinstieg in Flex 2
Dann ergänzen wir einige States. An Stelle des StandardStates haben wir dieses Mal zwei States, inaktiv und aktiv:
Was Flex mitbringt
59
sichtbar zu machen. Wie in Abbildung 12 gezeigt, ist es ein
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 verwenden oder den Standard-State nutzen wollen. Sie können einen
selbst definierten State als Ihren Standard-State setzen, indem
Sie currentState im Wurzel-Tag Ihrer Komponente setzen. Auf
diese Weise können wir den Basis-State ignorieren: Die Anwendung befindet sich immer in einem der beiden States, die
wir definiert haben. Wir sorgen auch dafür, dass die Maus die
Zustandsänderung anstößt, indem wir dem Wurzel-Tag Events
hinzufügen:
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"…
mouseOver="currentState='active'"
mouseOut="currentState='inactive'"
currentState="inactive">
Und das ist alles. Jetzt können wir die Maus über dem Raster
schweben lassen, um die Bilder hinter den Überschriften
TecFeeds © 2007 by O’Reilly Verlag
Abb. 12 States werden als Rollover ausgetauscht.
Wann man States (nicht) verwenden sollte
States sind für Änderungen nützlich, die lokal sind, insbesondere für solche, die sich nur auf das Erscheinungsbild auswirken. Weil Sie beliebigen Code ausführen können, wenn Sie in
einen State eintreten, indem Sie ihn an das enterState -Event
des States binden, ist es verführerisch, States zur Implementierung aller möglichen Arten von Veränderungen zu verwen-
è Inhalt
Schnelleinstieg in Flex 2
den. Sie werden allerdings erfolgreicher sein, wenn Sie States
einsetzen, um in sich selbst abgeschlossene Änderungen der
Benutzerschnittstelle zu verwalten.
Eine Schwäche von States ist, dass sie öffentlich sind: Jeder
externe Code kann die currentState -Eigenschaft Ihrer Klasse
und damit den State Ihrer Klasse ändern. States sind demnach
komfortabel, aber nur zu haben, wenn man auf Kapselung
verzichtet.
Styles
Styles machen es leicht, sämtliche Erscheinungsbilder Ihrer
Anwendung anzupassen, und bieten Ihnen verschiedene
Wege, Erscheinungsbilder mit Objekten zu verknüpfen. Styles
sind ziemlich vielfältig: Sie können Styles zur Laufzeit ändern,
um Ihre Anwendung reaktionsfähiger zu machen, Sie können
sie in MXML oder ActionScript setzen, und Sie können sie an
Datenquellen binden.
Inline-Styles
In MXML sind Styles eine Gruppe von Attributen von Tags. Anders als bei einigen anderen deklarativen XML-Sprachen teilen in MXML die Attribute für Event-Namen, -Styles, -EffektTrigger und -Instanzeigenschaften alle einen Namensraum.
Sie können die Icons im Pop-up der Autovervollständigung
von Flex Builder 2 verwenden, um Styles auseinanderzuhalten
und zu sehen, welche Styles auf welcher Komponente verfügbar sind. Alternativ könnten Sie das Flex Properties-Panel im
Designmodus von Flex Builder 2 verwenden, um zu sehen,
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
60
welche Styles verfügbar sind, oder einen Blick in den StylesAbschnitt der Dokumentation der Klasse werfen.
Wenn sie in Tag-Attributen verwendet werden, unterliegen
Style-Namen einer einfachen Übersetzungsregel. Ein StyleName in einem Stylesheet darf (und tut das häufig auch) wie
in font-family Minuszeichen verwenden, um Wörter zu trennen. Wenn sie als Attribute in einem Tag verwendet werden,
werden die Minuszeichen in Camel-Case umgewandelt, beispielsweise wie in fontFamily . Das erfolgt programmatisch, damit sogar die benutzerdefinierten Styles, die Sie erzeugen,
umgewandelt werden können. Außerdem dürfen Sie in einem
Stylesheet entweder die Camel-Case-Form oder die Form mit
dem Minuszeichen verwenden: Beide Formen werden akzeptiert.
Um das Erscheinungsbild einer einzelnen Instanz zu ändern
(siehe Abbildung 13), können Sie Inline-Styles verwenden:
<mx:Text width="100%" text="Flau, langweilig, stillos. Macht
keinen Eindruck."/>
<mx:Text width="100%"
fontSize="18"
color="white"
fontFamily="Futura"
fontStyle="italic"
text="ABSCHLIESSBARKEIT sorgt für WACHSENDE PRODUKTIVITÄT
in der WEBDESIGN-MODELLOLOGIE"/>
è Inhalt
Schnelleinstieg in Flex 2
Was Flex mitbringt
61
paddingLeft,
Es gibt keine margin -Style. Alle Maßeinheiten
paddingRight, … werden in Pixeln angegeben.
Kombinierte Kurzformen ( padding: 1 2 3 4 )
werden nicht unterstützt.
Benannte Farben und Ganzzahlwerte wie
color,
backgroundColor 0x5566AA , # 5566AA , werden unterstützt, Kurzformen wie #AAA nicht.
Abb. 13 Texten etwas Stil spendieren
backgroundAlpha Alpha-Werte sind reelle Zahlen zwischen 0 und 1.
Häufig verwendete Styles
borderStyle,
borderSides
Es gibt eine Hand voll Styles, die Sie in Flex 2 häufig verwenden werden. Viele davon scheinen mit W3C CSS-Styles identisch zu sein, sind häufig aber etwas anders. Diese Unterschiede können problematisch werden, deswegen finden Sie
entsprechende Hinweise dazu in der folgenden Liste.
Statt wie in CSS border-left , border-right usw.
zu setzen, setzen Sie border-style auf einen
einzigen Style und border-sides auf eine kommaseparierte Liste mit top , left , right , bottom .
horizontalCenter,
verticalCenter
Ermöglicht Ihnen eine Positionierung auf Basis
einer Mittelinie statt der linken oberen Ecke. Setzen Sie für beide Werte 0, wird der Mittelpunkt
eines Objekts auf den Mittelpunkt seiner Elternkomponente gesetzt.
horizontalGap,
verticalGap
Modifiziert Abstände bei Layout-Containern wie
HBox .
Wie oben gesagt, werden alle Maßeinheiten in Pixeln angegeben. Deswegen sollte kein Wert Einheiten einschließen. Ein
weiterer wichtiger Punkt ist, dass die Eigenschaften x , y , width
und height keine Styles sind und von Styles nicht gesteuert
werden können. Aber top , bottom , left und right sind Styles,
die die gleiche Bedeutung haben wie in W3C CSS.
Tab. 1 Häufig vorkommende Styles und Anmerkungen:
Styles in ActionScript setzen
fontFace
Kommaseparierte Listen werden nicht unterstützt. Verwenden Sie _typewriter , _sans , _serif statt CSS-Vorgaben wie sans.
Um auf einer einzelnen Komponenteninstanz mit ActionScript
einen Style zu setzen, verwenden Sie setStyle(styleName,
­v alue) , zum Beispiel:
fontSize
Alle Maßeinheiten werden in Pixeln angegeben.
Hängen Sie keine Einheiten an.
<mx:Button id="myButton" click="myButton.
setStyle('borderColor', 'red')" label="Red"/>
TecFeeds © 2007 by O’Reilly Verlag
è Inhalt
Schnelleinstieg in Flex 2
Style-Vererbung
In Abhängigkeit vom jeweiligen Style kann das Setzen eines
Styles auf einer Container-Komponente bewirken, dass er
auch auf den Kindern des Containers gesetzt wird. Das ist ein
anderes Phänomen als kaskadierende Styles, weil es sich
nicht auf Style-Regeln bezieht, sondern auf Anzeigelisten. Es
wird als Style-Vererbung bezeichnet und gilt üblicherweise
für Farben und Text-Styles. Die Flex 2 Language Reference dokumentiert die Vererbungseigenschaft jedes Styles.
Cascading Style Sheets
Flex 2 unterstützt Cascading Style Sheets mit der gleichen
Syntax wie W3C CSS und dem gleichen Kaskadierungsmodell,
aber mit ganz anderer Unterstützung für Selektoren. Wenn Sie
beginnen, Flex 2-Stylesheets zu verwenden, würde ich Ihnen
raten, alles zu vergessen, was Sie über CSS wissen. Oder schieben Sie es zumindest beiseite, bis Sie das nächste Mal wieder
HTML und CSS verwenden.
Sie können CSS direkt in einen Style -Block in MXML schreiben
oder eine externe CSS-Datei referenzieren:
<mx:Style source="styles.css"/>
Allerdings können Sie CSS-Style-Blöcke nur aus der WurzelApplication Ihres Projekts einlesen. Wenn Sie an einer großen
Anwendung arbeiten, sollten Sie überlegen, ob Sie Ihre Styles
nicht in mehrere .css -Dateien aufteilen, die sich mit verschiedenen Subsystemen befassen. Das ist besonders vorteilhaft,
wenn Sie an einem Projekt arbeiten, das mehrere SWFs veröf-
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
62
fentlicht, die Code teilen: Sie können in jeder Top-Level-Application unterschiedliche .css -Dateien einschließen, die nur
Styles enthalten, die in dieser Anwendung verwendet werden.
Wenn Sie mit CSS arbeiten, denken Sie daran, dass Flex auch
CSS in ActionScript kompiliert. Ihre CSS-Dateien werden nicht
zur Laufzeit geladen oder angewandt. In Bezug auf den Wechsel von Styles zur Laufzeit ist aber nicht alle Hoffnung verloren. Über die Klasse StyleManager können Sie Styles einsehen
und modifizieren und sogar neue Selektoren hinzufügen,
während Ihre Anwendung läuft. Sie können zwar nicht einfach ein neues Stylesheet laden, aber ActionScript verwenden, um CSS-Styles zu modifizieren und zu sehen, wie Ihre
Anwendung mit diesen Änderungen aufgefrischt wird.
Der Hauptunterschied zwischen W3C CSS- und Flex 2-Stylesheets sind die Arten von Selektoren, die unterstützt werden.
Typ-Selektoren
Nutzen Sie Typ-Selektoren, um Styles für jede Instanz einer
bestimmten Klasse zu setzen. Diese können nicht nur auf eingebaute Komponenten wie ComboBox und ProgressBar verweisen, sondern auch auf MXML- und ActionScript-Klassen, die
Sie selbst schreiben. Ganz ähnlich, wie Sie die folgende Zeile
in W3C CSS verwenden könnten, um alle geordneten und ungeordneten Listen weiß erscheinen zu lassen:
ul, ol {color: white}
è Inhalt
Schnelleinstieg in Flex 2
könnten Sie Folgendes in Flex 2 CSS verwenden, um alle Label- und Text-Komponenten weiß erscheinen zu lassen:
Label, Text {color: white}
Klassen-Selektoren
Nutzen Sie Klassen-Selektoren, um einen allgemeinen Style zu
erzeugen, den beliebige Instanzen verwenden können. Um einen Kassen-Selektor zu benutzen, müssen Sie sich nur einen
Klassennamen einfallen lassen, ihn in CSS mit dem Style definieren, den Sie darauf anwenden möchten, und den Klassennamen auf den Instanzen setzen, die auf diese Weise erscheinen sollen.
Beispielsweise können Sie eine Klasse red erzeugen, die nur
ein paar spezifische Komponenten auf dem Bildschirm verwenden werden:
<mx:Style>
.red {color: red}
</mx:Style>
<mx:Button styleName="red" label="Roter Button"/>
<mx:Label styleName="red" label="Rotes Label"/>
<mx:Button label="Normaler Button"/>
Die Nomenklatur wird hier verwirrend, weil wir bereits ein
ganz anderes Konzept dafür haben, was eine »Klasse« ist.
Auch wenn die Dinger immer noch »Klassen-Selektoren« genannt werden, nutzen Sie das Attribut styleName , um StyleKlassen in Ihren Tags anzuwenden, nicht class , wie Sie es in
HTML machen würden.
TecFeeds © 2007 by O’Reilly Verlag
Was Flex mitbringt
63
Achtung: Sie können auf einem Element nicht, wie in HTMLCode bei <a class="external, big"> mehrere Style-Klassen anwenden.
Der global-Selektor
Wie der * -Selektor von W3C CSS gilt der global -Selektor in
Flex 2 CSS für alles. Er ist allerdings die allgemeinste Regel
und kann von einer spezifischeren Regel überschrieben werden. Das kann nützlich sein, um eine globale Schriftart zu setzen oder, noch besser, um auf einmal Animationen in allen
Flex 2-Komponenten zu beschleunigen oder abzuschalten.
global {
openDuration: 0;
closeDuration: 0;
}
Nicht implementierte Selektoren
Über die drei oben erwähnten Selektoren hinaus sind keine
weiteren Selektoren implementiert. Das bedeutet, dass Sie
Folgendes nicht verwenden können:
• Typ-spezifische Klassen wie Button.bigButton
• ID-Selektoren wie #logo
• alle Arten von Nachfahren- oder Familien-Selektoren wie
Panel LinkButton
• Pseudoklassen wie .fancyLabel:hover
è Inhalt
Schnelleinstieg in Flex 2
CSS oder nicht CSS
Flex 2 führt mit der mangelhaften Selektorenunterstützung
und der Klassifizierung visueller Eigenschaften wie width und
height als Nicht-Styles einen Doppelschlag aus. Es gibt zwar
gute Gründe dafür, diese Eigenschaften nicht als Styles zu behandeln, führt aber dazu, dass der Haupteil des visuellen Erscheinungsbilds häufig in einer externen CSS-Datei gespeichert wird, während Teile fest im MXML verankert bleiben.
Der Mangel an Selektoren bedeutet, dass Sie eventuell keine
andere Wahl haben, als unhandliche Style-Klassennamen zu
konstruieren, um Namenskonflikte zu vermeiden, wenn Sie
bestimmte Komponenten in einem Stylesheet (mit globaler
Gültigkeit) anvisieren.
Wenn es sinnvoll ist, könnten Sie Inline-Styles für Styles verwenden, die nur auf einzelnen Instanzen verwendet werden,
oder statt Style-Klassen »Mikroklassen« erzeugen. Nehmen
wir an, Sie wollten beispielsweise den folgenden Effekt erzielen:
#topPanel Button.redButton {background-color: red; width: 50}
Sie könnten sich entschließen, an Stelle der Style-klasse .topPanelRedButton tatsächlich eine Klasse RedButton.mxml zu machen, die sich vielleicht im gleichen Paket befindet wie Ihr
topPanel und aus Folgendem besteht:
<mx:Button backgroundColor="red" width="50"/>
Bewährte Praktiken der Webstandards-Gemeinschaft würden
uns auf eine Trennung von Inhalt und Style verpflichten. Aber
TecFeeds © 2007 by O’Reilly Verlag
Flex zum Glänzen bringen
64
in Flex 2-Anwendungen kommt der Inhalt oft von einer externen Quelle und wird verwendet, um den View zu füllen. Wenn
Sie in MXML Views schreiben, geben Sie also eine Darstellung
vor, die bereits locker an einen Inhalt gebunden ist. Die Darstellung noch weiter in Struktur und Style aufzuteilen ist
Zweck der Externalisierung von CSS. Das ist nützlich, um Komponenten zu schreiben, die mit einem anderen Style wiederverwendet werden könnten. Andererseits könnten Sie sich bei
Einwegkomponenten selbst behindern, wenn Sie den Style
wie beim Rest der MXML-Darstellung in eine separate Datei
stecken.
Die Verwendung von externem CSS – ihre Einschränkungen
vorausgesetzt – kann Ihren Code entweder vereinfachen oder
komplizierter machen. Finden Sie eine Strategie, die gut mit
Ihren Styles und Ihrer Anwendung funktioniert und ihre Komplexität und Organisation berücksichtigt.
Flex zum Glänzen bringen
Viele Entwickler (und noch mehr Designer), die sich zum ersten Mal mit Flex beschäftigen, sind zunächst skeptisch, was
das Erscheinungsbild von Flex-Anwendungen angeht. Das
Standardtheme wird in so vielen Flex 2-Demos verwendet,
dass es scheint, als hätte man keine Auswahlmöglichkeiten:
Anwendungen scheinen viele Formen annehmen zu können,
vorausgesetzt sie sind Blaugrün, haben abgerundete Ecken
und nutzen Verdana als Schrift. Wäre das der Fall, wäre es
schwierig, Kunden von Flex 2 zu überzeugen.
è Inhalt
Schnelleinstieg in Flex 2
Glücklicherweise ist dem nicht so. Ohne viel Aufwand können
Sie Flex 2-Anwendungen entwickeln, die keinerlei Ähnlichkeiten mit dem Standardtheme haben. Denken Sie daran: Im
wahren Leben kann das Aussehen Ihrer Anwendung fast so
wichtig sein wie ihre Funktionalität.
Assets
Mit den eingebauten Style-Eigenschaften können Sie nur beschränkt Dinge erreichen. Sie können Rahmen, Farben und
Abstände ändern, aber um wirklich das Erscheinungsbild Ihrer
Anwendung zu ändern, brauchen Sie Assets.
Flex 2 behandelt Assets ganz anders als beispielsweise Flash
8. Erstens kompiliert Flex 2 direkt von den Quelldateien. Die
IDE besitzt weder Bibliotheks-Panel noch -Schnittstelle für
den Import von Assets. Aber auch wenn es auf den ersten
Blick nicht so scheinen mag, ist Flex 2 absolut dazu in der
Lage, in kompilierten SWFs gemeinsam mit Ihrem Code Multimedia-Inhalte einzuschließen.
Asset-Typen
Sie können Schriften, Soundobjekte, Grafiken und sogar andere SWFs in Ihre Anwendung einbetten. Wenn Sie in eine
Anwendung Assets einbetten, haben Sie keine Möglichkeit,
die Qualitätseinstellungen zu steuern. Können Sie die Komprimierungseinstellungen dieser Dateien steuern, müssen Sie
diese also über externe Programme anpassen.
TecFeeds © 2007 by O’Reilly Verlag
Flex zum Glänzen bringen
65
Sie können die folgenden Inhalte einbetten:
• JPG-/JPEG-Grafikdateien
• GIF-Grafikdateien
• PNG-Grafikdateien
• SVG-/SVGZ-Vektorgrafikdateien (unterstützt eine Unter-
menge von SVG 1.1)
• MP3-Sounddateien
• TTF-Schriftdateien
• installierte Systemschriften
• SWF-Dateien und spezielle Symbole in SWFs
Von diesen können SVG-Dateien und Schriftdateien nicht zur
Laufzeit geladen werden.
Assets über Styles einbetten
Das einfachste und üblichste Verfahren, Assets in Ihre Anwendung zu bekommen, ist die Verwendung von Styles. Da die
Grafikeinbettung einfach dort platziert wird, wo die Grafik
verwendet wird, ist dieses Verfahren intuitiv und leicht verwendbar. Flex 2 nutzt die Embed() -Notation, eine Flex-Erweiterung zu CSS im Gefolge von url() .
Die funktionale Notation Embed() kann mehrere Parameter annehmen, von denen einige nur bei bestimmten Typen von Assets anwendbar sind. Der Standardparameter ist source , der,
wenn keine anderen Parameter vorhanden sind, weggelassen
werden kann.
è Inhalt
Schnelleinstieg in Flex 2
Wenn Sie CSS in ein Stylesheet schreiben, verwenden Sie die
Embed() -Notation normal:
<mx:Style>
MonaLisa {
background-image: Embed("/assets/monalisa.jpg");
background-size: "100%";
}
</mx:Style>
<louvre:MonaLisa/>
Und wenn Sie Styles inline als Attribute von Tags schreiben,
schreiben Sie stattdessen @Embed() :
<mx:Image source="@Embed('/assets/monalisa.jpg')"
width="100%" height="100%"/>
Embed() nutzt Pfade, die relativ zu der Datei sind, in die sie ge-
schrieben wurden, und die Wurzel des Pfads ist der Quellordner, wie er in den Projekteinstellungen von Flex Builder 2 gesetzt wurde. Wenn Sie nicht gerade einen guten Grund haben,
etwas anderes zu machen, sollten Sie absolute Pfade verwenden, damit das Verschieben von Quellcode-Dateien keine Auswirkungen hat.
Flex zum Glänzen bringen
66
können. Zunächst scheint das vielleicht ziemlich weit weg, ergibt in Bezug auf die neue Anzeigearchitektur von Flash
Player 9 aber schnell Sinn. Die Methode zur Erstellung eines
beliebigen Typs von Anzeigeobjekt ist eben einfach new . Wenn
Sie neue Komponenten erzeugen, die vorhandene erweitern,
werden auch diese noch mit new erzeugt. Bitmap-Assets sind
also Subklassen von BitmapAsset (und die wiederum Sub-Subklassen von Bitmap ), die eben die Funktionalität einer leeren
Bitmap erweitern, indem sie stattdessen eine bestimmte Grafik
anzeigen
var
var
var
var
a:Button = new Button(); addChild(a);
b:Panel = new Panel(); addChild(b);
c:TextInput = new TextInput(); addChild(c);
d:InboxView = new InboxView(); addChild(d);
//benutzerdefinierte Komponente
var e:MonaLisaBitmap = new MonaLisaBitmap(); addChild(e);
//Asset!
Wenn Sie in CSS Assets einbetten, generiert der Flex 2-Compiler automatisch Namen für die Klassen. Wollen Sie auf sie außerhalb von CSS zugreifen, können Sie Assets einbetten, indem Sie in ActionScript Metadaten verwenden.
Assets in der Runtime
Assets mit ActionScript einbetten
Assets, die Sie einbetten, werden zu einem Teil der Anwendung und sind gleichermaßen für den Code, den Sie schreiben, und zur Laufzeit für die Anwendung verfügbar. Das
Tollste an Assets ist, dass sie in Klassen verwandelt werden
Sie können das Metadaten-Tag Embed verwenden, um Assets in
ActionScript einzubetten. Eingebettete Assets sind mit der
Class-Referenz verknüpft, die Sie angeben. Sie können auch
Bindung über geschweifte Klammern verwenden, um diese
Klasse in Inline-CSS-Attributen zu verwenden:
TecFeeds © 2007 by O’Reilly Verlag
è Inhalt
Schnelleinstieg in Flex 2
[Embed(source="assets/delete.gif")]
private const DeleteAsset:Class;
<!-- direkt inline in CSS einbetten -->
<mx:Button icon="@Embed(source='/assets/delete.gif')"
label="Löschen"/>
<!-- an über Metadaten eingebettete Klasse binden -->
<mx:Button icon="{DeleteAsset}" label="Löschen"/>
Weil Variablen, die Klassen referenzieren, nicht als Typen verwendet werden können, können Sie nicht var foo:DeleteAsset
schreiben. Möchten Sie Referenzen auf Assets übergeben,
müssen Sie stattdessen die Superklasse verwenden. Bitmaps
werden als BitmapAssets eingebettet, Schriften als FontAssets ,
SVG als SpriteAsset usw. Sie können als Typ auch die allgemeine Schnittstelle IFlexAsset verwenden.
Flex zum Glänzen bringen
67
bare Komponente verwendet wird. Während die Ränder in der
ursprünglichen Größe bleiben, können Sie durch die Skalierung der Mitte viele Grafiken dehnen, ohne die wichtigen Details in den Ecken zu deformieren. Sie definieren zwei Linien
auf jeder Achse, die die Grafik in ein Raster mit neun Unterteilungen aufgliedern. Die Positionen der vertikalen Linien werden in Pixeln von der linken Seite gemessen und die der horizontalen Linien von oben (da der Ursprung im Flash Player
die linke obere Ecke ist). Beispielsweise könnten wir Folgen­
des verwenden, um die Größe eines Rahmens in einem ein­
gerahmten Bild zu bewahren:
<mx:Image source="@Embed(source='/assets/
monalisa-framed.jpg', scaleGridTop=22, scaleGridLeft=22,
scaleGridRight=395, scaleGridBottom=575)" width="100%"
height="100%"/>
Schriften einbetten
Einbettungsoptionen
Unabhängig davon, ob Sie Embed() in einem Metadaten-Tag, in
einem Inline-Style oder einem Stylesheet verwenden, können
Sie mit ihm immer Parameter verwenden. Bei allen Typen von
Assets unterstützt es die Eigenschaften source und mimeType ,
die verwendet werden, um die Quelldatei und den MIME-Typ
des Objekts anzugeben.
Grafische Assets unterstützen außerdem Eigenschaften zur
Angabe von Scale-9-Segmentierungen. Scale-9 ermöglicht Ihnen, eine Grafik diskontinuierlich zu skalieren, die üblicherweise als Hintergrund oder als Skin für eine größenveränder-
TecFeeds © 2007 by O’Reilly Verlag
Um eine Schrift in ein Stylesheet einzubetten, können Sie
url() statt Embed() verwenden. Nutzen Sie den speziellen Selektor @font-face , um die Schrift zu definieren, und setzen Sie
font-family , um ihren Namen zu erzeugen:
/* die Schrift einbetten */
@font-face {
src: url("/assets/fonts/caecilia-light.ttf");
font-family: "Caecilia";
}
/* die Schrift verwenden */
.partlyhuman {
è Inhalt
Schnelleinstieg in Flex 2
font-family: "Caecilia";
font-size: 32;
}
Zur Verwendung der Schrift müssen Sie einfach nur die fontfamily referenzieren, die Sie bei der Einbettung deklariert haben.
Sie können eine Schrift aus einer TTF-Datei, aus einer True­
Type-Schrift, die auf Ihrem System installiert ist, oder aus einer Schrift einbetten, die in ein SWF eingebettet ist. Wenn Sie
PostScript- oder OTF-Schriften verwenden müssen, betten Sie
diese in ein SWF ein und nutzen dann das SWF als Ziel Ihrer
src -Eigenschaft. Wenn Sie Schriften aus einem SWF verwenden, müssen Sie ein @font-face -Element für jeden Style ( bold ,
italic , bold italic ) erstellen, den Sie verwenden wollen:
@font-face {
src: url("assets/fonts/caecilia.swf");
font-family: "Caecilia";
}
@font-face {
src: url("assets/fonts/caecilia.swf");
font-family: "Caecilia";
font-style: italic
}
@font-face {
src: url("assets/fonts/caecilia.swf");
font-family: "Caecilia";
font-weight: bold;
TecFeeds © 2007 by O’Reilly Verlag
Flex zum Glänzen bringen
68
}
@font-face {
src: url("assets/fonts/caecilia.swf");
font-family: "Caecilia";
font-style: italic;
font-weight: bold;
}
Symbole einbetten
Sie können gleichermaßen SWFs selbst und Symbole aus der
Bibliothek eines SWF in Ihre Flex-Anwendung einbetten.
Wenn Sie ein vollständiges SWF einbetten, können Sie den
Code darin verwenden, als wäre er mit ActionScript 3 für
Flash Player 9 oder höher veröffentlicht worden, oder Sie können mit älteren SWFs über eine LocalConnection im Host und
im eingebetteten SWF kommunizieren. Eingebettete SWFs
werden als Subklassen von mx.core.MovieClipLoaderAsset erzeugt, die MovieClip erweitert.
Sie können SWFs auch als Bibliotheken einsetzen, um grafische Assets zu organisieren, die Ihre Flex-Anwendung nutzt,
und dann die Flash-Entwicklungsumgebung nutzen, um Ihre
Assets zu verwalten. Alle Symbole, die für ActionScript als
Button- oder MovieClip-Typen veröffentlicht werden, sind
über ihren Linkage-Namen verfügbar. Aus eingebetteten
Symbolen wird der gesamte Code herausgezogen. Sie werden
am besten also nur für Grafiken verwendet. Um ein Symbol
anzugeben, das aus einem SWF eingebettet werden soll, nutzen Sie den symbol -Parameter der Embed() -Notation. Beispiels-
è Inhalt
Schnelleinstieg in Flex 2
weise könnten Sie Folgendes verwenden, um ein Symbol aus
einem SWF mit einer Sammlung von Gemälden zu verwenden:
<mx:Image id="laJoconde" source="@Embed(source='paintings.
swf', symbol='monaLisa')"/>
Flex zum Glänzen bringen
69
Button {
up-skin: Embed("/assets/button-up.png");
down-skin: Embed("/assets/button-down.png");
over-skin: Embed("/assets/button-over.png");
}
Skinning
Das Einbetten von Grafiken kann für sich genommen schon
die visuelle Wirkung Ihrer Anwendung erhöhen. Üblicherweise werden Grafiken als Hintergrund, als frei schwebende
Grafiken und als Icons auf Buttons verwendet. Aber um das
Erscheinungsbild der Schnittstelle selbst zu ändern, müssen
Sie die Skinning-Einrichtungen von Flex 2 verwenden.
Skinning kann ganz einfach durchgeführt, indem Grafiken in
Skin-Style-Eigenschaften eingebettet werden. Eingebaute
Flex UI-Komponenten veröffentlichen mehrere Style-Eigenschaften für das Skinning. Diese lassen sich leicht identifizieren, da sie mit »-skin« enden. Skin-Style-Eigenschaften gibt es
in Gruppen, die auf den möglichen Interaktionen der Komponente basieren. Beispielsweise zählen Skins für Buttons seine
acht möglichen Zustände auf: up , down , over , disabled – und all
diese noch mal, während sie ausgewählt sind (um Buttons zu
unterstützen, die ein- und ausgeschaltet werden können). Unten ist das CSS für den benutzerdefinierten Button-Style, den
Sie in Abbildung 14 sehen.
TecFeeds © 2007 by O’Reilly Verlag
Abb. 14 Skinning lässt Ihre Anwendung
schnell einzigartig aussehen.
Wenn Sie sich sicher sind, dass kein Button in der Anwendung
deaktiviert oder ausgewählt ist, reichen diese drei Styles aus.
Andernfalls könnte ihr sorgfältig geskinnter Button seine
Maske fallen lassen und im Standard-Style erscheinen, wenn
er deaktiviert oder ausgewählt wird. Selbst wenn Sie nicht
alle Zustände in Ihren Skins verwenden, wäre es also empfehlenswert, alle Skin-Eigenschaften zuzuweisen, beispielsweise
indem Sie die Skin-Eigenschaften für den ausgewählten Zustand auf die gleichen Grafiken zeigen lassen wie die Skin-Eigenschaften für den nicht ausgewählten Zustand. Werfen Sie
in der Dokumentation bei den einzelnen Komponenten einen
Blick in den Styles-Abschnitt, um seine skinbaren Eigenschaften zu sehen.
è Inhalt
Schnelleinstieg in Flex 2
Es kann auch andere Styles geben, die mit den Zuständen einer Komponente verknüpft sind und seine Skins begleiten.
Buttons haben die Eigenschaften disabled-color , text­r ollover-color und text-selected-color , um die Farbe des
Texts in Abhängigkeit von diesen Zuständen zu ändern.
Eine Anforderung von Skin-Styles ist, dass sie eingebettete
Grafiken sein müssen. Während andere Styles wie backgroundimage entweder über eine url() -Notation angegeben und zur
Laufzeit geladen oder aber mit der Embed() -Notation angegeben und eingebettet werden können, müssen Skin-Eigenschaften immer eingebettet werden. Das sichert, dass Sie sich
nicht mit dem Ladevorgang und der Möglichkeit befassen
müssen, dass Ihre Schnittstelle unsichtbar oder nicht verwendbar ist, solange das Laden noch nicht abgeschlossen ist.
Ob ein Grafik-Style das Laden zur Laufzeit erlaubt, können Sie
ermitteln, indem Sie sich den Typ des Styles anschauen. Wenn
Sie eine Style-Eigenschaft mit dem Typ Class sehen, können
Sie annehmen, dass Sie ein eingebettetes Asset erwartet.
Denken Sie daran, dass das Ergebnis eines Metadaten-Tags
Embed eine Class-Referenz ist: Eine Inline- Embed() -Notation erfüllt also die Style-Eigenschaft-Anforderungen für einen
Class -Typ.
Bitmap-Glättung
Flash Player 9 und Flex 2 wollen Ihnen wirklich helfen, dass
Ihre Anwendung schneller läuft. Egal ob Sie eine Grafik einbetten, sie zur Laufzeit laden oder die Abspielqualität auf
TecFeeds © 2007 by O’Reilly Verlag
Flex zum Glänzen bringen
70
BEST setzen, Flash Player 9 transformiert Bitmaps immer mit
einem schnellen Nächster-Nachbar-Algorithmus. Das bedeutet, dass bei skalierten Grafiken ein Treppeneffekt zu sehen
sein kann. Dass dabei die Anzeigequalität der Geschwindigkeit geopfert wird, ist in der Regel eine gute Sache und eine
vernünftige Standardeinstellung: In Animationen ist die
Frame-Rate wichtiger als die Qualität der einzelnen Frames.
Allerdings bietet Ihnen Flex keine einfache Medizin, wenn
die Bildqualität für eine bestimmte Grafik entscheidend ist.
Es gibt eine Boolesche Eigenschaft namens smoothing , die
auf Bitmap -Instanzen definiert ist, eine bilineare Filterung aktiviert und ein glatteres Bild auf Kosten von mehr Berechnungen liefert. Die eigentliche Bitmap ist allerdings tief in
der Komponente vergraben, die sie tatsächlich verwendet,
und es gibt keinen allgemeinen Weg, an diese innere Bitmap
heranzukommen.
Der Code für diesen TecFeed schließt eine Klasse namens
com.partlyhuman.fx.SmoothingEnabler ein, die alle Bitmaps
findet, die in einer Komponente vergraben sind, und für sie
das Glätten einschaltet. Sie können sie folgendermaßen auf
jedem Anzeigeobjekt verwenden:
import com.partlyhuman.fx.SmoothingEnabler;
SmoothingEnabler.enableSmoothing(myDisplayObject);
Die statische Methode baut rekursiv eine Liste des Inhalts
des Objekts auf und aktiviert das Glätten auf allen gefundenen Bitmaps, einschließlich extern geladener Grafiken.
è Inhalt
Schnelleinstieg in Flex 2
Programmatische Skins
Indem Sie die Drawing-API von ActionScript 3.0 einsetzen,
können Sie programmatisch Grafiken auf dem Bildschirm
zeichnen. Wenn das von Ihnen beabsichtigte Look-and-Feel
mit wenigen Strichen, Füllungen und Gradienten erreichbar
ist, wenn Sie ein anpassbares Theme benötigen, wenn Sie
Themes auf Elemente mit sehr unterschiedlicher Dateigröße
anwenden müssen oder wenn die Dateigröße die entscheidende Rolle spielt, sollten Sie überlegen, ob Sie Ihre Skins mit
Code generieren.
Das eingebaute »halo«-Theme von Flex 2 ist vollständig programmatisch. Das bedeutet:
• Sie können die Farbe und die Gradienten des Skins mit
Flex zum Glänzen bringen
71
Methode updateDisplayList() , damit sie sich selbst zeichnen
kann. Indem Sie die Styles untersuchen, die auf Ihrer Klasse
gesetzt werden (die von den Styles übergeben werden, die
auf der Komponente gesetzt werden, der sie ein Theme gibt),
können Sie anpassen, wie Ihr Skin gezeichnet wird.
Haben Sie Ihre Skin-Klasse erstellt, können Sie Skin-Styles mit
einer zusätzlichen Notation namens ClassReference() darauf
setzen, die auch in Inline-CSS eingefügt werden kann, indem
ihr das At-Symbol (@) vorangestellt wird:
Button {
up-skin: ClassReference('com.partlyhuman.books.
flexshortcut.CustomButtonSkin');
}
Styles anpassen.
• Das Erscheinungsbild fällt nicht auseinander, wenn Sie in
das Theme zoomen oder das Theme auf eine extrem große
oder eine extrem kleine Komponente anwenden. Vektorgrafiken, die mit der Drawing-API erzeugt werden, werden
unabhängig von der Skalierung immer verlässlich gerendert.
• Die Dateigröße für das gesamte Theme ist sehr klein. Es
sind keine Bitmap-Grafiken eingebettet, und kompilierter
Code ist extrem kompakt.
Um programmatisch einen Skin für einen Style zu erzeugen,
erstellen Sie eine Klasse, die eine geeignete abstrakte Klasse
aus dem mx.skins -Paket erweitert, und implementieren die
TecFeeds © 2007 by O’Reilly Verlag
Ein Theme erzeugen
Es ist möglich, all Ihre geskinnten Klassen, Assets und Styles
zu einer SWC-Datei zu kompilieren und diese für mehrere
SWFs zu verwenden oder sie als ein Theme zu verteilen. Eine
SWC-Datei ist ein Archiv, das kompilierten Code und Assets
enthält, gegen die vom Compiler gelinkt werden kann, ohne
dass ihr Inhalt neu kompiliert werden muss. Wenn Sie sich
entscheiden, eine SWC-Datei dynamisch zu linken, kann sie
außerhalb der SWF-Datei vorliegen und auf Anforderung geladen werden. Das ist eine sehr gute Taktik, wenn Sie eine Anwendung in mehrere SWFs aufspalten, weil ein geteiltes
Theme dann nur einmal heruntergeladen und nicht in alle
SWFs separat einkompiliert werden muss. Das führt zu einer
kleineren Download-Größe.
è Inhalt
Schnelleinstieg in Flex 2
Flex zum Glänzen bringen
72
Nutzen Sie den Kommandozeilen-Flex-Compiler mxmlc mit
dem Kommandozeilen-Argument –theme , um Theme-Dateien
zu erstellen. Die Flex 2-Dokumentation erklärt diesen Vorgang
ausführlich.
<mx:Fade alphaFrom="0" duration="500"
easingFunction="{Cubic.easeOut}"/>
</mx:completeEffect>
</mx:Image>
Effekte
Dieser Code nutzt einen Kindknoten, um ein Attribut zuzuweisen, damit wir darin ein Objekt einbetten können. Der Effekt-Trigger ist hier completeEffect , und der Effekt ist ein Fade :
Das Objekt wird eingeblendet, wenn das Laden abgeschlossen ist. Dass ein Attribut ein Effekt-Trigger ist, können Sie anhand eines Icons im Autovervollständigungs-Pop-up von Flex
Builder 2 sehen, indem Sie im Effekte-Abschnitt der Flex 2-Dokumentation einer Komponente nachschlagen, oder an dem
Umstand, dass sein Name auf -Effect endet. Wie in diesem
Fall spiegelt der Name eines Effekt-Triggers den Namen des
korrespondierenden Events: Ist das Laden abgeschlossen,
setzt die Komponente ein complete -Event ab und stößt das
Abspielen von completeEffect an, wenn es einen gibt.
Ein paar gut platzierte reaktive Animationen können eine
deutliche Wirkung auf den Eindruck haben, den ein Benutzer
von einem Stück Software bekommt. Animationen können
dem Benutzer durch visuelle Reaktionen Feedback geben.
Glüchlicherweise gibt Flex 2 Entwicklern mit Effects eine
Wunderwaffe. Der Einsatz von Effekten und Effekt-Triggern
kann Ihre Anwendung herausputzen, ohne Sie ins Schwitzen
zu bringen.
Effekte sind Klassen im Paket mx.effect , die Effect erweitern.
Indem Sie die Eigenschaften einer Effect-Instanz setzen, können Sie ändern, worauf der Effekt Auswirkungen hat, und die
Parameter der Animation festlegen. Dann können Sie den Effekt so einrichten, dass er von bestimmten Triggern ausgelöst
wird, indem Sie den Effekt einem Effekt-Trigger auf Ihrer Komponente zuweisen.
Unten haben wir einen einfachen Effekt hinzugefügt, um die
Grafiken in unserem Flickr-Raster einzublenden zu lassen,
wenn sie vollständig geladen sind:
<mx:Image id="img" width="75" height="75"
source="{photoToImage(data)}">
<mx:completeEffect>
TecFeeds © 2007 by O’Reilly Verlag
Effekte versuchen, Sie durch vernünftige Standardwerte zu
unterstützen. Der Code oben gibt an, dass der anfängliche Alpha-Wert 0 (vollständig transparent) sein sollte, spart aber
den abschließenden Alpha-Wert ( alphaTo ) aus. In der Realität
können Sie alphaFrom ebenfalls weglassen, weil der Effekt
standardmäßig ein Fade-in von 0 zu 1 verwendet.
Unten werden verschiedene Effekte auf verschiedene Trigger
auf dem gleichen Button angewandt:
<mx:Button styleName="skinnedButton" label="Effect">
<mx:rollOverEffect>
è Inhalt
Schnelleinstieg in Flex 2
<mx:Glow color="#ffa0a0" duration="500"
easingFunction="{Cubic.easeOut}"
blurXFrom="20" blurXTo="20"
blurYFrom="20" blurYTo="20"
alphaFrom="0" alphaTo="0.5"/>
</mx:rollOverEffect>
<mx:rollOutEffect>
<mx:Glow color="#ffa0a0" duration="500"
easingFunction="{Cubic.easeIn}"
blurXFrom="20" blurXTo="20"
blurYFrom="20" blurYTo="20"
alphaFrom="0.5" alphaTo="0"/>
</mx:rollOutEffect>
<mx:addedEffect>
<mx:Resize heightFrom="0" widthFrom="0" duration="500"
easingFunction="{Cubic.easeOut}"/>
</mx:addedEffect>
</mx:Button>
Der Button wird von einem Punkt ausgehend vergrößert,
wenn er hinzugefügt wird, und leuchtet in Reaktion auf Ihre
Maus. Aber das Leuchten erscheint nicht einfach, sondern
wird allmählich ein- und ausgeblendet (siehe Abbildung 15).
Sie sollten Ihrem Boss nicht verraten, wie einfach das ist.
Flex zum Glänzen bringen
73
Abb. 15 Über den linken Button mit
Rollover-Skin und Effekt streichen
Effekt-Attribute
Die meisten Effekt-Attribute sind für den Effekt spezifisch,
den sie repräsentieren, aber es gibt einige, die die Animation
im Allgemeinen steuern. Die nützlichsten sind:
duration
In Millisekunden die Zeit, die es dauert, bis die Animation
abgeschlossen ist.
easingFunction
Eine Referenz auf eine Funktion, die steuert, wie die animierten Eigenschaften über die Zeit interpoliert werden.
Sie können die eingebauten Funktionen referenzieren, die
im Paket mx.effects.easing angeboten werden. Das sind die
Easing-Funktionen von Robert Penner, die in den meisten
Tweening-Paketen für Flash und Flex verwendet werden.
startDelay
Die Verzögerung, bevor die Animation beginnt, in Millisekunden.
TecFeeds © 2007 by O’Reilly Verlag
è Inhalt
Schnelleinstieg in Flex 2
repeatCount und repeatDelay
Wie oft der Effekt wiederholt werden soll und die Verzögerung zwischen den einzelnen Wiederholungen in Millisekunden.
target oder targets
Die Instanz oder ein Array der Instanzen, auf die sich der
Effekt auswirken soll. Der Standardwert ist das Objekt, das
das Event ausgelöst hat.
Ein Wort zu Easing-Funktionen: Da Sie diese Eigenschaft nur
auf eine Funktionsreferenz setzen können, ist nicht unmittelbar klar, wie Sie die Eigenschaften von Tweening-Funktionen
anpassen, die zusätzliche Parameter erwarten. Die Lösung ist
der Einsatz einer partiellen Funktion, einer Funktion, für die
einige Eingaben bereits definiert sind. In einigen funktionalen
Programmiersprachen wird das direkt in der Syntax unterstützt, aber in ActionScript 3.0 können wir einfach eine Container-Funktion konstruieren:
private const CUSTOM_BACK_S:Number = 100;
private const backEaseOutCustom:Function =
function(a:Number, b:Number, c:Number, d:Number):Number
{
return Back.easeOut(a, b, c, d, CUSTOM_BACK_S);
};
<mx:Resize duration="1000"
easingFunction="{backEaseOutCustom}"/>
TecFeeds © 2007 by O’Reilly Verlag
Flex zum Glänzen bringen
74
Zusammengesetzte Animationen aufbauen
Effekte schränken Sie nicht auf reine Eine-Eigenschaft-Animationen ein. Indem Sie verschiedene Effekte kombinieren, können Sie beliebig komplexe Animationen erzeugen. Das Effektsystem nutzt die Art deklarativer Animationen, die in der Synchronized Multimedia Integration Language (SMIL) des W3C
standardisiert sind.
Es gibt nur zwei Klassen, die das Timing von Animationsgruppen steuern, Parallel und Sequence , und diese sind leicht zu
verstehen. Kinder eines <mx:Parallel> -Tags beginnen alle zur
gleichen Zeit und laufen zur gleichen Zeit parallel ab. Kinder
eines <mx:Sequence> -Tags werden nacheinander in vorgegebener Reihenfolge abgespielt. Diese beiden Klassen erweitern
ebenfalls Effect . Der Effekt, den Sie einem Effekt-Trigger zuweisen, kann also Parallel oder Sequence als Wurzelknoten haben.
Häufig verwendete Effekte
Der Satz der zur Verfügung stehenden Effect-Klassen und die
Möglichkeit, diese zu komplexeren Effekten zusammenzusetzen, bedeutet, dass Sie nur selten Ihre eigenen Effect-Subklassen schreiben müssen.
Filtereffekte
Fade ändert die Transparenz des Ziels. Blur und Glow wenden Ihre jeweiligen Filter auf ihre Ziele an und ändern die
Eigenschaften dieses Filters. Dissolve erzeugt eine Schicht
über dem Ziel und blendet diese ein oder aus, um das Ziel
zu verbergen oder zu zeigen.
è Inhalt
Schnelleinstieg in Flex 2
Transformationseffekte
Resize , Rotate und Move ändern die Größe, Rotation und Position ihres Ziels. Der Rotate -Effekt kann das Zentrum einer
Rotation angeben. Der Zoom ändert wie Resize die Größe
seines Ziels, ermöglicht Ihnen aber, einen Mittelpunkt anzugeben.
Maskeneffekte
WipeLeft , WipeRight , WipeUp und WipeDown erzeugen rechteckige Masken und verschieben sie, um ihr Ziel zu verbergen oder zu offenbaren. All diese Effekte erweitert Mask­
Effect . Sie können eigene Subklassen bilden, um andere
Maskenformen vorzugeben.
Soundeffekte
Der beschreibend benannte SoundEffect spielt einen
Soundeffekt in Ihrem Effekt. Indem Sie diese mit Ihren visuellen Effekten in einem Sequence - oder Parallel -Effekt zusammensetzen, können Sie Ihrer Anwendung auch aurales
Feedback hinzufügen.
Häufig verwendete Effekt-Trigger
Das Flex 2-Framework veröffentlicht eine große Vielzahl nützlicher Trigger für Ihre Effekte. Obwohl Sie sie vielleicht nicht
alle abonnieren, senden die eingebauten Komponenten von
Flex 2 alle möglichen Arten von Events aus, während es sich
für Sie darum kümmert, ein UI aufzubauen und zu verwalten.
Viele dieser Events dienen auch als Effekt-Trigger. Deswegen
sind sie sehr natürliche Orte für Effekte. Unten ist eine bei
TecFeeds © 2007 by O’Reilly Verlag
Flex zum Glänzen bringen
75
Weitem nicht vollständige Liste von Ideen dazu, wo Sie Ihre
Effekte anwenden können.
Focus-Feedback
Nutzen Sie rollOutEffect und rollOverEffect auf beliebigen
Komponenten. Sie sollten in Betracht ziehen, die gleichen
Effekte für focusInEffect und focusOutEffect zu verwenden,
um Ihre Animationen auch bei der Navigation mit der Tastatur anzuwenden.
Größenänderungen glätten
Sie können einen Resize -Effekt gemeinsam mit dem resizeEffect -Trigger verwenden, um sicherzustellen, dass keine
Größenänderungen eines Containers abrupt sind.
Abrakadabra! Mit Flair erscheinen und verschwinden
Nutzen Sie addedEffect / removedEffect für Kinder, die einer
Komponente hinzugefügt werden, oder andernfalls creation­
CompleteEffect , um die Komponente mit Pep ins Leben zu
bringen oder aus dem Leben zu nehmen.
View-Übergänge
Schalten Sie zwischen den Kindern eines ViewStack (wie
TabNavigator ) um, indem Sie ihre visible -Eigenschaft an-/
ausschalten. Änderungen an der Eigenschaft visible können einen hideEffect und einen showEffect anstoßen. Sie
können diese also verwenden, um Panels ein- und auszublenden und Überblendung zwischen Tabs zu gestalten.
è Inhalt
Schnelleinstieg in Flex 2
Wiederverwendbare Effekte
Effektinstanzen direkt in die Tags zu schreiben, die sie anstoßen, ist Demonstrationszwecken in Ordnung, aber kein gutes
Verfahren, um wiederverwendbaren, lesbaren Code zu schaffen. Es gibt mehrere Dinge, die Sie tun können, um Ihren Effektcode kompakt zu halten.
Erst können Sie die literalen Zahlen aus den Effekt-Tags entfernen und durch Konstanten ersetzen, die Sie unter Verwendung geschweifter Klammern binden. Viele dieser Zahlen sind
verknüpft. Beispielsweise verwenden Effekte, die symmetrisch
ein- und ausgeschaltet werden, die gleichen Werte für die
Dauer und wechseln die Eigenschaften from- und to- . Indem
Sie sie in Konstanten in einem Script -Block verschieben, können Sie diese an einem Platz so anpassen, wie Sie es möchten:
private const
private const
private const
private const
private const
private const
private const
easeOut;
GLOW_BLUR_MAX:Number = 20;
GLOW_BLUR_MIN:Number = 0;
GLOW_ALPHA_MIN:Number = 0;
GLOW_ALPHA_MAX:Number = 0.5;
GLOW_DURATION:Number = 500;
GLOW_COLOR:uint = 0xffa0a0;
GLOW_EASE:Function = mx.effects.easing.Cubic.
<mx:Button>
<mx:rollOverEffect>
<mx:Glow color="{GLOW_COLOR}"
duration="{GLOW_DURATION}"
easingFunction="{GLOW_EASE}"
TecFeeds © 2007 by O’Reilly Verlag
Flex zum Glänzen bringen
76
blurXFrom="{GLOW_BLUR_MIN}"
blurXTo="{GLOW_BLUR_MAX}"
blurYFrom="{GLOW_BLUR_MIN}"
blurYTo="{GLOW_BLUR_MAX}"
alphaFrom="{GLOW_ALPHA_MIN}"
alphaTo="{GLOW_ALPHA_MAX}"/>
</mx:rollOverEffect>
<mx:rollOutEffect>
<mx:Glow color="{GLOW_COLOR}"
duration="{GLOW_DURATION}"
easingFunction="{GLOW_EASE}"
blurXFrom="{GLOW_BLUR_MAX}"
blurXTo="{GLOW_BLUR_MIN}"
blurYFrom="{GLOW_BLUR_MAX}"
blurYTo="{GLOW_BLUR_MIN}"
alphaFrom="{GLOW_ALPHA_MAX}"
alphaTo="{GLOW_ALPHA_MIN}"/>
</mx:rollOutEffect>
</mx:Button>
Wenn Sie den gleichen Effekt wie anzunehmen für mehrere
Instanzen wiederverwenden, können Sie Ihren Effektinstanzen eine id geben und Bindung verwenden, um auf den gesamten Effekt zu verweisen:
<mx:Glow id="buttonGlowIn" … />
<mx:Button rollOverEffect="{buttonGlowIn}" … />
Der nächste Schritt, den Sie vornehmen könnten, ist, all Ihre
häufig verwendeten Effekte in eine Klasse zu verschieben und
è Inhalt
Schnelleinstieg in Flex 2
Flex zum Glänzen bringen
77
diese an jedem Ort einzuschließen und zu binden, an dem Sie
einen Effekt daraus benötigen. Sie könnten beispielsweise etwas wie CommonEffects.mxml erzeugen:
weil Effect-Konstruktoren einen Parameter erwarten. Sie
könnten eigene Effekte wie ButtonGlowIn.as schreiben wie
hier:
<mx:Object xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Glow id="buttonGlowIn" … />
<mx:Glow id="buttonGlowOut" … />
</mx:Object>
package com.partlyhuman.books.flexshortcut.effects
{
import mx.effects.Glow;
import mx.effects.easing.Cubic;
und folgendermaßen verwenden:
public class ButtonGlowIn extends Glow
{
public function ButtonGlowIn(target:Object = null)
{
super(target);
duration = 500;
color = 0xffa0a0;
//…
alphaTo = 0.5;
}
}
<fx:CommonEffects id="common"/>
<mx:Button rollOverEffect="{common.buttonGlowIn}"
rollOutEffect="{common.buttonGlowOut}"/>
Oder Sie könnten eine »Mikroklasse« für einen Button des erforderlichen Stils erstellen: Erzeugen Sie eine MXML-Klasse,
die Button erweitert und alle Effekte hat, die Sie darauf setzen
wollen. Dann nutzen Sie das Tag für Ihre Klasse dort, wo Sie
normalerweise <mx:Button> verwenden würden.
Wenn Sie Effekte häufig wiederverwenden, gibt es eine Sache,
die Sie unbedingt erwägen sollten: Ihre Effekte zu stylen. Eine
wenig bekannte Tatsache: Effekt-Trigger werden intern als
Styles implementiert! Sie können in ActionScript auf einer
Komponente setStyle("effectTrigger", EffectClass) aufrufen, um Effekte zu setzen. Um Effekte innerhalb eines Stylesheets zu verwenden, nutzen Sie die ClassReference() -Notation, um entweder eine eingebaute Effect-Klasse oder eine
von Ihnen erzeugte Subklasse zu lokalisieren. Beachten Sie,
dass Sie in MXML keine Effect-Subklasse erzeugen können,
TecFeeds © 2007 by O’Reilly Verlag
}
Dann wenden Sie sie in Ihren CSS-Dateien an:
Button {
up-skin: Embed("/assets/button-up.png");
down-skin: Embed("/assets/button-down.png");
over-skin: Embed("/assets/button-over.png");
roll-over-effect: ClassReference('com.partlyhuman.books.
flexshortcut.effects.ButtonGlowIn');
è Inhalt
Schnelleinstieg in Flex 2
roll-out-effect: ClassReference('com.partlyhuman.books.
flexshortcut.effects.ButtonGlowOut');
}
Das ermöglicht Ihnen, die Macht von Styles und Effekten zu
kombinieren, um Styles zu erzeugen, die sich nicht nur mit
der Erscheinung, sondern auch mit Bewegung und sogar
Sound befassen.
Transitions
Transitions (Übergänge) wenden die Animationsmacht von
Effekten auf die Rekonfigurationsmacht von States an. Eine
Transition ermöglicht Ihnen, die Eigenschaften zu animieren,
die ein State ändert und definiert, wie ein State-Übergang mit
der Zeit ablaufen kann.
Eine Transition ist eine Objekt, das angibt, welche States es
auslösen kann und welcher Effekt abgespielt wird. Geben Sie
fromState , toState oder beides für die Transition an, um Regeln für ihre Auslösung zu erstellen. Wir haben die Flickr-Raster-Anwendung mit einigen Styles und Transitions aktualisiert. Dabei haben wir eine Transition erzeugt, die vom State
active , und eine, die vom State inactive angestoßen wird, indem die toState -Eigenschaften der Transitions gesetzt werden.
Wenn Sie Effekte als Transitions verwenden, können Sie die
für eine State-Änderung erforderlichen Operationen als Teil
Ihres Effekt ordnen. Anders gesagt: Transitions können nicht
nur die Eigenschaften animieren, die von einem State geän-
TecFeeds © 2007 by O’Reilly Verlag
Flex zum Glänzen bringen
78
dert werden, sondern diese als Teil einer übergeordneten
Timeline auslösen. Um die Änderungen zu terminieren, gibt
es besondere Effekte, die Sie in einen zusammengesetzten Sequence -Effekt einfügen können, einen für jede mögliche StateAktion: Ein AddChildAction -Effekt stößt ein AddChild im entsprechenden State an, SetStyleAction ein SetStyle und so
weiter. Im Beispiel ist SetPropertyAction überflüssig, weil alle
Aktionen parallel sind – SetProperty wird immer am Anfang
ausgeführt. Wenn es mehrere Überschreibungen des gleichen
Typs gibt, können Sie die erwünschte angeben, indem Sie an
das gleiche target binden, wie der folgende Code und Abbildung 16 zeigen:
<mx:transitions>
<mx:Transition toState="inactive">
<mx:Parallel>
<mx:SetPropertyAction/>
<mx:Blur target="{img}" blurXTo="{BLUR_AMT}"
blurYTo="{BLUR_AMT}" duration="{DURATION}"/>
<mx:Fade target="{caption}" alphaFrom="0"
alphaTo="{CAPTION_ALPHA}" duration="{DURATION}"/>
</mx:Parallel>
</mx:Transition>
<mx:Transition toState="active">
<mx:Parallel>
<mx:SetPropertyAction/>
<mx:Fade target="{caption}" alphaTo="0"
duration="{DURATION}"/>
<mx:Blur target="{img}" blurXTo="0" blurYTo="0"
è Inhalt
Schnelleinstieg in Flex 2
duration="{DURATION}"/>
</mx:Parallel>
</mx:Transition>
</mx:transitions>
Flex zum Glänzen bringen
79
einen Fade-Effekt erzeugen, indem Sie die Eigenschaft filter
auf "add" setzen. Der Fade-Effekt wird dann auf alle hinzugefügten Komponenten angewandt. Mögliche Filter sind hide ,
show , add , remove , move und resize .
Filter, Masken, Blend-Modi
Flex 2 setzt auf die Flash Player 9-Anzeigearchitektur zwar eine
Menge auf, trotzdem erweitern alle Flex-Komponenten immer
noch DisplayObject . Deswegen können Sie weiterhin die LowLevel-Fähigkeiten nutzen.
Auf jedem DisplayObjekt ist ein filters-Array verfügbar – damit also auf jeder Flex-Komponente –, das eine beliebige Anzahl von Filtern aufnehmen kann. Flash Player 9 unterstützt
eine Vielzahl eingebauter Filter, die nützlich sein können, einschließlich Weichzeichnern, Leuchten, Schlagschatten, Kantenabflachung, Faltungsmatrizen, Farbtransformationen und Displacement-Maps. Suchen Sie nach ihnen im Paket flash.filters.
Abb. 16. Zustandsübergänge lassen die Überschrift verblassen und
die Grafik verschwimmen, während sich Ihre Maus bewegt.
Bei komplexeren Transitions kann die filter -Eigenschaft des
Effekts hilfreich sein. Statt konkrete Referenzen als Ziele anzugeben, kann die filter -Eigenschaft verwendet werden, um
Ziele auf Grundlage einer Regel zu definieren. Wenn ein State
neben vielen Aktionen mehrere Kinder hinzufügt, können Sie
TecFeeds © 2007 by O’Reilly Verlag
Sie können auch auf alle Komponenten Masken anwenden:
Weisen Sie der Eigenschaft mask ein zweites DisplayObject zu,
wird der sichtbare Bereich des zweiten Objekts das erste zeigen.
Jede Komponente hat als DisplayObject auch eine blendMode Eigenschaft, die, wenn sie gesetzt wird, die Art ändert, wie es
sich auf die Grafiken unter ihm auswirkt. Flash Player 9 und damit Flex 2 bieten eine Menge Blend-Modi, die Ihnen die Möglichkeit verschaffen, Effekte aus Photoshop oder einem ähnlichen Programm zur Laufzeit zu reproduzieren.
è Inhalt
Schnelleinstieg in Flex 2
Der Application-Loader
Wenn Sie nun Ihre Anwendung bis in die letzte Ecke geskinnt
haben, wenn Sie Pakete mit Stylesheets und Effekten haben,
wenn Sie aus Ihrer Anwendung alle Gradienten, jedes Auftauchen von Verdana und jede nach Flex-Standard aussehende
Scrollleiste entfernt haben, bleibt immer noch eine Sache, die
Ihre Anwendung verrät: der Preloader (siehe Abbildung 17).
Abb. 17. Ihre sorgfältig angepasste Anwendung
lüftet das Inkognito: »Ich bin Flex!«
Nachdem Sie sich diese ganze Mühe gemacht haben, werden
Sie erfreut erfahren, dass Sie auch einen eigenen Loader
schreiben können. Erzeugen Sie eine Subklasse der Klasse
DownloadProgressBar , die ihre eigenen Fortschritts-Events
abonniert, um ihre Anzeige zu aktualisieren. Weil sie angezeigt wird, bevor das Flex-Framework vollständig initialisiert
wurde, ist die DownloadProgressBar ein Sprite und keine UIComponent. In ihr können Sie deswegen keine Flex-Komponenten verwenden. Nachdem Sie eine eigene DownloadProgressBar -Subklasse haben, weisen Sie den entsprechenden
TecFeeds © 2007 by O’Reilly Verlag
Flex erweitern
80
Klassennamen dem preloader -Attribut Ihrer Application zu.
Dann ist das Skinning abgeschlossen:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
preloader="com.partlyhuman.books.flexshortcut.CustomPreloader">
Flex erweitern
Die Programmierung in Flex 2 ist ganz anders als die FlashProgrammierung. Als Flex-Entwickler haben Sie die Aufgabe
herauszufinden, wie Sie das bestehende, umfassende Framework am besten einsetzen, um Ihr Ziel zu erreichen. Flash-Entwickler verbringen mehr Zeit damit, Funktionalitäten von
Grund auf aufzubauen. Das gibt ihnen mehr Freiheiten, aber
weniger Veränderungsspielraum und eine geringere Geschwindigkeit.
Außerdem liefert Flex 2 seine besten Leistungen bei Anwendungen. Gebräuchliche Schnittstellen, die Sie von DesktopAnwendungen, Formularen und HTML-Seiten kennen, werden
in Flex 2 direkt und häufig in identischen Strukturen unterstützt. Wie Sie gesehen haben, kann es trivial sein, eine Anwendung zu erzeugen, die aus gebräuchlichen UI-Komponenten besteht.
Diese Stärke birgt allerdings keine entsprechende Schwäche.
Anders als HTML kommt Ihnen Flex offen entgegen. Jede
Klasse in der Bibliothek steht als ActionScript-Quellcode zur
Verfügung, und Hunderte von Klassen sind nicht finale Klassen, die nur darauf warten, erweitert und Ihren Bedürfnissen
è Inhalt
Schnelleinstieg in Flex 2
entsprechend angepasst zu werden! Das Framework ist konsistent, damit Sie es lernen und Ihre eigenen Komponenten,
Effekte, Skins, Styles oder andere Dinge schreiben können.
Flex 2 kommt mit einem wunderbaren Satz von Funkionalitäten, und wenn etwas nicht da ist, können Sie es selbst aufbauen.
Vollständige Flexibilität
Die beste Sache am Flex-Framework ist, dass Sie es an jedem
beliebigen Punkt erweitern können. Sie können konkrete,
vollständig verwendbare Klassen wie CheckBox erweitern. Sie
können abstrakte Basisklassen wie Container erweitern. Und
Sie können reines AS3 schreiben, das nur die Flash Player 9API nutzt. Sie können Klassen in MXML oder ActionScript 3.0
schreiben.
So erhalten Flex 2-Entwickler das Beste aus beiden Welten: Sie
können eigenen Code schreiben, wenn das erforderlich ist,
und können nützliche Klassen verwenden, um die Teile zu bewältigen, für die keine Modifikationen erforderlich sind.
Alle Klassen, die wir in den Beispielen dieses TecFeeds geschrieben haben, haben bereits Komponenten erweitert. Denken Sie daran, dass eine MXML-Komponente eigentlich eine
ActionScript 3.0-Klasse ist, die die Klasse erweitert, die als ihr
Wurzel-Tag angegeben ist. Die Beispiele definieren Subklassen von Flex-Klassen für sehr bestimmte Zwecke. Beispielsweise ist die Flickr-Vorschau eine besondere Art von Anwendung, Application und das Panel zum Verfassen von E-Mails
TecFeeds © 2007 by O’Reilly Verlag
Flex zum Glänzen bringen
81
eine besondere Art von Panel . Wenn Sie die Komponentenarchitektur verstehen, können Sie allerdings Komponenten auf
Weisen erstellen, die mit der Zusammensetzung anderer Komponenten nicht möglich sind.
Große Anwendungen strukturieren
Die bisher präsentierten Beispiele haben eine Menge gezeigt,
aber die erforderliche Kürze der Darstellung hat eine Diskussion über die Probleme bei der Erstellung großer Anwendun­
gen verhindert. Flex 2 und insbesondere MXML sind sehr mäch­
tige Werkzeuge. Es gibt viele Wege, wie Sie sich selbst damit
verletzen können. Auch wenn es zu weit ginge, hier über
­A nwendungsarchitektur im Allgemeinen zu referieren, gibt
es Techniken, die für Flex 2-Anwendungen spezifisch und eine
Erörterung wert sind.
Entwerfen für die Separation
Mit seiner großen Sammlung von Tags ermöglicht Ihnen
MXML – und scheint dazu auch zu ermutigen – eine Kombination aus Daten, Struktur, Style und Verhalten. Sie könnten Ihre
Anwendung problemlos als eine MXML-Datei strukturieren,
mit einem Durcheinander an XML-, Script-, Style-, Transition-,
Effect- und Komponenten-Tags. Um Ihren Code modular zu
halten, Abhängigkeiten zu minimieren, mehr Codewiederverwendung zu erlauben, simultane Entwicklung zu ermöglichen
und die Veränderung zu vereinfachen, können Sie diese Verantwortlichkeiten trennen. Nutzen Sie externe Stylesheets,
um die Styles herauszuziehen.
è Inhalt
Schnelleinstieg in Flex 2
Sie sollten die Schnittstelle auch in in sich abgeschlossene,
funktionelle und wiederholbare Einheiten aufbrechen und für
sie individuelle Klassen erzeugen, anstatt die gesamte Schnitt­
stelle in eine tiefen MXML-Datei zu schreiben. Im E-Mail-Beispiel haben wir separate Klassen für die Hauptanwendung,
den Posteingang und das Lesefenster erzeugt. Auch wenn alle
direkt geschachtelt und in eine Datei geschrieben werden
könnten, ist die Trennung der Verantwortlichkeiten zwischen
ihnen klar, und Veränderungen werden ermöglicht, wenn sie
auf diese Weise erstellt werden.
Vergessen Sie nicht die Option, reine ActionScript-Klassen zu
schreiben. Sammeln Sie allgemeine Funktionalitäten in Hilfsklassen. Erzeugen Sie Klassen für nicht sichtbare Objekte wie
POPConnection .
MVC modifizieren
Das Model-View-Controller-Muster (MVC) wurde in unzähligen Anwendungen und als Kernprinzip vieler Frameworks
vorteilhaft eingesetzt. Kurz gesagt, ist es eine Struktur, die
drei Komponenten isoliert: eine reine Datenrepräsentation
des Gegenstands, einen View, der dem Benutzer den Zustand
dieser Daten anzeigt, und einen Controller, der Benutzerdaten
interpretiert und entweder View oder Modell manipulieren
kann. MVC ermutigt uns, Klassen für diese drei Kategorien
aufzubauen, und hilft, die Verantwortlichkeiten Verhalten,
Struktur und Style zu trennen.
Flex 2 funktioniert sehr gut mit einem MVC-Modell. Es scheint
natürlich, dass man Modellklassen als ActionScript-Klasse er-
TecFeeds © 2007 by O’Reilly Verlag
Flex erweitern
82
zeugt und ihre relevanten Datenfelder als bindbar deklariert,
dass man in MXML View-Klassen erzeugt, die direkt an ihre
Modellobjekte binden, und dass man ActionScript-Klassen erzeugt, um die Anwendung zu steuern. Weil die Vorteile von
MXML in der kompakten Beschreibung von visuellen Komponenten besteht, funktionieren View-Klassen am besten als
MXML-Dateien.
Es ist nicht notwendig, dass man Controller und View trennt,
wenn sie direkt diesen einen View und nichts anderes steuern. Beispielsweise funktioniert die Behandlung von MausEvents als Teil der View-Klasse besser als bei einer externen
Klasse, insbesondere bei dem Event-Modell von ActionScript
3.0. Operationen, die Auswirkungen auf die ganze Anwendung haben, gehören aber immer noch in Controller-Klassen.
Beispielsweise würde der Controller einer Anwendung ein
Modell und Views erzeugen, die Events des Views abonnieren
und auf Basis der Views systemweite Operationen durchführen. Ein Klick auf einen E-Mail senden-Button in einem View
könnte einen Click-Handler innerhalb des Views anstoßen, der
View sendet dann allgemein ein Event aus, das der Controller
interpretiert, um dann eine Aktion auszuführen: Er sendet die
E-Mail.
Die Wurzel einer Flex 2-Anwendung muss eine Subklasse von
Application sein. Diese kann als Haupt-Controller der Anwendung verwendet werden, indem die Modelle, Views und unterstützenden Controller instantiiert werden, wenn ihr eigenes initialize -Event abgesetzt wird.
è Inhalt
Schnelleinstieg in Flex 2
ActionScript oder MXML wählen
Als Flex 2-Entwickler haben Sie (fast) immer die Wahl, eine
Klasse in ActionScript 3.0 oder MXML zu schreiben. Alles, was
Sie in MXML tun können, geht ebenfalls in ActionScript, auch
wenn das manchmal nicht sehr erstrebenswert ist. Für Klassen, die folgende Kriterien erfüllen, ist es viel einfacher, MXML
zu verwenden:
• starke Verwendung von Bindungen
• Verwendung von Transitions, Effekten oder States
• viele sichtbare Komponenten
Zum Schreiben von Klassen folgender Art ist ActionScript geeigneter:
• ein Konstruktor mit einem oder mehreren Parametern ist
erforderlich
• keine visuelle Repräsentation
• Kindkomponenten sollten ncht als public entblößt werden
Sie können in MXML auch Interfaces verwenden, indem Sie im
Wurzel-Tag Ihrer Klasse ein implements -Attribut angeben:
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
implements="ISomeInterface" … >
Implizite Akzessoren in einer API
Flex 2 ist mit Seiteneffekten sehr flexibel. Alle Arten von Operationen können so gestaltet werden, dass sie Effekte haben –
um Code auszuführen oder irgendeine Aktion durchzuführen –,
TecFeeds © 2007 by O’Reilly Verlag
Flex erweitern
83
vom Setzen eines Styles bis zum Aufruf einer Methode. Sehen
Sie sich Folgendes an:
<mx:Button><mx:rollOverEffect>
<mx:Fade effectStart="trace('Von einem Effekt angestoßener
Code')"/>
</mx:rollOverEffect></mx:Button>
Bei Aktionen, die Seiteneffekte hervorbringen, sollten Sie die
Seiteneffekte in Methoden speichern und die Aktionen diese
Methoden aufrufen lassen, damit Sie die Verhalten, die Ihre
Klasse unterstützt, zentralisieren und explizit machen können.
In anderen Worten: Erzeugen Sie eine private API für Klassen,
die intern angestoßene Aktionen haben.
Sie müssen auch eine Entscheidung über die öffentliche API
Ihrer Klasse treffen. Sie könnten es Clients Ihrer Klasse erlauben, Aktionen durch den Aufruf von Methoden ( foo.doBarMode() ), das Setzen von Eigenschaften ( foo.mode = "bar" ), das
Ändern eines States ( foo.currentState = "barState" ) oder sogar etwas noch Subtileres anzustoßen. Auch wenn es die ordnungsgemäße Lösung zu sein scheint, äußeren Code darauf
zu beschränken, Methoden auf Ihren Klassen aufzurufen,
macht es Flex 2 in den meisten Fällen bequemer, implizite Setter statt Methoden zu verwenden. Wenn Sie die API Ihrer Klasse
um implizite Akzessoren und damit Eigenschaften entwerfen,
werden die folgenden Dinge erleichtert:
• das Binden des Ergebnisses einer Funktion, da man an ei-
nen Getter binden kann,
è Inhalt
Schnelleinstieg in Flex 2
• die Ausführung von Code auf Objekten, die in MXML er-
zeugt wurden, indem ihre Eigenschaften gesetzt/ihre Setter als Attribute des MXML-Tags aufgerufen werden,
• das Durchführen von Aktionen als Teil eines States oder Effekts, indem die Aktion SetProperty verwendet wird.
Eigene UI-Komponenten erstellen
Um nahtlos funktionierende UI-Komponenten zu erstellen, ist
es entscheidend, dass Sie verstehen, wie das Flex-Framework
Komponenten implementiert. Funktionalitäten, die allen Komponenten im Flex-Framework gemeinsam sind, befinden sich
in der Basisklasse UIComponent , die alle Flex-Komponenten erweitern.
Invalidierung
UIComponents sind träge (im wünschenswerten, computerwissenschaftlichen Sinn): Sie schieben Arbeiten hinaus, wenn
das möglich ist. Es gibt keine Grenze dafür, wie häufig Code
die Eigenschaften einer Komponente ändern kann. Komponenten werden aber nur mit einer maximalen Rate neu gezeichnet, die von Ihrer Anwendung definiert wird. Wenn Ihre
Anwendung mit 30 Frames pro Sekunde läuft, kann eine Komponente in einer Sekunde maximal 30-Mal neu gezeichnet
werden, während Sie problemlos eine Schleife entwerfen
könnten, die eine Eigenschaft einer Komponente 1000-Mal so
schnell setzt, wie das ausgeführt werden könnte. Das Ergebnis
dieser Zuweisung könnte aufwendige Operationen wie die
Berechnung des Layouts der Kinder der Komponente bewir-
TecFeeds © 2007 by O’Reilly Verlag
84
Flex erweitern
ken, obwohl ihre Ergebnisse erst gezeigt werden, wenn die
Komponente neu gezeichnet wird.
Flex löst dieses Problem, indem es erlaubt, dass bestimmte
Attribute immer wieder gesetzt werden können, aber mit der
Berechnung der Auswirkungen dieser Attribute wartet, bis es
die Komponente neu zeichnen muss. Es hält nach, was aktualisiert werden muss, indem es diese Attribute invalidiert und,
unmittelbar bevor die Komponente gerendert wird, wieder
validiert, indem es ihre Effekte berechnet.
UIComponents können ihre Eigenschaften, Größe und Anzeigeliste invalidieren. Die Eigenschaften, deren Effekte hinausgeschoben werden, werden von einer besonderen Komponente definiert, und Sie können die Entwertungssequenz nutzen, um die teuren Operationen Ihrer eigenen Komponenten
hinauszuzögern, indem Sie die Validität Ihrer eigenen Eigenschaften nachhalten.
Invalidierung und Validierung werden durch Methodenpaare
auf UIComponent implementiert.
invalidateProperties()
commitProperties()
invalidateSize()
measure()
invalidateDisplayList()
updateDisplayList()
layoutChrome()
Wenn auf Ihrer benutzerdefinierten Komponente eine Eigenschaft gesetzt ist, die eins dieser Attribute entwertet, rufen
Sie die Invalidierungsmethode auf. Natürlich enthält UICom-
è Inhalt
Schnelleinstieg in Flex 2
ponent bereits die richtigen Invalidierungen für eingebaute
Eigenschaften: Wird width gesetzt, wird invalidateSize() bereits aufgerufen.
Sie können die Validierungsmethoden überschreiben, um eigene Verhalten anzubieten. Beispielsweise können Sie einen
»bleed«-Effekt erreichen, indem Sie die Größe Ihrer Komponente in measure() bewusst falsch darstellen. Sie können die
Verarbeitung der benutzerdefinierten Eigenschaften, die Sie
einer Komponente hinzugefügt haben, verzögern, indem Sie
eigene Instanzvariablen ergänzen und ihre Validität nachhalten und commitProperties() überschreiben, um die Ergebnisse
invalider Eigenschaften zu verarbeiten. Sie können Kindkomponenten, die Sie manuell verwalten wollen, bewegen, hinzufügen und entfernen, indem Sie updateDisplayList() überschreiben. Wenn Sie die Validierungsmethode überschreiben,
sollten Sie darauf achten, dass Sie den Aufruf der überschriebenen Methode ihrer Superklasse einschließen, damit die
Komponente, die Sie erweitern, ordentlich funktioniert.
Sie sollten nie eine der Invalidierungsmethoden überschreiben müssen, da diese nur ein invalid-Flag setzen. Sie können
sie aber manuell aufrufen.
Kinder
Flex 2-Komponenten teilen eine nützliche Notlüge – eine
Abstraktion – über die Kinder, die sie enthalten. Sie überschreiben alle Methoden zur Manipulation von Kindern wie
addChild() und getChildAt() , damit sie sich nur mit Komponenten befassen müssen. Sie lassen Sie in einer Flex-Welt ar-
TecFeeds © 2007 by O’Reilly Verlag
Flex erweitern
85
beiten, in der eine UIComponent das atomare Element ist. In
Wirklichkeit enthalten Komponenten Hintergründe, Rahmen
und die Shapes und Textfelder, aus denen sie bestehen. Flex
lässt Sie die Kreise und Textfelder vergessen und stattdessen
an Radiobuttons denken.
Diese Abstraktion bedeutet auch, dass addChild() in einer
Flex-Komponente eine Komponente erwartet. Sie können einer Komponente mit addChild() keine einfachen DisplayObjects wie Bitmaps, TextFields oder Sprites hinzufügen. Wenn
Sie eigene Komponenten mit Verhalten aufbauen wollen, das
unter Flex nicht normal ist, und Sie mehr Steuerungsmöglichkeiten haben wollen, sollten Sie eventuell zu einfachen DisplayObjects zurückgehen.
Sie können diese Abstraktion umgehen, indem Sie über die
rawChildren -Eigenschaft einer Container-Klasse gehen. Dieses
Objekt nutzt die gleichen Methoden für den Zugriff auf Kinder, enthält aber alle Kinder des Eigentümers, der eine Komponente oder etwas anderes sein kann, zum Beispiel:
var vbox:VBox = new VBox();
var sprite:Sprite = new Sprite();
//Im Sprite ein paar Grafiken zeichnen.
vbox.addChild(sprite); //NICHT OK, Sprite ist keine
//UIComponent
vbox.rawChildren.addChild(sprite); //OK!
Kinder, die Sie als rohe Kinder hinzufügen, werden vom FlexFramework nicht wie andere Komponenten manipuliert. Sie
werden dem Layout nicht hinzugefügt und nicht angeordnet
è Inhalt
Schnelleinstieg in Flex 2
oder skaliert, wenn die entsprechenden Flex-Events abgesetzt
werden. Sie können rohe Kinder in einer Methode, die für das
Neuzeichnen verantwortlich ist wie updateDisplayList() , allerdings manuell manipulieren.
Alternativ kann die Image -Komponente verwendet werden,
um die Kernanzeigetypen anzuzeigen und mit einem UIComponent-Wrapper zu umgeben, der ihnen die Fähigkeiten einer
gewöhnlichen Komponente gibt: Styles, Effekte, States setzen,
sie in ein Layout einschließen usw.
//Ein Sprite erzeugen und zeichnen.
var image:Image = new Image();
addChild(image);
image.source = sprite;
Wichtige UIComponent-Methoden
Sie können einer Komponente eigene Verhalten hinzufügen,
indem Sie eine oder mehrere dieser Methoden überschreiben.
In den meisten Fällen sollten Sie daran denken, vor Ihrem eigenen Code die Superklassenimplementierung der Methode
aufzurufen.
createChildren()
In MXML-Komponenten würden die Tags, die die Komponente
beschreiben, in der Methode createChildren() in eine tatsächliche Kindkomponente umgewandelt. Sie können diese Methode überschreiben, um zusätzliche Kinder hinzuzufügen
oder der Liste der rohen Kinder Kinder hinzuzufügen. Diese
TecFeeds © 2007 by O’Reilly Verlag
Flex erweitern
86
Methode wird aufgerufen, wenn die Komponente einer Elternkomponente hinzugefügt wird. Es kann also möglich sein,
dass sie auf einer Instanz einer Komponente mehrfach aufgerufen wird, wenn dieser neue Eltern gegeben werden. In diesem Fall können Sie einen Schalter verwenden oder die vorhandenen Kinder prüfen, um zu verhindern, das die Komponente doppelt oder öfter konstruiert wird.
updateDisplayList()
Die Methode updateDisplayList() wird aufgerufen, wenn die
Anzeigeliste invalidiert wurde. Das tritt automatisch ein, wenn
sich die Größe ändert, die der Komponente zur Verfügung
steht, oder wenn sich das Layout des Eltern-Containers der
Komponente ändert. Nutzen Sie updateDisplayList() , um die
Komponente auszurichten und zu zeichnen. Bereiten Sie die
Komponente in dieser Methode auf die neue Größe vor, indem Sie die Größe der Kinder anpassen, diese ausrichten und
größenabhängige Elemente neuzeichnen.
commitProperties()
commitProperties() wird aufgerufen, um alle Änderungen zu
aktualisieren und zu validieren, die durch invalidateProperties() hinausgeschoben wurden. Sie können diese Methode
einsetzen, um Ihre eigenen Eigenschaften für eine hinausgeschobene Ausführung zu ergänzen. Wenn Ihre Komponente
zwischen so unterschiedlichen Dingen wie Äpfeln und Birnen
umschalten muss, möchten Sie diesen Übergang vielleicht
hinausschieben:
è Inhalt
Schnelleinstieg in Flex 2
private var isFruitInvalid:Boolean = false;
private var _fruit:String;
public function set fruit(newFruit:String):void
{
if (_fruit == newFruit) return;
_fruit = newFruit;
isFruitInvalid = true;
invalidateProperties();
}
override protected function commitProperties():void
{
super.commitProperties();
if (isFruitInvalid)
{
//Hier die nötige Arbeit für das Tauschen
//von Äpfeln und Birnen machen.
isFruitInvalid = false;
}
}
styleChanged()
Wenn Sie benutzerdefinierte Styles erzeugt haben oder einen
Style manuell implementieren müssen oder zusätzlichen
Code ausführen müssen, wenn Styles geändert werden, können Sie styleChanged() überschreiben, um das zu ermöglichen. Die Methode hat ein Argument, den Namen des Styles,
der gesetzt wird. Um den Wert für diesen Style abzurufen, verwenden Sie getStyle() , das den neuen Wert zurückliefert.
TecFeeds © 2007 by O’Reilly Verlag
Flex erweitern
87
measure()
measure() wird aufgerufen, wenn der Wert der Komponente
nicht explizit gesetzt wird und es dem Container überlassen
bleibt, die Größe zu bestimmen, in der der Container erscheinen soll. Eine Implementierung dieser Methode sollte
measuredWidth und measuredHeight des Objekts setzen und
wahrscheinlich auch die entsprechenden measuredMinWidth
und – Height sowie measuredMaxWidth und – Height . Diese
Gruppe von Eigenschaften repräsentiert die gewünschte
Größe der Komponente und die minimale und maximale akzeptable Größe. Der Container der Komponente nutzt diese
Informationen, um die endgültige Größe der Komponente
festzulegen. Das Setzen dieser Eigenschaften garantiert die
Größe der Komponente nicht. Werden width und height explizit gesetzt, garantiert das jedoch die Größe und umgeht alle
Anforderungen von measure() .
Die Lebensdauer von Komponenten
Wenn eine Komponente erzeugt wird, führt Flex eine Reihe
von Schritten aus, bevor die Komponente bereit ist, auf dem
Bildschirm zu erscheinen. In jeder Phase der Initialisierung einer Komponente wird ein FlexEvent abgesetzt, damit Sie Code
bis zum erforderlichen Moment hinausschieben können,
wenn der Code von visuellen Aspekten der Komponente abhängig ist.
Nach der Instantiierung einer Komponente mit new können
Sie auf der neuen Instanz Eigenschaften setzen und Methoden aufrufen. Sind diese aber von visuellen Eigenschaften
è Inhalt
Schnelleinstieg in Flex 2
oder Kindern der Komponenten abhängig, könnten Sie Laufzeitfehler erhalten.
Wenn Sie die Komponente mit addChild() einer Anzeigeliste
hinzufügen, erfolgt der Rest der Instantiierung.
• Die parent -Eigenschaft der Komponente wird gesetzt.
Flex erweitern
88
• Das updateComplete -Event wird abgesetzt. Dieses Event wird
jedes Mal abgesetzt, wenn die Position, die Größe oder das
Layout der Komponente geändert wird.
Benutzerdefinierte Styles
• createChildren() wird auf der Komponente aufgerufen.
Flex ermöglicht Ihnen, der vorhandenen Menge von Styles
Ihre eigenen Styles hinzuzufügen. Um diese zu implementieren, müssen Sie ein Style -Metadaten-Tag erzeugen und den
Code schreiben, der erforderlich ist, um Ihren Style bei der
­I nitialisierung der Komponente und bei der Änderung des
Werts des Styles wiederzugeben, indem Sie styleChanged()
überschreiben.
• Alle Invalidierungsmethoden werden aufgerufen.
Die Syntax eines Style -Metadaten-Tags ist:
• Auf der Komponente werden die Styles berechnet.
• Das preinitialize -Event wird abgesetzt. Die Komponente
wurde immer noch nicht gemessen, noch wurden ihre Kinder erzeugt.
• Das initialize -Event wird abgesetzt. Die Kinder der Kom-
ponente wurden noch nicht initialisiert, und der Komponente wurde bisher weder Größe noch Layout gegeben,
noch wurden hinausgeschobene Eigenschaften validiert.
• Flex wartet darauf, dass das nächste render -Event abgesetzt
wird.
• Alle Validierungsmethoden werden aufgerufen: commitProperties() , measure() , layoutChrome() und updateDisplayList() in dieser Reihenfolge. Das wird beim nächsten
render -Event wiederholt, wenn eine der Validierungsmetho-
den eine Eigenschaft wieder invalidiert.
• Die Komponente wird auf sichtbar gesetzt, und das crea­
tionComplete -Event wird abgesetzt.
TecFeeds © 2007 by O’Reilly Verlag
[Style(name="customBorderColor", type="uint",
format="Color")]
Sie können nur bestimmte String-Werte erlauben, indem Sie
die Eigenschaft enumeration setzen:
[Style(name="customBorderType", type="String",
enumeration="squiggly,wiggly,jiggly")]
Das Metadaten-Tag sollte in jede Klasse platziert werden, auf
die Sie den Style anwenden. Aber wenn Sie die inherit -Eigenschaft des Styles auf yes setzen, wird er automatisch auf Subklassen der Klasse angewendet, in die er eingeschlossen ist.
Das Tag sollte entweder in ActionScript vor der Klassendefinition erscheinen oder innerhalb eines <mx:Metadata> -Tag in
MXML.
è Inhalt
Schnelleinstieg in Flex 2
Ist das Tag einmal ordentlich eingeschlossen, kann der Style
mit setStyle() , inline oder in externem CSS gesetzt werden.
Flex Builder 2 schließt benutzerdefinierte Styles sogar in die
Autovervollständigung seines CSS-Modus ein.
Weitere Features
Die vorangehenden Abschnitte dieses TecFeeds behandeln
die Kernthemen der Flex 2-Entwicklung und streifen die FlexBibliothek mit ihren über 600 Klassen nur. Ich bin mir bewusst, dass dieser TecFeed nicht alle Themen vollständig behandelt, aber ich hoffe, dass ich Ihnen eine Idee davon vermitteln kann, was es alles gibt und wo Sie Informationen dazu
finden. Sie werden einiges an Zeit sparen, wenn Sie auf existierende Einrichtungen zurückgreifen, anstatt sie selbst zu
schaffen.
Weitere Features
89
Validierer
Das Paket mx.validators enthält Klassen, die Werte unmittelbar validieren und ein grafisches Feedback liefern können. Sie
können prüfen, ob Eingaben gültige E-Mail-Adressen, Kreditkartennummern, Postleitzahlen usw. sind. Sie können auch
leicht einen regulären Ausdruck einbinden, um beliebige Formate zu validieren.
Formatierer
Das Paket mx.formatters enthält Klassen, die Daten und
Strings unmittelbar in »schön gedruckte« Strings mit einer
besonderen Formatierung für Telefonnummern, Datumsangaben, Währungsangaben usw. umwandeln.
Repeater
Sie können den Standardzeiger mit der Klasse CursorManager
leicht durch ein eingebettetes Cursor-Bild austauschen.
Wenn Sie mehrere Kopien eines Blocks von MXML einschließen wollen, können Sie ihn mit einem <mx:Repeater> -Tag versehen. Verwenden Sie es nur für festgelegte UI-Blöcke. Seine
Verwendung ist kompliziert, und es ist nicht das richtige
Werkzeug für dynamische Daten.
Drag-and-Drop
Diagramme
Sie können Ihren Benutzern mit ein paar einfachen Attributen
( dragEnabled , dropEnabled ) die Möglichkeit geben, Objekte in
Datenkomponenten per Drag-and-Drop zu verschieben. Außerdem können Sie mit der Klasse DragManager eigene Dragand-Drop-Verhalten erzeugen.
Flex Charting (http://www.adobe.com/products/flex/charting/)
ist ein eigenständiges Produkt, das von Adobe angeboten
wird und Ihnen ermöglicht, in Flex 2 Diagramme mit laufender Aktualisierung, Styles und Animationen einzubinden.
Cursor-Verwaltung
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
eine Protokollierung ermöglicht, um Ausgaben und Dateien
nachzuhalten, Log-Verkehr zu filtern sowie unterschiedliche
Logging-Stufen und -Katagorien zu verwenden. Diese Klassen
finden Sie im Paket mx.logging .
Ich hoffe, dass Ihnen dieser TecFeed Flex näher bringen
konnte. Auch wenn ich mich auf das Wichtigste beschränken
musste, hoffe ich, dass ich viele Fragen beantworten konnte,
die Neulinge in der Flex-Programmierung haben. Mein Ziel
war es, Sie mit so viel Flex 2 aufzuladen, dass Sie mit der Arbeit an der nächsten großen Web 2.0-Anwendung beginnen,
reich werden und früh in Rente gehen können. Ihre Kommentare sind mehr als willkommen: Nehmen Sie an der Diskussion
unter http://www.partlyhuman.com/books/flexshortcut/ teil.
Internationalisierung und Lokalisierung
Sie können die ResourceBundle-API verwenden, um StringRessourcen und Assets aus lokalisierten Bundles zu referenzieren, die ausgetauscht werden können, indem dem Flex 2Compiler ein locale -Parameter übergeben wird. Das Metadaten-Tag [ResourceBundle] und die MXML-Direktive @resource
bieten Zugriff auf die Bundles.
Wenn Sie mehr zu den hier präsentierten Themen herausfinden wollen, bietet O'Reilly viele Ressourcen, die mit diesem
TecFeed verwandt sind, insbesondere die Bände der Adobe
Developer Library:
Testing
• Programming Flex 2.0 von Chafic Kazoun und Joey Lott
FlexUnit (http://labs.adobe.com/wiki/index.php/ActionScript_3:
resources:apis:libraries) ist ein freies Adobe Labs-Framework
für die Automatisierung von Unit-Tests.
• Flex 2.0 User Interface Design & Development von Matt Voer-
Verlaufsverwaltung
• ActionScript 3.0 Cookbook von Joey Lott, Darron Schall und
Die Klasse HistoryManager kann Navigationszustände mit den
Zurück- und Vor-Verlaufsfunktionen des Browsers verknüpfen,
wenn Ihre Flex-Anwendung in einem Webbrowser läuft. Indem Sie das Interface IHistoryManagerClient implementieren,
können Sie auch Zustände Ihrer eigenen, selbst definierten
Komponenten mit dem Browserverlauf verknüpfen.
man und Simon Reid
• Flex 2.0 Cookbook von Chafic Kazoun, Joey Lott et al.
Keith Peters
• Essential ActionScript 3.0 von Colin Moock
• ActionScript 3.0 Quick Reference von William Sanders
• ActionScript 3.0 Design Patterns von William Sanders und
Chandima Cumaranatunge
Mehr Informationen finden Sie unter http://www.oreilly.de/.
TecFeeds © 2007 by O’Reilly Verlag
è Inhalt
Schnelleinstieg in Flex 2
Die Informationen in diesem eBooklet wurden mit größter Sorgfalt
erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen
­werden. Verlag, Autoren und Übersetzer übernehmen keine juristische
Verantwortung oder irgendeine Haftung für eventuell verbliebene
Fehler und deren Folgen.
Alle Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt und sind möglicherweise eingetragene Warenzeichen.
Der Verlag richtet sich im wesentlichen nach den Schreibweisen der
Hersteller. Das Werk einschließlich aller seiner Teile ist urheberrechtlich
geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung,
Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung
in elektronischen Systemen.
Texte, Abbildungen und Design dieses eBooklets sind urheberrechtlich geschützt. Der Kauf berechtigt lediglich zur persönlichen Nutzung
des PDF-Dokuments. Das Kopieren, Weitergeben, Vertreiben und Veröffentlichen des eBooklets in gedruckter oder elektronischer Form ist
­u ntersagt.
Kommentare und Fragen können Sie gerne an uns richten:
O’Reilly Verlag
Balthasarstraße 81
50670 Köln
Tel.: 0221/9731600
Fax: 0221/9731608
E-Mail: kommentar@oreilly.de
Copyright:
© 2007 by O’Reilly Verlag GmbH & Co. KG
TecFeeds © 2007 by O’Reilly Verlag
Impressum
91
Die Originalausgabe erschien 2007 unter dem Titel
Introduction to Flex 2.0 bei O’Reilly Media, Inc.
Die Adobe Developer Library bietet Wissen aus erster Hand für Entwickler
von plattformunabhängigen Webanwendungen. Sie umfasst Publikatio­
nen und Online-Ressourcen zur Entwicklung von Rich Internet Applications mit Adobe-Technologien. Die Adobe Developer Library ist eine Ko­
operation zwischen O'Reilly Media und Adobe Systems, Inc. Mehr darüber
erfahren Sie unter www.adobedeveloperlibrary.com.
Die technische Lektorin für dieses Dokument war Stacey Mulcahy. Sie ist
eine Flash-/Flex-Entwicklerin, die ihre Zeit damit verbringt, Rich Internet
Applications zu erstellen, die häufig sogar Designern gefallen. Ihre Nächte
verbringt sie damit, einer Spielsucht nachzugehen, die zu verbergen sie
sich nicht einmal die Mühe macht. In ihrem Flash-/Flex-orientierten Blog
ereifert sie sich mehr, als dass sie schwärmt. Sie finden es unter:
www.bitchwhocodes.com
Übersetzung und deutsche Bearbeitung: Lars Schulten, Köln
Lektorat: Inken Kiupel, Köln
Korrektorat: Sibylle Feldmann, Düsseldorf
Reihenlayout: Theo Spangenberg, Neunkirchen-Seelscheid
Satz: Conrad Neumann, München
Finishing, Satz Werbeseiten: G&U Language & Publishing Services GmbH,
(www.GundU.com)
Produktion: Andrea Miß, Köln
ISBN 978-3-89721-625-9
è Inhalt
TecFeeds – Wissen zu aktuellen Technologien
Ergänzende O’Reilly-Titel
Chafic Kazoun & Joey Lott
Hans Weigl
Deutsche Übersetzung
von Sascha Kersken & Peter Klicman
1. Auflage September 2007
1. Auflage Oktober 2007
60 Seiten, PDF ca. 3 MB
ISBN 978-3-89721-726-3
EUR 8,90
92
ISBN 978-3-89721-634-1
560 Seiten, gebundene Ausgabe
EUR 54,90, SFR 88,90
Schnelleinstieg in Adobe AIR (TecFeed)
Programmieren mit Flex 2
Adobe Flex ist ein Framework für die Entwicklung plattformübergreifender Rich Internet
Applications, die im Flash-Player laufen. Die Anwendungen sind zwar webbasiert, dabei
jedoch so schlank, dass man den Eindruck hat, auf dem eigenen Desktop zu arbeiten.
Programmieren mit Flex 2 richtet sich an Programmierer, die die Gelegenheit nutzen wollen, in die Entwicklung von RIAs einzusteigen, ohne Flash zu lernen. Das Buch bietet einen
kompakten Einstieg in ActionScript 3 und den XML-Dialekt MXML sowie in jede Menge
Features, die das Framework von Hause aus mitbringt. Konzepte werden anschaulich vermittelt, und durch die vielen Beispiele wird sofort plastisch, was Flex 2 leisten kann.
Adobe AIR ist eine betriebssystemübergreifende Laufzeitumgebung, die eine völlig neue
Art von Rich-Internet-Applikationen möglich macht: AIR-Anwendungen können sowohl
auf Daten aus dem Web als auch auf den Desktop des Users zugreifen – und das auf der
Basis gängiger Webtechnologien wie HTML, CSS, JavaScript, Flash und Flex.
In diesem TecFeed lernen Sie anhand von konkreten Beispielen die Struktur und Funk­
tionsweise von AIR-Anwendungen kennen und erfahren, wie Sie sie debuggen, kompilieren und eine AIR-Installationsdatei packen. Der Zugriff auf das lokale Verzeichnissystem, die Einbindung von PDF-Dateien und SQLite werden ebenso behandelt.
Schnelleinstieg in Adobe AIR richtet sich an Leser, die Kenntnisse in einer Programmiersprache mitbringen und sich mit HTML, JavaScript und ActionScript auskennen.
Colin Moock
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 substantial upgrade to Flash's programming language ever. The enhancements to ActionScript's
performance, feature set, ease of use, cleanliness, and sophistication are simply staggering.
Revolutionary improvements abound. Essential ActionScript 3.0 is an update to Essential
ActionScript 2.0, once again focusing on the core language and object-oriented programming with some coverage of the Flash Player API. Approximately half of the book focuses
on the new features and functionality of ActionScript 3.0, while the rest focuses on chan­
ges between the 2 and 3 releases.
Solutions for Flash Platform and Flex Application Developers
TecFeeds © 2007 by O’Reilly Verlag
Well before Ajax and Windows Presentation Foundation, Macromedia Flash provided the
first method for building »rich« web pages. Now, Adobe is making Flash a full-fledged
­development environment, and learning ActionScript 3.0 is key. That's a challenge for
even the most experienced Flash developer. This Cookbook offers more than 300 solutions to solve a wide range of coding dilemmas, so you can learn to work with the new
version right away.
è Inhalt
TecFeeds – Wissen zu aktuellen Technologien
Ergänzende O’Reilly-Titel
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
93
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 programming techniques with ActionScript 3.0, this hands-on introduction to design patterns
takes you step by step through the process. You learn about various types of design patterns and construct small abstract examples before trying your hand at building fullfledged working applications outlined in the book.
Now you can build and deploy Flash-based Rich Internet Applications (RIAs) to the desktop using Adobe's Flex framework. Written by members of the Apollo product team, this
is the official guide to the Alpha release of Adobe Apollo, the new cross platform desktop
runtime from Adobe Labs. Numerous examples illustrate how Apollo works so you can
start building RIAs for the desktop right away.
Sascha Kersken
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
Praxiswissen Flash CS3 ist eine Einführung für all diejenigen, die HTML-Grundkenntnisse
besitzen und einen schnellen und praxisbezogenen Einstieg in Flash suchen. In verständlichen Worten stellt Ihnen der Autor alle wichtigen Features von Flash CS3 vor und demons­
triert sie anhand eines durchgängigen Beispiels im praktischen Einsatz.
Für die Neuauflage wurde dieses Buch komplett überarbeitet und alle zentralen neuen
Funktionen der aktuellen Flash-Version aufgenommen. So wurde der Band beispielsweise
um Informationen über den verbesserten Import von Photoshop- und Illustrator-Dateien
und die optimierte Skriptsteuerung von Flash mit ActionScript ergänzt.
TecFeeds © 2007 by O’Reilly Verlag
Adobe Integrated Runtime (AIR) for
JavaScript Developers Pocket Guide
This book explains how you can use AIR to build and deploy HTML and JavaScript-based
web applications to the desktop, using all of the tools and technologies with which you
are already familiar. Everything you need to know about this platform is right here, so
you can start building applications with AIR right away.
Was this manual useful for you? yes no
Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

Download PDF

advertising