Flex 4: Skinning einer Spark-Applikation

In diesem Beitrag zum Flex 4 SDK wird die neue Komponentenarchitektur deutlich. Es wird gezeigt, wie man ein eigenes Skin für eine Spark-Applikation (s:Application) erstellt. Das Skin liegt in einer eigenen MXML-Datei und ersetzt den Hintergrund durch ein gekacheltes Hintergrundbild.

[kml_flashembed movie=“/wp-content/uploads/2009/04/GumboBackground.swf“ width=“600″ height=“200″ /]

In einer Halo-Applikation (mx:Application) gibt es die Eigenschaft backgroundImage. Diese wurde jedoch in Flex 4 abgeschafft, was es im ersten Schritt etwas kompliziert macht, einer Anwendung ein Hintergrundbild zu geben. Der Grund ist, dass Application schlanker und mit weniger Overhead gehalten werden sollte.

Dank der neuen Skinning-Möglichkeiten ist trotzdem recht einfach zu erledigen und gewissermaßen auch konsequent, wenn ein Hintergrundbild über Skinning realisiert wird. Die Erstellung des obigen Beispiel wird im Folgenden erklärt.

Klasse für das Skinning zuweisen

Zuerst ordnet man der Applikation über skinClass einer Klasse zu. Hier im Beispiel ist es skin.SkinBackgroundImage, also die MXML-Datei SkinBackgroundImage.mxml im Unterverzeichnis skin.

[xml]

[/xml]

Alternativ wäre dies genauso auch über CSS möglich:

[xml]

@namespace s „library://ns.adobe.com/flex/spark“;
@namespace mx „library://ns.adobe.com/flex/halo“;

s|Application {
skinClass: ClassReference(„skin.SkinBackgroundImage“);
}

[/xml]

Skin für die Applikation erstellen

Jetzt gilt es, das MXML-Skin für die Anwendung zu erstellen. Im wesentlichen besteht das Skin aus vier Teile: States, Metadaten, Inhalt und der contentGroup.

In den states werden die Zustände definiert, die durch das Skin kontrolliert werden.

In den Metadaten wird über HostComponent festgelegt wird, für welche Komponente dieses Skin gültig ist. In unserem Beispiel wird das Skin für Applikationen bereitgestellt.

Der eigentliche Inhalt, der zu sehen ist, wird über BitmapImage als Bild generiert. Durch die Einstellung repeat beim resizeMode wird das Bild gekachelt. Prinzipiell könnte an dieser Stelle nach Belieben eigener Code stehen, z.B. könnte man auch Grafiken zeichnen (siehe z.B Füllungen in FXG).

Die Group contentGroup ist der Container für alle Inhalte, die im MXML-Code einer Spark-Applikation hinzugefügt werden. Es stellt quasi die Wurzel aller sichtbaren Elemente dar und muss deshalb für ein Applikations-Skin vorhanden sein. Damit Inhaltselemente (wie z.B. der Button) nicht direkt am Rand platziert werden, wird ringsum ein Abstand von 25 Pixeln definiert. Dadurch entsteht auch der graue Rand, dort ist die Hintergrundfarbe der Applikation zu sehen.

[xml]

[HostComponent(„spark.components.Application“)]

[/xml]

Download: Flexprojekt (.zip)

[ad]