넷빈(NetBeans)6.9에서 Google Web Toolkit 사용하기 03 - AJAX 랜덤 격언 생성기
Written on 오후 11:47 by 강여사(J.Y.Kang)
이번에는, 웹 페이지에서 AJAX 로 랜덤하게 격언이 표시되는 프로그램을 만들어보겠습니다.
이 랜덤 격언은 서버에 저장된 일련의 격언들이 선택되어, 매초마다 탐색되어, 페이지 리로딩 없이 AJAX 스타일로 웹 페이지에 나타나게 됩니다.
이 기능을 생성하는게 GWT RPC(Remote Procedure Call) 서비스를 사용합니다.
우선 서비스 스텁을 생성합니다.
넷빈즈 GWT 플러그인에 이 RPC 서비스 생성 마법사가 들어 있습니다. 따라서 새 파일에서 항목을 선택하여 마법사를 진행하면 됩니다. (그림 참조)
프로젝트에서 마우스 오른쪽 클릭 - 새파일 - Other
카테고리 Google Web Toolkit 에서 GWT RPC 서비스 선택 - 다음
제시된 기본 내용에 서브패키지만 sampleservice 라고 채워줍니다 - 마침
그럼 관련 스텁들이 자동으로 생성됩니다. (그림 참조)
이제 이 자동생성된 클래스들에 대해 좀더 자세히 살펴보도록 하겠습니다.
GWTService: 서비스의 클라이언트사이드 정의입니다. 이 인터페이스는 RemoteService 를 상속받아 처리합니다(RPC)
-------------------------------------------------------
package org.yournamehere.client.sampleservice;
import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;
@RemoteServiceRelativePath("sampleservice/gwtservice")
public interface GWTService extends RemoteService {
public String myMethod(String s);
}
-------------------------------------------------------
GWTServiceImpl: GWTService 인터페이스를 구현받는 서블릿 클래스로, RPC를 통해 랜덤으로 격언문장들을 탐색하기 위한 기능을 제공하는 myMethod(XX)가 구현되어 있습니다.
==========================================================
package org.yournamehere.server.sampleservice;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import org.yournamehere.client.sampleservice.GWTService;
public class GWTServiceImpl extends RemoteServiceServlet implements GWTService {
public String myMethod(String s) {
// Do something interesting with 's' here on the server.
return "Server says: " + s;
}
}
==========================================================
GWTServiceAsync : 비동기 인터페이스로 GWTService 인터페이스 기반에 서버와 클라이언트간 비동기 통신을 가능케 하는 콜백 객체가 제공됩니다.
GWTServiceUsageExample : 테스트 클라이언트로 자동생성된 샘플 유저 인터페이스입니다.
서비스 호출에 사용되죠.
이제, GWTServiceUsageSample 객체를 초기화하여 서비스를 호출하기 위한 엔트리 포인트 클래스를 수정하도록 하겠습니다.
MainEntryPoing.java 의 메인 엔트리 포인트의 onModulLoad() 메소드를 수정합니다.
기존의 기본 샘플의 GWT 라벨 및 버튼 작업을 모두 지우고(주석처리), GWTServiceUsageExample 인스턴스를 추가합니다.
-----------------------------------------------
public void onModuleLoad() {
RootPanel.get().add(new GWTServiceUsageExample());
}
-----------------------------------------------
참고 : sampleservice.GWTServiceUsageExample 임포트 문제가 생깁니다. 이러한 임포트 문제 해결은 왼쪽 칼럼에 작게 나타나는 HINT(전구모양아이콘)을 눌러 add import... 등을 사용하시거나 아니면 편집기 창 여백에서 마우스오른쪽을 클릭하여 fix import 메뉴를 사용하셔도 됩니다.
프로젝트에서 마우스 오른쪽을 클릭하여 실행
브라우저에 아래 그림처럼 텍스트 입력박스와 버튼이 제시됩니다.
메시지를 넣고(예, Why not? )버튼을 누르면 아래 Server says: Why not? 이 보여집니다.
이제 GWT RPC 마법사를 사용하여 GWT RPC 서비스를 만드는 방법에 대해 살펴봤습니다.
*************************************************************************
이제 다음 세션에서는 이 자동생성된 클래스를 확장하여 서비스를 커스텀하는 작업과 호스트 페이지에 스타일시트를 덧붙이는 방법등에 대해 알아 보겠습니다.
자동 생성된 클래스 확장하기 위해 현재 작업된 서블릿 내용에 대해 다시 한번 점검해보도록 합시다.
web.xml 에 가면 서블릿과 서블릿 매핑 내용이 나옵니다. 확인
-------------------------------------------------------
<servlet>
<servlet-name>GWTService</servlet-name>
<servlet-class>org.yournamehere.server.sampleservice.GWTServiceImpl</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GWTService</servlet-name>
<url-pattern>/org.yournamehere.Main/sampleservice/gwtservice</url-pattern>
</servlet-mapping>
-------------------------------------------------------
이 클래스에서 랜덤 격언 생성자를 만들기 위해, GWTServiceImpl 인터페이스에 다음 내용을 작성합니다.
=======================================================
public class GWTServiceImpl extends RemoteServiceServlet implements GWTService {
private Random randomizer = new Random();
private static final long serialVersionUID = -15020842597334403L;
private static List quotes = new ArrayList();
static {
quotes.add("No great thing is created suddenly - Epictetus");
quotes.add("Well done is better than well said - Ben Franklin");
quotes.add("No wind favors he who has no destined port - Montaigne");
quotes.add("Sometimes even to live is an act of courage - Seneca");
quotes.add("Know thyself - Socrates");
}
public String myMethod() {
return (String) quotes.get(randomizer.nextInt(5));
}
}
=======================================================
임포트 관련 문제가 오류로 나타나니 해결방법은 편집기 여백에서 마우스 오른쪽을 클릭하고
fix import (가져오기 고정 --;)을 선택합니다. 그럼 2개 이상의 임포트 선택권이 있는 경우
팝업창이 제시됩니다.
그림을 참고하여 맞는 클래스를 선택합니다.
List - java.util.List
ArrayList - java.util.ArrayList
Random - java.util.Random - OK
MainEntryPoint 클래스, 어플리케이션의 엔트리 포인트 클래스로부터 직접 서비스를 호출하도록 다음과 같이 소스 작업을 추가합니다. (getService() 메소드)
=====================================================
public class MainEntryPoint implements EntryPoint {
/**
* Creates a new instance of MainEntryPoint
*/
public MainEntryPoint() {
}
public static GWTServiceAsync getService() {
// Create the client proxy. Note that although you are creating the
// service interface proper, you cast the result to the asynchronous
// version of the interface. The cast is always safe because the
// generated proxy implements the asynchronous interface automatically.
return GWT.create(GWTService.class);
}
...
=====================================================
역시 임포트문제는 fix import (가져오기 고정)으로 해결 (확인)
import com.google.gwt.core.client.GWT;
import org.yournamehere.client.sampleservice.GWTService;
import org.yournamehere.client.sampleservice.GWTServiceAsync;
onModulLoad() 메소드를 다음과 같이 변경합니다.
================================================
public void onModuleLoad() {
final Label quoteText = new Label();
Timer timer = new Timer() {
public void run() {
//create an async callback to handle the result:
AsyncCallback callback = new AsyncCallback() {
public void onFailure(Throwable arg0) {
//display error text if we can't get the quote:
quoteText.setText("Failed to get a quote");
}
public void onSuccess(Object result) {
//display the retrieved quote in the label:
quoteText.setText((String) result);
}
};
getService().myMethod(callback);
}
};
timer.scheduleRepeating(1000);
RootPanel.get().add(quoteText);
}
================================================
역시 임포트 문제는 fix import (가져오기 고정)으로 해결
Timer - com.google.gwt.user.client.Timer
AsyncCallBack - com.google.gwt.user.client.rpc.AsyncCallback
Label - com.google.gwt.user.client.ui.Label (확인)
String 매개변수를 받는 기존 myMethod 을 변경합니다.
GWTService 에서는
========================================================
public interface GWTService extends RemoteService {
public String myMethod();
}
========================================================
GWTServiceAsync 클래스에서는,
========================================================
public interface GWTServiceAsync {
public void myMethod(AsyncCallback callback);
}
========================================================
그런 다음 GWTServiceUsageExample 클래스에서 onClick(XXX) 메소드를 수정합니다 (그림 참조)
========================================================
기존의 54라인을 주석처리하고 55라인 추가
//getService().myMethod(txtUserInput.getText(),callback);
getService().myMethod(callback);
...
========================================================
프로젝트 - 실행
브라우저가 열리고 서버에서 매초마다 보내진 격언(인용) 문장이 랜덤으로 제시됩니다.
이제 다음 게시물에서는 여기에 스타일 시트를 추가하여 인용 문장의 외관모양을 좀더 좋게 바꿔보도록 하겠습니다.
to be continued...
글
