Ext Gwt[Gxt] 강좌06-BorderLayout을 이용한 화면프레임 구성하기

2011/01/06 - [Gxt , Ext Gwt강좌] - Ext Gwt[Gxt] 강좌05-본격적인 GXT어플리케이션 개발로 들어가자


1. 화면 프레임을 구성해보자 이 화면 프레임은 GxtApp모듈에 구성한다.
    최종 화면은 아래와 같다 . GxtApp는 화면 프레임만 제공하고 GxtApp모듈의
    Center 부분에 GxtSmpl모듈이 자리잡게 된다.

2. 최종 구성된 화면은 동서남북에 패널을 배치하였다. 이런 배치를 BoderLayout이라 부른다.


3. GxtApp.java를 아래와 같이 수정해보자.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89

package com.hansol.gxtapp.client;   import com.extjs.gxt.ui.client.Style.LayoutRegion;   import com.extjs.gxt.ui.client.util.Margins;   import com.extjs.gxt.ui.client.widget.ContentPanel;   import com.extjs.gxt.ui.client.widget.HtmlContainer;   import com.extjs.gxt.ui.client.widget.TabPanel;   import com.extjs.gxt.ui.client.widget.Viewport;   import com.extjs.gxt.ui.client.widget.layout.BorderLayout;   import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;   import com.extjs.gxt.ui.client.widget.layout.FitLayout;   import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;   import com.google.gwt.core.client.EntryPoint;   import com.google.gwt.user.client.ui.RootPanel;       /**   * Entry point classes define <code>onModuleLoad()</code>.   */  public class GxtApp implements EntryPoint {     Viewport viewport = new Viewport(); // 동서남북을 탑재할 viewport     private HtmlContainer northPanel; // Top에 설치할 Html     private ContentPanel centerPanel; // 중간패널     private ContentPanel westPanel;  // 좌측패널     private ContentPanel eastPanel;  // 우측패널     private ContentPanel southPanel; // 최하단패널     public void onModuleLoad() {       viewport.setLayout(new BorderLayout());       createNorth();       createCenter();       setTabitem();       createWest();       createEast();       createSouth();       RootPanel rootPanel = RootPanel.get();       rootPanel.add(viewport);     }     private void setTabitem() {       TabPanel tabPanel = new TabPanel();       tabPanel.setCloseContextMenu(true);       tabPanel.setBorderStyle(false);       tabPanel.setBodyBorder(false);       tabPanel.setTabScroll(true);       tabPanel.setAnimScroll(true);       centerPanel.add(tabPanel);     }     private void createSouth() {       BorderLayoutData data = new BorderLayoutData(LayoutRegion.SOUTH, 220,150, 320);       data.setMargins(new Margins(5, 5, 5, 5));       data.setCollapsible(true);       southPanel = new ContentPanel();       ToolBar toolBar = new ToolBar();       southPanel.setTopComponent(toolBar);       viewport.add(southPanel, data);     }     private void createNorth() {       StringBuffer sb = new StringBuffer();       sb.append("<b>Ext GWT Demo</b>");       northPanel = new HtmlContainer(sb.toString());       BorderLayoutData data = new BorderLayoutData(LayoutRegion.NORTH, 33);       data.setMargins(new Margins());       viewport.add(northPanel, data);     }     private void createCenter() {       centerPanel = new ContentPanel();       centerPanel.setBorders(false);       centerPanel.setHeaderVisible(false);       centerPanel.setLayout(new FitLayout());       BorderLayoutData data = new BorderLayoutData(LayoutRegion.CENTER);       data.setMargins(new Margins(5, 5, 5, 0));       viewport.add(centerPanel, data);     }     private void createWest() {       BorderLayoutData data = new BorderLayoutData(LayoutRegion.WEST,220,150, 320);       data.setMargins(new Margins(5, 5, 5, 5));       data.setCollapsible(true);       westPanel = new ContentPanel();       ToolBar toolBar = new ToolBar();       westPanel.setTopComponent(toolBar);       viewport.add(westPanel, data);     }     private void createEast() {       BorderLayoutData data = new BorderLayoutData(LayoutRegion.EAST, 220, 150, 320);       data.setMargins(new Margins(5, 5, 5, 5));       data.setCollapsible(true);       eastPanel = new ContentPanel();       ToolBar toolBar = new ToolBar();       eastPanel.setTopComponent(toolBar);       viewport.add(eastPanel, data);     }   }

4. 이제 중간 Center패널에 TabPanel을 추가하고 GxtSmpl에서 생성할 UI를 탑재할 수 있도록
    함수를 정의하자.

?

1 2 3 4 5 6 7 8 9 10

private void setTabitem(){     TabPanel tabPanel = new TabPanel();     tabPanel.setCloseContextMenu(true);     tabPanel.setBorderStyle(false);     tabPanel.setBodyBorder(false);     tabPanel.setTabScroll(true);     tabPanel.setAnimScroll(true);     // 중간패널에 추가하도록 하자.     centerPanel.add(tabPanel);   }

5. [4]에서 추가한 함수가 실행될 수 있도록 onModuleLoad함수내 createSouth()함수 밑에 추가하도록 하자. 이로서 화면 프레임을 모두 완성했다. 우리는 상단과 중간패널만 사용할 것이지만 BorderLayout을 설명하기 위해 동서남 패널을 생성해 보았다. 이제는 GxtSmpl모듈을 통해 UI를 생성하고 이 화면 중간에 탑재해보도록 하자.

2011/01/06 - [Gxt , Ext Gwt강좌] - Ext Gwt[Gxt] 강좌07-GxtSmpl모듈 개발하기