flex day 10 halo组件

<mx:LinkBar>需要一个dataprovider

<mx:ViewStack>由一组彼此上下堆叠的子容器组成,其中一次只可以显示一个子容器。选择另一个子容器后,它将显示在原来子容器的位置处,所以看起来好像此子容器替换了原来的子容器。但是,原来的子容器仍然存在,只不过它现在处于不可见状态。

<mx:TabNavigator>类似于带选项卡的viewstack 容器。

<mx:Accordion> 同样属于一个导航容器。

1.viewstack、tabnavigator、accordion 这些容器一次只能显示其中的一个子组件。区别在于子组件之间的导航方式,所以才称为“导航”容器。

2.linkbar的dataprovider经常使用viewstack。

3.且Halo导航容器只能包含Halo的容器子组件(想VBox、HBox、Canvas)

<?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%" initialize="init()">
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout paddingLeft="10" paddingTop="10"
						  paddingRight="10" paddingBottom="10"/>
	</s:layout>
	<mx:Panel width="100%" height="100%" title="I See Your Halo...">
		<mx:LinkBar dataProvider="{vs}" width="100%"/>
		<mx:ViewStack id="vs" width="100%" height="100%">
			<mx:TabNavigator width="100%" height="100%" paddingLeft="5"
							 label="Tab Navigator">
				<mx:VBox label="One" width="100%" height="100%">
					<mx:Label text="Here's a Button:"/>
					<mx:Button label="A Halo Button"/>
				</mx:VBox>
				<mx:VBox label="Two" width="100%" height="100%">
					<mx:Label text="Shameless self-promotion:"/>
					<mx:Image 
						source="http://www.manning.com/armstrong/armstrong_cover150.jpg"/>
				</mx:VBox>
				<mx:VBox label="Three" width="100%" height="100%">
					<mx:Label text="Stuff inside Three"/>
				</mx:VBox>
			</mx:TabNavigator>
			<mx:Accordion width="100%" height="100%" label="Accordion">
				<mx:VBox label="Four" width="100%" height="100%">
					<mx:Label text="Stuff inside Four"/>
				</mx:VBox>
				<mx:VBox label="Five" width="100%" height="100%">
					<mx:Label text="Stuff inside Five"/>
				</mx:VBox>
				<mx:VBox label="Six" width="100%" height="100%">
					<mx:Label text="Stuff inside Six"/>
				</mx:VBox>
			</mx:Accordion>
		</mx:ViewStack>
	</mx:Panel>
</s:Application>

 

你可能感兴趣的:(Web,Flex,AIR)