넷빈(NetBeans)6.9에서 Google Web Toolkit 사용하기 02 - 소스 구조 살펴보기

0

Written on 오후 10:55 by 강여사(J.Y.Kang)

앞서 게시물에 이어 기본으로 만들어진 GWT 어플리케이션의 소스 구조에 대해 살펴보도록 하겠습니다.

일단..

Main.gwt.xml : 프로젝트 모듈 파일로, 프로젝트 루트 패키지에 있습니다. GWT 프로젝트의 필수 어플리케이션 구성이 들어있죠.
기본 내용은 다음과 같습니다.
=================================================
<?xml version="1.0" encoding="UTF-8"?>
<module>
<inherits name="com.google.gwt.user.User"/>
<entry-point class="org.yournamehere.client.MainEntryPoint"/>
<!-- Do not define servlets here, use web.xml -->
</module>
=================================================
inherits: 이 모듈이 상속받은 모듈, 여기서는 GWT 프레임워크에 내장된 User 모듈을 제공받고 있습니다. 이러한 모듈 상속은 프로젝트가 복잡해질수록 더욱 재사용성이 좋죠.
entry-point: 모듈이 로드될 떄 GWT프레임워크에 의해 초기화되는 클래스 참조 (보다 자세한 내용은 http://code.google.com/webtoolkit/doc/1.6/DevGuideOrganizingProjects.html#DevGuideModuleXml 참고 )

이번엔 MainEntryPoint.java : 어플리케이션의 메인 엔트리 포인트로 , Main.gwt.xml 에 지정됩니다. EntryPoing 클래스를 상속받아, GWT 모듈이 프레임워크에 의해 로드될 때, 이 클래스가 초기화되고, onModuleLoad() 메소드가 자동으로 호출됩니다.
기본 내용은 다음과 같습니다.
=================================================
package org.yournamehere.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

public class MainEntryPoint implements EntryPoint {

/** Creates a new instance of MainEntryPoint */
public MainEntryPoint() {
}

/**
The entry point method, called automatically by loading a module
that declares an implementing class as an entry-point
*/
public void onModuleLoad() {
final Label label = new Label("Hello, GWT!!!");
final Button button = new Button("Click me!");

button.addClickListener(new ClickListener(){
public void onClick(Widget w) {
label.setVisible(!label.isVisible());
}
});

RootPanel.get().add(button);
RootPanel.get().add(label);
}

}
=================================================
넷빈이 제공하는 기본 샘플에는 onModuleLoad() 메소드에 다음 2개의 컴포넌트가 추가되어 있습니다.
Label: GWT 라벨이 만들어지고, 'Hello, GWT!!' 라고 표시됩니다. 이 라벨은 RootPanel 에서 추가됩니다. RootPanel.get().add(label).
Button: GWT 버튼이 만들어지고, 역시 'Click me!' 라고 문자가 표시됩니다. 이 버튼에는 버튼 리스너가 동작하는데 ClickListner 에 의해 구현되어 있습니다. 아래 소스처럼 버튼 클릭시 라벨이 숨겨지는 동작을 처리하도록 되어 있습니다. 버튼 역시 RootPanel 에서 추가되었습니다.
================================================
public void onClick(Widget w) {
label.setVisible(!label.isVisible());
}
================================================

이번에는 welcomeGWT.html 입니다 : 자동생성된 HTML 호스트 페이지는 어플리케이션의 welcome 페이지로 설계되어 있습니다. 당연 web.xml 에 해당 파일이 welcome-file 엘리먼트에 지정되어 있겠구요.
이 호스트 페이지는 자바스크립트 소스 코드를 참조하고 어플리케이션의 스타일 시트를 참조할 수 있습니다.
기본 내용은 다음과 같습니다.
================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name='gwt:module' content='org.yournamehere.Main=org.yournamehere.Main'>
<title>Main</title>
</head>
<body>
<script language="javascript" src="org.yournamehere.Main/org.yournamehere.Main.nocache.js"></script>
</body>
</html>
================================================
meta : 어플리케이션 프로젝트 경로를, 이 태그가 HTML 페이지와 어플리케이션 간의 링크를 제공합니다.
script: GWT 프레임워크의 자바스크립트 파일로부터 코드 임포트(불러오기). 이 파일은 GWT 프레임워크를 부트스트립하는데 필수 코드를 포함하고 있습니다. 프로젝트 모듈안의 구성을 사용하여 동적으로 어플리케이션을 나타내는 엔트리 포인트를 컴파일하여 만든 자바 스크립트를 로드하게 됩니다.
따라서 어플리케이션이 호스트된 모드로 실행되거나 어플리케이션을 컴파일 할때, GWT 프레임워크에 의해서 자바스크립트 파일이 자동생성됩니다.

이상이 간단하게나마 살펴본 GWT 조사내용입니다.

이제 다음 예제에서는 여기서 AJAX random 글을 표시하는 어플리케이션을 붙여보도록 하겠습니다.

to be continued...

If you enjoyed this post Subscribe to our feed


No Comment

댓글 쓰기