Juli 2009

Flex 4 und Spark – Revolution oder Workaround?

Fortsetzung, Teil 2

Das Komponentenmodell in der Praxis

Adobes offizielle Empfehlung lautet derzeit, bei Vorhandensein der Spark-Version einer Komponente diese zu nutzen und Halo-Komponenten nur dann zu verwenden, wenn es keine Alternative gibt. Es ist prinzipiell auch möglich und (aufgrund der Tatsache, dass das Spark-Komponentenmodell bis auf weiteres unvollständig ist) nötig, Halo- und Spark-Komponenten in einer Anwendung zu mischen – sofern man denn Spark-Komponenten überhaupt verwenden möchte.

Schauen wir uns ein Beispiel für das Skinning einer Button-Komponente mit Spark an. In der Hauptapplikation finden wir diesmal nur die Flex-4- sowie die Spark-Namespaces fx und s. Dieses Beispiel verwendet keine Halo-Komponenten, daher benötigen wir den Namespace auch nicht:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
minWidth="1024"
minHeight="768">
<fx:Style source="assets/app.css"/>
<s:layout>
<s:VerticalLayout gap="10" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/>
</s:layout>
...
</s:Application>

Mit <fx:Style> wird eine externe .css-Datei eingebunden. Das war auch in Flex 3 einer der üblichen Wege zum Stylen oder Skinnen von Komponenten, in der hier benutzten .css-Datei für die Flex-4-Anwendungen definieren wir allerdings ebenfalls den verwendeten Namespace im CSS:

@namespace s "library://ns.adobe.com/flex/spark";
s|Button.ellipse
{
skinClass: ClassReference("nz.co.ventego.skins.button.ButtonEllipseSkin");
}

Das hier gezeigte CSS deklariert einen Style "ellipse" für Spark-Buttons, der eine MXML-Komponente als Wert der skinClass-Eigenschaft setzt. Die Komponente ButtonEllipseSkin nutzt den neuen Skinning-Ansatz in Spark und zeigt auf, wie Style, Skin und die eigentliche Komponente <s:Button> sauber voneinander getrennt sind.

Zunächst wird die MXML-Komponente auf Basis der Klasse <s:SparkSkin> definiert. Mithilfe des Metadata-Tags und Aufzählen der States stellen wir sicher, dass der Flex-Skin alle Eigenschaften und Styles des Standard-Buttonskins übernimmt und die gleichen States bereitstellt, die ein Spark-Button anbieten soll.

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
minWidth="40" minHeight="40">
<fx:Metadata>
[HostComponent("spark.components.Button")]
</fx:Metadata>
<s:states>
<mx:State name="up"/>
<mx:State name="down"/>
<mx:State name="over"/>
<mx:State name="disabled"/>
</s:states>

Im Folgenden werden mit der Grafikbibliothek von Flex 4 zwei Ellipsen definiert, die mit Gradienten gefüllt sind. Hierbei kann es sich letztlich um jede Art von grafischer Interaktion und Darstellung handeln – Lines, Strokes, gefüllte oder ungefüllte Flächen etc. Das Attribut "includeIn" bezieht sich auf die im <s:states> -Array definierten State-Objekte. In diesem Beispiel wird die zweite Ellipse als "over"-Skin verwendet und "up","down" sowie "disabled" werden mit dem Default-Skin (der ersten Ellipse) versehen. Ein SimpleText-Objekt für das Button-Label runden den Skin ab.

<s:Ellipse left="0" top="0" right="0" bottom="0" height="100%" width="100%">
<s:fill>
<mx:RadialGradient>
<mx:GradientEntry color="0xFFFF00" ratio=".25"/>
<mx:GradientEntry color="0x000000" ratio=".9"/>
</mx:RadialGradient>
</s:fill>
</s:Ellipse>
<s:Ellipse left="0" top="0" right="0" bottom="0" height="100%" width="100%" includeIn="over">
<s:fill>
<mx:RadialGradient>
<mx:GradientEntry color="0xFFFFFF" ratio="0"/>
<mx:GradientEntry color="0xFF0000" ratio=".25"/>
<mx:GradientEntry color="0x0000FF" ratio=".9"/>
</mx:RadialGradient>
</s:fill>
</s:Ellipse>
<s:SimpleText id="labelElement" horizontalCenter="0" verticalCenter="0" textAlign="center" verticalAlign="justify" />
</s:SparkSkin>

Der letzte fehlende Schritt ist nun noch, den die Skin-Klasse referenzierenden CSS-Style an eine Button-Komponente zu binden. Das geschieht in der Hauptapplikation:

<s:Button label="Click me!"/>
<s:Button label="Click me!" styleName="ellipse" width="300" height="100" />

Die Ausgabe der Anwendung ist im nachfolgenden Bild darstellt, der Button ist eine Ellipse mit Radien im Verhältnis 3:1 (gesteuert über das Sizing der Button-Komponente), und mit Hilfe des SimpleText-Objektes und dessen Eigenschaften textAlign sowie verticalAlign wird sichergestellt, dass das Label mittig platziert ist.

Ausgabe der Anwendung - Hovern des Buttons ändert dessen Skin

Fazit

Das neue Spark-Komponentenmodell ist auf dem Papier großartig und die Umsetzung sehr vielversprechend, da es klare Demarkationslinien zwischen Funktionalität und Skin von Komponenten einführt. Komplexe Anwendungen erfordern im Moment noch das Mischen von Halo und Spark, was in derzeitigen Flex-4-Betaversionen je nach Anwendungsfall zu massiven Problemen und unvorhersehbarem Verhalten führen kann. Adobe sollte an dieser Stelle sehr bald eine Entscheidung treffen, wie weiter verfahren wird – das Spark-Modell ist zu vielversprechend und zu wichtig für die Weiterentwicklung des Flex-Frameworks, um es in einer finalen Version von Flex 4 nur "halbgar" auszuliefern.

Eine Antwort auf die einleitende Frage "Revolution oder Workaround?" ist daher: Revolution – falls Adobe es schafft bis zum finalen Release von Flex 4 die Probleme des Mischens von Halo und Spark auszuräumen oder einen Komplettsatz Spark-Komponenten bereitzustellen. Es ist dem Produkt und der Flex 4-Open-Source-Community zu wünschen, dass Produkt- und Releasetermine hier zugunsten der Konsistenz und Qualität des Releases hinten angestellt werden.

Als nächstes: Das State-Modell

Im nächsten Teil dieser Tutorialreihe beschäftigen wir uns mit einem weiteren neuen Feature in Flex 4, dem überarbeiteten State-Modell: "States on Steroids" – come back soon!