Flex中TabNavigator设置Tabs样式思路及源码

<?xml version="1.0" encoding="utf-8"?>
<s:application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%"
>
<fx:declarations>
<!-- define custom colors for use as fills. -->
<mx:solidcolor id="sc1" color="0xadff2f" alpha=".8"/>
<mx:solidcolor id="sc2" color="0xadd8e6" alpha=".6"/>

<!-- define custom strokes for the columns. -->
<mx:solidcolorstroke id="s1" color="0xadff2f" weight="2"/>
<mx:solidcolorstroke id="s2" color="0xadd8e6" weight="2"/>
</fx:declarations>

<fx:style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.mytabs{
color:#ffffff;
font-weight:bold;
background-color:#6495ed;
}
.mytexttabs{
color:#8b0000;
background-color:#97ffff;
font-weight:bold;
}
mx|tabnavigator{
tab-style-name:"mytabs";
first-tab-style-name:"mytabs";
last-tab-style-name:"mytabs";
selected-tab-text-style-name:"mytexttabs";
}
</fx:style>

<fx:script>
<![cdata[
import mx.collections.arraycollection;

[bindable]
//学生数据绑定
private var studentarray:arraycollection = new arraycollection([
{sno:"2013010101",math:"96"},
{sno:"2013010102",math:"89"},
{sno:"2013010103",math:"87"},
{sno:"2013010104",math:"90"},
{sno:"2013010105",math:"78"},
{sno:"2013010106",math:"69"},
{sno:"2013010107",math:"92"},
{sno:"2013010108",math:"80"},
{sno:"2013010109",math:"60"},
{sno:"2013010110",math:"89"}
]);

[bindable]
//教师数据绑定
private var teacherarray:arraycollection = new arraycollection([
{tno:"2013010101",tscore:"96"},
{tno:"2013010102",tscore:"99"},
{tno:"2013010103",tscore:"77"},
{tno:"2013010104",tscore:"70"},
{tno:"2013010105",tscore:"98"},
{tno:"2013010106",tscore:"79"},
{tno:"2013010107",tscore:"82"},
{tno:"2013010108",tscore:"70"},
{tno:"2013010109",tscore:"80"},
{tno:"2013010110",tscore:"79"}
]);
]]>
</fx:script>

<mx:vbox width="100%" height="100%" paddingbottom="10" paddingleft="10" paddingright="10" paddingtop="10">
<mx:tabnavigator width="100%" height="100%" fontsize="12" cornerradius="8">
<s:navigatorcontent label="学生" width="100%" height="100%">
<mx:vbox width="100%" height="100%" paddingbottom="10" paddingleft="10" paddingright="10" paddingtop="10">
<mx:columnchart id="column" dataprovider="{studentarray}" showdatatips="true" width="100%" height="100%" fontsize="12">
<mx:horizontalaxis>
<mx:categoryaxis categoryfield="sno" displayname="学号"/>
</mx:horizontalaxis>
<mx:series>
<mx:columnseries displayname="数学成绩" xfield="sno" yfield="math" fill="{sc1}" stroke="{s1}"/>
</mx:series>
</mx:columnchart>
<mx:hbox width="100%" height="30">
<s:label width="50%"/>
<mx:legend dataprovider="{column}"/>
</mx:hbox>
</mx:vbox>

</s:navigatorcontent>
<s:navigatorcontent label="教师" width="100%" height="100%" fontsize="12">
<mx:vbox width="100%" height="100%" paddingbottom="10" paddingleft="10" paddingright="10" paddingtop="10">
<mx:columnchart id="column1" dataprovider="{teacherarray}" showdatatips="true" width="100%" height="100%" fontsize="12">
<mx:horizontalaxis>
<mx:categoryaxis categoryfield="tno" displayname="工号"/>
</mx:horizontalaxis>
<mx:series>
<mx:columnseries displayname="教师评分" xfield="tno" yfield="tscore" fill="{sc2}" stroke="{s2}"/>
</mx:series>
</mx:columnchart>
<mx:hbox width="100%" height="30">
<s:label width="50%"/>
<mx:legend dataprovider="{column1}"/>
</mx:hbox>
</mx:vbox>
</s:navigatorcontent>
</mx:tabnavigator>
</mx:vbox>
</s:application>