Skinning eines Slider mit Degrafa

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]