2010年6月15日 星期二

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他是一個屬性。