←フエルチラシノウラ。トップページへもどる。

【GWT】クライアントとリモートサービスを作成してデプロイ&実行してみよう。

GWT Java JavaScript Ajax リッチクライアント GoogleWebToolkit RemoteService リモートサービス GWTのデプロイ

【GWT】クライアントとリモートサービスを作成してデプロイ&実行してみよう。

説明


【GWT】GoogleWebToolkitアプリの基礎。
上記につづいて、今度はMyApplicationというクライアントからMyServiceというリモートサービスを呼び出してみます。


クライアント作成


com.mycompany.clientパッケージの配下に以下の二つのインターフェースを作成します。

MyService.java
package com.mycompany.client;

import com.google.gwt.user.client.rpc.RemoteService;

public interface MyService extends RemoteService {
public String myMethod(String s);
}


MyServiceAsync.java
package com.mycompany.client;

import com.google.gwt.user.client.rpc.AsyncCallback;

public interface MyServiceAsync {
public void myMethod(String s, AsyncCallback callback);
}

※ServiceAsyncのメソッドでは戻り値にvoidを返すので注意してください。

次にメインとなるMyApplicationを作成します。

MyApplication.java
package com.mycompany.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;

/**
* Entry point classes define onModuleLoad()
*/
public class MyApplication implements EntryPoint {

/** サービスのURI */
public static final String SERVICE_URI = "MyService";

/**
* 非同期サービス
*/
/** Myサービス */
private final MyServiceAsync myServiceAsync = (MyServiceAsync) GWT
.create(MyService.class);

/**
* コンポーネント
*/
/** ボタン */
private final Button button = new Button("button");
/** ラベル */
private final Label label = new Label();
/** テキスト */
private final TextBox textBox = new TextBox();

/**
* This is the entry point method.
*/
public void onModuleLoad() {

ServiceDefTarget target = (ServiceDefTarget) myServiceAsync;

// サービスエントリポイントをセット
target.setServiceEntryPoint(GWT.getModuleBaseURL() + SERVICE_URI);

// クリックリスナ登録
button.addClickListener(new ClickListener() {
public void onClick(Widget sender) {
GWT.log("button.onClick.", null);
myServiceAsync.myMethod(textBox.getText(), new AsyncCallback() {

public void onFailure(Throwable caught) {
GWT.log("button.onFailure", null);
label.setText(caught.getMessage());
}

public void onSuccess(Object result) {
GWT.log("button.onSuccess", null);
label.setText((String) result);
}

});
}
});

RootPanel.get("button").add(button);
RootPanel.get("response").add(label);
RootPanel.get("text").add(textBox);

}
}


次は画面のhtmlです。
com.mycompany.publicパッケージの配下に設置します。

MyApplication.html
<html>
<head>
<title>Wrapper HTML for MyApplication</title>
<style>
body,td,a,div,.p {
font-family: arial, sans-serif
}

div,td {
color: #000000
}

a:link,.w,.w a:link {
color: #0000cc
}

a:visited {
color: #551a8b
}

a:active {
color: #ff0000
}
</style>
<script language='javascript'
src='com.mycompany.MyApplication.nocache.js'></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

<!-- OPTIONAL: include this if you want history support -->
<iframe src="javascript:''" id="__gwt_historyFrame"
style="width: 0; height: 0; border: 0"></iframe>

<h1>MyApplication</h1>

<p>テスト。</p>

<table align=center>
<tr>
<td id="text"></td>
<td id="button"></td>
<td id="response"></td>
</tr>
</table>
</body>
</html>


hostedモードで起動する場合に必要となる設定をMyApplication.gwt.xmlに記述しておきます。

MyApplication.gwt.xml
<module>
<inherits name='com.google.gwt.user.User' />

<!-- エントリーポイント(クライアントのメイン) -->
<entry-point class='com.mycompany.client.MyApplication' />

<!-- hostedモードでリモートサービスを動かす場合に必要 -->
<!-- tomcatにデプロイする場合は不要 -->
<servlet path="/com.mycompany.MyApplication/MyService"
class="com.mycompany.server.MyServiceImpl" />
</module>



リモートサービス作成


次はリモートサービスを作成します。
先ほど作成したクライアントから呼び出されます。
com.mycompany.serverパッケージの配下に作成します。

MyServiceImpl.java
package com.mycompany.server;

import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import com.mycompany.client.MyService;

public class MyServiceImpl extends RemoteServiceServlet implements MyService {
public String myMethod(String s) {
return "from remote: " + s;
}
}



Tomcatにリモートサービスをデプロイ


先ほど作成したリモートサービスをコンパイルし、WEB-INF/classes にコピーします。
次に、GWT_HOME にある gwt-servlet.jar を WEB-INF/lib にコピーします。
そして以下の web.xml を作成して WEB-INFの直下に設置します。

web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>hogeProject</display-name>

<servlet>
<servlet-name>MyService</servlet-name>
<servlet-class>
com.mycompany.server.MyServiceImpl
</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>MyService</servlet-name>
<url-pattern>/com.mycompany.MyApplication/MyService</url-pattern>
</servlet-mapping>
</web-app>


以上でリモートサービスのデプロイが完了です。
Tomcatを起動してみましょう。


実行


クライアントをGWTのhostedモードで起動してみましょう。
http://localhost:8888/com.mycompany.MyApplication/MyApplication.html
上記のURLを叩けばクライアントの画面が表示されます。
画面に出てきたテキストボックスに適当な文字を打ち込んでボタンを押すとリモートサービス(localhost:8080)にリクエストを送ります。
正常に動いていればレスポンス文字列が返ってきます。

ここでは、
クライアントサーバ = localhost:8888
リモートサーバ = localhost:8080
としています。


参考


Google Web Toolkit - Getting Started
http://code.google.com/webtoolkit/gettingstarted.html
GWTのチラシノウラ。
http://goodjob.boy.jp/chirashinoura/search/GWT.html

http://goodjob.boy.jp/chirashinoura/id/178.html

作成日: 2008-03-19 22:18:55

最終更新日: 2008-04-03 00:28:11

▲このページの上へ