setStyle() メソッドの使用 -- Flex 2.01

スキンはスタイルプロパティとして定義されるので、スキンには setStyle() メソッドおよび getStyle() メソッドでアクセスできます。これにより、コンパイル時にグラフィカルアセットを埋め込んでおけば、実行時にスキンを変更することも、動的にスキンを定義することもできます。

setStyle() メソッドで使用できるようにイメージを埋め込むには、[Embed] メタデータタグを使用して、変数に参照を割り当てます。それから、setStyle() メソッドを使用して、このイメージをスキンとしてコンポーネントに適用します。

次の例では、3 つのイメージを埋め込み、これらのイメージをスキンとして Button コントロールのインスタンスに適用します。

<?xml version="1.0"?>
<!-- skins/EmbedWithSetStyle.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()">
  <mx:Script><![CDATA[
     [Embed("../assets/orb_over_skin.gif")]
     public var os:Class;

     [Embed("../assets/orb_down_skin.gif")]
     public var ds:Class;

     [Embed("../assets/orb_up_skin.gif")]
     public var us:Class;

     private function init():void {
        b1.setStyle("upSkin",us);
        b1.setStyle("overSkin",os);
        b1.setStyle("downSkin",ds);
     }
  ]]></mx:Script>
  
  <mx:Button label="Click Me" id="b1"/>
  
</mx:Application>

スキンをコントロールの全インスタンスに適用するには、次の例のように StyleManager を使用します。

<?xml version="1.0"?>
<!-- skins/EmbedWithStyleManager.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()">
  <mx:Script><![CDATA[
     import mx.styles.StyleManager;

     [Embed("../assets/orb_over_skin.gif")]
     public var os:Class;

     [Embed("../assets/orb_down_skin.gif")]
     public var ds:Class;

     [Embed("../assets/orb_up_skin.gif")]
     public var us:Class;

     private function init():void {
        StyleManager.getStyleDeclaration("Button").setStyle("upSkin", us);
        StyleManager.getStyleDeclaration("Button").setStyle("overSkin", os);
        StyleManager.getStyleDeclaration("Button").setStyle("downSkin", ds);
     }
  ]]></mx:Script>
  
  <mx:Button label="Click Me" id="b1"/>
  
</mx:Application>