How to use the Feathers Screen
component
The Screen
component is meant to be a base class for custom screens to be displayed by StackScreenNavigator
and ScreenNavigator
. Screen
is based on the LayoutGroup
component, and it provides optional layout.
The Basics
Just like LayoutGroup
, you can add children and use layouts. Typically, you would override initialize()
in a subclass of Screen
and add children there:
protected function initialize():void
{
// never forget to call this!
super.initialize();
// use a layout
var layout:HorizontalLayout = new HorizontalLayout();
layout.gap = 10;
this.layout = layout;
// add children
for(var i:int = 0; i < 5; i++)
{
var quad:Quad = new Quad( 100, 100, 0xff0000 );
group.addChild( quad );
}
}
Hardware Key Handlers
Some devices, such as Android phones and tablets, have hardware keys. These may include a back button, a search button, and a menu button. The Screen
class provides a way to provide callbacks for when each of these keys is pressed. These are shortcuts to avoid needing to listen to the keyboard events manually and prevent the default behavior.
Screen provides backButtonHandler
, menuButtonHandler
, and searchButtonHandler
.
this.backButtonHandler = function():void
{
trace( "the back button has been pressed." );
}
Events when transitions start and complete
A Screen
dispatches a number of events when the screen navigator shows and hides it with a transition. To avoid long delays and to keep the transition animation smooth, it's often a good idea to postpone certain actions during initialization until after the transition has completed. We can listen for these events to know when to continue initializing the screen.
When the screen is shown by the screen navigator, the screen dispatches FeathersEventType.TRANSITION_IN_START
at the beginning of a transition, and it dispatches FeathersEventType.TRANSITION_IN_COMPLETE
when the transition has finished. Similarly, when the screen navigator shows a different screen and the active screen is hidden, we can listen for FeathersEventType.TRANSITION_OUT_START
and FeathersEventType.TRANSITION_OUT_COMPLETE
.
Let's listen for FeathersEventType.TRANSITION_IN_COMPLETE
:
this.addEventListener( FeathersEventType.TRANSITION_IN_COMPLETE, transitionInCompleteHandler );
The event listener might look like this:
private function transitionInCompleteHandler( event:Event ):void
{
// do something after the screen transitions in
}
Screen ID
The screenID
property refers to the string that the screen navigator uses to identify the current screen when calling functions like pushScreen()
on a StackScreenNavigator
or showScreen()
on a ScreenNavigator
.
Accessing the screen navigator
The owner
property provides access to the StackScreenNavigator
or ScreenNavigator
that is currently displaying the screen.
Skinning a Screen
For full details about what skin and style properties are available, see the Screen
API reference.
Targeting a Screen
in a theme
If you are creating a theme, you can set a function for the default styles like this:
getStyleProviderForClass( Screen ).defaultStyleFunction = setScreenStyles;
If you want to customize a specific screen to look different than the default, you may use a custom style name to call a different function:
screen.styleNameList.add( "custom-screen" );
You can set the function for the custom style name like this:
getStyleProviderForClass( Screen )
.setFunctionForStyleName( "custom-screen", setCustomScreenStyles );
Trying to change the screen's styles and skins outside of the theme may result in the theme overriding the properties, if you set them before the screen was added to the stage and initialized.
If you aren't using a theme, then you may set any of the screen's properties directly. For full details about what skin and style properties are available, see the Screen
API reference.