flex 4 tabbar - 禁用选项卡

问题描述

有没有一种常见的方法来禁用Flex 4中的火花标签栏组件的选项卡？使用mx tabnavigator组件，您可以禁用与该选项卡对应的内容，然后该选项卡也被禁用。但这样做与火花标签栏组件禁用只是内容不是标签。

这是我的简单示例：

 < mx：TabNavigator x =122y =155width =200height =200> 
  < / s：NavigatorContent> 
  < / s：NavigatorContent> 
 < / s：NavigatorContent> 
< / mx：TabNavigator> 
 < mx：ViewStack x =364y =133id =viewstack1width =200height =200> 
  < / s：NavigatorContent> 
  < / s：NavigatorContent> 
  < / s：NavigatorContent> 
< / mx：ViewStack> 
  

许多thx，
florian

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

如果您将自定义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> 
 
  < / s：NavigatorContent> 
< / mx：ViewStack> 
  

当您键入skinClass时，使用auto complete来生成在FlashBuilder〜4.5 + ???）自定义皮肤（命名任何你想要的）。
代码将如下所示（我遗漏了Script标签）。

 <？xml version = 1.0encoding =utf-8？> 
<！ - 皮肤/ CustomTabBarSkin.mxml 
 ... 
 Adob​​e的版权& doc评论
 ... 
  - > 
 
< 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：元数据> 
<！[CDATA [
 / ** 
 * @copy spark.skins.spark.ApplicationSkin＃hostComponent 
 * / 
 [HostComponent（spark.components .TabBar）] 
]]> 
< / fx：元数据> 
 
<！ - 可选的脚本标签在这里 - > 
 
< s：州> 
  < / s：州> 
 
<！--- @copy spark.components.SkinnableDataContainer＃dataGroup  - > 
 < s：layout> 
< s：ButtonBarHorizo​​ntalLayout 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> 
  enabled ={data.enabled}/> 
< / fx：Component> 
  

然后任何< s：NavigatorContent /> （当为true时启用，在false时为disabled）

is there a common way to disable a tab of a spark tabbar component in flex 4? with the mx tabnavigator component you can just disable the content corresponding to the tab and the tab is also disabled then. but doing this with the spark tab bar component disables just the content not the 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>

many thx,florian

解决方案

Addendum:Literally two minutes after I got back to actually working, I found an "elegant" solution using a skin.

If you apply a custom skinClass to your tab bar you can bind the tab.enabled property just like you'd expect/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's content -->
    </s:NavigatorContent>

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

When you type "skinClass" use the auto complete to generate (in FlashBuilder ~4.5+???) the custom skin (named whatever you want).The code will appear like below (I left out the Script tag).

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

Change:

    <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 enabled property set or bound will do exactly what you expect(be enabled when true, & disabled when false).

这篇关于flex 4 tabbar - 禁用选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！