Programmatic Skin für Buttons mit Variablen Farben

Geschrieben in flash/flex von natalia am 3 August 2007

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.

  1. package
  2. {
  3.   import mx.skins.ProgrammaticSkin;
  4.   public class ButtonSkin extends ProgrammaticSkin {
  5.     protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
  6.     var fillColor:uint = this.getStyle("themeColor");
  7.     var lineColor:uint = this.getStyle("color");
  8.     graphics.clear();
  9.     graphics.beginFill(fillColor,1);
  10.     graphics.lineStyle(1,lineColor,1);
  11.     graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
  12.   }
  13.   }
  14. }

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.

  1. Button {
  2.   cornerRadius: 0;
  3.   highlightAlphas: 0, 0;
  4.   fillAlphas: 1, 1, 1, 1;
  5.   downSkin:ClassReference('ButtonSkin');
  6.   upSkin:ClassReference('ButtonSkin');
  7.   overSkin:ClassReference('ButtonSkin');
  8.   disabledSkin:ClassReference('ButtonSkin');
  9. }

Geschrieben in flash/flex | Keine Kommentare »

TabNavigator – Styles dynamisch zuweisen

Geschrieben in flash/flex von natalia am 2 August 2007

In einem Tab-Navigator sollen die Styles, vor allem die Farben erst später gesetzt werden. Zunächst muss man die Stile für den TabNavigator fest definieren:

TabNavigator {
  backgroundColor: #8b8b8b;
  borderStyle: none;
  color: #ffffff;
  dropShadowEnabled: false;
  tabStyleName: "myTabs";
  firstTabStyleName: "myTabs";
  lastTabStyleName: "myTabs";
  selectedTabTextStyleName: "mySelectedTabs";
}

.myTabs {
  cornerRadius: 0;
  highlightAlphas: 0, 0;
  fillAlphas: 1, 1;
  fillColors: #ffffff, #ffffff;
  borderColor: #8b8b8b;
  color: #8b8b8b;
}

.mySelectedTabs {
  color: #ffffff;
  textRollOverColor: #ff9900;
}

Das macht man in einem Style-Abschnitt in der MXML-Datei. Dann kann man in einer Funktion auf die bestehenden Stile zugreifen und deren Attribute ändern.

// den TabNavigator CSS Style holen
var tabNavigatorStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration("TabNavigator");
// Hintergrundfarbe neu setzen (z.B. auf grün)
tabNavigatorStyle.setStyle("backgroundColor", 0x00FF00);
// den .myTabs CSS Style holen
var tabStyle:Object = StyleManager.getStyleDeclaration(".myTabs");
// z.B.cornerRadius setzen
tabStyle.setStyle("cornerRadius", 10);

Vielen Dank an Bort, den Flexperten auf dem Flex Forum.

Geschrieben in flash/flex | Keine Kommentare »