Feathers:screen-navigator

原文地址：http://wiki.starling-framework.org/feathers/screen-navigator

怎样使用 Feathers 的 ScreenNavigator 组件

ScreenNavigator 类提供强大的系统来显示你的应用程序里的屏幕和菜单并且在它们之间切换 . 它支持基于事件的导航(或者你更喜欢as3-signals), 就像他们表示的那样,它还可以为screen注入属性.

基础知识

像这样创建一个ScreenNavigator

this._navigator = new ScreenNavigator();
this.addChild( this._navigator );

你可以选择设置它的 width 和 height, 如果你没有提供明确的尺寸ScreenNavigator会自动调整本身的大小适应舞台尺寸. 如果你想向 navigator 添加一个新的 screen, 可以调用addScreen() 方法并传进一个screen的字符串ID和一个与该screen相关的ScreenNavigatorItem:

this._navigator.addScreen( "mainMenu", new ScreenNavigatorItem( MainMenuScreen ) );

第一个参数所需要的ScreenNavigatorItem 构造函数可以实例化一个Class或者是一个已经实例化的 DisplayObject . 总之, 你的screen类, 无论你是想直接对它实例化或者让 ScreenNavigatorItem 来实例化它, 都应该继承Screen. 即使这不是必须的.

在这里, MainMenuScreen是我们项目里的另一个类.构造函数还有另外两个参数, 我们稍后再看.

