flex 布局 和 states

<?xml version="1.0" encoding="utf-8"?>
<!-- 
	author: 谢忠持 
	Application 标签表示当前的是一个flex 程序
	Application 本身是个容器，容器内的布局是 absolute，例外有horizontal，vertical可选 
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<!-- 
		states 不占用布局空间
		当前的 页面 元素 在不同的状态下呈现不同的样子
	-->
	<mx:states>
		<mx:State name="CartView">
			<mx:SetProperty target="{products}" name="width" value="0"/>
			<mx:SetProperty target="{products}" name="height" value="0"/>
			<mx:SetProperty target="{CartBox}" name="width" value="100%"/>
			<mx:AddChild relativeTo="{CartBox}" position="lastChild">
				<mx:DataGrid id="dgCart" width="100%">
					<mx:columns>
						<mx:DataGridColumn headerText="Column 1" dataField="col1"/>
						<mx:DataGridColumn headerText="Column 2" dataField="col2"/>
						<mx:DataGridColumn headerText="Column 3" dataField="col3"/>
					</mx:columns>
				</mx:DataGrid>
			</mx:AddChild>
			<mx:AddChild relativeTo="{CartBox}" position="lastChild">
				<mx:LinkButton label="Continue Shopping" click="this.currentState='';"/>
			</mx:AddChild>
			<mx:RemoveChild target="{linkbutton1}"/>
		</mx:State>
	</mx:states>
	<!-- 
		dock = 'true' 表示 ApplicationControlBar停靠在 Application 上
		x，y 代表控件的位置
		left, right, top, bottom 代表离 父元素 边框的距离  类似 html中的 mergin-left....  
		ApplicationControlBar 是容器类
	-->
	<mx:ApplicationControlBar height="90" width="100%" dock="true">
		<mx:Canvas width="100%" height="100%">
			<mx:Label x="0" y="0" text="flex"/>
			<mx:Label x="0" y="41" text="GROCER"/>
			<mx:Button y="10" label="View Chart" id="btnViewCart" right="90"/>
			<mx:Button y="10" label="CheckOut" id="btnCheckOut" right="10"/>
		</mx:Canvas>
	</mx:ApplicationControlBar>
	<mx:Label text="(C) 2006,FlexGrocer" right="10" bottom="10"/>
	<!-- 
		HBox 是容器类  HBox 中的子元素 横向摆放 
		VBox 也是容器类  VBox 中的子元素 竖向摆放
	-->
	<mx:HBox x="0" y="0" width="100%" height="100%" id="bodyBox">
		<mx:VBox width="100%" height="100%" id="products">
			<mx:Label text="Milk" id="prodName"/>
			<mx:Label text="$1.99" id="price"/>
			<mx:Button label="Add To Cart" id="add"/>
		</mx:VBox>
		<mx:VBox height="100%" id="CartBox">
			<mx:Label text="Your Cart Total:$"/>
			<mx:LinkButton label="View Cart" click="this.currentState = 'CartView';" id="linkbutton1"/>
		</mx:VBox>
	</mx:HBox>
	
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<!-- 
		author: 谢忠持 
		实现复杂布局用的
		把当前页面格式化成表格。
		通过设置占用表格来设置布局
	-->
	
	<mx:constraintColumns>
		<mx:ConstraintColumn id="col1"  width="33%"/>
		<mx:ConstraintColumn id="col2"  width="33%"/>
		<mx:ConstraintColumn id="col3"  width="33%"/>
	</mx:constraintColumns>
	
	<mx:constraintRows>
		<mx:ConstraintRow id="row1" height="50%"/>
		<mx:ConstraintRow id="row2" height="50%"/>
	</mx:constraintRows>
	
	<mx:TextArea id="ta1" text="TextArea1" left="col1:5" right="col1:5" top="row1:10" bottom="row1:20" backgroundColor="yellow" fontSize="20"/>
	
	<mx:TextArea id="ta2" text="TextArea2" left="col1:5" right="col2:5" top="row2:10" bottom="row2:10" backgroundColor="red" fontSize="20" color="white"/>
	
	<mx:TextArea id="ta3" text="TextArea3" left="col3:5" right="col3:5" top="row1:10" bottom="row2:20" backgroundColor="green" fontSize="20" color="white"/>
	
</mx:Application>

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
	
	<mx:ApplicationControlBar dock="true">
		<mx:LinkButton label="ALL" click="this.currentState=''"/>
		<mx:LinkButton label="Sales" click="this.currentState='fullSales'"/>
		<mx:LinkButton label="Categories" click="this.currentState='fullType'"/>
		<mx:LinkButton label="Comparison" click="this.currentState='fullComp'"/>
	</mx:ApplicationControlBar>
	
	<mx:states>
		<mx:State name="fullSales">
			<mx:SetProperty target="{rightCharts}" name="width" value="0"/>
			<mx:SetProperty target="{rightCharts}" name="height" value="0"/>
		</mx:State>
		<mx:State name="fullType">
			<mx:SetProperty target="{sales}" name="width" value="0"/>
			<mx:SetProperty target="{sales}" name="height" value="0"/>
			<mx:SetProperty target="{comp}" name="width" value="0"/>
			<mx:SetProperty target="{comp}" name="height" value="0"/>
		</mx:State>
		<mx:State name="fullComp">
			<mx:SetProperty target="{sales}" name="width" value="0"/>
			<mx:SetProperty target="{sales}" name="height" value="0"/>
			<mx:SetProperty target="{type}" name="width" value="0"/>
			<mx:SetProperty target="{type}" name="height" value="0"/>
		</mx:State>
	</mx:states>
		
	<mx:Panel id="sales" width="100%" height="100%" title="Sales Chart">
		<mx:ControlBar>
		</mx:ControlBar>
	</mx:Panel>
	
	<mx:VBox id="rightCharts" width="100%" height="100%">
		<mx:Panel id="type" height="100%" width="100%" title="Category Chart">
			<mx:ControlBar>
			</mx:ControlBar>
		</mx:Panel>
		<mx:Panel id="comp" height="100%" width="100%" title="Comarison Chart">
			<mx:ControlBar>
			</mx:ControlBar>
		</mx:Panel>		
	</mx:VBox>
	
</mx:Application>