GWT #
Find similar titles

Structured data

Category: Programming

GWT(Google Web Toolkit)이란?
Eclipse GWT 플러그인 설치
Eclipse GWT 프로젝트 생성

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 : 선택 해제

GWT 프로젝트 생성

프로젝트 생성창의 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 이란 폴더가 새로 생성되어 있다.

웹 페이지에 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 코드가 추가된 결과를 확인할 수 있다.

GXT Module 추가

마우스 이벤트는 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 들은 자동으로 마우스, 키보드 이벤트를 인식할 수 있으며, 이벤트 핸들러의 추가만으로 동적 이벤트 처리에 의한 보다 효율적인 웹 어플리케이션을 손쉽게 구현할 수 있다.