调用[showScreen() 函数并输入screen的辨识符显示一个特定的screen:

this._navigator.showScreen( "mainMenu" );

使用activeScreen 属性访问当前可见的screen.

var mainMenu:MainMenuScreen = MainMenuScreen( this._navigator.activeScreen );

你可以用activeScreenID 来获取活动的screen的 String类型的辨识符.

使用clearScreen()清空 ScreenNavigator显示的内容.

this._navigator.clearScreen();

Navigation

如果一个特定的screen发送一个事件或信号, ScreenNavigator 可以通过它访问另一个screen.

在我们使用它之前, 先让我们来做几处改变. 首先,让我们把 main menu 的 screen 的辨识符写成一个常量. 然后, 我们来添加第二个screen.

private static const MAIN_MENU:String = "mainMenu";
private static const OPTIONS:String = "options";

这些常量能够帮助我们避免输入错误. 现在,我们来添加options标注的screen.

this._navigator.addScreen( OPTIONS, new ScreenNavigatorItem( OptionsScreen ) );

现在我们有第二个screen了, 让我们通过main menu来访问它.

使用信号 =

ScreenNavigatorItem的第二个参数是一个事件地图. 我们可以映射到screen的标识符的事件类型（或信号）. 让我们在添加main menu screen的地方改变它的信号.

this._navigator.addScreen( MAIN_MENU, new ScreenNavigatorItem( MainMenuScreen,
{
	onOptions: OPTIONS
}));

当ScreenNavigator读取事件地图时,如果MainMenuScreen里有一个onOptions信号,它将会被自动检测到.

protected var _onOptions:Signal = new Signal( MainMenuScreen );
 
public function get onOptions():ISignal
{
	return this._onOptions;
}

MainMenuScreen 会这样派发出 onOptions :

protected function optionsButton_triggeredHandler( event:Event ):void
{
	this._onOptions.dispatch( this );
}

现在我们就可以从menu screen导航到options screen. 然后我们把options screen 修改,让它导航回menu screen.

使用事件

现在让options screen发送一个事件代替信号来看看事件是否也可以导航. ScreenNavigator首先检查信号, 如果没有发现信号, 它会假定派发了一个代替信号的事件. 让我们为OptionsScreen添加一个 "complete" 事件到事件地图.

this._navigator.addScreen( OPTIONS, new ScreenNavigatorItem( OptionsScreen,
{
	complete: MAIN_MENU
}));

在 OptionsScreen里, 当某一按键被按下时我们派发一个事件.

protected function optionsButton_triggeredHandler( event:Event ):void
{
	this.dispatchEventWith( Event.COMPLETE );
}

现在我们可以从main menu导航到 options screen 也可以反向导航回来.

使用 owner 属性

Screen类有一个 owner 属性指向 ScreenNavigator. 如果你不是很喜欢事件或是信号,你可以用它来直接调用 showScreen().

this.owner.showScreen( "anotherScreenID" );

属性注入

ScreenNavigatorItem 构造函数的第三个参数是一个初始化对象. 这是一组键值对映射到被定义的screen的属性.当screen显示出来后, 其中的每一个属性都将会传递给screen. 如果你有多个screen需要共享一些数据,这就是个有用的方式来确认这些screen都可以访问到它们.例如, 你有一个 OptionsData 类存储了类似音频音量和其它的一些常用设置.

在我们的主文档里, 指定一个 OptionsData 的实例.

this._optionsData = new OptionsData();

然后, 我们添加我们的OptionsScreen,这时我们在构造函数里加入OptionsData.

this._navigator.addScreen( OPTIONS, new ScreenNavigatorItem( OptionsScreen,
{
	complete: MAIN_MENU
},
{
	optionsData: this._optionsData
}));

在这个 OptionsScreen类中, 我们需要为这个数据添加一个变量,然后为这个变量添加getter、setter方法:

protected var _optionsData:OptionsData;
 
public function get optionsData():OptionsData
{
	return this._optionsData;
}
 
public function set optionsData( value:OptionsData ):void
{
	this._optionsData = value;
}

场景转换

ScreenNavigator 类支持screens转换时的过渡动画. feathers.motion.transitions 包里面包含很多管理转换的类。为了给转换动画增添一些特殊的效果，它们中有些会记录历史的screen. 例如, ScreenSlidingStackTransitionManager 中以堆存储最近显示的screen，以便智能的选择一个screen显示时的方向（向左或向右）.

ScreenSlidingStackTransitionManager的用法很简单, 我们只需要把ScreenNavigator实例传到构造函数中就行了w.

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

很多场景转换的管理器的一些属性可以用来调整过渡动画。 如, ScreenSlidingStackTransitionManager 中的动画持续时间和缓动函数。

this._transitionManager.duration = 0.4;
this._transitionManager.ease = Transitions.EASE_OUT_BACK;

转换事件

ScreenNavigator类在场景转换开始与结束时会派发 FeathersEventType.TRANSITION_START 和FeathersEventType.TRANSITION_COMPLETE . 你可以侦听 FeathersEventType.TRANSITION_COMPLETE 事件将你的screen中需要的一些初始化操作延至转换完成。例如有些动画你可以在转换完成后再播放，因为screen在转换的过程中有一部分是不可见的。

this.owner.addEventListener( FeathersEventType.TRANSITION_COMPLETE, owner_transitionCompleteHandler );

事件处理函数如下:

private function owner_transitionCompleteHandler( event:Event ):void
{
    this.owner.removeEventListener( FeathersEventType.TRANSITION_COMPLETE, owner_transitionCompleteHandler );
 
    // finish initialization here
}

需要注意的是 ScreenNavigator同样会在screen被移除时派发 FeathersEventType.TRANSITION_START 、FeathersEventType.TRANSITION_COMPLETE 这两个事件。 如果你不想让你的事件处理函数再跑一边，那就需要在screen添加并调用该函数后移除该事件的侦听。

高级功能

ScreenNavigatorItem的事件地图不仅可以用来导航screen，你还可以在一个事件或者信号被发送时调用一个函数。下面让我们为主菜单场景中添加一个信号当"About Our Product"被点击时 ，用来在浏览器中打开一个网站。

this._navigator.addScreen( MAIN_MENU, new ScreenNavigatorItem( MainMenuScreen,
{
	onOptions: OPTIONS,
	onHomePage: mainMenuScreen_onHomePage
}));

这个函数收到信号或事件侦听器的参数。

protected function mainMenuScreen_onHomePage( sender:MainMenuScreen ):void
{
	navigateToURL( new URLRequest( "http://www.example.com/" ), "_blank" );
}

相关链接

• ScreenNavigator API 文档
• ScreenNavigator Transitions
• 怎样使用 Feathers 的 Screen 组件

更多教程, 请返回 Feathers 文档.

---

翻译者：九