…The ballad of dead pixels…

Adobe MAX 2009は、時間の都合上2コマのみ参加して来た。
そのうちの一つのセッション、Effective UI社のJosh Jamison氏による「Flex Deep Dive: Flex Framework」で教わったテクニック。（詳細は後ほど追記したいが、、いつになるかは未定）

ボタンの背景など、画像のスキンを扱うとき、今までは特に疑問も無く、画像のスキンを埋め込むクラスを作って、各メンバ変数に画像を割り当てた後、使っていた。
SkinRack.as

package {
  public class SkinRack {
    [Bindable]
    [Embed('assets/buttonUp.gif')]
    public static var testA:Class;

    [Bindable]
    [Embed('assets/buttonDown.gif')]
    public static var testB:Class;

    [Bindable]
    [Embed('assets/buttonOver.gif')]
    public static var testC:Class;

    [Bindable]
    [Embed('assets/buttonDisabled.gif')]
    public static var testD:Class;
  }
}

利用側:

  <Button id="btnB" label="button B" width="100" height="25"
     upSkin = "{SkinRack.testA}"
     overSkin = "{SkinRack.testB}"
     downSkin = "{SkinRack.testC}"
     disabledSkin = "{SkinRack.testD}" />

不満な点は
・バインディングが必要
・わざわざASのクラスにする程のものでもなさそうな気がする

セッションで、StyleManagerの利用方として紹介された例がこちら。CSSに画像のスキン定義を集約して、コードでそれを取り出し使う例だった。
SkinRack.css

.bitmapSkins {
  testA: Embed(source='assets/buttonUp.gif');
  testB: Embed(source='assets/buttonDown.gif');
  testC: Embed(source='assets/buttonOver.gif');
  testD: Embed(source='assets/buttonDisabled.gif');
}

利用側:

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://www.adobe.com/2006/mxml">
  <Style source="skinrack.css" />
  <Script><![CDATA[
    import mx.styles.StyleManager;
  ]]></Script>
  <creationComplete><![CDATA[
    btnA.setStyle("upSkin",       StyleManager.getStyleDeclaration(".bitmapSkins").getStyle("testA"));
    btnA.setStyle("overSkin",     StyleManager.getStyleDeclaration(".bitmapSkins").getStyle("testB"));
    btnA.setStyle("downSkin",     StyleManager.getStyleDeclaration(".bitmapSkins").getStyle("testC"));
    btnA.setStyle("disabledSkin", StyleManager.getStyleDeclaration(".bitmapSkins").getStyle("testD"));
  ]]></creationComplete>

  <Label text="using skinrack.css:" />
  <Button id="btnA" label="button A" width="100" height="25" />
</Application>

こちらのやり方では、スタイルの取得・適用のためのコードを書かなければいけなくなってはいるのが多少手間ではあるけど、
画像スキンを集約したAS3クラスを書くより、CSSに集約する方が、方向的に正しい気がする。正しい役割分担が出来てすっきりするというか。
これはまた別の話だけど、定義場所をCSSにファイルにまとめることで、CSSをコンパイルしてSWFを作り、動的にロード・廃棄できるモジュールとして扱うように持っていくことも出来る。

(※ソース一式はこちらに)

~ by dseg on 2am 02/02/09.

Flex