Feathers ScreenExample Screenについて

このサンプルはFeathersのサイト
「How to use the Feathers Screen Component(リンク先へ)　」
「How to use the Feathers ScreenNavigator component(リンク先へ)　」
「Feathers ScreenNavigator Transitions(リンク先へ)　」
を参考にしています。

Feathers ScreenExampleのソースコード(リンク先へ)

Main.as

this._navigator.addScreen(MAIN_MENU,new ScreenNavigatorItem(MainMenuScreen,MAIN_MENU_EVENTS));

addScreenメソッド
ScreenNavigatorItemコンストラクタで必要とされる最初の引数は、 画面のIDと画面のインスタンスまたはすでにインスタンス化されているのDisplayObjectです。

イベントを利用した画面のナビゲーション
ScreenNavigatorItemクラスの第２引数(Object型)でイベントを定義します。
 イベントを送出すると、ScreenNavigatorは自動的に別の画面に移動する処理を
行います。

MainMenuScreen.as

   this._list.dataProvider = new ListCollection(
    [
    { text: "Sub 1", event: SHOW_SUB1_SCREEN },
    { text: "Sub 2", event: SHOW_SUB2_SCREEN },
    ]);

Main.asで定義したイベントをリストのdataProviderに設定します。

  private function list_changeHandler(event:Event):void
  {
   const eventType:String = this._list.selectedItem.event as String;
   this.dispatchEventWith(eventType);
  }

リストのアイテムが選択された時に画面に移動する為のイベントを送出します。

ownerプロパティによる画面のナビゲーション
Sub1Screen.as

  private function onBackButton():void
  {
   this.owner.showScreen(Main.MAIN_MENU);
  }

Screenクラスが持つownerプロパティのshowScreenメソッドで別画面の移動を行います。

トランジションの設定
Main.as

   this._transitionManager = new ScreenSlidingStackTransitionManager(this._navigator);
   this._transitionManager.duration = 0.4;

画面の移動を行う時のトランジションとしてScreenSlidingStackTransitionManagerを使用します。

Feathers ScreenExample 作成3

Sub2ChildScreen.as

package screens
{
 import feathers.controls.Button;
 import feathers.controls.Header;
 import feathers.controls.Label;
 import feathers.controls.Screen;
 import feathers.controls.ScrollContainer;
 import feathers.layout.AnchorLayout;
 import feathers.layout.VerticalLayout;

 import starling.display.DisplayObject;
 import starling.events.Event;

 public class Sub2ChildScreen extends Screen
 {
  private var _container:ScrollContainer;
  private var _header:Header;
  private var _backButton:Button;

  public var horizontalAlign:String = VerticalLayout.HORIZONTAL_ALIGN_LEFT;
  public var verticalAlign:String = VerticalLayout.VERTICAL_ALIGN_TOP;
  public var gap:Number = 2;
  public var paddingTop:Number = 0;
  public var paddingRight:Number = 0;
  public var paddingBottom:Number = 0;
  public var paddingLeft:Number = 0;

  public function Sub2ChildScreen()
  {
   super();
  }

  override protected function initialize():void
  {
   this._container = new ScrollContainer();
   this._container.layout = new AnchorLayout();
   this._container.verticalScrollPolicy = ScrollContainer.SCROLL_POLICY_ON;
   this._container.snapScrollPositionsToPixels = true;
   this.addChild(this._container);

   this._header = new Header();
   this._header.title = "Sub2 ChildScreen";
   this.addChild(this._header);

   this._backButton = new Button();
   this._backButton.label = "Back";
   this._backButton.addEventListener(Event.TRIGGERED, backButton_triggeredHandler);

   this._header.leftItems = new &ltdisplayobject>
    [
    this._backButton
    ];

   this.backButtonHandler = this.onBackButton;

   var label:Label = new Label();
   label.text = "Sub2のサブビューです";
   this._container.addChild(label);
  }

  override protected function draw():void
  {
   this._header.width = this.actualWidth;
   this._header.validate();

   this._container.y = this._header.height;
   this._container.width = this.actualWidth;
   this._container.height = this.actualHeight - this._container.y;
  }

  private function onBackButton():void
  {
   this.owner.showScreen(Main.SUB2_SCREEN);
  }

  private function backButton_triggeredHandler(event:Event):void
  {
   this.onBackButton();
  }
 }
}

