How to use the Screen component (Starling version)

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.

If you need scrolling, you should use ScrollScreen or PanelScreen instead.

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 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.

As mentioned above, Screen is a subclass of LayoutGroup. For more detailed information about the skinning options available to Screen, see How to use the LayoutGroup component.