Feathers Example Buttonについて

Buttonサンプルについて
このサンプルはFeathersのサイト
「How to use the Feathers Button component(リンク先へ)」
を参考にしています。
FeathersExampleのソースコード(リンク先へ)

FeathersExampleを実行すると以下の画面になります。

テーマの設定
Buttonの処理を行う前にテーマを設定します。
このサンプルでは、FeathersThemeライブラリ(リンク先へ) を利用しています。
ButtonExample.as

    case 0:
     this.theme = new MetalWorksMobileTheme(this.stage);
     break;

テーマはMetalWorksMobileThemeを使用します。

テーマの変更
MetalWorksMobileThemeからAeonDesktopThemeに切り替えてみます。

ButtonExample.as

protected var theme:AeonDesktopTheme;

   themeIndex = 1;
   switch(themeIndex)
   {
    case 0:
     //this.theme = new MetalWorksMobileTheme(this.stage);
     break;
    case 1:
     this.theme = new AeonDesktopTheme(this.stage);
     break;

Buttonの表示と操作の流れ

ButtonExample.as

   this.button = new Button();
   this.button.label = "クリック";
   this.button.nameList.add(ExtendMetalWorksTheme.ALTERNATE_NAME_MY_CUSTOM_BUTTON);
   this.button.defaultIcon = new Image(Texture.fromBitmapData(icon.bitmapData));
   this.button.iconPosition = Button.ICON_POSITION_TOP;
   this.button.gap = 0;
   this.button.horizontalAlign = Button.HORIZONTAL_ALIGN_LEFT;
   this.button.verticalAlign = Button.VERTICAL_ALIGN_MIDDLE;
   this.button.width = 200;
   this.button.height = 80;

   this.button.labelOffsetX = this.button.iconOffsetX + icon.width;
   this.button.labelOffsetY = -(this.button.height/2);

   this.button.addEventListener(Event.TRIGGERED, button_triggeredHandler);
   this.button.addEventListener(Event.CHANGE, button_changeHandler);
   this.addChild(this.button);

• インスタンスの作成
• labelプロパティの設定
• レイアウト、大きさの設定
• タッチイベントの設定
• 画面に対してaddChildを行う

タッチイベントハンドラーの作成 ButtonExample.as

  protected function button_triggeredHandler(event:Event):void
  {
   const label:Label = new Label();
   label.text = "Hi, I'm Feathers!\nHave a nice day.";
   Callout.show(label, this.button);
  }

labelOffsetについて

labelOffsetを利用しない場合は以下のような表示になります。

アイコンとラベルを水平に表示させる為、labelOffsetで調整をしています。

ButtonExample.as

   this.button.labelOffsetX = this.button.iconOffsetX + icon.width;
   this.button.labelOffsetY = -(this.button.height/2);