Sub2Screen.as

package screens
{
 import feathers.controls.Button;
 import feathers.controls.Header;
 import feathers.controls.Screen;
 import feathers.controls.ScrollContainer;
 import feathers.layout.VerticalLayout;

 import starling.display.DisplayObject;
 import starling.display.Quad;
 import starling.events.Event;

 public class Sub2Screen extends Screen
 {
  public static const SHOW_CHILD_SCREEN:String = "showChildScreen";

  private var _container:ScrollContainer;
  private var _header:Header;
  private var _backButton:Button;
  private var _childButton:Button;

  public var horizontalAlign:String = VerticalLayout.HORIZONTAL_ALIGN_LEFT;
  public var verticalAlign:String = VerticalLayout.VERTICAL_ALIGN_TOP;
  public var gap:Number = 2;
  public var paddingTop:Number = 0;
  public var paddingRight:Number = 0;
  public var paddingBottom:Number = 0;
  public var paddingLeft:Number = 0;

  public function Sub2Screen()
  {
   super();
  }

  override protected function initialize():void
  {
   const layout:VerticalLayout = new VerticalLayout();
   layout.gap = this.gap;
   layout.paddingTop = this.paddingTop;
   layout.paddingRight = this.paddingRight;
   layout.paddingBottom = this.paddingBottom;
   layout.paddingLeft = this.paddingLeft;
   layout.horizontalAlign = this.horizontalAlign;
   layout.verticalAlign = this.verticalAlign;

   this._container = new ScrollContainer();
   this._container.layout = layout;
   this._container.verticalScrollPolicy = ScrollContainer.SCROLL_POLICY_ON;
   this._container.snapScrollPositionsToPixels = true;
   this.addChild(this._container);

   this._header = new Header();
   this._header.title = "Sub2 Screen";
   this.addChild(this._header);

   this._backButton = new Button();
   this._backButton.label = "Back";
   this._backButton.addEventListener(Event.TRIGGERED, backButton_triggeredHandler);

   this._header.leftItems = new &ltdisplayobject>
    [
    this._backButton
    ];

   this._childButton = new Button();
   this._childButton.label = "ChildScreen";
   this._childButton.addEventListener(Event.TRIGGERED, childButton_triggeredHandler);

   this._header.rightItems = new &ltdisplayobject>
    [
    this._childButton
    ];

   this.backButtonHandler = this.onBackButton;

   var redQuad:Quad = new Quad(100,100,0xff0000);
   var greenQuad:Quad = new Quad(100,100,0x00ff00);
   var blueQuad:Quad = new Quad(100,100,0x0000ff);

   this._container.addChild(redQuad);
   this._container.addChild(greenQuad);
   this._container.addChild(blueQuad);
  }

  private function childButton_triggeredHandler():void
  {
   this.dispatchEventWith(SHOW_CHILD_SCREEN);
  }

  override protected function draw():void
  {
   this._header.width = this.actualWidth;
   this._header.validate();

   this._container.y = this._header.height;
   this._container.width = this.actualWidth;
   this._container.height = this.actualHeight - this._container.y;
  }

  private function onBackButton():void
  {
   this.owner.showScreen(Main.MAIN_MENU);
  }

  private function backButton_triggeredHandler(event:Event):void
  {
   this.onBackButton();
  }
 }
}

StarlingFramework,Feathers,FeathersThemeの
Flexライブラリプロジェクトの登録を行います。(リンク先へ)
ビルドを行います。

Feathers ScreenExample 作成2

MainMenuScreen.as

