プログラムスキンの構成要素を描画するには、Graphics クラスの描画メソッドを使用します。これらの描画メソッドでは、塗りやグラデーションの塗りの記述、線のサイズやシェイプの定義、および線の描画ができます。このような単純な描画メソッドを組み合わせることにより、コンポーネントのスキンを構成する複雑なシェイプを作成できます。

次の表は、Graphics パッケージの中で最も頻繁に使用される描画メソッドを簡単に示しています。

次の例では、三角形を描画します。

package { // Use unnamed package if this skin is not in its own package.
  // skins/CheckBoxAsArrowSkin.as
  
  // Import necessary classes here.
  import flash.display.Graphics;
  import mx.skins.Border;
  import mx.skins.ProgrammaticSkin;
  import mx.styles.StyleManager;

  public class CheckBoxAsArrowSkin extends ProgrammaticSkin {
  
     // Constructor.
     public function CheckBoxAsArrowSkin() {
        // Set default values.
     }

     override protected function updateDisplayList(w:Number, h:Number):void {
        var unscaledHeight:Number = 2;
        var unscaledWidth:Number = 2;

        var arrowColor:Number;

        var g:Graphics = graphics;
        g.clear();

        switch (name) {
           case "upIcon": 
           case "selectedUpIcon": {
            arrowColor = 0x666666;
            break;
           }
           case "overIcon": 
           case "downIcon": 
           case "selectedOverIcon": 
           case "selectedDownIcon": {
            arrowColor = 0xCCCCCC;
            break;
           }
        }

        // Draw an arrow.
        graphics.lineStyle(1, 1, 1);
        graphics.beginFill(arrowColor);
        graphics.moveTo(unscaledWidth, unscaledHeight-20);
        graphics.lineTo(unscaledWidth-30, unscaledHeight+20);
        graphics.lineTo(unscaledWidth+30, unscaledHeight+20);
        graphics.lineTo(unscaledWidth, unscaledHeight-20);
        graphics.endFill();
     }
  }
} // Close unnamed package.

ProgrammaticSkin クラスでも描画メソッドが定義されていますが、その中で最も多く使用するものは drawRoundRect() メソッドです。このメソッドでは、プログラムで矩形を描画します。そのプログラムで、角の丸み半径やグラデーションなどのプロパティを設定できます。このメソッドを使用してコンテナの境界をカスタマイズすると、例えば、次のような描画が可能です。

次のコードでは、drawRoundRect() メソッドを使用して、このカスタマイズした VBox の境界を描画します。

package { // Use unnamed package if this skin is not in its own package.
  // skins/CustomContainerBorderSkin.as
  
  // Import necessary classes here.
  import flash.display.Graphics;
  import mx.graphics.RectangularDropShadow;
  import mx.skins.RectangularBorder;

  public class CustomContainerBorderSkin extends RectangularBorder {

    private var dropShadow:RectangularDropShadow;

    // Constructor.
    public function CustomContainerBorderSkin() {
    }

    override protected function updateDisplayList(unscaledWidth:Number, 
       unscaledHeight:Number):void 
    {

       super.updateDisplayList(unscaledWidth, unscaledHeight);

       var cornerRadius:Number = getStyle("cornerRadius");
       var backgroundColor:int = getStyle("backgroundColor");
       var backgroundAlpha:Number = getStyle("backgroundAlpha");
       graphics.clear();

       // Background
       drawRoundRect(0, 0, unscaledWidth, unscaledHeight, 
           {tl: 0, tr:cornerRadius, bl: cornerRadius, br: 0}, 
           backgroundColor, backgroundAlpha);

       // Shadow
       if (!dropShadow)
          dropShadow = new RectangularDropShadow();

       dropShadow.distance = 8;
       dropShadow.angle = 45;
       dropShadow.color = 0;
       dropShadow.alpha = 0.4;
       dropShadow.tlRadius = 0;
       dropShadow.trRadius = cornerRadius;
       dropShadow.blRadius = cornerRadius;
       dropShadow.brRadius = 0;
       dropShadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight);
    }
  }
}

Flex アプリケーションでは、次の例に示すようにこのスキンを適用します。

<?xml version="1.0"?>
<!-- skins/ApplyContainerBorderSkin.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:VBox id="vb1"
     borderSkin="CustomContainerBorderSkin" 
     backgroundColor="0xCCCC99"
     backgroundAlpha="0.8" 
     cornerRadius="14" 
     paddingLeft="20" 
     paddingTop="20"
     paddingRight="20"
     paddingBottom="20"
  >
     <mx:Label text="Text Goes Here"/>
  </mx:VBox>

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

前の例にある unscaledWidth プロパティと unscaledHeight プロパティは、スキンが認識した自身のサイズを示します。これらのサイズでは、スキンのサイズが外部のコンポーネントにより変更されている可能性がある点は無視されています。コンポーネント内部で作業する際は、拡大 / 縮小されないサイズの使用が最適です。

measuredWidth および measuredHeight の getter の実装

measuredWidth プロパティおよび measuredHeight プロパティは、コンポーネントのデフォルトの幅と高さを定義します。measuredWidth プロパティおよび measuredHeight プロパティの getter メソッドを実装することは可能ですが、ほとんどのスキンでは不要です。ScrollBar 矢印を定義しているスキンのように、getter の実装が必要なスキンも一部にはあります。これらの getter を実装する場合は、スーパークラスの getter メソッドを実装するときに override キーワードを指定します。また、実装する getter はパブリックとする必要があります。

