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