Layout & Componet

Layout Managers

### 레이아웃 종류

---

1. Absolute Layout
2. Accordion(★)

• Anchor
• Border(★★)
• Card
• Card(TabPanel)
• Column
• Fit
• Table
• Form
• vBox
• hBox

1. Absolute Layout

• type: ‘absolute’
• 컨테이너 안에서 x,y좌표를 이용하여 하위컴포넌트를 배치한다. 거의 사용안됨.

2. Accordion(★)

- type: ‘accordion’
- 하위 컴포넌트가 패널일 경우에만 사용
- 컨테이너 내에서 수직으로 패널을 배치하고, 한번에 한 패널만 확장되도록 한다.

3. Anchor

- type: ‘anchor’
- 하위 컴포넌의 폭과 넓이를 컨테이너의 오른쪽과 아래 테두리 기준으로 표현해준다.
- 이 레이아웃은 폼 항목에 아주 유용하다.

4. Border(★★)

- type: ‘border’
- 가장 보편적인 레이아웃 관리자
- 컨테이너의 north,south,east,west 영역에 하위 컴포넌트를 붙인다.
- region: ‘center’ 모든 하위 컴포넌트 중 가운데 공간 차지하기 위한 옵션
- north,south 하위 컴포넌트는 높이 초기값을 설정해야하고
- east,west 하위 컴포넌트는 폭 초기값을 설정해주어야 한다.

*하위 컴포넌트 환경설정옵션(레이아웃관리자가 가져다 쓰는 하위 컴포넌트 환경설정옵션)
- region: 하위 컴포넌트를 붙이기 위한 영역 설정
- split: true (사이즈 조절기능)
+ 중앙영역이 아닌 나머지 영역에서만 사용
+ true시 하위 컴포넌트는 중앙과 분리시키는 스플릿바와 함께 렌더링되어 사이즈 조절이 가능
+ 마우스에 의한 사이즈 조절은 minWidth/minHeight 와 maxWidth/maxHeight 옵션에 의해 제한
- collapsible: true (접히는 기능)
+ 중앙영역이 아닌 나머지 영역에서만 사용
+ 자식이 패널이라면 접히는 부분이 헤더에 맞춰지도록 렌더링되고 패널(패널만이 헤더를 가지고 있다.)이 아니면 collapseMode: ‘mini’가 사용될 것이다.
- collapseMode: ‘mini’
+ 자식의 스플릿바에 맞춰 접히도록 렌더링한다.
- margins: ‘5 10 5 10’ (top right bottom left)
+ 5pixel이 보기 좋다. 인접해 있는 영역들 중 단 한 영역만이 여백설정해주면 좋다.
- cmargins: ‘5 5 5 5’(top right bottom left)
+ 한 영역이 접혔을 때 사용하기 위한 여백 설정

5. Card Layout(★)

6. Card(TabPanel) Layout(★)

   • type: ‘card’
   • 하위 컴포넌트를 한 벌의 카드처럼 하나의 컴포넌트 아래 다른 컴포넌트를 포갠다.
   • 하위 컴포넌트는 컨테이너의 경계를 넘어가지 않을 만큼 정확하게 사이즈를 맞춘다.
   • 한 번에 하나의 하위 컴포넌트만 보이며, 탭패널(TabPanel)클래스는 한 번에 하나의 탭만 활성화시키기 위해 내부적으로 CardLayout을 사용한다.

7. Column Layout

-type: ‘column’
- 하위 컴포넌트를 가로로 나열한다.
- 비율을 위한 값으로 하위 컴포넌트 환경설정에 columnWidth 옵션을 이용한다.
- 컨테이너 폭보다 넘칠 경우 다음라인으로 내려간다.

8. Fit Layout

- type: ‘fit’
- 단 하나의 하위 컴포넌트만 출력
- 이 레이아웃은 대부분 윈도우 컴포넌트(Window Component)와 함께 사용된다.

9. Table Layout

- type: ‘table’
- 표 형태의 레이아웃으로 하위 컴포넌트를 배치
- <table> 요소를 포함하여 만들어지고, 하위 컴포넌트는 각각의 <td>요소안에 렌더링된다.
- 하위 컴포넌트의 사이즈를 조절할 수 없지만,rowspan,colspan으로 하위 컴포넌트를 위치시킬 수 있다.

10. Form Layout(★)

- type: ‘form’
- 폼 패널(FormPanels)과  필드 셋(FieldSets)에서 사용되는 기본 레이아웃
- AnchorLayout을 확장한 것으로 사이즈 조절기능이 있다.
- 폼 레이아웃의 핵심은 폼 필드 옆의 이름표(Label)까지 렌더링한다는 것이다. 

11. vBox Layout(★)

- type: ‘vbox’
- 하위 컴포넌트를 수평으로 배치
- 환경설정 옵션(flex)을 이용하여 이용가능한 폭을 비율에 맞춰 할당
- 이 레이아웃은 컨테이너 경계선을 넘어가는 하위 컴포넌트가 다음라인으로 옮겨가는 것은 허용하지 않는다.

12. hBox Layout(★)

- type: ‘hbox’
- 한 개의 하위 컴포넌트 아래에 다른 컴포넌트를 배치
- 환경설정 옵션을(flex:1) 통해 얻어진 비율에 맞춰, 이용 가능한 컨테이너 높이를 하위 컴포넌트에 할당한다.