Flex_布局和容器

1、Halo組件也稱MX組件，是Flex3的獨有組件（按鈕、文本字段、容器等）。而Flex4引入了新一代的組件，稱為Spark。
   Flex4同時支持Halo和Spark。但是很多Halo組件都有更新的Spark組件。

2、布局種類
Spark都支持下面的任何一種布局：
  - BasicLayout：絕對布局。使用x，y坐標。
  - HorizontalLayout：單行中橫向排列。
  - VerticalLayout：單列縱向排列。
  - TileLayout：網格形式顯示組件，創建盡可能多的行和列。

3、絕對布局
絕對布局，使用x，y坐標，允許控制元素的確切位置和大小。
容器的左上角代表坐標原點（0，0）。（Flex中，x坐標從左邊開始；y坐標，從頂部開始。）
Application容器默認使用絕對布局。

x，y坐標為負值時，組件會移到視覺范圍外。

4、基於約束的布局
在難以確定組件的精確坐標時，可以用絕對布局模式中基於約束的布局方式。基於約束的布局是相對於容器的4個邊或容器的中心點來定位組件。
  - 4個邊: top，bottom，left，right
  - 中心點: horizontalCenter，verticalCenter
  - baseline：組件的上邊與容器的距離
優點是，即使調整窗口大小也可以保持組件的相對位置不變。

5、增強的約束布局（Spark容器不支持，Spark組件支持）
可以在水平和垂直方向上任意創建隱藏的輔助線，然后基於輔助線定位組件。
約束行和約束列的設定（<mx:constraintColumns> <mx:constraintRows>）：
  - 固定約束： 由絕對數字（像素）來指定
  - 相對約束： 根據容器大小的百分比來確定
  - 內容大小約束： 約束行和約束列將和最大項目的大小相同

Halo的Canvas容器支持增強約束，Spark容器不支持增強約束，但是Spark組件可以放到Halo容器中。

6、自動布局
   自動布局模式下，是將容器定向到位置元素中。
   1）使用布局類
      Spark容器有4種布局類，其中BasicLayout是絕對布局，其它下面三種則提供了自動布局選項：
        - HorizontalLayout
        - VerticalLayout
        - TileLayout  （自動網格布局）

   2）使用空間
      <mx:Spacer/>組件可以在布局類指定的方向上，使組件隔開相對的距離。
      例： <mx:Spacer width=”50%”>      // 使組件平均地分開相對距離

7、容器
   1）Application
      一個應用程序只能有一個，是根容器。
      有個特色屬性preloader，是啟動Flex程序時的進度條。默認是On的，可以Off。
      可以裝載全局變量和函數。

   2）Canvas
      是一種最基本的容器，是Halo組件。在增強約束時使用。

   3）Group
      是一個簡單容器，和布局類結合使用，默認BasicLayout布局。
      子容器有Hgroup和Vgroup。

   4）SkinnableContainer
      類似Group，支持換膚。

   5）Panel
      基於SkinnableContainer，特點在於添加了一個標題欄和一個框架，並默認給子對象繪制邊框。
      默認使用BasicLayout。

   6）ApplicationControlBar
      給程序添加了控制欄，和File菜單類似。要和Application容器結合使用。
      （ControlBar和它類似，但是效果不好，避免）

   7）DataGroup
      用於分組數據，可以使用項渲染器渲染數據，從而自定義顯示。默認是BasicLayout。
      需要將數據發送給DataGroup的dataProvider。
      為了顯示數據，可以使用如下渲染器：
        - spark.skins.spark.DefaultItemRenderer：顯示為簡單文本
        - spark.skins.spark.DefaultComplexItemRenderer：顯示為Group容器內的組件。只有當數據包含視覺組件時才有效。

   8) SkinnableDataContainer
      類似DataGroup，支持換膚.

   9）DividedBox、HDividedBox、VDividedBox
      這些是Halo組件，他們允許控制大小的調整。
      DividedBox支持通過direction屬性設置水平和垂直布局方式。
      HDividedBox是水平布局，VDividedBox是垂直布局。

   10）Form
      方便布局表單，純粹是布局目的。
      它包含三個標簽
        - Form：主容器
        - FormHeader：可選，添加標題用
        - FormItem：將文本與每個表單輸入字段關聯

   11）Grid
      類似HTML的表，頂級的Grid標簽用於標識網格的開始，GridRow用於插入行，GridItem用於向網格中輸入數據。

   下面是使用容器的簡單代碼（所用到的Skin代碼就省略了，FB默認做成的就行）： 

<?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">
    <fx:Script>
        <![CDATA[
            import flash.events.Event;
            import mx.controls.Alert;
            
            import mx.collections.ArrayCollection;
            
            private function clickHandler2(evt:Event):void 
            {
                Alert.show("Do you want to save your changes?", "Save Changes", Alert.YES|Alert.NO, this);
            }
            
            [Bindable]
            public var somedata:ArrayCollection= new ArrayCollection(["one", "two", "three"]);
            
        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->

    </fx:Declarations>
    
    <mx:Canvas width="100%" height="100%">
        <mx:constraintColumns>
            <s:ConstraintColumn id="col1" width="40%"/>
            <s:ConstraintColumn id="col2" width="60%"/>
        </mx:constraintColumns>
        
        <s:Button label="btn 1" left="col1:10" right="col1:10" top="100"/>
        <s:Button label="btn 2" left="col2:10" right="col2:10" top="60"/>
        
    </mx:Canvas>

    <!-- SkinnableContainer sample -->
    <s:SkinnableContainer skinClass="helloSkin">
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>
        
        <s:Button label="btn skin 1"/>
        <s:ScrubBar width="100" height="10"/>
    </s:SkinnableContainer>
          
    <!-- ApplicationControlBar sample -->
    <mx:ApplicationControlBar width="80%" top="200">
        <s:Button label="appCtlBar Back"/>
        <s:Button label="appCtlBar Forward" color="0x00ff55"/>
        <s:TextInput width="50"/>
        <s:Button label="Search"/>
    </mx:ApplicationControlBar>

    <!-- DataGroup sample -->
    <s:DataGroup dataProvider="{somedata}" itemRenderer="spark.skins.spark.DefaultItemRenderer" top="300">
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>
    </s:DataGroup>

    <!-- Form sample -->
    <mx:Form top="400">
        <mx:FormHeading label="Form head info"/>
        <mx:FormItem label="First Name">
            <s:TextInput/>
        </mx:FormItem>
        <mx:FormItem label="Last Name">
            <s:TextInput/>
        </mx:FormItem>
    </mx:Form>

    <!-- Grid sample -->
    <mx:Grid top="600" left="10">
        <mx:GridRow>
            <mx:GridItem>
                <s:Button label="Rewind"/>
            </mx:GridItem>
            <mx:GridItem>
                <s:Button label="Play"/>
            </mx:GridItem>
            <!--
            <mx:GridItem>
                <s:Button label="Forward"/>
            </mx:GridItem>
            -->
        </mx:GridRow>
        <mx:GridRow>
            <mx:GridItem colSpan="2">
                <s:Button label="Stop" width="100%"/>
            </mx:GridItem>
        </mx:GridRow>
    </mx:Grid>
</s:Application>

8、皮膚
   皮膚文件有兩條基本規則：
     - 必須支持組件可能有的所有狀態
     - 必須在名為contentGroup的皮膚內定義一個額外的容器