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″]
[/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]
versteh ich nicht ganz wozu man dafür flex 4 braucht geht genauso gut mit AS3 und XML. Das ist auf jeden fall zuviel code für einen button.
das muss so aussehen
<btn position="10,10" size="50×20" color="0x00000" rollover="0xFFFFFF" border="2" border-color="0x554846"><[CDATA[Demo]]></btn>
der einzige trick daran ist, dass man sich selbst eine Klasse schreiben muss, die die Eigenschaften zu einen Button umwandelt.
Du hast Recht: Für einen einfachen Button brauchst du natürlich kein Flex 4.
Diese Vorgehensweise funtioniert ja aber auch mit allen anderen Komponenten des Flex Frameworks. Bis man diese in ActionScript nachgebaut hätte …