[ flex ] 실적 트레이닝 북 - 3. 인터페이스 레이아웃하기.

컨테이너	규칙
VBox	자식들이 세로방향으로 레이아웃된다. 각각의 자식은 이전 자식의 아래에 그려진다.
HBox	자식들이 가로방향으로 레이아웃된다. 각각의 자식은 이전 자식의 오른쪽에 그려진다.
Canvas	자식들이 개발자가 지정한 x, y 좌표에 그려진다. 좌표 지정을 안하면 모든 자식은 컨테이너의 좌측 상단에 그려진다.
Application	layout 속성에서 VBox, HBox과 Canvas 컨테이너의 역할을 한다.
Title	필요하다면 새로운 행과 컬럼을 추가하여 자식들을 한 개 이상의 세로 컬럼 또는 가로행으로 배치된다. 모든 Title 컨테이너 셀은 같은 사이즈를 가지며, 정사각형 그리드 안에 정렬한다.
Panel	Box 컨테이너의 서브클래스이며, 지정된 layout 속성에 따라서 HBox, VBox 또는 Canvas 컨테이너의 역할을 할 수 있다.
ControlBar	ControlBar 컨테이너는 Panel 컨테이너가 TitleWindow 컨테이너 아래에 툴바를 배치(dock) 하기 위해 사용
ApplicationControlBar

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:states>
  <mx:State name="cartView">
   <mx:SetProperty target="{products}" name="width" value="0"/>
   <mx:SetProperty target="{products}" name="height" value="0"/>
   <mx:SetProperty target="{cartbox}" name="width" value="100%"/>
   <mx:AddChild relativeTo="{cartbox}" position="lastChild">
    <mx:DataGrid id="dgCart" width="100%">
     <mx:columns>
      <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
      <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
      <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
     </mx:columns>
    </mx:DataGrid>
   </mx:AddChild>
   <mx:AddChild relativeTo="{cartbox}" position="lastChild">
    <mx:Button label="Continue Shopping" click="this.currentState=''"/>
   </mx:AddChild>
   <mx:RemoveChild target="{linkbutton1}"/>
  </mx:State>
 </mx:states>
 <mx:ApplicationControlBar width="100%" dock="true" height="90">
  <mx:Canvas width="100%" height="100%">
   <mx:Label x="0" y="0" text="Flex"/>
   <mx:Label x="0" y="41" text="GROCER"/>
   <mx:Button label="View Cart" id="btnViewCart" right="90"/>
   <mx:Button label="Checkout" id="btnCheckout" right="10"/>
  </mx:Canvas>
 </mx:ApplicationControlBar>
 <mx:Label text="(c) 2006, FlexGrocer" right="10" bottom="10"/>
 <mx:HBox x="0" y="0" width="100%" height="100%" id="bodyBox">
  <mx:VBox width="100%" height="100%" id="products">
   <mx:Label text="Milk" id="productName"/>
   <mx:Label text="$1.99" id="price"/>
   <mx:Button label="add to cart" id="add"/>
  </mx:VBox>
  <mx:VBox height="100%" id="cartbox">
   <mx:Label text="Your Cart Total : $"/>
   <mx:LinkButton label="View Cart" id="linkbutton1"/>
  </mx:VBox>
 </mx:HBox>
</mx:Application>

문서 참조

Flex 3.20110104.xmind

인터넷으로 mxind 오픈 툴을 받아서 실행하면 됩니다. ( mind map )