Flex 4 tabbar - disable tab

Question

Is there a general way to disable the spark panel component tab in flex 4? with the mx tabnavigator component, you can simply disable the content corresponding to the tab, and the tab will also be disabled. but at the same time, only the content, not the tab, is disabled using the component of the row of the spark tab.

here is my simple example:

<mx:TabNavigator x="122" y="155" width="200" height="200"> <s:NavigatorContent label="Tab 1" width="100%" height="100%"> <s:Label text="Label1"/> </s:NavigatorContent> <s:NavigatorContent label="Tab 2" width="100%" height="100%" enabled="false"> <s:Label text="Label2"/> </s:NavigatorContent> <s:NavigatorContent label="Tab 3" width="100%" height="100%"> </s:NavigatorContent> </mx:TabNavigator> <s:TabBar x="368.7" y="100.35" dataProvider="{viewstack1}" /> <mx:ViewStack x="364" y="133" id="viewstack1" width="200" height="200"> <s:NavigatorContent label="Tab 1" width="100%" height="100%"> <s:Label text="Label1"/> </s:NavigatorContent> <s:NavigatorContent label="Tab 2" width="100%" height="100%" enabled="false"> <s:Label text="Label2"/> </s:NavigatorContent> <s:NavigatorContent label="Tab 3" width="100%" height="100%"> <s:Label text="Label3" x="1" y="0"/> </s:NavigatorContent> </mx:ViewStack> 

thank you very much Florian

Answer 1

Appendix: Literally two minutes after I returned to work, I found a "graceful" solution using skin.

If you apply your own skinclass to the tab bar, you can bind the tab.enabled property as you expected / want.

 <fx:Script> <![CDATA[ [Bindable] private var tab2IsReady:Boolean = false; private function checkCriteria():void{ tab2IsReady = someOtherThing.isFinished;//Boolean } ]]> </fx:Script> <s:TabBar id="theTabBar" dataProvider="{viewStack}" skinClass="skins.CustomTabBarSkin"/> <mx:ViewStack id="viewStack"> <s:NavigatorContent label="Tab index 0"> <!-- Your first tab content --> </s:NavigatorContent> <s:NavigatorContent label="Tab index 1" enabled="{tab2IsReady}"> <!-- Your second tab content --> </s:NavigatorContent> </mx:ViewStack> 

When you enter "skinClass", use auto complete to generate (in FlashBuilder ~ 4.5 + ???) a custom skin (named whatever). The code will appear as shown below (I left the Script tag).

 <?xml version="1.0" encoding="utf-8"?> <!-- skins/CustomTabBarSkin.mxml ... Adobe copyright & doc comments ... --> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5"> <fx:Metadata> <![CDATA[ /** * @copy spark.skins.spark.ApplicationSkin#hostComponent */ [HostComponent("spark.components.TabBar")] ]]> </fx:Metadata> <!-- optional Script tag here --> <s:states> <s:State name="normal" /> <s:State name="disabled" /> </s:states> <!--- @copy spark.components.SkinnableDataContainer#dataGroup --> <s:DataGroup id="dataGroup" width="100%" height="100%"> <s:layout> <s:ButtonBarHorizontalLayout gap="-1"/> </s:layout> <s:itemRenderer> <fx:Component> <s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin" /> </fx:Component> </s:itemRenderer> </s:DataGroup> </s:Skin> <!-- End skins/CustomTabBarSkin.mxml --> 

Edit:

  <fx:Component> <s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin" /> </fx:Component> 

To:

  <fx:Component> <s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin" enabled="{data.enabled}" /> </fx:Component> 

Then any <s:NavigatorContent/> in the ViewStack with its property set or binding turned on will do what you expect (it will be enabled when true, and disabled when false).

Answer 2

One solution to try would be to use mx:VBox components instead of s:NavigatorContent .

From http://blog.flexexamples.com/2007/08/25/enabling-and-disabling-specific-tabs-in-a-tabbar-control/ :

 <?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/08/25/enabling-and-disabling-specific-tabs-in-a-tabbar-control/ --> <mx:Application name="TabBar_enabled_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:CheckBox id="tabBarEnabled" label="TabBar.enabled" selected="true" width="25%" /> <mx:CheckBox id="tab1Enabled" label="Tab1.enabled" selected="true" width="25%" /> <mx:CheckBox id="tab2Enabled" label="Tab2.enabled" selected="true" width="25%" /> <mx:CheckBox id="tab3Enabled" label="Tab3.enabled" selected="true" width="25%" /> </mx:ApplicationControlBar> <mx:VBox verticalGap="0"> <mx:TabBar id="tabBar" width="400" dataProvider="{viewStack}" enabled="{tabBarEnabled.selected}" /> <mx:ViewStack id="viewStack" width="400" height="100"> <mx:VBox id="tab1" label="Tab1" backgroundColor="haloGreen" enabled="{tab1Enabled.selected}"> <mx:Label text="Label 1" /> </mx:VBox> <mx:VBox id="tab2" label="Tab2" backgroundColor="haloBlue" enabled="{tab2Enabled.selected}"> <mx:Label text="Label 2" /> </mx:VBox> <mx:VBox id="tab3" label="Tab3" backgroundColor="haloOrange" enabled="{tab3Enabled.selected}"> <mx:Label text="Label 3" /> </mx:VBox> </mx:ViewStack> </mx:VBox> </mx:Application> 

Answer 3

For those who want a working answer for Flex 4.5 (possibly Flex 4). I finally understood the solution. It seems to me that this is a hack, but Adobe does not answer the call, and it works for me. Here's a simplified example.

 <!-- component that has the the TabBar in it... --> <fx:Script> <![CDATA[ //imports here import mx.core.UIComponent; //imports private function setTabEnabled(index:int,enabled:Boolean):void{ var theTab:UIComponent = theTabBar.dataGroup.getElementAt(index) as UIComponent; if(theTab){theTab.enabled = enabled;} } ]]> </fx:Script> <s:TabBar id="theTabBar" dataProvider="{viewStack}"/> <mx:ViewStack id="viewStack"> <s:NavigatorContent label="0th Tab"> <!-- ...Content --> </s:NavigatorContent> <s:NavigatorContent label="1st Tab"> <!-- ...Content --> </s:NavigatorContent> <s:NavigatorContent label="2nd Tab"> <!-- ...Content --> </s:NavigatorContent> </mx:ViewStack> <!-- rest of the component that has the the TabBar in it... --> 

Then you call setTabEnabled(theTabIndex,trueFalse) in an event handler related to what decides why the tab is enabled or not enabled.

I have to extend the TabBar to support this, but I have already spent enough time trying to figure it out.

Happy coding = D