Programmatic Skin für Buttons mit Variablen Farben

Auf einen Button in Flex soll ein Skin gelegt werden, damit die Buttons einfacher aussehen.

Dazu erstellt man eine Datei ButtonSkin im gleichen Ordner. Dort definiert man die Klasse ButtonSkin als Erweiterung der Klasse Programmatic Skin. Darin muss man die Funktion updateDisplayList neu schreiben. In diesem Beispiel wird der Button mit einem Rand versehen. In den ersten zwei Zeilen der Funktion wird auf die in der Hauptanwendung gesetzen Farben zugegriffen.

package
{
import mx.skins.ProgrammaticSkin;
public class ButtonSkin extends ProgrammaticSkin {
protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
var fillColor:uint = this.getStyle(„themeColor“);
var lineColor:uint = this.getStyle(„color“);
graphics.clear();
graphics.beginFill(fillColor,1);
graphics.lineStyle(1,lineColor,1);
graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
}
}
}

Um den „gehäuteten“ Button in der Anwendung zu benutzen, fügt man folgende Zeilen in den Code des Style-Abschnitts im MXML-File ein.

Button {
cornerRadius: 0;
highlightAlphas: 0, 0;
fillAlphas: 1, 1, 1, 1;
downSkin:ClassReference(‚ButtonSkin‘);
upSkin:ClassReference(‚ButtonSkin‘);
overSkin:ClassReference(‚ButtonSkin‘);
disabledSkin:ClassReference(‚ButtonSkin‘);
}