Joinc Wiki: GWT Example 프로젝트

Facebook Joinc 그룹 Joinc QA 사이트

현재위치 : 미니사이트>Google>Service>GoogleWebToolkit>Example>HelloWorld

joinc는 Firefox와 chrome에서 테스트 했습니다. IE에서는 테이블이 깨지거나 이미지가 보이지 않을 수 있습니다. 특히 구글 Docs이미지의 경우 엑박처리될 수 있습니다.

참고 : http://code.google.com/webtoolkit/documentation/examples

보내는 사람 Google

이글을 읽기전에 먼저 GWT Overview, GWT시작하기, GWT FAQ문서를 읽어보기 바란다.

여기에서는 Hello World의 GWT 버젼을 만들어 보도록 하겠다. 위의 문서들을 읽어 봤다면, 쉽게 이해할 수 있을 것이다.

우선 projectCreator을 이용해서 프로젝트를 생성하도록 한다.

$ ./projectCreator -eclipse HelloWorld 
Created directory ./gwt-linux-1.2.22/HelloWorld/src 
Created directory ./gwt-linux-1.2.22/HelloWorld/test 
Created file ./gwt-linux-1.2.22/HelloWorld/.project 
Created file ./gwt-linux-1.2.22/HelloWorld/.classpath

이제 applicationCreator을 이용해서 GWT응용을 생성한다.

$ ../applicationCreator -eclipse HelloWorld com.joinc.client.HelloWorld 
Created directory ./gwt-linux-1.2.22/HelloWorld/src/com/joinc 
Created directory ./gwt-linux-1.2.22/HelloWorld/src/com/joinc/client

이제 eclipse를 실행시키고 프로젝트를 import 해와서 HelloWorld.java를 수정하면 된다.

package com.joinc.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; 
import com.google.gwt.user.client.Window; 
 
public class HelloWorld implements EntryPoint  
{ 
  public void onModuleLoad() { 
    Button b = new Button("Click me", new ClickListener() { 
      public void onClick(Widget sender) { 
          Window.alert("Hello World!!"); 
      } 
    }); 
    RootPanel.get().add(b); 
  } 
}

코딩이 끝났다면 eclipse의 debug기능을 이용해서 호스트모드에서 성공적으로 작동되는지 확인한다.

호스트모드에서 성공적으로 작동되는걸 확인했다면, 마지막으로 java-to-javascript컴파일러를 이용해서, HTML & Javascript를 생성해내고 웹서버를 통해서 테스트한다.

$ ./HelloWorld-compile 
Output will be written into ./www/com.joinc.HelloWorld 
Copying all files found on public path 
Compilation succeeded

테스트