Nachdem bereits das Skinning von Charts und Buttons mit Degrafa gezeigt wurden, folgt nun ein Beispiel, wie der HSlider
von Flex optisch angepasst werden kann.
Dieser sieht im Original so aus:
Beim Skinning werden drei Elemente angepasst:
- der Anfasser, der im Bild als Kreis zu sehen ist (in Flex ist das
ThumbSkin
verantwortlich) - der Balken, auf dem der Anfasser bewegt wird (in Flex:
trackSkin
) - der Bereich links vom Anfasser, also das blaue Rechteck (in Flex:
trackHightlightSkin
)
Demo: HSlider mit Degrafa
[kml_flashembed movie=“/wp-content/uploads/2009/02/hslider/DegrafaSlider.swf“ height=“150″ width=“550″ base=“.“ /]
Die Quelldateien können mit der rechten Maustasten (View Source) angeschaut und heruntergeladen werden.
Funktionsweise
Über ein Stylesheet wird den verschiedenen Elementen des Sliders jeweils eine Klasse zugeordnet.
[as]
HSlider {
thumbSkin: ClassReference(’skins.MyHSliderThumbSkin‘);
trackSkin: ClassReference(’skins.MyHSliderTrackSkin‘);
trackHighlightSkin: ClassReference(’skins.MyHSliderTrackHighlightSkin‘);
}
[/as]
Diese Klassen liegen als einzelne MXML-Dateien vor. Analog zum Beispiel mit den Buttons, wird das Aussehen des Elements mit Degrafa gezeichnet.
Hinweis: Eine Besonderheit beim Track ist, dass dieses scheinbar standardmäßig immer 0px hoch ist. Deshalb muss der Wert height
manuell angepasst werden. Sonst kann man nicht auf den Balken klicken.
Dynamisch eine Farbe des Skins abändern
Am Beispiel des ColorPickers
sieht man zusätzlich, wie man dynamisch die Farbe eines Skins ändern kann. Es wird per Data-Binding mithilfe von Application.application
auf die Flex-Bühne referenziert.
Weitere Informationen zu Degrafa
Weitere Informationen gibt es hier im Blog unter dem Schlagwort Degrafa.
[ad]