GoogleAppEngine-RPCの使い方

前回のJDOQLクエリフィルタに引き続き、RPCによるGWTとサーバーの通信を実装します。RPCとは簡単に言うと、クライアントとサーバーでJavaのクラスをそのままやりとりするための通信方式です。

通常AJAXでの通信はXMLもしくはJSOPで行いますが、通信毎にプロトコルの仕様を決めなければなりませんでした。しかしGoogleAppEngineJavaはクライアント画面のGWTとサーバーの両方で使えるJavaのクラスを定義すれば簡単にデータのやりとりができます。

RPCでの通信を行うにはいくつか準備する必要があります。

・通信でやりとりされるオブジェクト
・RemoteServiceインターフェースとサーバー側の実装
・通信結果を受け取る非同期インターフェース

今回はつぶやき情報をサーバーに送る機能を実装してみようかと思います。

TweetPutParam.java
---------------------------

package com.devtter.client.rpc;
import com.google.gwt.user.client.rpc.IsSerializable;

public class TweetPutParam implements IsSerializable {
    public String tweet;
    public double x;
    public double y;
    public double z;
}

このクラスはつぶやきと、つぶやいた位置情報を保持しています。ここでのポイントはcom.google.gwt.user.client.rpc.IsSerializableクラスをimplemntsしていることです。このインターフェースを使うだけでコンパイル時にシリアライズ処理が実装されるようです。

TweetService.java
---------------------------

package com.devtter.client.rpc;

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

@RemoteServiceRelativePath("tweet")
public interface TweetService extends RemoteService {
    public String put(TweetPutParam param) throws IllegalArgumentException;
}

TweetServiceAsync.java
---------------------------

package com.devtter.client.rpc;

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

public interface TweetServiceAsync {
    void put(TweetPutParam param, AsyncCallback callback)
    throws IllegalArgumentException;
}

ここまでがインターフェースの定義です。サーバー側では定義されたTweetServiceをサーブレットとして実装します。具体的にはRPCを処理するcom.google.gwt.user.server.rpc.RemoteServiceServletを実装します。
今回のサンプルではクライアントでつぶやかれた内容をJDOに格納します。

TweetServiceImpl.java
---------------------------

package com.devtter.server.rpc;

import com.devtter.server.model.Tweet;
import com.devtter.server.model.TweetDAO;
import com.devtter.client.rpc.TweetGetParam;
import com.devtter.client.rpc.TweetPutParam;
import com.devtter.client.rpc.TweetResponse;
import com.devtter.client.rpc.TweetService;
import com.devtter.shared.FieldVerifier;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import java.util.logging.Logger;
import java.util.ArrayList;
import java.util.List;
import java.util.Iterator;

@SuppressWarnings("serial")
public class TweetServiceImpl extends RemoteServiceServlet implements TweetService {
    private static final Logger log = Logger.getLogger(TweetServiceImpl.class.getName());

    public String put(TweetPutParam param) throws IllegalArgumentException{
        if (!FieldVerifier.isValidTweet(param.tweet)) {
            throw new IllegalArgumentException(
                    "Tweet must be at less 140 characters long");
        }
        log.info("put : " + param.tweet);
        TweetDAO.tweetAnonymous(param.tweet);
        return "";
    }
}

次にクライアント側で、つぶやきを送る処理を実装します。実装はちょっと難解な書き方をしますが、まずTweetServiceAsyncをGWTクラスから生成します。これで呼び出す準備ができます。次に実際にコールするときはパラメータとレスポンスを指定することで呼び出すことができます。

TweetPanel.java
---------------------------

    private final TweetServiceAsync tweetService = GWT
    .create(TweetService.class);
    
    public void sendTweetToServer() {
        TweetPutParam putParam = new TweetPutParam();
        putParam.tweet = inputPanel.inputBox.getText();
        if (!FieldVerifier.isValidTweet(putParam.tweet)) {
            return;
        }

        tweetService.put(putParam,
                new AsyncCallback() {
                    public void onFailure(Throwable caught) {
                    }

                    public void onSuccess(String result) {
                    }
                });            
    }

以上でRPCによるサーバークライアント通信の処理は完了です。慣れるまで敷居が高いですが、一度作ってしまえば、通信内容を変更する時は通信クラスのパラメータをかえるだけで対応出きるのでとても便利です。

なお、今回作ったプログラムは下記に置いてあります
http://code.google.com/p/devtter/source/browse/#svn/trunk/devtter/src/com/devtter/client/rpc
http://code.google.com/p/devtter/source/browse/#svn/trunk/devtter/src/com/devtter/server/rpc
http://code.google.com/p/devtter/source/browse/#svn/trunk/devtter/src/com/devtter/client/ui/tweet

GoogleAppEngine-GWTの使い方

前回のJDOに引き続き今回はGWTをGoogleAppEngine上で取り扱ってみます。

