Flex4 Dynamic Layout

§利用Flex4的Layout特性寫一個動態更換Layout的例子
關於Flex4的Layout請參考上篇About Layout in Flex4
//動態更換layout Example
<?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"
applicationComplete="application1_applicationCompleteHandler(event)"
layout="{new VerticalLayout()}"
>

<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.graphics.SolidColor;
import spark.layouts.HorizontalAlign;
import spark.layouts.HorizontalLayout;
import spark.layouts.TileLayout;
import spark.layouts.VerticalLayout;
import spark.primitives.Rect;


//排版物件參照
private var rectGroupVerLayout:VerticalLayout;
private var rectGroupHorLayout:HorizontalLayout;
private var rectGroupTileLayout:TileLayout;
//色彩存放的Array
private var _colors:Array = [0xff0000,0xffc600,0xfff605,0x00ff00,0x0000ff,0x5a2fe9,0xae2fe9];


protected function application1_applicationCompleteHandler(event:FlexEvent):void
{
　//建立排版物件
　rectGroupVerLayout = new VerticalLayout();
　rectGroupHorLayout = new HorizontalLayout();
　rectGroupTileLayout = new TileLayout();
　createSevenRect();
}


//建立七個矩形加到Application上
private function createSevenRect():void
{
　var count:int = 0
　for(count ; count < 7 ; count++)
　{
　　rectGroup.addElement(createRect(_colors[count]));
　}
}
//產生一個矩形
private function createRect(color:uint):Rect
{
　var _rect:Rect = new Rect();
　_rect.fill = new SolidColor(color , 0.6);
　_rect.width = 50;
　_rect.height = 50;
　return _rect;
}
//更換排版
protected function changedLayout(event:MouseEvent):void
{
　if(event.currentTarget === this.btnv)
　{
　　rectGroup.layout = rectGroupVerLayout;
　　return;
　}
　if(event.currentTarget === this.btnh)
　{
　　rectGroup.layout = rectGroupHorLayout;
　　return;
　}
　if(event.currentTarget === this.btnt)
　{
　　rectGroup.layout = rectGroupTileLayout;
　}
}
//加入一個矩形
protected function addRect(event:MouseEvent):void
{
　if(rectGroup.numElements >= 9)
　　return;
　rectGroup.addElementAt(createRect(0xeef4f1) , rectGroup.numElements);
}
]]>
</fx:Script>>
<s:Group id="rectGroup" layout="{new HorizontalLayout()}"/>
<s:Group layout="{new HorizontalLayout()}">
<s:Button id="btnv" label="vertical" mouseDown="changedLayout(event)"/>
<s:Button id="btnh" label="Horizontal" mouseDown="changedLayout(event)"/>
<s:Button id="btnt" label="TileLayout" mouseDown="changedLayout(event)"/>
<s:Button id="addChildBtn" label="add on Rect" mouseDown="addRect(event)"/>
</s:Group>
</s:Application>

//執行結果