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

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

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


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

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 onModuleLoad().
 */
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("Ext GWT Demo");
    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를 탑재할 수 있도록
    함수를 정의하자.

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를 생성하고 이 화면 중간에 탑재해보도록 하자.