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();
}

About Layout in Flex, 關於Flex4中 (SDK4) 的排版

§About Layout in Flex4
在Flex4中，顯示元件的動作，樣式(Style)，外觀(Skin)，排版(Layout)都是抽離出來成為一個類別(Class)，如此做法更合乎了物件導向觀念能讓物件之間彼此更鬆散， 降低耦合，也更合乎了MVC，因此在Flex4中的顯示元件更顯得靈活好用。

上圖是Layout的類別關係圖，可以看到Flex4中具有四種原生的Layout類別，而這四種Layout類別都繼承了LayoutBase，由此父類來達到超型態(superType)作用，而如果你想要製作自己的Layout工具，繼承LayoutBase來開發自訂的Layout類。

• <s:BasicLayout/>　　　　絕對位置佈局
• <s:TileLayout/>
• <s:HorizontalLayout/>　　水平排列佈局
• <s:VerticalLayout/>　　　垂直排列佈局

如何使用：

　使用標籤或是layout屬性來設定，注意在標籤中如果是小寫這代了此標籤是屬性或方法，而layout他是一個屬性。