<?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>
分享到：
相关推荐
在本文中，我们将深入探讨如何在Flex环境中创建一个垂直排列的按钮（Flex Vertical Button）以及一个包含垂直标签的TabNavigator组件。Flex是一个基于ActionScript 3.0的开放源代码框架，用于构建富互联网应用程序...
### Flex 3 组件实例与应用（2009版） #### 一、概述 《Flex 3 组件实例与应用》是一本针对初学者学习Adobe Flex 3框架及其组件的指南书籍。这本书由作者Dason编写，内容覆盖了Flex 3中的多种组件及其用法，并通过...
3. **属性和事件**：TabNavigator有许多可配置的属性，如`selectedTab`用于设置当前选中的选项卡，`tabBar`用于自定义选项卡条的外观。同时，TabNavigator还支持`change`事件，当用户切换选项卡时触发。 4. **皮肤...
通过创建`RichTabBar`实例并将其设置为TabNavigator的tabBar，实现了对原生TabBar的替换。同时，设置了一些样式属性，如边框样式、内边距等，以适应新的需求。 接下来，`RichTabBar`类被定义，它同样继承自`TabBar`...
它不内置导航组件，开发者需要自定义如LinkBar、TabBar、ButtonBar或ToggleButtonBar等组件来控制当前活动容器的切换。创建ViewStack容器通过`<mx:ViewStack>`标签实现，同时，为了在子容器间传递参数，通常会利用...