Flex 4 Tabbar - отключить вкладку - PullRequest
4 голосов
/ 27 декабря 2010

Есть ли распространенный способ отключить вкладку компонента панели вкладок в Flex 4? с помощью компонента 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>

много, спасибо Флориан

Ответы [ 3 ]

7 голосов
/ 10 октября 2011

Приложение: Буквально через две минуты после того, как я вернулся к работе, я нашел «элегантное» решение с использованием скина.

Если вы примените пользовательский 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).

0 голосов
/ 09 октября 2011

Для тех, кто хочет получить рабочий ответ для Flex 4.5 (возможно, также Flex 4).Я наконец-то нашел решение.Для меня это похоже на хак, но Adobe не отвечает на звонок и работает на меня.Вот упрощенный пример.

<!-- 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 для поддержки этого, но я уже потратил достаточно времени, пытаясь выяснить это.

Happy Coding = D

0 голосов
/ 29 декабря 2010

Одно из возможных решений - использовать 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>
...