GWT
#
Find similar titles
- 최초 작성자
- 최근 업데이트
Structured data
- Category
- Programming
Table of Contents
GWT(Google Web Toolkit)이란? #
구글 웹 툴킷(Google Web Toolkit, GWT)은 자바 어플리케이션 개발자들에게 웹 어플리케이션 개발을 하는 데 복잡하고 이해하기 어려운 웹 표준을 준수한 자바스크립트 함수를 자동으로 생성하고, RPC(Remote Procedure Call) 통신을 이용한 서버통신으로 실시간 동기화 작업을 통한 다이나믹 한 RIA(Rich Internet Application) 구현을 지원할 수 있는 구글에서 제공하는 오픈 프레임워크이다.
- 자바스크립트 컴파일러에 의해 자바코드로 구현한 어플리케이션이 자동으로 자바스크립트로 변환된다.
- GWT의 위젯 클래스의 구현으로 자동으로 HTML5 기반의 DOM 객체로 변환된다.
- HTML5 웹 표준을 기반으로 컴파일 되기 때문에 GWT 기반 웹 어플리케이션은 Safari, FireFox, Internet Explorer, Chrome, Opera 등의 주요 웹 브라우저에서 동일한 인터페이스로 표현이 가능하다.
Eclipse GWT 플러그인 설치 #
-
이클립스 사이트(http://www.eclipse.org/downloads/)에서 최신 버전의 이클립스다운 받는다.(2014년 현재 가장 최신 버전은 Eclipse Kepler(4.3)이다.)
-
이클립스 실행 후 Help > Install New Software... 메뉴에서 이클립스 플러그인 제공 URL을 추가한다.
-
추가된 주소에서 Google Plugin for Ecipse 를 선택하고 하단의 Next 버튼을 클릭해 설치를 계속 진행을 완료 한 후 이클립스를 재실행하면 플러그인 설치가 끝난다.
Eclipse GWT 프로젝트 생성 #
-
GWT 플러그인 설치가 완료된 후 Eclispe 상단 툴바에 추가된 GWT 아이콘을 클릭한 후 New Web Application Project.. 를 선택한다.
-
마우스 이벤트에 의한 간단한 그래픽 처리 예제를 실행할 수 있는 프로젝트 정보를 다음과 같이 입력한다.
- Project name : example
- Package : example
- Use google web toolkit : GWT - 2.6.0
- Use google app engine : 선택 해제
- Generate project sample code : 선택 해제
-
프로젝트 생성창의 Finish 버튼을 눌러 생성을 완료시킨 후 Sencha(http://www.sencha.com/products/gxt/download/)에서 GPL 버전으로 제공하는 Gxt 3.1.0 프레임워크를 다운받아 프로젝트 폴더의 war/WEB-INF/lib 에 gxt-3.1.0.jar, gxt-char-3.1.0.jar 라이브러리 2개를 추가한다.
-
추가된 gxt 라이브러리는 프로젝트 속성창을 통해 Java Build Path 설정에서 추가시킨다.
GWT 모듈 생성 #
-
Package Explorer에서 프로젝트를 선택한 후 팝업 메뉴를 통해 GWT Module을 추가하기 위해 New 를 선택해 GWT Module 생성창을 열어 다음과 같이 입력 후 Finish 버튼을 클릭해 모듈을 추가한다.
-
Example.gwt.xml 모듈 엑셀파일을 열어 GXT 모듈 추가를 위해 다음과 같이 설정을 변경한다.
<module rename-to="example"> # 모듈 이름 변경
<inherits name="com.google.gwt.user.User" />
<inherits name="com.sencha.gxt.ui.GXT" /> # 모듈 추가
<inherits name="com.sencha.gxt.chart.Chart" /> # 모듈 추가
<source path="client"/>
</module>
- 모듈을 추가한 방법과 동일하게 모듈에서 사용할 GWT Entry Point 클래스를 다음과 같이 생성한다.
Entry Point 클래스가 생성되면 Example.gwt.xml 파일에 자동으로 클래스 선언 내용이 다음과 같이 추가된다.
<module rename-to="example">
<inherits name="com.google.gwt.user.User" />
<inherits name="com.sencha.gxt.ui.GXT" />
<inherits name="com.sencha.gxt.chart.Chart" />
<source path="client" />
<entry-point class="example.client.Example"></entry-point>
</module>
- GWT 자바스크립트 컴파일
- 프로젝트 선택 후 팝업메뉴에서 Google을 선택한 후 Google Compile을 실행한다.
- 컴파일이 완료 된 후 프로젝트 폴더를 확인하면 war 폴더에 example 이란 폴더가 새로 생성되어 있다.
- 프로젝트 선택 후 팝업메뉴에서 Google을 선택한 후 Google Compile을 실행한다.
웹 페이지에 GWT 모듈 적용시키기 #
-
war 폴더에 index.html 파일을 추가한다.
-
추가된 index.html 파일에 컴파일된 GWT 모듈을 추가하기 위해 다음과 같이 HTML 헤더에 태그를 추가시킨다.
<head>
<meta charset="EUC-KR">
<link rel="stylesheet" type="text/css" href="example/reset.css" />
<script type="text/javascript" language="javascript"
src="example/example.nocache.js"></script>
<title>Insert title here</title>
</head>
- Project Exlorer의 프로젝트를 선택한 후 팝업메뉴에서 Run As 의 Web Application을 선택하면 Development Mode 뷰의 Web Application 실행 주소를 통해 실행결과를 웹 브라우저를 통해 확인할 수 있다.
마우스 이벤트 처리 소스 구현 #
-
index.html 파일의 body 안에 다음의 HTML 소스를 추가한다.
-
Example 클래스를 열어 onMoudleLoad 메소드에 다음의 코드를 입력한다.
VerticalLayoutContainer vLayout = new VerticalLayoutContainer();
vLayout.setHeight(150);
Label label = new Label("Hello! GWT~");
vLayout.add(label);
RootPanel.get("section-04").add(vLayout);
위의 코드를 입력한 후 Web Application 을 재실행하고 웹 브라우저로 확인하면 테이블의 마지막 칸에 GWT 코드가 추가된 결과를 확인할 수 있다.
- 마우스 이벤트는 GWT UI 위젯 대부분에서 인식할 수 있다. 여기에선 HTML5에서 새롭게 추가된 canvas 요소를 이용해 마우스 이동 이벤트를 인식하는 것을 간략하게 확인해보겠다.
위에서 작업한 예제코드를 다음과 같이 수정한다.
VerticalLayoutContainer vLayout = new VerticalLayoutContainer();
final DrawComponent canvas = new DrawComponent();
canvas.setHeight(150);
vLayout.add(canvas, new VerticalLayoutData(1, 1));
final Label label = new Label();
vLayout.add(label, new VerticalLayoutData(1, 30));
RootPanel.get("section-04").add(vLayout);
GXT의 DrawComponent 클래스를 컴파일하면 canvas 로 변환이 된다.
- cavans에 마우스 이벤트 핸들러를 추가한다.
canvas.addDomHandler(new MouseMoveHandler() {
@Override
public void onMouseMove(MouseMoveEvent event) {
int x = event.getRelativeX(event.getRelativeElement());
int y = event.getRelativeY(event.getRelativeElement());
label.setText("position = (" + x + ", " + y + ")");
}
}, MouseMoveEvent.getType());
- 웹 브라우져에서 수정된 화면을 확인하면 다음과 같이 상단 canvas 영역과 하단 Label canvas 위에 마우스가 이동할 때의 위치 정보가 동적으로 변경되는 것을 확인할 수 있다.
Mouse 이벤트는 OnMouseDown, OnMouseOver, OnMouseDown, OnMouseUp 등이 있으며, DrawComponent 클래스와 같은 GWT에서 지원하는 UI Widget 들은 자동으로 마우스, 키보드 이벤트를 인식할 수 있으며, 이벤트 핸들러의 추가만으로 동적 이벤트 처리에 의한 보다 효율적인 웹 어플리케이션을 손쉽게 구현할 수 있다.