Group
Flex4 에서는 Canvas 클래스와 Tile 컨테이너 클래스가 더 이상 제공되지 않는다. Canvas와 Tile 대신 쓸 수 있는 것이 있는데, 바로 이 Group 클래스 이다. Group클래스에 레이아웃 속성을 지정함으로서 Tile 클래스 처럼 쓸 수도, Canvas 클래스 처럼 쓸 수도 있는 것이다. 또한 자신이 원하는 독특한 레이아웃으로 지정이 가능 할 것이다.
Flex3에서는 Box 클래스를 상속받아 만든 VBox와 HBox 컨테이너 클래스가 있었다. 하지만 Flex4에 들어와선 Box 클래스가 사라졌다. 때문에 이 Group클래스를 상속받아 VBox와 HBox 처럼 동작하도록 만든 컴포넌트들을 제공하는데 그것이 VGroup과 HGroup 이다. 이것들에 대한 자세한 정보는 이곳을 참고하자.
Flex3에서는 여러 컨테이너들이 자신들만의 레이아웃 속성을 가지고 있었지만, Flex4에서는 컨테이너와 레이아웃이 분리되었기 때문에 VGroup 과 HGroup 등을 따로 제공해 줄 필요가 없다. VGroup이 필요하면 Group에 VerticalLayout을 붙여서 사용하면 된다. 아무래도 Flex3에서 건너올 사람들을 염두해 두고 미리 제공해 주고 있지 않나 싶다.
설명해봐야 머리만 아프니 Group을 사용해 보도록 하자.
- <s:Group>
<s:Button />
<s:Button />
<s:Button />
<s:Button />
</s:Group>
위와 같이 Group 안에 버튼을 4개 넣어봤다. 실행해보면 다음과 같은 화면을 볼 수 있다.
버튼이 1개 뿐이 안나왔다! 이유는 간단하다. group에 우리는 어떻게 자식컴포넌트를 배열할지 정해주지 않았기 때문에 기본 위치인 왼쪽 상단에 모두 모여있게 된 것이다.
코드를 아래와 같이 고쳐서 수직으로 나열해 보도록 하자.
아래 코드처럼 layout 태그와 VerticalLayOut 태그를 이용해서 원하는 정렬 방식을 선택할 수 있다.
- <s:Group>
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:Button />
<s:Button />
<s:Button />
<s:Button />
</s:Group>
마찬가지로 VerticalLayout 대신 HorizontalLayout을 넣으면 수평으로 정렬된다.
스크롤바 넣기
기본적으로 Group은 엘리먼트를 넣으면 레이아웃에 따라서 그 크기가 늘어난다. 스크롤바를 넣고 싶다면 Scroller 컴포넌트를 이용해야 한다.
엘리먼트 추가/삭제
이 글은 스프링노트에서 작성되었습니다.
