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：