In a Flex Mobile app I would like to have a ButtonBar at the bottom and I need to change the labels of its buttons:
(I don't want to use TabbedViewNavigatorApplication here, because all my logic is in a single View with an ActionBar at its top and ButtonBar at its bottom).
So I have prepared a very simple test case to demonstrate my problem.
Please just create a "blank" Flex mobile project in Flash Builder and put my 2 files (below) into it and you will see my problem - touching the buttons at the bottom doesn't change the label of the very right button).
TestAC.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
applicationDPI="160">
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
import spark.skins.mobile.TabbedViewNavigatorTabBarSkin;
private function handleTabs(event:IndexChangeEvent):void {
trace(_tabBar.selectedIndex);
_tabs[2].label = String(1 + _tabBar.selectedIndex);
}
]]>
</fx:Script>
<fx:Declarations>
<s:MultiDPIBitmapSource id="CHAT"
source160dpi="@Embed('chat.png')"
source240dpi="@Embed('chat.png')"
source320dpi="@Embed('chat.png')" />
<s:ArrayCollection id="_tabs">
<fx:Object label="One" />
<fx:Object label="Two" />
<fx:Object label="Three" icon="{CHAT}" />
</s:ArrayCollection>
</fx:Declarations>
<s:ButtonBar id="_tabBar"
requireSelection="true"
width="100%"
bottom="0"
skinClass="spark.skins.mobile.TabbedViewNavigatorTabBarSkin"
dataProvider="{_tabs}"
change="handleTabs(event)">
</s:ButtonBar>
</s:Application>
chat.png:
Allright, adding
_tabs.refresh();
tohandleTabs
has helped.