GWTとは簡単にいえば、JavaのAWTににたライブラリでアプレットのように画面を開発すると、それがJavaScriptに自動的に置き換わる開発キットのことです。
C++やJavaなどで組み込み系やWindows環境でGUIを開発してきたエンジニアにとって、HTMLやJavaScriptは開発スタイルの毛色が異なってやり辛いのですが、こういったクロスコンパイラがあれば今までのやり方でリッチなWEB画面が作れるので、GWTはとても魅力的に感じます。

では早速画面を構成するクラスを提示してみます。今回も引き続きTwitterのようなサイトを作るので、「メインパネルにテキストボックス、送信ボタン、つぶやきリスト」が出てくる部品を作ります。なお、このサンプルはEclipseのGAEプラグインが入っていて、「Web Application Project」というプロジェクトテンプレートを使った開発を想定しています。





TweetPanel.java 画面の部品がすべて乗ってくるパネル
-----------------------------

package com.devtter.client.ui.tweet;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Label;

public class TweetPanel extends VerticalPanel {
    public TweetInputPanel inputPanel;
    public TweetListPanel  listPanel;
    
    public TweetPanel(){
        this.inputPanel = new TweetInputPanel();
        this.listPanel  = new TweetListPanel();
        super.add(inputPanel);
        super.add(listPanel);
        
        MyHandler handler = new MyHandler();
        inputPanel.sendButton.addClickHandler(handler);
        inputPanel.inputBox.addKeyUpHandler(handler);
    }
    
    class MyHandler implements ClickHandler, KeyUpHandler {
        public void onClick(ClickEvent event) {
        }

        public void onKeyUp(KeyUpEvent event) {
            if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
            }
        }

        private void sendTweetToServer() {
        }
    }
}

TweetPanelクラスのMyHandlerと言うインナクラスはパネルに対するイベント処理を行います。ここではキーイベントとクリックイベントのリスナが用意されており、送信ボタンが押されたときなどはここにサーバーへの通信処理を記述します。


TweetInputPanel.java　入力用のテキストボックスと送信ボタン
-----------------------------

package com.devtter.client.ui.tweet;

import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.TextBox;

public class TweetInputPanel extends HorizontalPanel {
    public TextBox inputBox;
    public Button  sendButton;    
    
    public TweetInputPanel() {
        inputBox     = new TextBox();
        sendButton   = new Button("Send");
        sendButton.addStyleName("sendButton");
        super.add(inputBox);
        super.add(sendButton);
        inputBox.setFocus(true);
        inputBox.selectAll();
    }
}

TweetListPanel.java　つぶやきリスト。ラベルを乗せる
-----------------------------

package com.devtter.client.ui.tweet;
import com.google.gwt.user.client.ui.VerticalPanel;

public class TweetListPanel extends VerticalPanel {
    public TweetListPanel(){
    }
    
    public void putItem(String content){
        TweetListItemPanel item = new TweetListItemPanel();
        item.setText(content);
        super.insert(item, 0);
    }
}

TweetListItemPanel.java　一つ一つのつぶやき。最初はlabelで実装しておく
-----------------------------

package com.devtter.client.ui.tweet;

import com.google.gwt.user.client.ui.Label;;

public class TweetListItemPanel extends Label{
    public TweetListItemPanel(){
        this("");
    }
    public TweetListItemPanel(String label){
        super(label);
    }
}

-----------------------------

これで最低限の画面構成クラスはできました。これを表示するにはメインで使われるHTMLテンプレートにコンテナを記述するのと、そのコンテナにaddするプログラムを記述します。まず、メインが面に対応したHTMLファイルにmainContainerというidを作ります。これにより、この位置にパネルを配置できるようになります。

war/Devtter.html

    <h1>devtter</h1>

    <table align="center">
      <tr>
        <td colspan="2" style="font-weight:bold;">What's Happening?</td>        
      </tr>
      <tr>
        <td id="mainContainer"></td>
      </tr>
      <tr>
        <td colspan="2" style="color:red;" id="errorLabelContainer"></td>
      </tr>
    </table>

---------------------------

次にEntoryPointクラスの初期処理に、UIを乗せる記述をします。なおcom.google.gwt.core.client.EntryPointは画面が最初に呼び出されるエントリーポイントを表すクラスです。通常HTMLのテンプレートとセットで扱います。

Devtter.java 画面表示時に最初に呼び出されるクラス

package com.devtter.client;

import com.devtter.client.ui.tweet.TweetPanel;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class Devtter implements EntryPoint {
    public void onModuleLoad() {
        final TweetPanel tweetPanel = new TweetPanel();
        RootPanel.get("mainContainer").add(tweetPanel);
    }
}

これでUIのベースができました。次回はサーバーと連携するプログラムを付け足します
今回作成したプログラムはおおよそ下記にあります

http://code.google.com/p/devtter/source/browse/#svn/trunk/devtter/src/com/devtter/client/ui/tweet