'GWT-Ext 개발 기초'에 해당되는 글 1건

  1. 2009.09.27 GWT-Ext 개발 기초 GWT-Ext - GWT-Ext Widget Library(http://gwt-ext.com)
98..Etc/GWT2009. 9. 27. 18:38

GWT-Ext 개발 기초 GWT-Ext - GWT-Ext Widget Library(http://gwt-ext.com)

반응형

출처 : 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 개발 기초|작성자 또식이

Posted by 1010

티스토리툴바