'GXT강좌'에 해당되는 글 1건

  1. 2011.01.17 Ext Gwt(Gxt) RIA어플리케이션 개발(5번째) 2
GXT RIA App 만들기2011. 1. 17. 23:56
오늘은 이전 강좌에 이어 프로그램의 뼈대를 완성해 보자


AppView.java를 마져 수정하자. AppView클래스는 아래와 같이 크게 4개의 변수가 사용된다.

  1. northPanel     : 상단 구성에 사용 될 객체로 Html로 구성할 것이므로 HtmlContainer를 사용하도록 한다.
  2. westPanel     : 좌측 메뉴영역으로 ContentPanel클래스를 사용하도록 하자. ContentPanel은 다양한 컴포넌트를 탑재할 수 있는 클래스로 앞으로도 많이 사용될 것이다.
  3. contentPanel : 중간 프로그램 영역으로 좌측과 동일하게 ContentPanel클래스를 사용하도록 하자
  4. viewport       : 위의 1~3의 영역을 올려 놓을 객체로 Viewport클래스를 사용한다. Viewport클래스는 Layout에 따라 컴포넌트를 탑재할 수 클래스이다.

▶ AppView.java를 수정하자. 좌,우,상단의 변수를 설정하자. 또한 initialize()함수를 통해 각 영역을 탑재할 viewport를 생성한다. viewport가 화면에 보여지기 위해선 RootPanel에 viewport를 add하자.
 public static final String CENTER_PANEL = "centerPanel";
public static final String WEST_PANEL = "westPanel";
public static final String NORTH_PANEL = "northPanel";
public static final String VIEWPORT = "viewPort";
private Viewport 		viewport; 	// 상단, 좌측, 중간의 3부분을 탑재 할 viewportt
private HtmlContainer 	northPanel;	// 상단영역
private ContentPanel 	westPanel;	// 좌측 메뉴영역
private ContentPanel 	centerPanel;// 중간 프로그램영역

@Override
protected void initialize() {
    super.initialize();
    viewport = new Viewport();
    viewport.setLayout(new BorderLayout());

    RootPanel.get().add(viewport);
}
▶ 이제 각각의 영역을 생성할 메소드를 코딩해 보자. 아래 메소드들은 각각의 영역에 맞게 HtmlContainer, ContentPanel등을 생성하여 viewport에 추가하고 있다.
/**
 * 상단 영역 구성하기
 */
private void createNorth() {
    StringBuffer sb = new StringBuffer();
    sb.append("");
    sb.append("");
    sb.append("");
    sb.append("
상단 영역
"); northPanel = new HtmlContainer(sb.toString()); BorderLayoutData data = new BorderLayoutData(LayoutRegion.NORTH, 75); data.setMargins(new Margins(0,0,0,0)); viewport.add(northPanel, 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 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); }

▶ 위에서 만든 메소드를 initialize()함수에서 실행 하도록 코딩하자.
	@Override
	protected void initialize() {
		super.initialize();
		viewport = new Viewport();
		viewport.setLayout(new BorderLayout());
		
		createNorth();
		createWest();
		createCenter();
		
		RootPanel.get().add(viewport);
	}
▶ 이제 실행해서 결과물을 확인해 보도록 하자. RiaApp.gwt.xml파일에서 마우스 우측 클릭하고 Run As -> Web Application을 클릭 한다. 주소를 카피해서 브라우저에 실행 한다.
▶ 실행된 모습이다. 우리가 원했던 형태로 잘 구성된 것을 확인 할 수 있다.
Posted by 베니94