Flex in Tabnavigator set tabs style ideas and source _flex

1, design ideas

(1) design a tabnavigator, which contains two tabs;

(2) Set tabs style

2. Design Source

Tabs.mxml:

Copy Code code as follows:

<?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]
Student Data binding
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]
Teacher Data Binding
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= "ten" paddingleft= "ten" paddingright= "ten" paddingtop= "ten" >
<mx:tabnavigator width= "100%" height= "100%" fontsize= "" cornerradius= "8" >
<s:navigatorcontent label= "Student" width= "100%" height= "100%" >
<mx:vbox width= "100%" height= "100%" paddingbottom= "ten" paddingleft= "ten" paddingright= "ten" paddingtop= "ten" >
<mx:columnchart id= "column" dataprovider= "{Studentarray}" showdatatips= "true" width= "100%" height= "100%" fontSize = ">"
<mx:horizontalAxis>
<mx:categoryaxis categoryfield= "Sno" Displayname= "School Number"/>
</mx:horizontalAxis>
<mx:series>
<mx:columnseries displayname= "Math Score" xfield= "Sno" yfield= "math" fill= "{SC1}" stroke= "{s1}"/>
</mx:series>
</mx:ColumnChart>
<mx:hbox width= "100%" height= ">"
<s:label width= "50%"/>
<mx:legend dataprovider= "{column}"/>
</mx:HBox>
</mx:VBox>

</s:NavigatorContent>
<s:navigatorcontent label= "Teacher" width= "100%" height= "100%" fontsize= ">"
<mx:vbox width= "100%" height= "100%" paddingbottom= "ten" paddingleft= "ten" paddingright= "ten" paddingtop= "ten" >
<mx:columnchart id= "Column1" dataprovider= "{Teacherarray}" showdatatips= "true" width= "100%" height= "100%" Fontsize= ">"
<mx:horizontalAxis>
<mx:categoryaxis categoryfield= "TNO" displayname= "Work No."/>
</mx:horizontalAxis>
<mx:series>
<mx:columnseries displayname= "teacher Rating" xfield= "TNO" yfield= "Tscore" fill= "{SC2}" stroke= "{s2}"/>
</mx:series>
</mx:ColumnChart>
<mx:hbox width= "100%" height= ">"
<s:label width= "50%"/>
<mx:legend dataprovider= "{column1}"/>
</mx:HBox>
</mx:VBox>
</s:NavigatorContent>
</mx:TabNavigator>
</mx:VBox>
</s:Application>

3. Design Instructions

(1) Tab-style-name: Set all tabs style classes

(2) First-tab-style-name: Set the Style class for the first tabs

(3) Last-tab-style-name: Set the last Tabs style class

(4) Selected-tab-text-style-name: Sets the text style class in the selected tabs

4. Design result

(1) Results of initialization

(2) Switching tabs