GWT-Ext 개발 기초

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 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 플러그인과 큰 기능차이가 없다.

 

이 글은 스프링노트에서 작성되었습니다.

by uratang | 2008/11/14 14:12 | my tails... | 트랙백(2) | 덧글(7)

트랙백 주소 : http://uratang.egloos.com/tb/2136671
☞ 내 이글루에 이 글과 관련된 글 쓰기 (트랙백 보내기) [도움말]
Tracked from 꼬물꾸물 at 2008/11/18 09:33

제목 : gwt-ext 공부 해 보자
GWT-Ext 개발 기초ㅇㅇ...more

Tracked from 봉 블로그 at 2009/08/15 21:43

제목 : Cypal Studio 를 사용한 GWT 개발환경구축
Cypal Studio Eclipse Plugin을 사용한 GWT 개발환경 구축 Eclipse 3.4.* (JEE Developers 용), GWT 1.5.3 기준 참고 : http://www.cypal.in/studiodocs Requirements GWT를 위한 Cypal Studio 는 JEE Developers 용 Eclipse IDE를 필요로한다 . 먼저 Eclipse를 설치하고 Google Web Toolkit을 download 후 ......more

Commented by 이호연 at 2008/11/15 14:22
Cypal Studio 이건 누가 이름 지은거지...? 발음 조심해야겠네....ㅎㅎㅎ
내일 봅세다
Commented at 2009/04/22 00:13
비공개 덧글입니다.
Commented by uratang at 2009/06/02 11:22
버전업 되면서 환경구성과 코드 작성 방법이 달라진 걸 모르고 방치했습니다.
GWT 1.6에 맞게 수정했으니 참고하세요.
아래에 NYA님 링크에서도 쉽고 편하게 볼 수 있습니다.
Commented by NYA at 2009/06/01 16:32
Commented by uratang at 2009/06/02 11:23
멋쟁이 ^^ 제 것도 수정했어요.
Commented by 화무결 at 2009/07/02 11:04
GWT-ext 를 사용하실 때에는 RootPanel.get().add(panel); 보다
Viewport viewport = new Viewport(panel); 를 사용하도록 권유하고 있습니다.
Commented by uratang at 2009/07/12 21:52
화무결님// 앗! 몰랐네요.^^ 감사합니다.

:         :

:

비공개 덧글

<< 이전 페이지     다음 페이지 >>