3. Flex - Interface Layout

Container

  => Layout

모든 레이아웃은 컨테이너를 통해서 만들어진다.
(각각의 애플리케이션은 <mx:Application>태그를 가지고 있는데 이것이 바로 컨테이너이다.)

 

Container 종류들

Application: 레이아웃 속성에서 VBox,HBox,Canvas의 컨테이너 역할.

VBox :자식들이 수직 방향으로 정렬된다.위에서 아래로.

HBox :자식들이 수평 방향으로 정렬된다. 왼쪽에서 오른쪽으로 . <Vbox와 Hbox의 조합을 활용한다.>

Canvas: 개발자가 지정한 x,y좌표에 렌더링된다.디폴트는 좌측 상단(0,0) .

Tile : 필요에 의해 새로운 행과 열을 추가하여 자식들을 하나 이상의 행과열을 레이아웃해준다.
         셀은 같은 사이즈를 가지며 정사각의 그리드 안에서 정렬을 해준다.
          각각의 셀은 하나의 자식을 갖고 direction 속성으로 레이아웃을 정의해서 사용.

Panel: Box컨테이너의 서브 클래스.지정된 레이아웃 속성에 따라 Box,Canvas의 컨테이너 역할을 수행한다.
           레이아웃을 absolute로 설정하고 Canvas컨테이너처럼 사용가능하다.
           자식 포함을 더하여, 패널 컨테이너는 타이틀과 상태 메시지를 포함한 타이틀 바 영역을 제공.

ControlBar : 패널 컨테이너나 TitleWindow컨테이너 아래에 툴 바를 Docking하기 위해 사용.
                    direction(디폴트값=horizontal) 속성에 따라 Box컨테이너로도 쓰임.

ApplicationControlBar: 마찬가지로 direction 속성에 따라 Box 컨테이너로 쓰이며,애플리케이션의 모든 요소들에게 접근할 수 있도록 하는 컨테이너를 담아준다.  만약 <mx:Application>태그의 첫 번째 자식이 기술되고 dock=true 일 때 애플리케이션의 드로우잉 영역의 상단에 배치,전체 너비를 사용하도록 확정되며 스크롤과 무방하게 항상 화면에 유지시켜준다.

 

 

제약기반 Layout에서 작업하기

절대좌표를 쓰지말고~~

 

부모 컨테이너와 위치 조정

Parents Container 를 기준으로 Component가 배치될 것을 정함.
<절대좌표(layout=”absolute”)가 허용되는 컨테이너(Canvas, Panel, Module, Application)안에서 사용>

1. Canvas컨테이너의 가장자리에 맞춤.(항상 부모 컨테이너가 영향을 미침)

2. Application,Panel의 절대좌표를 허용하는 컨테이너를 위치하고 크기를 조절.(항상 부모 컨테이너가 영향을 미침)

절대좌표가 아닌 다내믹한 레이아웃 조절 가능.
컨테이너의 가장자리들에 비례하여 위치를 고정시켜준다.

 

형제 컨테어니와 위치 조정

3. 절대 좌표를 허용하는 컨테이너의 행과 열을 설정  (디자인 모드에서는 사용 불가)

ConstraintRow,ConstraintColumn클래스로 구현된 강화시킨 제약조건이다. 

즉, 공간을 행과 열로 나누고 그 경계선에 제약시켜 위치시키는 방법이다.
(자바 스윙 컴포넌트 레이아웃에도 이런 기능을 하는 것이 있다. )

예)

<!--영역정의-->
    <mx:constraintColumns>
        <mx:ConstraintColumn id="col1" width="33%"/>
        <mx:ConstraintColumn id="col2" width="33%"/>
        <mx:ConstraintColumn id="col3" width="33%"/>
    </mx:constraintColumns>

    <mx:constraintRows>
        <mx:ConstraintRow id="row1" height="50%"/>
        <mx:ConstraintRow id="row2" height="50%"/>
    </mx:constraintRows>

<!--col,row-->
    <mx:TextArea id="ta1" text="(1,1)"
                 left= "col1:5"   top="row1:10" 
                 right="col1:5"   bottom="row1:20"/>
    <mx:TextArea id="ta2" text="(1,2)/ (2,2)"
                 left= "col1:5"   top="row2:10" 
                 right="col2:5"   bottom="row2:10"   />            
    <mx:TextArea id="ta3" text="(3,1)/ (3,2)"
                 left= "col3:5"   top="row1:10"
                 right="col3:5"   bottom="row2:10"   />

 

단 여기에서 애플리케이션의 layout이 absolute로 되어있어야 한다.

향상된 제약의 크기를 설정할 때 percent,fixed,content의 3가지 옵션이 있다.

-Percent: 부모 컨테이너의 계산된 퍼센티지

-Fixed: 부모 컨테이너의 고정된 지역

-Content: 가장 큰 자식이 사용하는 부모 컨테이너의 지역을 기준으로 사용

Percent나 Content로 크기가 설정된 열과 행은 minHeight/Width, maxHeight/Width의 속성을 사용하여 사이즈의 커지고 줄어듬을 제어할 수 있다.

 

전체 Container들의 계층구조 및 배치확인

     방법1.

         

      방법2.

        

 

(View) State 작업하기

 

 

디자인 모드에서 뿐만 아니라 소스코드를 고쳐서도 State를 변경할 수 있다.

 

 

 

Component

=> Control

 

 

 

 

 

 

 

 

--------------------------------------------------------------

최종결과 보기

프로젝트 생성 후

완성본 소스를 폴더에서 한꺼번에 Copy후

새로 만든 프로젝트의 Src에서 오른 클릭후 Paste.