Button-Skinning mit Flex 4

Heute geht es um das Skinning von Buttons in Flex 4. Dabei wird anschaulich deutlich, wie einfach und leistungsfähig die Skinning-Architektur der Spark-Komponenten aufgebaut ist.

Die prinzipielle Vorgehensweise ist vergleichbar der beim Skinning einer Spark-Applikation: Man legt eine neue Klasse mithilfe einer MXML-Datei an, die das Aussehen des Buttons festlegt. Diese Skinklasse ordnet man dem Button zu.

[kml_flashembed fversion=“10.0.0″ movie=“/wp-content/uploads/2009/05/button.swf“ targetclass=“flashmovie“ publishmethod=“dynamic“ width=“600″ height=“130″]

Get Flash Player

[/kml_flashembed]

Klasse für das Skinning zuweisen

Zuerst weist man dem Button über skinClass eine Klasse zu. Hier im Beispiel ist es skin.SkinButton, also die MXML-Datei SkinButton.mxml im Unterverzeichnis skin.

Ganz einfach geht dies in MXML: <s:Button label="Button #1" skinClass="skin.SkinButton" width="200" height="50" />

Etwas mehr Schreibarbeit fällt an, wenn man es alternativ mithilfe eines Stylesheets machen würde. Hier der Style, damit alle Buttons das individuelle Skin erhalten:
[xml]

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

s|Button {
skinClass: ClassReference(„skin.SkinButton“);
}

[/xml]

Skin für den Button erstellen

Jetzt muss man die Datei skins/SkinButton.mxml mit Inhalt füllen.

Wichtig ist, zuallererst die Definition der Zustände zu deklarieren, die der Button annehmen kann. Diese sind disabled (deaktiviert), up (normal), down (gedrückt) und over (Rollover).

[xml]






[/xml]

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

[xml]

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

[/xml]

Jetzt folgt auch schon der sichtbare Teil, also das Button-Skin in Form eines Rechtecks (Rect) mit Kontur (Stroke) und dem Label.

[xml]

[/xml]

Legt man eine Eigenschaft im MXML-Code ohne weitere Besonderheiten fest (z.B. color="0xffffff"), gilt diese für alle Zustände. Ergänzt man allerdings den gewünschten Zustand über eine Punktschreibweise (z.B. color.up für den up-State), gilt die Eigenschaft nur für diesen Zustand. Im Beispiel werden dadurch, je nach Zustand, verschiedene Farben verwendet. Man könnte auch eine andere Eigenschaften wie Breite, den Radius der Ecken oder alle anderen Eigenschaften pro Zustand einstellen.

Jetzt fehlt nur noch das Label. Dieses wird über eine SimpleText-Komponente erstellt, der man die id labelElement geben muss.

Man könnte übrigens aus dem Skin auch auf Eigenschaften der Komponte (z.B. den Labeltext) mithilfe von hostComponent.eigenschaft (z.B. hostComponent.label) zugreifen.

[xml]

[/xml]

Quellcode des Skins

Zum Abschluss das komplette Skin am Stück.

[ad]

[xml]

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

[/xml]