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

▶ RiaApp.java를 아래와 같이 정리한다.

▶ war 밑에 위치한 RiaApp.html을 아래와 같이 정리한다.


▶ RiaApp.gwt.xml파일을 아래와 같이 정리한다.


▶ 이제 gxt기능을 사용하기 위한 라이브러리를 등록하자. gxt.jar파일을 그림과 같이 lib폴더에 복사하고 Build Path를 잡아주자.





▶ 이번 강좌에서 필요한 클래스는 3가지 클래스가 필요하다.

AppEvents.java	EventType클래스를 이용해 이벤트를 정의 한다.
AppController.java	Controller 클래스를 상속받아 AppView가 실행될 수 있도록 돕는다.  Controller 클래스는 MVC모델의 C에 해당된다고 생각하면 되겠다.
AppView.java	View클래스를 상속받아 화면에 보여질 UI구성요소 등을 정의한다.  MVC모델의 V에 해당되겠다.

▶ 일단 AppEvents.java에 이벤트를 정의 하자. 이름에서 대강의 쓰임새를 알 수 있을 것이다. 이렇게 이벤트를 정의하여
    Controller나 View에서 사용할 수 있는 것이다.

package com.gxt.riaapp.client;
import com.extjs.gxt.ui.client.event.EventType;
public class AppEvents {
    public static final EventType Init = new EventType();
    public static final EventType ShowPage = new EventType();
    public static final EventType HidePage = new EventType();
    public static final EventType TabChange = new EventType();
    public static final EventType ChartLoading = new EventType();
    public static final EventType Login = new EventType();
    public static final EventType Error = new EventType();
}

▶ 이번에는 우리가 만들 어플리케이션의 뼈대를 구성할 View 클래스를 생성해 보자. 아래 클래스는 View클래스를
    상속 받고 최소한의 생성자와 handleEvent() 메소드만 정의 되어 있다. 여기에 살을 붙여 기본 틀을 구성하게 된다.

package com.gxt.riaapp.client.mvc;

import com.extjs.gxt.ui.client.mvc.AppEvent;
import com.extjs.gxt.ui.client.mvc.Controller;
import com.extjs.gxt.ui.client.mvc.View;

public class AppView extends View {
    public AppView(Controller controller) {
        super(controller);
    }
    @Override
    protected void handleEvent(AppEvent event) {
    }
}

▶ 다음은 위의 두개의 클래스를 통제할 Controller클래스를 생성한다. 이 클래스는 최초의 Init이벤트가 호출될 시 AppView로
    이동하여 기본 화면 틀을 보이도록 제어하는 역할을 하게 된다.

package com.gxt.riaapp.client.mvc;

import com.extjs.gxt.ui.client.mvc.AppEvent;
import com.extjs.gxt.ui.client.mvc.Controller;
import com.gxt.riaapp.client.AppEvents;

public class AppController extends Controller {
    private AppView appView;
    public AppController() {
        appView = new AppView(this);
        registerEventTypes(AppEvents.Init); // 등록과 동시에 handleEvent메소드 호출
    }
    @Override
    public void handleEvent(AppEvent event) {
        if (event.getType() == AppEvents.Init) { // 호출시 전달된 이벤트가 Init라면 
            forwardToView(appView, event);
        }
    }
}

▶ 이제 위에서 생성한 Controller를 RiaApp클래스에 탑재 해 보도록 하자. 아래 소스에서 주목할 부분은 Dispatcher 클래스에
    Controller를 추가하고 이벤트를 전달하여 Dispatcher내의 여러 Controller들이 움직이도록 하는데 있다.

package com.gxt.riaapp.client;

import com.extjs.gxt.ui.client.mvc.Dispatcher;
import com.google.gwt.core.client.EntryPoint;
import com.gxt.riaapp.client.mvc.AppController;

/**
 * Entry point classes define onModuleLoad().
 */
public class RiaApp implements EntryPoint {
	private Dispatcher dispatcher;
	public void onModuleLoad() {
		dispatcher = Dispatcher.get();
	    dispatcher.addController(new AppController());
	    dispatcher.dispatch(AppEvents.Init);
	}
}