package screens
{
 import feathers.controls.Header;
 import feathers.controls.List;
 import feathers.controls.Screen;
 import feathers.data.ListCollection;
 import feathers.skins.StandardIcons;

 import starling.events.Event;
 import starling.textures.Texture;

 public class MainMenuScreen extends Screen
 {
  public static const SHOW_SUB1_SCREEN:String = "showSub1Screen";
  public static const SHOW_SUB2_SCREEN:String = "showSub2Screen";

  private var _header:Header;
  private var _list:List;

  public function MainMenuScreen()
  {
   super();
  }

  override protected function initialize():void
  {
   this._header = new Header();
   this._header.title = "Screen Test";
   this.addChild(this._header);

   this._list = new List();
   this._list.dataProvider = new ListCollection(
    [
    { text: "Sub 1", event: SHOW_SUB1_SCREEN },
    { text: "Sub 2", event: SHOW_SUB2_SCREEN },
    ]);
   this._list.itemRendererProperties.labelField = "text";
   this._list.addEventListener(Event.CHANGE,list_changeHandler);
   this._list.itemRendererProperties.accessorySourceFunction = accessorySourceFunction;
   this.addChild(this._list);
  }

  override protected function draw():void
  {
   this._header.width = this.actualWidth;
   this._header.validate();

   this._list.y = this._header.height;
   this._list.width = this.actualWidth;
   this._list.height = this.actualHeight - this._list.y;
  }

  private function accessorySourceFunction(item:Object):Texture
  {
   return StandardIcons.listDrillDownAccessoryTexture;
  }

  private function list_changeHandler(event:Event):void
  {
   const eventType:String = this._list.selectedItem.event as String;
   this.dispatchEventWith(eventType);
  }
 }
}

Sub1Screen.as

package screens
{
 import feathers.controls.Button;
 import feathers.controls.Header;
 import feathers.controls.Screen;
 import feathers.controls.ScrollContainer;
 import feathers.layout.HorizontalLayout;

 import starling.display.DisplayObject;
 import starling.display.Quad;
 import starling.events.Event;

 public class Sub1Screen extends Screen
 {
  private var _container:ScrollContainer;
  private var _header:Header;
  private var _backButton:Button;
  private var _settingsButton:Button;

  public var horizontalAlign:String = HorizontalLayout.HORIZONTAL_ALIGN_LEFT;
  public var verticalAlign:String = HorizontalLayout.VERTICAL_ALIGN_TOP;
  public var gap:Number = 2;
  public var paddingTop:Number = 0;
  public var paddingRight:Number = 0;
  public var paddingBottom:Number = 0;
  public var paddingLeft:Number = 0;

  public function Sub1Screen()
  {
   super();
  }

  override protected function initialize():void
  {
   const layout:HorizontalLayout = new HorizontalLayout();
   layout.gap = this.gap;
   layout.paddingTop = this.paddingTop;
   layout.paddingRight = this.paddingRight;
   layout.paddingBottom = this.paddingBottom;
   layout.paddingLeft = this.paddingLeft;
   layout.horizontalAlign = this.horizontalAlign;
   layout.verticalAlign = this.verticalAlign;

   this._container = new ScrollContainer();
   this._container.layout = layout;
   this._container.horizontalScrollPolicy = ScrollContainer.SCROLL_POLICY_ON;
   this._container.snapScrollPositionsToPixels = true;
   this.addChild(this._container);

   this._header = new Header();
   this._header.title = "Sub1 Screen";
   this.addChild(this._header);

   this._backButton = new Button();
   this._backButton.label = "Back";
   this._backButton.addEventListener(Event.TRIGGERED, backButton_triggeredHandler);

   this._header.leftItems = new 
    [
    this._backButton
    ];

   this.backButtonHandler = this.onBackButton;

   var redQuad:Quad = new Quad(100,100,0xff0000);
   var greenQuad:Quad = new Quad(100,100,0x00ff00);
   var blueQuad:Quad = new Quad(100,100,0x0000ff);

   this._container.addChild(redQuad);
   this._container.addChild(greenQuad);
   this._container.addChild(blueQuad);
  }

  override protected function draw():void
  {
   this._header.width = this.actualWidth;
   this._header.validate();

   this._container.y = this._header.height;
   this._container.width = this.actualWidth;
   this._container.height = this.actualHeight - this._container.y;
  }

  private function onBackButton():void
  {
   this.owner.showScreen(Main.MAIN_MENU);
  }

  private function backButton_triggeredHandler(event:Event):void
  {
   this.onBackButton();
  }
 }
}

Feathers ScreenExample 作成1

プロジェクト名はFeathersScreenです。
パッケージの構成です。

FeathersScreenExample.as

