Benney Blog

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

▶ 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을 클릭 한다. 주소를 카피해서 브라우저에 실행 한다.
▶ 실행된 모습이다. 우리가 원했던 형태로 잘 구성된 것을 확인 할 수 있다.