2013年2月5日火曜日

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);

0 件のコメント:

コメントを投稿