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!

    // use a layout
    var layout:HorizontalLayout = new HorizontalLayout(); = 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 Callbacks

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

Transition Events

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.