查看导航器隐藏特定选项卡不是TabBar

时间:2011-10-17 16:15:46

标签: actionscript-3 flex flex4.5

我正在试图弄清楚是否可以定义视图导航器并根据特定的用户状态有选择地隐藏一些导航器?

例如,我有两个导航标签,一个是登录标签,另一个是用户政策。我只希望在用户登录时显示策略选项卡:

<s:ViewNavigator id="policyTab" width="100%" height="100%" firstView="views.policy.PoliciesView">
    <s:navigationContent>
        <s:Button id="policyTabButton" label="Policies" click="tabButton_clickHandler(event)" />
    </s:navigationContent>
</s:ViewNavigator>

登录标签是导航器:

<s:ViewNavigator id="signInTab" width="100%" height="100%" firstView="views.SignInView">
    <s:navigationContent>
        <s:Button id="signInTabButton" icon="@Embed('images/lockSmall.png')" click="tabButton_clickHandler(event)" />
    </s:navigationContent>
</s:ViewNavigator>  

我研究过的所有内容都指向我隐藏整个标签栏,我不想这样做。我试过简单地调用signInTab.visible = false;但是不起作用。

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:1)

确实您无法隐藏TabbedViewNavigator的内容,但还有另一种方法可以调整内容以隐藏选项卡。基本上,您可以从TabbedViewNavigator中删除选项卡以隐藏它并重新添加它以再次显示它。我想出了一个非常简单的例子,它看起来像你要问的那样。

TabbedViewNavTest.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark"
                                  applicationDPI="160"
                                  preinitialize="preinitializeHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            import views.Tab2View;

            private static var app:TabbedViewNavigatorApplication;

            public static function adjustTabBar():void {
                if(app.navigators.length > 1) {
                    removeTab2();
                } else {
                    addTab2();
                }
            }

            private static function removeTab2():void {
                app.tabbedNavigator.removeItemAt(1);
            }

            private static function addTab2():void {
                var tab2:ViewNavigator = new ViewNavigator();
                tab2.label = "Tab2";
                tab2.percentWidth = 100;
                tab2.percentHeight = 100;
                tab2.firstView = Tab2View;
                app.tabbedNavigator.addItemAt(tab2, 1);
            }

            protected function preinitializeHandler(event:FlexEvent):void {
                app = this;
            }

        ]]>
    </fx:Script>

    <s:ViewNavigator id="tab1" label="Tab1" width="100%" height="100%" firstView="views.Tab1View"/>
    <s:ViewNavigator id="tab2" label="Tab2" width="100%" height="100%" firstView="views.Tab2View"/>

</s:TabbedViewNavigatorApplication>

Tab1View.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark"
        title="Tab1">

    <fx:Script>
        <![CDATA[
            protected function showHideButton_clickHandler(event:MouseEvent):void {
                TabbedViewNavTest.adjustTabBar();
            }
        ]]>
    </fx:Script>

    <s:Button id="showHideButton" label="Click Me!" click="showHideButton_clickHandler(event)" />
</s:View>

Tab2View只是我创建项目时创建的空视图。

虽然这应该做你需要它做的事情,但我想知道是否有更好的方法来实现你想要做的事情。例如,如果您最初提交的登录选项卡在用户登录时消失,则可能已将应用程序创建为具有2个状态的通用应用程序:notLoggedIn和loggedIn。在notLoggedIn状态下,您只有一个显示登录屏幕的视图show,或者有一个tabbedViewNavigator show,其中包含登录和策略选项卡。在登录状态下,您有一个单独的tabbedViewNavigator,它只有用户登录时可用的策略选项卡或其他选项卡。如果您希望我创建一个我的意思的示例,请告诉我,我可以做这一点。