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를 아래와 같이 수정해보자.

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

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