Quick Start

This guide will walk you through creating and deploying your first web application. For more details, please see the User's Guide.

• Installing the plugin
• Creating your first Web Application
• Running your Web Application locally
• Deploying your Web Application

Installing the plugin

If you are already familiar with installing Eclipse plugins, you can just use the update site URL below for your version of Eclipse.

Eclipse 3.5 (Galileo)

http://dl.google.com/eclipse/plugin/3.5

Eclipse 3.4 (Ganymede)

http://dl.google.com/eclipse/plugin/3.4

Eclipse 3.3 (Europa)

http://dl.google.com/eclipse/plugin/3.3

For more details, see Eclipse 3.5 Installation Instructions, Eclipse 3.4 Installation Instructions, or Eclipse 3.3 Installation Instructions.

Note: Installation can take a long time on Eclipse 3.4 because Eclipse is looking for updates to the plugin's dependencies. You can speed up installation by temporarily turning off these update checks.

Creating your first Web Application

To create your first Web Application, select File > New > Web Application Project from the Eclipse menu.

In the New Web Application Project wizard, enter a name for your project and a java package name, e.g., com.example.mywebapp. Click Finish.

Congratulations, you now have an App Engine and GWT-enabled web application!

Running your Web Application locally

Right-click on your web application project and select Debug As > Web Application from the popup menu.

This action creates an Eclipse Web Application launch configuration for you and launches it. The web application launch configuration will start a server and the GWT hosted browser.

At this point, you can set breakpoints, inspect variables and modify code as you would normally expect from a Java Eclipse debugging session.

Deploying your Web Application

To deploy your web application, you will need to create an application from the App Engine Administration Console, at the following URL: https://appengine.google.com/. If you already have one, then you can skip this step.

Once you have an application ID, just right-click on your project, and select Google > App Engine Settings... from the context menu. Enter your application ID into the Application ID text box. Click OK.

Right-click on your project and select Google > Deploy to App Engine. In the resulting Deploy Project to Google App Engine dialog, enter your Google Account email and password.

Note: Don't worry - the plugin doesn't store your password anywhere.

Click Deploy.

Go to http://application-id.appspot.com/ to see your application

지난번에는 Maven 에서 GWT 프로젝트를 만들어 보았습니다.
[Maven] GWT 프로젝트 만들기

이제는 만들어진 프로젝트를 가지고 GWT 에뮬레이터를 실행시켜보겠습니다.






사실 처음 Maven 을 접했을때는 진입장벽이 있었는데 해보니깐 재미 있네요~~
Maven Plugin 도 기회가 된다면 만들어 보고 싶네요~~

출처 : http://vicki.tistory.com/536

출처 : http://uratang.egloos.com/2136671

GWT 1.6이 나오면서 프로젝트 구조와 embeded Java Servlet (Jetty) server가 달라졌다.

게다가 Google에서 GWT를 위한 플러그인을 제공하므로 Cypal Studio를 사용할 필요가 없어졌으므로

Google 플러그인을 활용한 방법으로 수정한다.

참고: http://paulgrenyer.blogspot.com/2009/04/setting-up-gwt-ext-for-gwt-16-with.html

