Flex之TabNavigator

TabNavigator默认是只初始化第一个TAB的，设一下属性，设了后会初始化其他TAB，creationPolicy="all"

补充下tab里面的容器是Canvas

动态生成TabNavigator tab页面

var canvas: Canvas = new Canvas();
canvas.label = "new Tab";
tabNavigator.addChild(canvas);

 

------------------------------------------------------

 

TabNavigator不仅可以支持Canvas作为子tab,也支持VBox作为子tab

我们想设置其样式,纯粹设置TabNavigator样式是不够的,它设置的只是内容容器的样式,而头部Tab的样式还是需要单独设置Tab的样式!

程序代码

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="500" showFlexChrome="true" showStatusBar="false">
<mx:Style>
    
    TabNavigator{
        cornerRadius:0;
        tabWidth: 100;
        tabHeight: 30;
        borderStyle:solid;
        borderColor:red;
        selectedTabTextStyleName:  "selectedTab";
    }

    
     .selectedTab{
        fontSize:14;
        fontWeight:bold;
        color:blue;
    }
    
     Tab{
        cornerRadius:5;
        fillAlphas:1,1;
        fillColors:#FFFFFF,#EEEEEE;
        borderColor:red;
        textRollOverColor:#CCCCCC;
        themeColor:#3370ce;
    }
</mx:Style>
    <mx:TabNavigator x="119" y="102" width="405" height="236">
         <mx:Canvas label="Tab 1" width="100%" height="100%"></mx:Canvas>
        <mx:Canvas label="Tab 1" width="100%" height="100%"></mx:Canvas>
        <mx:Canvas label="Tab 1" width="100%" height="100%"></mx:Canvas>
         <mx:Canvas label="Tab 1" width="100%" height="100%"></mx:Canvas>
        
    </mx:TabNavigator>
    <mx:TabNavigator id="tn" width="500" height="300"  creationPolicy="auto"    >
    
         <mx:VBox id="vb1" label="Column Chart Module">
        
            <mx:Label id="l1" text="ColumnChartModule.swf"/>
            <mx:ModuleLoader url="ColumnChartModule.swf"/>
        
        </mx:VBox>
        
        <mx:VBox id="vb2" label="Pie Chart Module">
        
            <mx:Label id="l2" text="piehchartmodule.swf"/>
            <mx:ModuleLoader url="piechartmodule.swf"/>
        
        </mx:VBox>
        
         <mx:VBox id="vb3" label="Line Chart Module">
        
            <mx:Label id="l3" text="linehchartmodule.swf"/>
            <mx:ModuleLoader url="linechartmodule.swf"/>
        
        </mx:VBox>
    
    </mx:TabNavigator>
</mx:WindowedApplication>

From：

http://www.gold98.net/blog/article.asp?id=967

---------------------------------------------------

TabNavigator的一个效果：

<mx:Style>

        TabNavigator {

            backgroundColor: black;

            cornerRadius: 0;

            tabStyleName: "MyTabs";

            firstTabStyleName: "MyFirstTab";

            lastTabStyleName: "MyLastTab";

            selectedTabTextStyleName: "MySelectedTab";

        }

        .MyTabs {

            backgroundColor: black;

            cornerRadius: 0;

            color: black;

        }

        .MyFirstTab,

        .MyLastTab {

            backgroundColor: black;

            cornerRadius: 0;

            color: black;

            background-image:Embed('assets/longblue.png');

        }

        .MySelectedTab {

            backgroundColor: haloBlue;

            color: haloBlue;

            textRollOverColor: haloBlue;

            background-image:Embed('assets/longblue.png');

          

        }

    </mx:Style>

---------------------------------------------------

Flex中给TabNavigator控件增加Icons图标的例子：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:XML id="model">
        <records>
            <record uuid="1" status="check" name="User 1" data="Data 1" />
            <record uuid="2" status="warning" name="User 2" data="Data 2" />
            <record uuid="3" status="warning" name="User 3" data="Data 3" />
            <record uuid="4" status="critical" name="User 4" data="Data 4" />
            <record uuid="5" status="check" name="User 5" data="Data 5" />
            <record uuid="6" status="check" name="User 6" data="Data 6" />
            <record uuid="7" status="warning" name="User 7" data="Data 7" />
            <record uuid="8" status="critical" name="User 8" data="Data 8" />
        </records>
    </mx:XML>

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed(source="assets/bulletCheck.png")]
            private var BulletCheck:Class;

            [Bindable]
            [Embed(source="assets/bulletWarning.png")]
            private var BulletWarning:Class;

            [Bindable]
            [Embed(source="assets/bulletCritical.png")]
            private var BulletCritical:Class;

            private const CHECK:String = "check";
            private const WARNING:String = "warning";
            private const CRITICAL:String = "critical";
        ]]>
    </mx:Script>

    <mx:TabNavigator width="400" height="200">
        <mx:VBox label="Check" icon="{BulletCheck}">
            <mx:DataGrid id="gridCheck"
                    width="100%"
                    height="100%">
                <mx:columns>
                    <mx:DataGridColumn dataField="@name" />
                    <mx:DataGridColumn dataField="@data" />
                </mx:columns>
                <mx:dataProvider>
                    {model.record.(@status == CHECK)}
                </mx:dataProvider>
            </mx:DataGrid>
        </mx:VBox>

        <mx:VBox label="Warnings" icon="{BulletWarning}">
            <mx:DataGrid id="gridWarning"
                    width="100%"
                    height="100%">
                <mx:columns>
                    <mx:DataGridColumn dataField="@name" />
                    <mx:DataGridColumn dataField="@data" />
                </mx:columns>
                <mx:dataProvider>
                    {model.record.(@status == WARNING)}
                </mx:dataProvider>
            </mx:DataGrid>
        </mx:VBox>

        <mx:VBox label="Errors" icon="{BulletCritical}">
            <mx:DataGrid id="gridCritical"
                    width="100%"
                    height="100%">
                <mx:columns>
                    <mx:DataGridColumn dataField="@name" />
                    <mx:DataGridColumn dataField="@data" />
                </mx:columns>
                <mx:dataProvider>
                    {model.record.(@status == CRITICAL)}
                </mx:dataProvider>
            </mx:DataGrid>
        </mx:VBox>
    </mx:TabNavigator>

</mx:Application>

From：

http://blog.minidx.com/2008/07/23/1125.html