본문 바로가기

WEB_Programming/GWT

GWT 냉큼 실행하기 > 출처 Google 사이트


Installing Google Web Toolkit

Eclipse 에설치하기

이클립스 IDE를 이용하고자 한다면, Google Plugin for Eclipse를 이용하면 된다. 설치이후에 이클립스를 재실행하면 new GWT application을 생성할 수 있다.

Eclipse 없이 설치하기

  1. Java SDK를 우선 설치한다.

    맥 사용자 :  GWT는 32bit SWT 바인딩을 이용하여 호스팅된다. 그리고 32비트 JVM이 필요하다. OS X 10.5(Leopard)에서 호스되게 할려면 Java 5를, 64비트 JVM을 이용하는 Leopard에서는 Java 6을 이용해야한다. OS X 1.6 (Snow Leopard) 32비트, 64비트 버젼의 Java 6를 포함하고 있다. 자바 런타임을 실행할때 -d32를 포함해서 실행해야 강제적으로 32비트 실행을 구현할수 있다. 32비트 요구사항에 대해서 더 많은 정보를 원한다면 FAQ를 참조하면 된다.

  2. Apache Ant가 없다면 설치하자. Apache Ant.
  3. Google Web Toolkit을 다운로드 하고 압축을 푼다
    윈도우에서는 WinZip를 이용하여 gwt-windows-1.7.1.zip (or use a program like WinZip) 압축을 풀고, Mac이나 Linux에서는 다음 커맨드를 실행하면 된다.
    tar zxvf gwt-mac-1.7.1.tar.gz

    GWT는 인스톨 프로그램이 없다. 모든 파일은 압축이 풀린 디렉토리에 있는 GWT를 이용할 수 있다. GWT를 이용하기 위한 주요 애플리케이션이 있는데 이것이 webAppCreator이다. 아래에 설명되어 잇다. 이것을 이용하면 아마도 GWT를 내장한 간단한 샘플 애플리케이션을 쉽게 빌딩할 수 있다.

    샘플 애플리케이션 빌딩하기

    모든 샘플 애플리케이션은 sample/ 디렉토리에 있다. 각 샘플은 Ant 빌드의 build.xml 스크립트를 실행해서 빌드할수 있다. 또한 web mode에서 실행할 수 있도록 자바스크립트와 HTML 에 컴파일해 넣을수 있고,  hosted mode로 실행할 수 있다.

    HOST 모드로 실행하기

    Mail 샘플을 hosted mode로 실행해보자.samples/Mail/ 디렉토리에 찾아가서 다음과 같이 실행한다.:

    ant hosted

    이것을 실행하면 samples/Mail/build.xml에 지정된 host 대상에 호스트된다. 그러면 GWT브라우저에 메일 애플리케이션이 실행된다.

    Screenshot

    hosted 모드로 실행하는경우 애플리케이션은 JVM에서 수행된다. 이것은 애플리케이션을 디버깅할수 있는 일반적인 방법이다.

    웹 모드로 실행하기

    web mode로 실행하려면 애플리케이션을 다음과 같이 실행하여 컴파일 하면된다.

    ant build

    빌드 모드의 타겟을 JavaScript와 HTML 파일 생성 모드로 GWT를 컴파일하게되면 samples/Mail/war 디렉토리에 소스코드가 풀리게 된다. 그럼 samples/Mail/war/Mail.html 파일을 선호하는 브라우저를 통해서 확인할 수 있다.

    Screenshot

    컴파일을 하고나면 이제 순수 자바스크립트와 HTML이 인터텟 익스플로러나 파폭, 사파리, 오페라에서 동작할 것이다. 만약 실제 배포를 하고자 한다면 웹서버에 samples/Mail/war/ 디렉토리를 설치하기 바란다.

    조금 변경을 가해보기

    Mail을 위한 소스코드는 samples/Mail/src/ 의 하위디렉토리에 있다. 브라우저를 닫고 다음 파일을 열어보자. samples/Mail/src/com/google/gwt/sample/mail/client/Shortcuts.java. Line 54 를 다음과 같은 소스를 찾는다.

    add(images, new Mailboxes(images), images.mailgroup(), "Mail");

    "Mail" 을 "My Mail" 로 고친다.

    add(images, new Mailboxes(images), images.mailgroup(), "My Mail");

    이제 저장하고 그냥 호스트 모드로 설정된 애플리케이션 상에허 새로고침을 눌러보면 변화된 내용을 볼 수 있을 것이다. 만약 이전에 호스트 모드를 닫았다면 다시 호스트 모드로 돌리면 된다. 첫번째 탭이 My Mall로 바뀐것을 알수 잇다.

    Screenshot

    Scratch로 애플리케이션 생성하기
    (이클립스 사용 없이)

    GWT는 webAppCreator이라고 불리는 커맨드라인 유틸리티를 제공하고 이것을 이용하여 GWT프로젝트를 시작할 수 있다. Eclipse 프로젝트 파일은 쉽게 호스트 모드를 이용하여 실행되고 있는 상에서 수정을 할수 있다

    MyApplication 이름의 새로운 애플리케이션을 다음 커맨드 명령으로 생성할 수 있다.

    webAppCreator -out MyApplication com.mycompany.MyApplication

    webAppCreator은 몇가지 파일을 MyApplication/ 디렉토리에 생성한다. 이 클래스 파일 내부에 다음과 같은기본적인 클래스를 포함한 소스 파일을 포함하고 있다.
    MyApplication/src/com/mycompany/client/MyApplication.java. 그리고 MyApplication/build.xml를 이용하여 스크립트 코드를 생성할 수 있다. 상단에 정의된 sample application처럼 말이다.

    이제 새로 생성한 애플리케이션을 호스트 모드로 실행해보자
    MyApplication/ 에서 다음과 같이 실행하자.

    ant hosted

    Screenshot

    MyApplication/src/com/mycompany/client/MyApplication.java 을 수정하고 and MyApplication/war/MyApplication.html 애플리케이션이 어떻게 바뀌는지 확인해보자.

    Scratch로 애플리케이션 생성하기
    (이클립스 사용)

    플러그인 이용하기

    Google Plugin for Eclipse 는 GWT 애플리케이션을 위한 위자드를 포함하고 있다. 플러그인을 실행하고 이클립스를 실행하고 다음 순서대로 수행해보자.

    1. In the toolbar, click the New Web Application Project button icon.
    2. Fill out the project details:
      1. Enter the project name "MyApplication".
      2. Enter the package "com.mycompany".
      3. Make sure Use Google Web Toolkit is checked and that Use default SDK (GWT) is selected.
      4. (Optional) If you are using Google App Engine, make sure Use Google App Engine is checked and that Use default SDK (App Engine) is selected.
      5. If you did not install the SDKs when you installed the Google Plugin for Eclipse, you should click Configure SDKs... to specify the directory where GWT (and the App Engine SDK) was unzipped.
    3. Click the Finish button.

    플러그인 없이 이용하기

    이클립스 플러그인을 이용하여 개발하지 않으려 한다면 webAppCreator을 이용하여 프로젝트를 생성하고 생성하고 임포트 하면 된다. 

    1. From the File menu, select the Import... menu option.
    2. Select the import source General > Existing Projects into Workspace. Click the Next button.
    3. For the root directory, browse to and select the MyApplication directory created by webAppCreator. Click the Finish button.

    GWT 프로젝트를 이클립스 워크스페이스에 로드해서 확인해보자.

    Screenshot

    녹색 Run 버튼을 클릭하면 호스트 모드로 프로젝트가 실행된다.