package
{
 import flash.display.Sprite;
 import flash.display.StageAlign;
 import flash.display.StageScaleMode;
 import flash.events.Event;
 import flash.geom.Rectangle;

 import starling.core.Starling;

 [SWF(width="960",height="640",frameRate="60",backgroundColor="#2f2f2f")]
 public class FeathersScreenExample extends Sprite
 {
  private var _starling:Starling;        

  public function FeathersScreenExample()
  {
   if(this.stage)
   {
    this.stage.scaleMode = StageScaleMode.NO_SCALE;
    this.stage.align = StageAlign.TOP_LEFT;
   }
   this.mouseEnabled = this.mouseChildren = false;
   this.loaderInfo.addEventListener(Event.COMPLETE, loaderInfo_completeHandler);
  }

  private function loaderInfo_completeHandler(event:Event):void
  {
   Starling.handleLostContext = true;
   Starling.multitouchEnabled = true;
   this._starling = new Starling(Main, this.stage);
   this._starling.enableErrorChecking = false;
   this._starling.start();

   this.stage.addEventListener(Event.RESIZE, stage_resizeHandler, false, int.MAX_VALUE, true);
   this.stage.addEventListener(Event.DEACTIVATE, stage_deactivateHandler, false, 0, true);
  }

  private function stage_resizeHandler(event:Event):void
  {
   this._starling.stage.stageWidth = this.stage.stageWidth;
   this._starling.stage.stageHeight = this.stage.stageHeight;

   const viewPort:Rectangle = this._starling.viewPort;
   viewPort.width = this.stage.stageWidth;
   viewPort.height = this.stage.stageHeight;
   try
   {
    this._starling.viewPort = viewPort;
   }
   catch(error:Error) {}
  }

  private function stage_deactivateHandler(event:Event):void
  {
   this._starling.stop();
   this.stage.addEventListener(Event.ACTIVATE, stage_activateHandler, false, 0, true);
  }

  private function stage_activateHandler(event:Event):void
  {
   this.stage.removeEventListener(Event.ACTIVATE, stage_activateHandler);
   this._starling.start();
  }
 }
}

Main.as

package 
{
 import feathers.controls.ScreenNavigator;
 import feathers.controls.ScreenNavigatorItem;
 import feathers.controls.ScrollContainer;
 import feathers.motion.transitions.ScreenSlidingStackTransitionManager;
 import feathers.themes.MetalWorksMobileTheme;

 import screens.MainMenuScreen;
 import screens.Sub1Screen;
 import screens.Sub2ChildScreen;
 import screens.Sub2Screen;

 import starling.display.Sprite;
 import starling.events.Event;

 public class Main extends Sprite
 {
  public static const MAIN_MENU:String = "mainMenu";
  public static const SUB1_SCREEN:String = "sub1Screen";
  public static const SUB2_SCREEN:String = "sub2Screen";
  public static const SUB2_CHILD_SCREEN:String = "sub2ChildScreen";

  private var _theme:MetalWorksMobileTheme;
  private var _container:ScrollContainer;
  private var _navigator:ScreenNavigator;
  private var _menu:MainMenuScreen;
  private var _transitionManager:ScreenSlidingStackTransitionManager;

  private static const MAIN_MENU_EVENTS:Object =
   {
    showSub1Screen: SUB1_SCREEN,
    showSub2Screen: SUB2_SCREEN
  }

  public function Main()
  {
   super();
   this.addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
  }

  private function addedToStageHandler(event:Event):void
  {
   this._theme = new MetalWorksMobileTheme(this.stage);

   this._navigator = new ScreenNavigator();

   this._navigator.addScreen(SUB1_SCREEN,new ScreenNavigatorItem(Sub1Screen));

   this._navigator.addScreen(SUB2_SCREEN,
    new ScreenNavigatorItem(Sub2Screen,{showChildScreen:SUB2_CHILD_SCREEN}));
   this._navigator.addScreen(SUB2_CHILD_SCREEN,new ScreenNavigatorItem(Sub2ChildScreen));

   this._navigator.addScreen(MAIN_MENU,new ScreenNavigatorItem(MainMenuScreen,MAIN_MENU_EVENTS));

   this.addChild(this._navigator);

   this._transitionManager = new ScreenSlidingStackTransitionManager(this._navigator);
   this._transitionManager.duration = 0.4;

   this._navigator.showScreen(MAIN_MENU);
  }
 }
}