measuredWidth および measuredHeight の getter は、定数を返すことが普通です。通常、Flex アプリケーションは計算サイズに従いますが、必ず従うというわけではありません。これらの getter を省略すると、measuredWidth および measuredHeight の値はデフォルト値の 0 に設定されます。

次の例では、measuredWidth プロパティおよび measuredHeight プロパティを 10 に設定した後、getter をオーバーライドします。

package { // Use unnamed package if this skin is not in its own package.
  // skins/ButtonStatesWithMeasuredSizesSkin.as

  // Import necessary classes here.
  import flash.display.Graphics;
  import mx.skins.Border;
  import mx.skins.ProgrammaticSkin;
  import mx.styles.StyleManager;

  public class ButtonStatesWithMeasuredSizesSkin extends ProgrammaticSkin {

     public var backgroundFillColor:Number;
     public var lineThickness:Number;

     private var _measuredWidth:Number;
     private var _measuredHeight:Number;

     // Constructor.
     public function ButtonStatesWithMeasuredSizesSkin() {
        // Set default values.
        backgroundFillColor = 0xFFFFFF;
        lineThickness = 4;

        _measuredHeight = 100;
        _measuredWidth = 150;
     }

     override public function get measuredWidth():Number {
        return _measuredWidth;
     }

     override public function get measuredHeight():Number {
        return _measuredHeight;
     }

     override protected function updateDisplayList(w:Number, h:Number):void {
        // Depending on the skin's current name, set values for this skin.
        switch (name) {
           case "upSkin":
            lineThickness = 4;
            backgroundFillColor = 0xFFFFFF;
            break;
           case "overSkin":
            lineThickness = 4;
            backgroundFillColor = 0xCCCCCC;
            break;
           case "downSkin":
            lineThickness = 2;
            backgroundFillColor = 0xFFFFFF;
            break;
           case "disabledSkin":
            lineThickness = 2;
            backgroundFillColor = 0xCCCCCC;
            break;
        }

        // Draw the box using the new values.
        var g:Graphics = graphics;
        g.clear();
        g.beginFill(backgroundFillColor,1.0);
        g.lineStyle(lineThickness, 0xFF0000);
        g.drawRect(0, 0, w, h);
        g.endFill();
        g.moveTo(0, 0);
        g.lineTo(w, h);
        g.moveTo(0, h);
        g.lineTo(w, 0);
     }
  }
} // Close unnamed package.

borderMetrics プロパティの getter の実装

borderMetrics プロパティは、プログラムスキンの 4 辺すべての境界線の太さを定義します。プログラムスキンが Border または RectangularBorder のサブクラスの場合は、borderMetrics プロパティの getter を実装する必要があります。それ以外の場合、この手順はオプションになります。このプロパティは EdgeMetrics タイプなので、getter の戻り値の型は EdgeMetrics にする必要があります。

次の例では、borderThickness スタイルを取得し、その値を使用して、EdgeMetrics のコンストラクタで定義されているとおりに境界線の 4 辺の幅を定義します。

package { // Use unnamed package if this skin is not in its own package.
  // skins/ButtonStatesWithBorderMetricsSkin.as

  // Import necessary classes here.
  import flash.display.Graphics;
  import mx.skins.Border;
  import mx.skins.ProgrammaticSkin;
  import mx.styles.StyleManager;
  import mx.core.EdgeMetrics;

  public class ButtonStatesWithBorderMetricsSkin extends ProgrammaticSkin {

     public var backgroundFillColor:Number;
     public var lineThickness:Number;

     private var _borderMetrics:EdgeMetrics;

     // Constructor.
     public function ButtonStatesWithBorderMetricsSkin() {
        // Set default values.
        backgroundFillColor = 0xFFFFFF;
        lineThickness = 4;
     }

     public function get borderMetrics():EdgeMetrics {
        if (_borderMetrics) {
           return _borderMetrics;
        }
        var borderThickness:Number = getStyle("borderThickness");
        _borderMetrics = new EdgeMetrics(borderThickness, 
            borderThickness, borderThickness, borderThickness);
        return _borderMetrics;
     }

     override protected function updateDisplayList(w:Number, h:Number):void 
     {
        // Depending on the skin's current name, set values for this skin.
        switch (name) {
           case "upSkin":
            lineThickness = 4;
            backgroundFillColor = 0xFFFFFF;
            break;
           case "overSkin":
            lineThickness = 4;
            backgroundFillColor = 0xCCCCCC;
            break;
           case "downSkin":
            lineThickness = 2;
            backgroundFillColor = 0xFFFFFF;
            break;
           case "disabledSkin":
            lineThickness = 2;
            backgroundFillColor = 0xCCCCCC;
            break;
        }

        // Draw the box using the new values.
        var g:Graphics = graphics;
        g.clear();
        g.beginFill(backgroundFillColor,1.0);
        g.lineStyle(lineThickness, 0xFF0000);
        g.drawRect(0, 0, w, h);
        g.endFill();
        g.moveTo(0, 0);
        g.lineTo(w, h);
        g.moveTo(0, h);
        g.lineTo(w, 0);
     }
  }
} // Close unnamed package.