원문(영어) : http://mygwt.net/learn/index.php?title=Tutorial:MyGWT_101
본 글은 위 원문의 직역이 아닌, 국내 개발자가 이해하기 쉽도록 의역한 글입니다.
Viewport
Viewport는 브라우져상의 화면 표시영역을 의미하며, 대부분의 어플리케이션에서 'root' 컨테이너로 사용된다.
사용자에 의해 브라우져의 크기가 바뀔 경우 Viewport는 'root' 컨테이너의 크기를 자동으로(0.4초 딜레이 간격) 브라우져의 변경된 크기에 맞게 조절한다.
Viewport를 사용할 경우 HTML Body의 스크롤 바는 생성되지 않으며, Viewport내에 추가한 Widget의 크기가 스크롤을 필요로 할 경우에만 스크롤 바가 생성된다.
Viewport는 일반적으로 'desktop'과 유사한 어플리케이션을 구현할 때 사용한다.
Layout
아마 MyGWT를 가지고 작업하는데 가장 어려운 부분이라면 바로 Layout일 것이다.
MyGWT에서는 전통적인 어플리케이션 Layout 구현 방법과는 다소 다른 형식으로 Layout을 사용하게 된다.
Layout에 대해 더 많은 정보를 알고자 한다면 'Containers and Layout' 튜토리얼을 참고하도록 한다.
간략한 Layout에 대한 이해를 위해, 아래의 어플리케이션 조각을 살펴보자. 이 어플리케이션은 BorderLayout을 사용한다.
참고로 BorderLayout은 5개의 서로다른 위치(NORTH, SOUTH, EAST, WEST, CENTER)에 Widget들을 배치하도록 도와주는 Layout이다.
여기에서의 BorderLayout은 WEST와 CENTER 위치값을 사용한다. MyGWT에서 지원하는 대부분의 Layout들은 LayoutData를 가진다.
LayoutData는 컨테이너 안의 각 Widget의 배치정보를 설정하는데 사용된다.
1. // Viewport를 생성한 뒤 BorderLayout을 지정한다.
2. Viewport viewport = new Viewport();
3. viewport.setLayout(new BorderLayout());
4.
5. // WEST 위치에 가로, 세로가 각각 100, 75이고 초대 가로크기가 150인 BorderLayoutData를 생성한다.
7. BorderLayoutData data = new BorderLayoutData(Style.WEST, 100, 75, 150);
8.
9. // 1번째 자식 컨텐츠 Widget을 생성하고 앞서 정의한 LayoutData와 함께 Viewport에 추가한다.
10. ContentPanel west = new ContentPanel(Style.HEADER);
11. west.setText("West");
12. viewport.add(west, data);
13.
14. // 2번째 자식 컨텐츠 Widget을 생성한다.
15. ContentPanel center = new ContentPanel(Style.HEADER);
16. center.setText("Center");
17.
18. // CENTER 위치치정은 나머지 영역을 모두 차지하므로 가로, 세로 크기 지정은 필요없다.
19. viewport.add(center, new BorderLayoutData(Style.CENTER));
20. viewport.layout();
Layout 메소드
Google GWT에서의 Panel과는 다르게, MyGWT는 컨테이너에 Widget을 추가할 때 바로 표시하지 않고 컨테이너의 DOM에 추가한다.
그리고 컨테이너에 추가된 Widget을 실제 표시하는 일은 Layout이 담당한다. 이점은 MyGWT를 이해하기 위한 아주 중요한 개념이다.
이제, 위에서 생성한 ContentPanel에 TabFolder를 추가하도록 한다. 이를 위해 2가지 작업을 해줘야 할 필요가 있다.
첫째, Widget을 생성하고 추가한다.
1. TabFolder tabFolder = new TabFolder(Style.NONE);
2. center.add(tabFolder);
둘째, ContentPanel에게 추가된 Widget의 배치를 담당할 Layout을 지정해준다.
Layout을 지정하지 않으며, 컨테이너는 일반적인 HTML 흐름에 준해 자식 Widget을 표시하게 된다.
여기서는 ContentPanel의 전체영역에 TabFolder를 배치하기 위해 FillLayout을 사용하도록 한다.
1. center.setLayout(new FillLayout());
Cascading Layouts
Viewport를 통해 작업하는 경우, ContentPanel은 자신의 Layout이 수행되기 전까지는 자식 TabFolder를 표시하지 않는다.
앞선 예제에서 어플리케이션은 Viewport와 BorderLayout을 사용했다.
BorderLayout이 수행될 때 추가되는 자식 Widget의 크기가 확정되어 표시되게 된다. 위에서 봤던 CENTER 위치에 추가되는 ContentPanel 역시 BorderLayout에 의해 크기가 재조정된다.
부모 layout에 의해 크기가 조정 될 때 자식 ContentPanel의 layout이 자동으로 수행되므로, ContentPanel의 layout을 명시적으로 호출할 필요가 없다.
ContentPanel의 FillLayout이 수행될 때, TabFolder의 크기가 재조정된다. 그리고 TabFolder의 크기가 변경될 때 TabFolder내의 활성 TabItem의 크기도 재조정된다. 이렇듯, 컨테이너의 Layout이 수행될 때 그 자식 컨테이너 및 패널들의 Layout이 재귀적으로 수행된다.
