Flex TabBar ViewStack综合实例

<?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"    
               viewSourceURL="srcview/index.html">  
    <fx:Style>  
        @namespace s "library://ns.adobe.com/flex/spark";   
        s|TabBar s|ButtonBarButton:up   
        {   
            fontStyle:normal;   
        }   
        s|TabBar s|ButtonBarButton:upAndSelected,   
        s|ButtonBar s|ButtonBarButton:downAndSelected   
        {   
            fontStyle:italic;   
            font-weight:bold;   
        }   
    </fx:Style>  
    <fx:Declarations>  
        <s:ArrayCollection id="contacts"/>  
    </fx:Declarations>  
    <s:layout>  
        <s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>  
    </s:layout>  
    <s:Panel width="40%"  
             height="60%"  
             title="TabBar Demo"  
             backgroundColor="0x5a5a5a">  
        <s:TabBar id="tabs"  
                  left="8"  
                  y="2"  
                  dataProvider="{vs}"  
                  skinClass="Skin.TabBar"  
                  cornerRadius="4" />  

        <mx:ViewStack id="vs"  
                      width="95%"  
                      height="90%"  
                      left="8"  
                      y="23">  
            <s:NavigatorContent label="User Login"  
                                backgroundColor="0x789898" >  
                <s:BorderContainer borderColor="0x2a2f5f"  
                                   width="100%"  
                                   height="100%"  
                                   cornerRadius="4"  
                                   dropShadowVisible="true"  
                                   backgroundColor="0x789898"  
                                   borderVisible="false">  
                    <s:layout>  
                        <s:VerticalLayout paddingTop="10"  
                                          paddingLeft="5"/>  
                    </s:layout>  
                    <mx:Form>  
                        <mx:FormItem label="User Name:">  

                            <s:TextInput id="username"  
                                         width="100%"/>  
                        </mx:FormItem>  
                        <mx:FormItem label="Password:">  
                            <s:TextInput id="userpassword"  
                                         width="100%"  
                                         displayAsPassword="true"/>  
                        </mx:FormItem>  
                    </mx:Form>  
                    <s:HGroup>  
                        <s:Button label="Login"/>  
                    </s:HGroup>  
                </s:BorderContainer>  
            </s:NavigatorContent>  

            <s:NavigatorContent label="Registration"  
                                backgroundColor="0xF9EBAE">  
                <s:BorderContainer borderColor="0x2a2f5f"  
                                   width="100%"  
                                   height="100%"  
                                   cornerRadius="4"  
                                   dropShadowVisible="true"  
                                   backgroundColor="0xF9EBAE"  
                                   borderVisible="false">  
                    <s:layout>  
                        <s:VerticalLayout paddingTop="10"  
                                          paddingLeft="5"/>  
                    </s:layout>  
                    <mx:Form>  
                        <mx:FormItem label="First Name:">  
                            <s:TextInput id="firstname"  
                                         width="100%"/>  
                        </mx:FormItem>  
                        <mx:FormItem label="Last Name:">  
                            <s:TextInput id="lastname"  
                                         width="100%"/>  
                        </mx:FormItem>  
                        <mx:FormItem label="Email:">  
                            <s:TextInput id="email"  
                                         width="100%"/>  
                        </mx:FormItem>  
                        <mx:FormItem label="Age:">  
                            <s:TextInput id="age"  
                                         width="100%"/>  
                        </mx:FormItem>  
                        <mx:FormItem label="Contect Number:">  
                            <s:TextInput id="contect"  
                                         width="100%"/>  

                        </mx:FormItem>  
                        <mx:FormItem label="Address:">  
                            <s:TextArea id="address"  
                                        width="127"/>  
                        </mx:FormItem>  
                        <mx:FormItem label="State:">  
                            <s:TextInput id="state"  
                                         width="100%"/>  
                        </mx:FormItem>  
                        <mx:FormItem label="Country:">  
                            <s:TextInput id="country"  
                                         width="100%"/>  
                        </mx:FormItem>  
                    </mx:Form>  
                    <s:HGroup>  
                        <s:Button label="Save"/>  
                    </s:HGroup>  
                </s:BorderContainer>  
            </s:NavigatorContent>  

            <s:NavigatorContent label="Admin Login"  
                                backgroundColor="0xE8B54D">  
                <s:BorderContainer borderColor="0x2a2f5f"  
                                   width="100%"  
                                   height="100%"  
                                   cornerRadius="4"  
                                   dropShadowVisible="true"  
                                   backgroundColor="0xE8B54D"  
                                   borderVisible="false">  
                    <s:layout>  
                        <s:VerticalLayout paddingTop="10"  
                                          paddingLeft="5"/>  
                    </s:layout>  
                    <mx:Form>  
                        <mx:FormItem label="Admin Name:">  
                            <s:TextInput id="adminname"  
                                         width="100%"/>  
                        </mx:FormItem>  
                        <mx:FormItem label="Password:">  
                            <s:TextInput id="password"  
                                         width="100%"  
                                         displayAsPassword="true"/>  
                        </mx:FormItem>  
                    </mx:Form>  
                    <s:HGroup>  
                        <s:Button label="Login"/>  
                    </s:HGroup>  
                </s:BorderContainer>  
            </s:NavigatorContent>  
        </mx:ViewStack>  
    </s:Panel>  
</s:Application>  

<?xml version="1.0" encoding="utf-8"?>  
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"  
        xmlns:s="library://ns.adobe.com/flex/spark"  
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"  
        alpha.disabled="0.5">  

    <fx:Metadata>  
        <![CDATA[  
        [HostComponent("spark.components.TabBar")]  
        ]]>  
    </fx:Metadata>  
    <s:states>  
        <s:State name="normal"/>  
        <s:State name="disabled"/>  
    </s:states>  
    <s:DataGroup id="dataGroup"  
                 width="100%"  
                 height="100%">  
        <s:layout>  
            <s:ButtonBarHorizontalLayout gap="-1"/>  
        </s:layout>  
        <s:itemRenderer>  
            <fx:Component>  
                <s:ButtonBarButton chromeColor="{data.getStyle('backgroundColor')}"  
                                   color="{myColor}"  
                                   creationComplete="buttonbarbutton1_creationCompleteHandler(event)">  
                    <fx:Script>  
                        <![CDATA[  

                            [Bindable]  
                            private var myColor:uint=0x000000;  

                            import mx.events.FlexEvent;  

                            protected function buttonbarbutton1_creationCompleteHandler(event:FlexEvent):void  
                            {  
                                switch (data.getStyle('backgroundColor'))  
                                {  

                                    case (0x789898):  
                                    {  
                                        myColor=0xFFFFFF;  
                                        break;  
                                    }  
                                    default:  
                                    {  
                                        myColor=0x000000;  
                                        break;  
                                    }  
                                }  
                            }  

                        ]]>  
                    </fx:Script>  
                </s:ButtonBarButton>  
            </fx:Component>  
        </s:itemRenderer>  
    </s:DataGroup>  
</s:Skin>