Since there is no viewstack for mobile, or its not “optimized” for mobile, another way to get a tab bar or button bar in the application with components is to use states…

the problem is that mobile device hardware isn’t anywhere near desktop or laptop speeds…

I’m using an ipad2 developing a app that has a ton of screens on it, and a popup with about 20 more screens, that all have lists, buttons, and link to other popups.

Its said that you can use itemCreationPolicy=’deferred’ and itemDestructionPolicy=’never’, and then the item will stay in memory…

I’m finding that this works like shit….

example…

example not usable, its partial:

<s:ButtonBar
id="tabBar"
width="100%"
change="tabBar_changeHandler(event)"
styleName="ifButtonBar"
requireSelection="true"
height="48"
>

<s:dataProvider>
<s:ArrayCollection id="tabsDataProvider">
<fx:Object label="Action Alerts" state="{IF_ACTIONALERTS }" />
<fx:Object label="Authorized Items" state="{IF_AUTHORIZEDITEMS }" />
</s:ArrayCollection>
</s:dataProvider>

</s:ButtonBar>

<s:SkinnableContainer
width="100%"
height="100%"
backgroundAlpha="0"
styleName="popupBackground"
>

<salesActivity:IFActionAlerts
width="100%"
height="100%"
name="{ ANViewStateConstants.IF_ACTIONALERTS }"
includeIn="IF_ACTIONALERTS"
itemCreationPolicy='deferred'
itemDestructionPolicy='never'
/>

<salesActivity:IFAuthorizedItems
gap="20"
width="100%"
height="100%"
name="{ ANViewStateConstants.IF_AUTHORIZEDITEMS }"
includeIn="IF_AUTHORIZEDITEMS"
itemCreationPolicy='deferred'
itemDestructionPolicy='never'
/>

etc...

If you sub components are heavy that your trying to include in those states, you get a lag when clicking on them, and off of them, even after they are created once…

the fix…

NOTE: As long as your components that your trying to include in your states are spark.View components your good to use this. (its easy to convert almost any container to a view, with the “< layout >” attribute.)

use creationPolicy=”none”, then use visibility… visible.STATE_NAME=”true” show=”itemShowHandler(event)” then on show, use createDeferredContent()

NOTE: typically the first component in the views you DONT want to turn creationPolicy to none… you want to leave it default.

example not usable, its partial:


<fx:Script>
<![CDATA[

protected function tabBar_changeHandler( event:* ):void
{
var item:Object = event.currentTarget.dataProvider[ event.newIndex ];

this.currentState = item.state;
}
/**
* We were having performance issues with the popups and
* switching states not being fast enough to the touch.
*
* Defer creation of content till show event.
*/
protected function item_showHandler(event:FlexEvent):void
{
event.currentTarget.createDeferredContent();
}

]]>
</fx:Script>
<s:ButtonBar
id="tabBar"
width="100%"
change="tabBar_changeHandler(event)"
styleName="ifButtonBar"
requireSelection="true"
height="48"
>

<s:dataProvider>
<s:ArrayCollection id="tabsDataProvider">
<fx:Object label="Action Alerts" state="{IF_ACTIONALERTS }" />
<fx:Object label="Authorized Items" state="{IF_AUTHORIZEDITEMS }" />
</s:ArrayCollection>
</s:dataProvider>

</s:ButtonBar>

<s:SkinnableContainer
width="100%"
height="100%"
backgroundAlpha="0"
styleName="popupBackground"
>

<salesActivity:IFActionAlerts
width="100%"
height="100%"
name="{ ANViewStateConstants.IF_ACTIONALERTS }"
visible="false"
visible.IF_ACTIONALERTS="true"
show="item_showHandler(event)"
creationPolicy="none"
/>

<salesActivity:IFAuthorizedItems
gap="20"
width="100%"
height="100%"
name="{ ANViewStateConstants.IF_AUTHORIZEDITEMS }"
visible="false"
visible.IF_AUTHORIZEDITEMS="true"
show="item_showHandler(event)"
creationPolicy="none"
/>

etc...

http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf63611-7ffa.html
comments or email with questions.