Flex之TabNavigator

来源：互联网发布：淘宝上买表靠谱吗编辑：程序博客网时间：2024/05/22 04:39

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