Скрытие вкладки в Spark TabBar - PullRequest
Новая
       33

Скрытие вкладки в Spark TabBar

1 голос
/ 03 февраля 2012

У меня есть спарк TabBar, и я хочу скрыть и показать некоторые его элементы из внешнего пользовательского ввода (в частности, флажок)

У меня проблемы с изменением видимости вкладок.В настоящее время они всегда отображаются.

У кого-нибудь есть идеи?Я видел getTabAt на панели mx TabBar, но внешний вид вкладки важен, и требуется, чтобы она выглядела как панель вкладок, а не как панель кнопок.

Мой код для вкладок и для скрытия иПоказано ниже: 

<fx:Script>
    <![CDATA[
    import mx.containers.VBox;
    import mx.controls.Label;

    private function onCreationComplete():void {
        var vbox1:VBox = new VBox();
        vbox1.label = "Tab 1";
        var lbl1:Label = new Label()
        lbl1.text = "Panel1";
        vbox1.addChild(lbl1);
        dp.addChild(vbox1);

        var vbox2:VBox = new VBox();
        vbox2.label = "Tab 2";
        var lbl2:Label = new Label()
        lbl2.text = "Panel 2";
        vbox2.addChild(lbl2);
        dp.addChild(vbox2);
    }

    private function showTab(event:MouseEvent):void {
        makeVisible(true);
    }

    private function hideTab(event:MouseEvent):void {
        makeVisible(false);
    }

    private function makeVisible(vis:Boolean):void {
        VBox(dp.getChildAt(0)).visible = vis;
        VBox(dp.getChildAt(0)).enabled = vis;
        VBox(dp.getChildAt(0)).includeInLayout = vis;
    }
    ]]>
</fx:Script>
<s:VGroup>
    <s:TabBar id="tabNavigator" width="100%" height="100%" dataProvider="{dp}"/>
    <mx:ViewStack width="100%" height="100%" id="dp" borderStyle="solid"/>

    <s:Button click="showTab(event)" label="show Tab"/>
    <s:Button click="hideTab(event)" label="hide Tab"/>
</s:VGroup>

Любой совет, полученный очень

Спасибо

Ответы [ 2 ]

3 голосов
/ 17 июля 2012

Да, действительно неприятно не документировать такую ​​тривиальную задачу. Я наткнулся на этот пост, но я нахожусь на Flex Builder 4.6 и ориентирован на мобильное приложение (flex mobile) Существует Spark TabbedViewNavigatorApplication, которая имеет TabbedViewNavigator в качестве дочернего элемента. На саманских форумах и в справке показано только, как скрыть всю панель вкладок, что на самом деле очевидно, но не скрыть отдельные параметры внутри вкладки.

В некоторых местах, которые я посетил, предлагалось удалить элементы из TabbedViewNavigator, когда вы хотите скрыть их, а затем снова поместить их с помощью комбинации removeItemAt, addItemAt ... но вы действительно не хотите этого делать.

Первая причина заключается в том, что при удалении элементов из tabBar вы удаляете ViewNavigators, которые формируют стек View определенного раздела.

Удалив один из навигаторов, вы возитесь с этим стеком, и, если ваше приложение имеет сложную сторону или будет расти таким образом, у вас возникнут проблемы при написании кода, который управляет всем этим удалением и добавление процессов, учитывая, что ваши индексы в навигаторах Vector в TabbedViewNavigator не перепутались.

Кроме того, если вы выполните какое-либо кэширование или пользовательскую обработку свойств навигатора, восстановление их до состояния, в котором они находились в момент, когда вы удалили их из стека вкладок, доставит вам много головной боли.

Следуя решению из исходного поста, и с небольшими экспериментами, решение довольно простое: 

  // let say that the instance of Tabbed view navigator look like this:
  // appRef is reference to TabbedViewNavigatorApplication (if you are in the main mxml, just put "this" as reference)
  ....

  var myTabbedViewNavigator : TabbedViewNavigator = appRef.tabbedNavigator;
  var index : int = 0; // we take item at index 0 for example (1st option in tabBar)
  var dg : DataGroup = myTabbedViewNavigator.tabBar.dataGroup;
  dg.getElementAt(index).visible = false;
  dg.getElementAt(index).includeInLayout = false;

  ....

Чтобы снова показать вкладку, установите значение true, и все, ваши навигаторы все еще будут там внутри вашего TabbedViewNavigator, но их визуальное представление в tabBar будет невидимым.

1 голос
/ 22 февраля 2012

Эта функция скрывает вкладку по определенному индексу. Если у вас нет includeInLayout, вкладка исчезает и оставляет дыру. 

private function setTabEnabled(index:int, enabled:Boolean):void {
    var theTab:UIComponent = tabNavigator.dataGroup.getElementAt(index) as UIComponent;
    if (theTab)
        theTab.visible = enabled;
        theTab.includeInLayout = enabled;
    }
}
...