GWT - Google Web Toolkit(http://code.google.com/webtoolkit/)

• 복잡한 AJAX 애플리케이션 개발을 손쉽게 해주는 프레임워크이다.
• JAVA 코드로 작성하고 GWT 컴파일러가 자바코드를 자바스크립트로 변환한다. 모든 자바코드를 변환할 수 있는 것은 아니고, java.util, java.io 패키지의 기능들만 사용할 수 있다.

• 구동되는 환경은 hosted mode와 web mode가 있다.

  • hosted mode: 컴파일 과정 없이 작성한 코드를 테스트하고 디버깅 할 수 있다. JVM환경의 GWT 브라우저에서 구동된다.
  • web mode: 컴파일러가 자바스크립트와 HTML파일을 생성하고, 이것을 웹브라우저로 구동한다.

[출처] GWT-Ext 개발 기초|작성자 또식이

GWT-Ext - GWT-Ext Widget Library(http://gwt-ext.com)

• 강력하고 화려한 위젯 라이브러리. GWT와 자바스크립트 라이브러리 EXT(http://extjs.com/)를 활용하였다. http://extjs.com/에서 소개되는 Ext-GWT와는 다르다.
  

GWT-Ext with Eclipse

참고: http://code.google.com/eclipse/docs/getting_started.html

• Eclipse plugin 설치
  Europa(3.3): http://dl.google.com/eclipse/plugin/3.3Ganymede(3.4): http://dl.google.com/eclipse/plugin/3.4
• 이클립스 메뉴에서 File -> New -> Web Application Project 선택
• 프로젝트와 패키지 이름을 넣고, Use Google App Engine 체크박스를 해제한다.
• Run As -> Run Configurations에서 Automatically Select Unused Port의 체크박스를 체크한다.
• 여기까지는 일반적인 GWT 애플리케이션의 실행 방법이다.

• 다음 라이브러리를 다운로드 한다.

  • GWT-Ext(http://gwt-ext.com/download/)
    압축을 풀어 gwtext.jar파일을 프로젝트의 war\WEB-INF\lib 디렉토리에 넣는다.
  • war 디렉토리 아래에 js 디렉토리를 만든다.
  • Ext(http://gwt-ext.com/download/) 여기 링크에서 화면 아래쪽의 Ext 2.0.2 here의 here를 클릭해서 다운받는다.
    압축을 풀어 js 디렉토리에 넣는다.(디렉토리 2개 파일 4개만 하면 된다. (adapter/, resources/, ext-all.js, ext-all-debug.js, ext-core.js, ext-core-debug.js))
    (디렉토리가 이런 구조가 되도록 주의 js/ext-2.0.2/resources/...)
• 프로젝트에 gwtext.jar를 추가한다.
프로젝트를 우클릭한 후, Properties -> Java Build Path -> Libraries에서 Add JARs를 클릭한 다음 방금 넣었던 gwtext.jar를 선택한다.
• oo(프로젝트 이름).gwt.xml 파일에 아래 굵은글씨 부분을 추가한다.
  <inherits name='com.google.gwt.user.User'/>
  <inherits name='com.gwtext.GwtExt' /> ...
  <entry-point class='com.megadeth.client.MegaDeth'/>
  <stylesheet src="../js/ext-2.0.2/resources/css/ext-all.css" />
  <script src="../js/ext-2.0.2/adapter/ext/ext-base.js" />
  <script src="../js/ext-2.0.2/ext-all.js" />
  

• oo.client 패키지의 모듈 파일의 일부를 아래와 같이 수정한다.
  public void onModuleLoad(){
    Panel mainPanel = new Panel();
    mainPanel.setTitle("Hello World!");
    mainPanel.setHeight(300);
    mainPanel.setWidth(500);  
    RootPanel.get().add(mainPanel);
  }
  

• war 디렉토리 아래의 html파일의 아래 부분을 삭제한다.
  <h1>Web Application Starter Project</h1>
  <table align="center">
    <tr>
      <td colspan="2" style="font-weight:bold;">Please enter your name:</td>
    </tr>
    <tr>
      <td id="nameFieldContainer"></td>
      <td id="sendButtonContainer"></td>
    </tr>
  </table>
  

• 플러그인이 제공하는 Run As Web Application을 실행해 보면 작동하는 화면이 보인다.

• 리모트 서비스를 만들어 본다. oo.client 패키지의 모듈 파일을 아래와 같이 수정한다.
     private Label label = new Label("Today is: ");
     private final GreetingServiceAsync greetingService = GWT.create(GreetingService.class);
      public void onModuleLoad() {
          Button button = new Button("Get Date");
          Panel panel = new Panel();      
          button.addListener(new ButtonListenerAdapter(){
            public void onClick(Button button, EventObject e) {
                  greetingService.getDate(new NumberCallback());
              }
          });     
          panel.add(label);
          panel.add(button);
          RootPanel.get().add(panel);
      }
      public class NumberCallback implements AsyncCallback {
          public void onFailure(Throwable error) {
              MessageBox.alert("Getting date failed");
          }
          public void onSuccess(Object resp) {
              label.setText("Today is: " + resp.toString());
          }
      }

• GreetingService에 다음 코드를 추가한다.
  String getDate();

• GreetingServiceAsync에 다음 코드를 추가한다.
  void getDate(AsyncCallback<String> numberCallback);

• GreetingServiceImpl에 다음 코드를 추가한다.
  public String getDate() {
       Date date = new Date();
       date.setTime(System.currentTimeMillis());
       SimpleDateFormat sDate = new SimpleDateFormat("MM월 dd일 HH시 mm분 ss초");
       return sDate.format(date);
   }

• Cypal studio는 OO.gwt.xml, web.xml 파일을 수정하고, RemoteService와 Async파일의 메소드를 자동으로 맞춰주는 기능이 있다.
  그 외에는 Google 플러그인과 큰 기능차이가 없다.

  [출처] GWT-Ext 개발 기초|작성자 또식이

* 이클립스 3.5 를 기준으로 작성되었습니다.

1. 이클립스 3.5 다운로드 및 압축풀기
- http://www.eclipse.org/downloads/

2. Google Web Toolkit 다운로드
- http://code.google.com/intl/ko/webtoolkit/

3. GWT 이클립스 플러그인 설치
[Help] > [Install New Software...] 메뉴 선택
Work with 에 http://download.instantiations.com/D2GWT/continuous/latest/update/E-3.5/ 입력한 후 엔터키를 누른다.
GWT Desinger를 선택한 후 설치를 진행한다.
 

4. 다음과 같이 Dynamic Web Project를 생성한다.
5. 생성된 프로젝트를 GWT 프로젝트로 변환한다.
6. 다음과 같이 새로운 GWT Module을 추가한다. 
7. Run Configurations를 통해서 6번에서 추가한 모듈을 다음과 같이 GWT Application으로 설정한다.

8. 7에서 Run 버튼을 클릭하면 첫 GWT Application이 실행된다.

2009/07/29   Google Web Toolkit 1.7.0 released
2009/07/16   GWT Ext - EditorGridPanel 의 특정 위치에 ComboBox 넣기
2009/07/14   GWT Ext 이벤트 리스너 인터페이스 VS 어댑터 클래스
2009/07/02   GWT Study Chapter 4 - 이클리스 GWT-Ext 설정
2009/07/02   GWT를 이클립스를 통해 개발할 때 발생한 문제(1)
2009/07/01   GWT Study Chapter 3 - GWT 개발 방법
2009/07/01   GWT Study Chapter 2 - Eclipse 설정
2009/07/01   GWT Study Chapter 1
2009/05/10   GWT(Google Web Toolkit) ?

구글의 Plug-in은 위와 같이 Eclipse의 세가지 버전(3.3, 3.4, 3.5)을 지원한다.
이중 3.5버전인 Galileo는 최근에 구글에서 Plug-in을 제공하기 시작했다. (얼마전까지는은 Eclipse 3.5버전에서는 사용하지 못했다는 말이다.)
 
어떻게 설치하고, 환경을 만드는지는 "Google App Engine Java SDK 1.2.1 Released" 의 글을 참조하면 된다. (처음 Eclipse를 사용하는  사람은 "Google App Engine SDK 설치 및 실행"를 참조)

Eclipse 3.5인 Galileo는 이전 버전들과 Plug-in 설치 방식이 약간 달라졌다.
이전 3.4 버전에서 제공 하던 방식은 플러그인을 찾는 방식이 편하지 많은 않았다. 왜냐하면, 백그라운드에서 사용자가 입력한 플러그인 이름을 실시간으로 키 입력시마다 추천해 주는 방식을 제공했는데, 네트워크에서 대기하는 시간에 대한 부담을 사용자가 가져야 했기 때문이다. 3.5 버전에서는 이러한 것들이 개선되어 졌다.

아래는 Eclipse 3.5에 GAE 플러그인을 설치한 것들을 캡쳐한 화면이다.

Eclipse 3.5의 Help > Install New Software... 를 클릭하면 아래 화면이 나타난다.


위 화면에서 상단 오른쪽에 있는 "Add..." 버튼을 클릭하면 창이 나타나면 아래와 같이 "Name"과 "Location"을 입력하고 "OK"버튼을 누른다. (Name은 사용자가 원하는 이름을 넣으면 된다.)


입력한 주소(Location) 정보가 정확하면, 아래과 같이 설치 가능한 플러그인들 목록이 표시된다.
모두 설치를 할것이므로 아래처럼 모두 체크해서 선택하면 된다. 그리고 "Next"버튼을 클릭한다.


위에서 "Next" 버튼을 클릭하면, 아래와 같이 상세 정보들이 나타난다. 다시 "Next"버튼을 클릭한다.

설치할 플러그인들에 대한 Licese 정책에 동의 할 것인지를 묻는 창인데, 당연히 동의해야 한다.
만약 동의하지 않는다면, 설치가 안될테니까... ^^;;;

위에서 동의하고 "Finish"버트을 누루면, 아래와 같이 설치가 진행된다.



출처 : http://happyzoo.tistory.com/169

GWT로 뭐 하나 개발할 일이 있어서, 이왕 하는거 정리도 할겸, 모르는 분들이 쉽게 할 수 있도록 할 겸, 정리한번 해 봅니다. 예전 안드로이드 처럼 연재가 끊길 수도 있으나, GWT는 이미 다 알고 있는 상태라~~~.

자~ 이제 시작하기 전에 준비물을 준비하자.

1. Java JDK 1.5 이상 (http://java.sun.com 에서 알아서 받으세요)
2. Eclipse 3.3 이상에 WebTools Platform 2.0 포함된거 (이것도 http://www.eclipse.org 에서 알아서 받으세요.)
3. Cypal Studio for GWT (요건 http://www.cypal.in/studio 에서 다운로드 받으면 됩니다.)
4. GWT 라이브러리 (요거는 구글에서 GWT 라고 치면 가장 첨에 나온다. 앞으로도 가장 첨에 안나올 리가 없다.)

Cypal 관련된 시스템 요구사항은 http://www.cypal.in/studiodocs#requirements 를 참조하기 바란다.

일단 자바랑 Eclipse 3.3은 다운로드 받아서 설치했다고 치고, Cypal studio랑 GWT 라이브로도 다운로드 받았다고 치고 시작하겠다.

다음의 순서에 따라서 세팅해 주기 바란다.

1. Cypal studio를 다운로드 받아서 압축파일을 풀면 4개의 jar 파일이 있는데, 그 파일을 이클립스 설치 위치/plugin 폴더에 몽땅  복사하고, 이클립스를 띄운다. (이클립스가 이미 띄워져 있는 상황에서는 다시 띄워라)

2. 이클립스를 띄웠으면, 메뉴에 Window --> Preferences를 눌러 Cypal Studio 라는걸 찾는다. (없으면 잘 찾아보기 바란다.)

3. Cypal Studio를 눌러서 보면, GWT 라이브러리의 Home 위치를 지정하는 입력 상자가 상단에 있는데 거기에 GWT 압축을 해제한 디렉토리를 지정해준다. (doc, samples 폴더가 하위에 있는 위치를 지정하면 된다.)

4. 이제 이클립스 플젝을 맹글어야 하는데, New project... 을 누른 후 플젝 종류를 선택하는 화면에서 Dynamic Web Project를 클릭한 후 Next를 누른다.

5. 그 다음에서 프로젝트 이름을 지정한 이후에 Configuration 지정하는 부분에서 drop down 메뉴를 내려서 "Cypal Studio for GWT"를 선택해야만 한다. (반드시 !!!!!)

6. 그 다음에 finish를 누르면 GWT를 맹글 수 있는 프로젝트 생성 및 초기 설정이 완료된다.

다음에는 GWT 샘플을 돌려보면서 GWT를 어떻게 사용할 수 있는지 알아보자.

백문이 불여일견이므로, GWT 샘플을 한번 돌려보자.

이클립스 메뉴에서 File --> New... --> Examples 를 선택한 다음, GWT Samples 를 선택한다.
(만약 Cypal이 정상적으로 깔리지 않았다면, 이 목록이 나타나지 않을 것이다.)

그 다음화면에서 다음과 같이 KitchenSink를 선택한다.

그 다음 Finish를 누르면, 해당 프로젝트의 Java Resources하단에 sample_src패키지가 생기고, 그 밑에 Kitchen Sink 샘플이 설치된다.

정상적으로 샘플이 저장되었다면, 해당 프로젝트를 선택한 상태에서 오른쪽 마우스를 클릭하고, Run As... --> Open Run Dialog... 을 클릭한다.

그러면 중간에 뻘건 가방 아이콘과 함께 GWT Hosted Mode Application 이라는 것이 있을 것이다.

만약 Kitchen Sink가 없다면, GWT Hosted Mode Application 을 더블클릭한다.

그러면 가장 위에 이름을 지정하는 곳이 있고, 원하는 이름을 입력한다.

Project와 Module 은 각각 본인의 프로젝트와 방금 추가한 모듈을 선택한다. Apply를 누르고 Run을 눌러보자.

정상적으로 지정이 되었다면, 다음의 두개 화면이 나타날 것이다.

하나는 Host 모드로 돌아가는 톰캣서버 콘솔이고 여기서 에러 메시지를 확인할 수 있다.

다른 하나는 결과를 확인하기 위한 브라우져다.

이제 GWT의 재미를 슬슬 느껴보자.~~~


출처 : http://www.tuning-java.com/92

Eclipse를 이용하면 Java 애플리케이션을 좀더 쉽게 개발할 수 있다. GWT는 Eclipse 플러그인을 제공하는데, 이 플러그인을 이용하면 편리한 이클립스개발환경에서 개발및 디버깅을 할 수 있다.

Eclipse를 이용하면 Java 애플리케이션을 좀더 쉽게 개발할 수 있다. GWT는 Eclipse 플러그인을 제공하는데, 이 플러그인을 이용하면 편리한 이클립스개발환경에서 개발및 디버깅을 할 수 있다.