flex中的动画以及窗体的布局

<?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" minWidth="955" minHeight="600">

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayList;
			import mx.controls.treeClasses.TreeItemRenderer;
			import mx.core.UITextField;
			import flash.filters.BitmapFilterQuality;
			protected function op_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				op.label=op.label=="+"?"-":"+";
				var idExpand:Boolean=op.label=="-";
			   for each(var node:XML in meTree.dataProvider)
			   {
				   meTree.expandChildrenOf(node,idExpand);
			   }
			}

			protected function zk_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				zk.label = zk.label == "<<" ? ">>" : "<<";
				var isclose:Boolean=zk.label =="<<";
				if(isclose)
				{
					meTree.width=0;
				}
				else
				{
					meTree.width=100;
				}
			}
   

			protected function meTree_clickHandler(event:Event):void
			{
				// TODO Auto-generated method stub
				if(event.target is UITextField)
				{
				var selectNode:String=TreeItemRenderer(UITextField(event.target).owner).data.@title;
				var arr:ArrayList=new ArrayList();
		      for(var i=0;i<products.product.length;i++)
			  {
			  if(products.product[i].category==selectNode)
			  {
               arr.addItem(products.product[i]);
			  }
			  }
			  adg1.dataProvider=arr;
				}
			}



		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		<fx:XMLList id="hospitalData">
			<root title="商品类别">
				<node title="家电类"/>
				<node title="食品类"/>
			</root>
		</fx:XMLList>
	
		<fx:Model id="products">
			<datas>
				<product>
					<category>家电类</category>
					<productname>电视机</productname>
					<unitprice>1200</unitprice>
					<place>广州</place>
					
				</product>
				
				<product>
					<category>家电类</category>
					<productname>洗衣机</productname>
					<unitprice>800</unitprice>
					<place>武汉</place>
					
				</product>
				
				<product>
					<category>家电类</category>
					<productname>微波炉</productname>
					<unitprice>700</unitprice>
					<place>无锡</place>
					
				</product>
				
				
				<product>
					<category>食品类</category>
					<productname>饼干</productname>
					<unitprice>3.5</unitprice>
					<place>武汉</place>
					
				</product>
				
				
				<product>
					<category>食品类</category>
					<productname>蛋糕</productname>
					<unitprice>25</unitprice>
					<place>武汉</place>
					
				</product>
			</datas>
		</fx:Model>
		
		
		<s:Fade id="fadeEffect" target="{hos}" alphaFrom="0.5" alphaTo="0" duration="5000">
			
		</s:Fade>
		
		<s:Move3D id="mymove3dx" target="{hos}" xFrom="0" xTo="200" yFrom="0" yTo="180" zFrom="0" zTo="-100" duration="2000">
			
		</s:Move3D>
		
		<s:Rotate3D id="my3dx" target="{hos}" angleXFrom="0" angleXTo="360" duration="400" autoCenterTransform="true">
			
		</s:Rotate3D>
		
		
		<mx:Resize id="expand" widthBy="30" heightBy="30" target="{hos}">
			
		</mx:Resize>
		
		<s:Resize id="contract" widthBy="-30" heightBy="-30" target="{hos}">
			
		</s:Resize>
		
		<s:BlurFilter  blurX="32" blurY="32" id="myBlur" quality="{BitmapFilterQuality.MEDIUM}" />
		<s:AnimateFilter id="myAnimateBlurFilter" target="{hos}" duration="1500" repeatCount="0" repeatBehavior="reverse" effectStart="btnBlur.enabled=false" effectEnd="btnBlur.enabled=true" bitmapFilter="{myBlur}">
			
		</s:AnimateFilter>
		
		<!-- 使用parallel组件，实现多种效果组合-->
		<s:Parallel id="myParallelDown">
			
			
			<s:Move3D  xFrom="0" xTo="200" yFrom="0" yTo="180" zFrom="0" zTo="-100" duration="2000">
				
			</s:Move3D>
			<s:Fade alphaFrom="0" alphaTo="1" duration="3000">
				
			</s:Fade>
		</s:Parallel>
	</fx:Declarations>

	
	<s:Panel id="hos" title="医院管理系统" width="800" height="450" horizontalCenter="0" verticalCenter="0">
		<s:layout>
			<s:HorizontalLayout paddingTop="10" paddingRight="10" paddingBottom="10"/>
		</s:layout>
	
				<mx:VBox>
					<mx:Canvas>
						<mx:LinkButton id="op" label="+" width="35" x="50" click="op_clickHandler(event)"/>
						<mx:LinkButton id="zk" label="<<" width="35" x="75" click="zk_clickHandler(event)"/>
					</mx:Canvas>
			<mx:HDividedBox width="100%" height="100%">
			<mx:Tree id="meTree" width="60%" height="100%" labelField="@title" dataProvider="{hospitalData}" click="meTree_clickHandler(event)"/>
			<mx:AdvancedDataGrid height="100%" x="25" y="10" id="adg1" designViewDataType="flat" width="529" dataProvider="{products.product}">
				<mx:columns>
					<mx:AdvancedDataGridColumn headerText="商品类别" dataField="category"/>
					<mx:AdvancedDataGridColumn headerText="商品名称" dataField="productname"/>
					<mx:AdvancedDataGridColumn headerText="商品单价" dataField="unitprice"/>
					<mx:AdvancedDataGridColumn headerText="产地" dataField="place"/>
				</mx:columns>
			</mx:AdvancedDataGrid>
			</mx:HDividedBox>
				</mx:VBox>
	
	</s:Panel>
	<s:Button label="淡入浅出效果"   click="fadeEffect.play()">
		
	</s:Button>
	<s:Button label="move3D效果"   click="mymove3dx.play()" x="117" y="4"></s:Button>
	<s:Button label="my3dx效果"   click="my3dx.play()" x="229" y="4"></s:Button>
	<s:Button x="333" y="3" label="放大" click="expand.play()"/>
	<s:Button x="442" y="3" label="缩小" click="contract.play()"/>
	<s:Button id="btnBlur" x="442" y="3" label="模糊效果" click="myAnimateBlurFilter.play()"/>
	<s:Button x="538" y="3" label="并发" mouseDownEffect="{myParallelDown}"/>
</s:Application>