flex 4 标签栏 - 禁用标签

Question

有没有一种通用的方法来禁用 flex 4 中的火花标签栏组件的标签？使用 mx tabnavigator 组件，您可以禁用与选项卡对应的内容，然后该选项卡也会被禁用。但是使用 spark 选项卡栏组件执行此操作只会禁用内容而不是选项卡。

这是我的简单示例：

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

很多谢谢， 弗洛里安

Answer 1

附录： 在我回到实际工作的两分钟后，我发现了一个使用皮肤的“优雅”解决方案。

如果您将自定义 skinClass 应用到您的标签栏，您可以绑定 tab.enabled 属性，就像您期望/想要的那样。

<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's content -->
    </s:NavigatorContent>

    <s:NavigatorContent label="Tab index 1" enabled="{tab2IsReady}">
        <!-- Your second tab's content -->
    </s:NavigatorContent>
</mx:ViewStack>

当您键入“skinClass”时，使用自动完成来生成（在 FlashBuilder ~4.5+???中）自定义皮肤（命名为您想要的任何名称）。 代码将如下所示（我省略了 Script 标签）。

<?xml version="1.0" encoding="utf-8"?>
<!-- skins/CustomTabBarSkin.mxml
...
Adobe's 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 -->

变化：

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

收件人：

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

然后 ViewStack 中的任何 <s:NavigatorContent/> 及其启用的属性集或绑定都将完全按照您的期望进行 （true 时启用，false 时禁用）。

Answer 2

尝试的一种解决方案是使用mx:VBox 组件而不是s:NavigatorContent。

来自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

对于那些想要 Flex 4.5（也可能是 Flex 4）有效答案的人。我终于想出了一个解决办法。这对我来说就像是一种黑客行为，但 Adob​​e 没有接听电话，它对我有用。这是一个简化的示例。

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

然后，您只需在事件处理程序中调用setTabEnabled(theTabIndex,trueFalse)，该处理程序与决定选项卡启用或不启用的原因有关。

我应该扩展 TabBar 以支持这一点，但我已经花了足够的时间试图弄清楚。

快乐编码 =D