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}" skin 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>