ViewStack

Overview

The Ardisia ViewStack component is a container that only displays one of its child elements at a time. Supports deferred instantiation for MXML content, which means that the content of child elements will not be created until they are selected and visible. This reduces initial latency and creates a smaller memory footprint. All content can also be created on start up to reduce the latency when users change the visible child content.

Creating a ViewStack Component

The ViewStack extends SkinnableContainer and therefore can be added to any container that implements IVisualElementContainer.

Using the Component

The ViewStack can accept any visual element that implements IDeferredContanteOwner and IVisualElement.

The only element that implements IDeferredContentOwner is SkinnableContainer. Thus, all children of the ViewStack must be a SkinnableContainer or a subclass of the SkinnableContainer class.

Controlling the Visible Child

The ViewStack does not control the visible child. A typical way to empower a user to change the visible child element is by laying out a TabBar directly above the ViewStack and binding the TabBar's "selectedIndex" property to the ViewStack's "selectedIndex" property.

The selected content can also be changed by supplying a reference to the selected child via the "selectedChild" property, rather than the "selectedIndex".

Using Deferred Instantiation

To enable deferred instantiation, be sure the "creationPolicy" is set to "auto" (the default). When set, child content will be created only when the content becomes visible and selected in the ViewStack. Remember that child container elements must implement IDeferredContentOwner.

When the "creationPolicy" is set to "none", the createDeferredContent() method must be called to create the child content.

To create all child content on start up, set the "creationPolicy" of the ViewStack to "all".

To defer initialization of some children but not others first set the ViewStack "creationPolicy" to "auto" (the default). Then for any children you want to create immediately, set their "creationPolicy" to "all". This way, one can mix undeferred and deferred content in a single ViewStack.

All Content Created On-Demand

<ardisia:ViewStack >
    <s:SkinnableContainer/>
    <s:SkinnableContainer/>
</ardisia:ViewStack>   

All Content Created On Startup

<ardisia:ViewStack creationPolicy="all">
    <s:SkinnableContainer/>
    <s:SkinnableContainer/>
</ardisia:ViewStack>

Mixed Content: On-Demand and On Startup

<ardisia:ViewStack>
    <s:SkinnableContainer creationPolicy="all"/> // created on startup
    <s:SkinnableContainer creationPolicy="all"/> // created on startup
    <s:SkinnableContainer /> // created on-demand
    <s:SkinnableContainer /> // created on-demand
</ardisia:ViewStack>

Layout

The ViewStack will resize to the preferred dimensions of the selectedChild. To lock the size, set the ViewStack's dimensions explicitly or via anchors and then the selectedChild will be sized to fit the ViewStack.

Resize to Selected Child (viewstack dimensions not set)

<ardisia:ViewStack>
    <s:SkinnableContainer width="400" height="400"/>
    <s:SkinnableContainer width="200" height="200"/>
</ardisia:ViewStack>

Selected Child resized to ViewStack

<ardisia:ViewStack width="500" height="500">
    <s:SkinnableContainer />
    <s:SkinnableContainer />
</ardisia:ViewStack>

The ViewStack uses a very simple custom layout class, ViewStackLayout, that sizes the visible and active child to the dimensions of the ViewStack.

Events

Dispatches two custom events:

CHANGING
spark.events.IndexChangeEvent
Dispatched when the selectedChild is about to change. Can be cancelled.

CHANGE
spark.events.IndexChangeEvent
Dispatched when the selectedChild changes. Cannot be cancelled.

Custom Styles

Supports styling options for the Border:

• borderVisibility
• borderColor
• borderAlpha
• backgroundColor
• backgroundAlpha

The styles are self explanatory.

Themes & Skinning

Skins for the Spark theme are provided. The other themes only differ by the backgroundColor style set in the theme files.

Example:

See the ViewStackDemo application for example code.

Back To Top