apache-flex - flex 4 タブバー - タブを無効にする

Question

Flex 4 で Spark タブバーコンポーネントのタブを無効にする一般的な方法はありますか? mx tabnavigator コンポーネントを使用すると、タブに対応するコンテンツを無効にするだけで、タブも無効になります。ただし、スパークタブバーコンポーネントでこれを行うと、タブではなくコンテンツのみが無効になります。

ここに私の簡単な例があります:

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

多くのthx、フロリアン

score 7 · Accepted Answer

補遺: 実際の作業に戻ってから文字通り 2 分後、スキンを使用した「エレガントな」ソリューションを見つけました。

カスタム 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>

次に<s:NavigatorContent/>、有効なプロパティが設定またはバインドされたViewStack内のすべてが、期待どおりに機能します（trueの場合は有効になり、falseの場合は無効になります）。

score 0 · Accepted Answer

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>

score 0 · Accepted Answer

Flex 4.5 (おそらく Flex 4 も) の有効な回答が必要な場合。私はついに解決策を見つけました。ハックのように感じますが、アドビは電話に出ず、うまく機能しています。簡単な例を次に示します。

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

apache-flex - flex 4 タブバー - タブを無効にする

3 に答える 3

Related

Reference