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

  1. 2011.01.17 Ext Gwt(Gxt) RIA어플리케이션 개발(5번째) 2
GXT RIA App 만들기2011. 1. 17. 23:56

Ext Gwt(Gxt) RIA어플리케이션 개발(5번째)

오늘은 이전 강좌에 이어 프로그램의 뼈대를 완성해 보자


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하자.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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에 추가하고 있다.
?
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
/**
 * 상단 영역 구성하기
 */
private void createNorth() {
    StringBuffer sb = new StringBuffer();
    sb.append("");
    sb.append("");
    sb.append("");
    sb.append("<table border="\"0\"" cellspacing="\"0\"" cellpadding="\"0\"" width="\"100%\""><tbody><tr><td>상단 영역</td></tr></tbody></table>");    
    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()함수에서 실행 하도록 코딩하자.
?
1
2
3
4
5
6
7
8
9
10
11
12
@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을 클릭 한다. 주소를 카피해서 브라우저에 실행 한다.
▶ 실행된 모습이다. 우리가 원했던 형태로 잘 구성된 것을 확인 할 수 있다.
저작자표시 비영리 변경금지

'GXT RIA App 만들기' 카테고리의 다른 글

Ext Gwt(Gxt) RIA어플리케이션 개발(7번째)  (5) 2011.01.20
Ext Gwt(Gxt) RIA어플리케이션 개발(6번째)  (1) 2011.01.18
Ext Gwt(Gxt) RIA어플리케이션 개발(4번째)  (2) 2011.01.15
Ext Gwt(Gxt) RIA어플리케이션 개발(3번째)  (0) 2011.01.13
Ext Gwt(Gxt) RIA어플리케이션 개발(2번째)  (3) 2011.01.11
Posted by 베니94

티스토리툴바