自由で気ままな日々

Google Web Toolkit(GWT) 2.0の入門チュートリアルのリスト

スタート ガイド
1.GWT プロジェクトの作成-1
1.GWT プロジェクトの作成-2
2.アプリケーションの設計
3.ユーザー インターフェースの構築-1
3.ユーザー インターフェースの構築-2
3.ユーザー インターフェースの構築-3
4.クライアントのイベントの管理-1
4.クライアントのイベントの管理-2
5.クライアント機能のコーディング-1
5.クライアント機能のコーディング-2
5.クライアント機能のコーディング-3
6.GWT アプリケーションのデバッグ
7.スタイルの適用-1
7.スタイルの適用-2
7.スタイルの適用-3
7.スタイルの適用-4
8.GWTアプリケーションのコンパイル

前回はGoogleのGWT 2.0の入門チュートリアルの日本語訳(4-2)です。


今回は「5.クライアント機能のコーディング」の前半になります。

→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/codeclient.html

始まる前に、まず、お断りを…。

私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。

GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。

日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。

最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。

ステップ５：クライアント機能のコーディング

この時点では、あなたはGWTウィジェットとパネルでユーザインタフェースを作成し、それらにイベントハンドラーを付け加えた。StockWatcherは入力を受け付けますが、現在はテーブルへの株の追加や株式情報の更新を行いません。

このセクションでは、あなたはStockWatcherのすべてのクライアント側の機能実装を完成します。特に下記のコードを書くことになります。

1. 株テーブルに株式を追加・削除する
2. テーブルの中の株式の株価及び変化率を更新する
3. 最終更新日時のタイムスタンプを表示させる

StockWatcherの初期実装は十分にシンプルなので、それの機能をすべてクライアント側だけのコードで実現可能です。将来的に、株価データを取得するために、サーバーをコールを行うことになります。


株テーブルに株式を追加・削除する

あなたの最初の仕事は、証券コードと削除ボタンを株式テーブルに追加することです。FlexTableはデータを所持するために自動的にサイズを変更しますので、あなたはサイズ変更の処理を行うためのコードを書く必要が無いことを覚えといて下さい。

1. データ構造を作成する
2. 株式テーブルに列を追加する
3. 株式テーブルから株を削除するためのボタンを追加する
4. 開発モードでテストする

1.データ構造を作成する

ユーザが入力した証券コードのリストを格納するためのデータ構造が必要です。標準的なJavaのArrayListを使います。

1.データ構造を作成する
StockWatcher.javaのStockWatcherクラスに、JavaのArrayListの新しいインスタンスを作成します。

public class StockWatcher implements EntryPoint {



  private VerticalPanel mainPanel = new VerticalPanel();

  private FlexTable stocksFlexTable = new FlexTable();

  private HorizontalPanel addPanel = new HorizontalPanel();

  private TextBox newSymbolTextBox = new TextBox();

  private Button addStockButton = new Button("Add");

  private Label lastUpdatedLabel = new Label();

  private ArrayList<String> stocks = new ArrayList<String>();

2.EclipseはArrayListにエラーフラグを立ち、インポート宣言の追加を提案します。
3.インポート制限を追加します。

import java.util.ArrayList;

2.株式テーブルに列を追加する

ユーザが証券コードを入力した後、最初にそれは重複ではないことを確認します。もしその証券コードは既存ではないのであれば、FlexTableに新しい列を追加し、最初のセルにユーザが入力した証券コードを入れます。FlexTableのセルに文字を入れるため、setTextメソッドを使います。

1.株を確認し、既存であるかどうかを見て、既に存在しているのであれば、再度追加しないようにしましょう。
addStockメソッドのTODOコメントをこんなコードで置き換えて下さい。

// Don't add the stock if it's already in the table.

    if (stocks.contains(symbol))

      return;

2.もし株は既存ではないなら、それを追加する
addStockメソッドのTODOコメントをこんなコードで置き換えましょう。

    // Add the stock to the table.

    int row = stocksFlexTable.getRowCount();

    stocks.add(symbol);

    stocksFlexTable.setText(row, 0, symbol);

setTextメソッドをコールすれば、FlexTableは必要に応じて自動的に新しい
セルを追加します、従って、あなたはテーブルをリサイズする必要がありません。

3.株式テーブルから株を削除するためのボタンを追加する

リストから特定の株を削除出来るようにするために、テーブルの列の最後のセルに削除ボタンを挿入します。FlexTableにウィジェットを追加するために、setWidgetメソッドを利用します。addClickHandlerメソッドでクリックイベントを記述します。削除ボタンがクリックイベントを発行したら、FlexTableとArrayListから株を削除します。

1.リストから株を削除するためのボタンを追加します。
addStockメソッドの中に、TODOコメントをこのコードで置き換えて下さい。

    // Add a button to remove this stock from the table.

    Button removeStockButton = new Button("x");

    removeStockButton.addClickHandler(new ClickHandler() {

      public void onClick(ClickEvent event) {

        int removedIndex = stocks.indexOf(symbol);

        stocks.remove(removedIndex);

        stocksFlexTable.removeRow(removedIndex + 1);

      }

    });

    stocksFlexTable.setWidget(row, 3, removeStockButton);

4.開発モードでテストする

もう一つコーディングしなければならないTODOが残っています：株価の取得です。但し、まずは手早く開発モードで株式追加と株式削除の機能が予想とおりに稼働しているかどうかを確認します。

この時点で証券コードを入力したら、StockWatcherはそれを株式テーブルに追加します。それを試してみましょう。

1.StockWatcherを開発モードで実行します。
既存のブラウザのリフレッシュ(*再読み込み、リロード)を押します。

2.株式を追加する
入力ボックスで証券コードを入力します。
StockWatcherはその株をテーブルに追加するハズです。テーブルは新しいデータを格納するためにリサイズされます。しかし、価格と変動率の欄は相変わらず空っぽです。小文字の証券コードを入力したら、それは大文字にコンバートされます。

3.テーブルに重複の株を追加できないことを確認します。
テーブルに既に存在している証券コードを入力します。
StockWatcherは入力ボックスをクリアしますが、その同じコードを再度追加しません。

4.株の削除
削除ボタンをクリックします。
その株式はテーブルから削除され、テーブルはリサイズされます。


次に、あなたは最後のTODO、株価取得を片付けます。



次はかなり長いので、今回も分割します。



次回は「2.テーブルの中の株式の株価及び変化率を更新する」に続きます。

Google Web Toolkit(GWT) 2.0の入門チュートリアルのリスト

スタート ガイド
1.GWT プロジェクトの作成-1
1.GWT プロジェクトの作成-2
2.アプリケーションの設計
3.ユーザー インターフェースの構築-1
3.ユーザー インターフェースの構築-2
3.ユーザー インターフェースの構築-3
4.クライアントのイベントの管理-1
4.クライアントのイベントの管理-2
5.クライアント機能のコーディング-1
5.クライアント機能のコーディング-2
5.クライアント機能のコーディング-3
6.GWT アプリケーションのデバッグ
7.スタイルの適用-1
7.スタイルの適用-2
7.スタイルの適用-3
7.スタイルの適用-4
8.GWTアプリケーションのコンパイル

前回はGoogleのGWT 2.0の入門チュートリアルの日本語訳(4-1)です。

今回は「4.クライアントのイベントの管理」の後半になります。

→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/manageevents.html

始まる前に、まず、お断りを…。

私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。

GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。

日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。

最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。

3.ユーザイベントにレスポンスする

この時点で、StockWatcherはユーザーの入力を受け付けることができます。マウスやキーボードイベントはユーザーが証券コードを入力した時のシグナルです。次に、StockWatcherがイベントを察知した時に行うべきレスポンス、"株を追加する"のためのコードを書き、イベントハンドラインターフェースが稼働しているかどうかをテストします。StockWatcherは何らかのリクエストをサーバーに送ること無く、HTMLページをリロードすることもなく、クライアントサイトで応答します。

株テーブルに株を追加する

StockWatcherでは、ユーザは同時にモニタリングしたい株式の証券コードを入力ボックスに入力します。ユーザがエンターを押すか、Addボタンをクリックした時、StockWatcherは下記のようにレスポンスしてほしい。

1. 入力のチェック
2. 重複のチェック
3. 株を追加
4. 株をリストから削除するためのボタンを追加する

イベントハンドラインターフェースが稼働しているかどうか確認するために、このセクションでは、あなたは最初のレスポンス"入力チェック"のコードを書きます。次のセクション「5.クライアント機能のコーディング」では、あなたは株式追加のためのコードの残りの部分を書きます。

この部分はaddStockメソッドの機能を実装することになります。

テキストボックスへの入力を検証します

入力された証券コードが妥当であるかどうかを検証したい。ユーザーは実在の証券コードにマッチングした入力を行ったかのチェックではなく、このチュートリアルの目標では、簡単な文字妥当性チェックを行います。

最初に、証券コードを抽出します。getTexeメソッドでTextBoxウィジェット内のテキストを取得します。

次に、入力された文字はあなたが指定した不正文字のセットに含まれているかどうかを確認します。ユーザ入力を標準的な形に変換した後、正規表現でその形式をチェックします。必ずJavaとJavascriptの両方に同じ意味を持つ正規表現を使うこと、覚えといて下さい。

入力の妥当性が検証されたら、ユーザが他の証券コードを入力できるように、テキストボックスをクリアします。

最終的に、もし入力は妥当では無かったら、ダイアログボックスでユーザーに警告を出します。

1.ユーザの証券コード入力を検証します。

StockWatcher.javaの中に、addStockメソッドの土台を下のコードで置き換えます。

  private void addStock() {

    final String symbol = newSymbolTextBox.getText().toUpperCase().trim();

    newSymbolTextBox.setFocus(true);



    // Stock code must be between 1 and 10 chars that are numbers, letters, or dots.

    if (!symbol.matches("^[0-9A-Z\\.]{1,10}$")) {

      Window.alert("'" + symbol + "' is not a valid symbol.");

      newSymbolTextBox.selectAll();

      return;

    }



    newSymbolTextBox.setText("");



    // TODO Don't add the stock if it's already in the table.



    // TODO Add the stock to the table.



    // TODO Add a button to remove this stock from the table.



    // TODO Get the stock price.



  }

Eclipseは"Window"にエラーフラグを立ち、インポートの宣言を入れることを提案します。

2.インポート宣言を入れます。

import com.google.gwt.user.client.Window;

4.イベントハンドリングをテストします

この時点では、あなたは入力ボックスに文字を入力することができます。もしあなたが不正文字を使ったら、ダイアログボックスは現れ、警告を表示します。試してみて、結果を見てみましょう。

1.開発モードでイベントハンドリングをテストします。
　開いているブラウザをリフレッシュ(再読込)します。

2.両方のイベントハンドラインタフェースの稼働をテストします。
入力ボックスで証券コードを入れます。エンターキーを押す、Addボタンをクリック、両方の方法で試してみて下さい。
現時点では、株はテーブルに追加されません。但し、他の株を追加するため、入力ボックスその都度クリアされるはずです。

3.入力検証とエラーメッセージをテストします。
不正文字を含む入力ミスをやってみてください。



ヒント:"リフレッシュ"を押せば、あなたのJavaコードに加えた変更は即座にブラウザに反映されます。もし開発モードが既に実行されているのであれば、再度実行する必要がありません。ブラウザのリフレッシュボタンをクリックすれば、アップデートされたGWTコードはリロードされます。

StockWatcherはまだ完成していませんが、最終状態をテストしたいなら、Run StockWatcherを御覧下さい。



次回のチュートリアル

この時点では、あなたはユーザが証券を入力する時のマウスとキーボードイベントのためのイベントハンドラインターフェースを実装しました。Stockwatcherは入力を検証してレスポンスします。

これで、あなたはテーブルに株を追加し、削除のためのボタンを提供するためのクライアント側のコードを実装するための準備を整えました。同じく、株価とデータ、そして最終更新の時の時間を表示するためのタイムスタンプを表示します。



→ステップ５：クライアント機能のコーディング

Google Web Toolkit(GWT) 2.0の入門チュートリアルのリスト

スタート ガイド
1.GWT プロジェクトの作成-1
1.GWT プロジェクトの作成-2
2.アプリケーションの設計
3.ユーザー インターフェースの構築-1
3.ユーザー インターフェースの構築-2
3.ユーザー インターフェースの構築-3
4.クライアントのイベントの管理-1
4.クライアントのイベントの管理-2
5.クライアント機能のコーディング-1
5.クライアント機能のコーディング-2
5.クライアント機能のコーディング-3
6.GWT アプリケーションのデバッグ
7.スタイルの適用-1
7.スタイルの適用-2
7.スタイルの適用-3
7.スタイルの適用-4
8.GWTアプリケーションのコンパイル

前回はGoogleのGWT 2.0の入門チュートリアルの日本語訳(3-3)です。


今回は「4.クライアントのイベントの管理」の前半になります。

→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/manageevents.html

始まる前に、まず、お断りを…。

私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。

GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。

日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。

最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。

ステップ４：クライアントのイベントの管理

この時点では、あなたはインターフェースのすべての要素を作成した。多くのユーザインタフェースのフレームワークと同様、GWTはイベントベースです。つまり、何らかのイベントが発生する時に、レスポンスとしてコードが実行されます。多くの場合、イベントはマウスやキーボードを使ってアプリケーションインターフェースと相互作用するユーザに触発されます。

このセクションでは、あなたはマウスとキーボードイベントに応答・ハンドリングが出来るようにウィジェットを作り上げます。

1.イベントハンドリングの要件を検討します。

StockWatcherの要件を検討し、どのようなイベントが発生するかを検討します。

タスク：
　ユーザーが証券コードを入力します。
ユーザインタフェースイベント（トリガーメカニズム）
　Addボタンをクリックするか、入力ボックスでエンターを押す
レスポンス：
　・入力を検証する
　・株が既に存在しているかをチェックする
　・新しい行を追加する
　・削除用のボタンを生成する

タスク：
　ユーザがテーブルから株を削除する
ユーザインタフェースイベント（トリガーメカニズム）
　Removeボタンをクリックする
レスポンス：
　・テーブルから一行を削除する

GWTは何種類かの異なるイベントハンドラインターフェースを提供していています。AddとRemoveボタンのクリックイベントをハンドリングするために、あなたはClickHandlerインターフェースを利用します。入力ボックスのキーボードイベントをハンドリングするために、あなたはKeyPressHandlerインターフェースを利用します。

GWT1.6からClickListenerとKeyBoardListerインターフェースは推奨されず、これらはClickHandler、KeyDownHandler、KeyPressHandlerとKeyUpHandlerインタフェースに代りました。


2.イベントをリスニングします。

イベントハンドラインターフェース

GWTのイベントは他のユーザインタフェースと同じく、イベントハンドラインターフェースモデルを採用しています。イベントを登録するために、あなたはイベントハンドラのインタフェースを適切なウィジェットにパスします。イベントハンドラインターフェースは一つかそれ以上のメソッドを定義し、これらはイベントが発生した時にコールされます。

マウスイベントをハンドリングする

マウスを使ってAddボタンをクリックするのはStockWatcherのユーザが証券コードを入力するための方法の一つです。

Addボタンのクリックイベントをハンドリングするために、それ(*イベント)をClickHandlerインターフェースを実装(implements)したオブジェクトにパスします。このケースでは、あなたは匿名の内部クラスを使ってClickHandlerを実装します。ClickHandlerインターフェースは「onClick」というメソッドを持っています。これはユーザーがウィジェットをクリックする時に発火(fire)します。

ユーザーがAddボタンをクリックしたとき、StockWatcherはレスポンスとして株式のテーブルにその株を追加するべきです。従って、このクリックイベントをハンドリングするために、addStockメソッドをコールします。あなたはまだaddStockメソッドを書いていませんので、ここではまずそれの土台を作り、次のセクションで実際にそれのコーディングを行います。

1. Addボタンにイベントハンドラを追加し、クリックイベントを受け付けれるようにします。StockWatcher.javaの中、onModuleLoadメソッドに、下の強調された「// Listen for mouse events on the Add button」の部分のコードを貼り付けます。EclipseはClickHandlerにエラーフラグを立ち、インポートの宣言を行うことを提案します。
2. ClickHandlerとClickEventのためのインポート宣言を付け加えます。EclipseはaddStockにエラーフラグを立ちます。
3. StockWatcher.javaにaddStockメソッドの土台を作成します。EclipseでaddStock()メソッドを追加します。あるは下の強調されたコードを貼り付けます。

注意:Eclipseの設定により、addStockメソッドを作成する時、それはprotectedのアクセス属性が付与されるかもしれません。StockWatcherのサブクラスを作成する予定がありませんので、後でaddStockメソッドを実装する時、アクセス制限をprivateに変更します。

package com.google.gwt.sample.stockwatcher.client;



import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.event.dom.client.ClickEvent;

import com.google.gwt.event.dom.client.ClickHandler;

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

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

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

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.VerticalPanel;



public class StockWatcher implements EntryPoint {



  private VerticalPanel mainPanel = new VerticalPanel();

  private FlexTable stocksFlexTable = new FlexTable();

  private HorizontalPanel addPanel = new HorizontalPanel();

  private TextBox newSymbolTextBox = new TextBox();

  private Button addStockButton = new Button("Add");

  private Label lastUpdatedLabel = new Label();



  /**

   * Entry point method.

   */

  public void onModuleLoad() {

    // Create table for stock data.

    stocksFlexTable.setText(0, 0, "Symbol");

    stocksFlexTable.setText(0, 1, "Price");

    stocksFlexTable.setText(0, 2, "Change");

    stocksFlexTable.setText(0, 3, "Remove");



    // Assemble Add Stock panel.

    addPanel.add(newSymbolTextBox);

    addPanel.add(addStockButton);



    // Assemble Main panel.

    mainPanel.add(stocksFlexTable);

    mainPanel.add(addPanel);

    mainPanel.add(lastUpdatedLabel);



    // Associate the Main panel with the HTML host page.

    RootPanel.get("stockList").add(mainPanel);



    // Move cursor focus to the input box.

    newSymbolTextBox.setFocus(true);



    // Listen for mouse events on the Add button.

    addStockButton.addClickHandler(new ClickHandler() {

      public void onClick(ClickEvent event) {

        addStock();

      }

    });



  }



  /**

   * Add stock to FlexTable. Executed when the user clicks the addStockButton or

   * presses enter in the newSymbolTextBox.

   */

  private void addStock() {

    // TODO Auto-generated method stub



  }



}

実装する時の注意：StockWatcherのような小さなアプリケーションでは、比較的に少ないイベントをハンドリングしますので、匿名インナークラスを使ったほうが、コーディングの労力を少なくできます。ただし、イベントを記述するためのイベントハンドラーの数が多い場合、大量の分断されたイベントハンドラーオブジェクトを生成しなければならないので、このアプローチは非効率になる可能性があります。そのようなケースでは、イベントハンドラインターフェースを実装したクラスを作成し、複数のイベント発生源からくる様々なイベントをハンドリングしたほうが良いでしょう。getSource()メソッドをコールすることで、イベントの発生源を見分けることができます。これはメモリーの利用効率を上げますが、わずかに多くのコードを要求します。コード例を知りたければ、開発者ガイドのEvent Handlers(*英語)を御覧下さい。


キーボードイベントをハンドリングする

Addボタンの利用だけではなく、StockWatcherのユーザは証券コードを入力した後、その手をキーボードから離さずに、入力ボックスでエンターを押すだけで処理できます。

キーボードイベントを記述するために、あなたは(KeyPressHandlerのための)addKeyPressHandlerメソッドをコールすれば、イベントをKeyPressHanlderにパスできます。

1.入力ボックス＝newSymbolTextBoxのために、キープレスイベントハンドラを追加します。
onModuleLoadメソッドに、下の強調された「//Listen for keyboard events in the input box」部分のコードを貼り付けます。

    // Listen for mouse events on the Add button.

    addStockButton.addClickHandler(new ClickHandler() {

      public void onClick(ClickEvent event) {

        addStock();

      }

    });



    // Listen for keyboard events in the input box.

    newSymbolTextBox.addKeyPressHandler(new KeyPressHandler() {

      public void onKeyPress(KeyPressEvent event) {

        if (event.getCharCode() == KeyCodes.KEY_ENTER) {

          addStock();

        }

      }

    });



  }



  /**

   * Add stock to FlexTable. Executed when the user clicks the addStockButton or

   * presses enter in the newSymbolTextBox.

   */

  private void addStock() {

    // TODO Auto-generated method stub



  }



}

EclipseはKeyPressHandlerにエラーフラグを立ち、インポート宣言を付け加えることを提案します。

2.インポート宣言を付け加えます。

import com.google.gwt.event.dom.client.KeyCodes;

import com.google.gwt.event.dom.client.KeyPressEvent;

import com.google.gwt.event.dom.client.KeyPressHandler;

長くなりましたので、今回も分割します。



次回は「3.ユーザイベントにレスポンスする」に続きます。

Google Web Toolkit(GWT) 2.0の入門チュートリアルのリスト

スタート ガイド
1.GWT プロジェクトの作成-1
1.GWT プロジェクトの作成-2
2.アプリケーションの設計
3.ユーザー インターフェースの構築-1
3.ユーザー インターフェースの構築-2
3.ユーザー インターフェースの構築-3
4.クライアントのイベントの管理-1
4.クライアントのイベントの管理-2
5.クライアント機能のコーディング-1
5.クライアント機能のコーディング-2
5.クライアント機能のコーディング-3
6.GWT アプリケーションのデバッグ
7.スタイルの適用-1
7.スタイルの適用-2
7.スタイルの適用-3
7.スタイルの適用-4
8.GWTアプリケーションのコンパイル

前回はGoogleのGWT 2.0の入門チュートリアルの日本語訳(3-2)です。

↓原文はこちら
http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/buildui.html


例のごとく、始まる前に、まず、お断りを…。

私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。

GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。

日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。

最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。

5.レイアウトをテストする

開発モードで実行する時、ブラウザをリフレッシュすれば即座にコードを変更した効果を目で確認できるのは、AJAXアプリケーションの開発にGWTを使用するメリットの一つです。従いまして、Eclipseの場合、デバッグモードでStockWatcherを実行すれば、あなたは開発中やデバッグ中に変更の効果を確認できます。StockWatcherを再起動しなくでも、Javaおよびデバッグパースペクティブを切り替えることができます。

1.編集したファイルを保存します。
StockWatcher.javaを保存します。

2.開発モードでStockWatcherを起動します。
Eclipseメニューバーから、「実行」→「デバッグ」→「Webアプリケーション」を選びます。
Eclipseを使ってない場合、コマンドラインから「ant devmode」を入力してください。

3.ブラウザはあなたのStockWatcherアプリケーションの最初のバージョンが表示されます。

StockWatcherはflex tableのヘッダー、入力ボックス、そしてAddボタンを表示します。まだLabelのテキストを設定していませんので、それは表示されません。株価更新メカニズムを実装する時にそれを設定します。

4.開発モードで実行中のStockWatcherブラウザ画面を残します
これからのチュートリアルの中では、あなたは開発モードで頻繁に変更をテストします。

開発モードをリフレッシュ(更新)する

ソースコードを編集した後でも、いつも開発モードでアプリケーションを再起動する必要がありません。それの代わりに、変更を保存した後、ブラウザのリフレッシュ（更新・再読み込み）ボタンをクリックします、そうしたらコードサーバーは自動的にアプリケーションを再コンパイルし、新しいバージョンを開いてくれます。

ベストプラクティス：開発モードをリフレッシュしなくでも、変更した箇所の影響が出ることがあります。これは開発モードとコンパイルされたコードの相互関係の方式の結果ですが、常に信頼出来るものではありません。具体的には、これは既存の関数に変更を加えた時のみ発生します。変更を確実に適用されていることを確認するために、変更後にいつもブラウザをリフレッシュする習慣を身につけましょう。





次回のチュートリアル

この時点では、あなたはGWTウィジェットとパネルを実装することで、StockWatcherの基本なユーザインタフェースコンポーネントを構築したはずです。ウィジェットはまだ入力に対して反応しません。

これで、あなたはクライアントのイベントハンドリングのコーディングをする準備を整えました。イベントを応答するウィジェットを配置し、これらのイベントを応答するためのコードを書きます。


→ステップ4：クライアントのイベントの管理

Google Web Toolkit(GWT) 2.0の入門チュートリアルのリスト

スタート ガイド
1.GWT プロジェクトの作成-1
1.GWT プロジェクトの作成-2
2.アプリケーションの設計
3.ユーザー インターフェースの構築-1
3.ユーザー インターフェースの構築-2
3.ユーザー インターフェースの構築-3
4.クライアントのイベントの管理-1
4.クライアントのイベントの管理-2
5.クライアント機能のコーディング-1
5.クライアント機能のコーディング-2
5.クライアント機能のコーディング-3
6.GWT アプリケーションのデバッグ
7.スタイルの適用-1
7.スタイルの適用-2
7.スタイルの適用-3
7.スタイルの適用-4
8.GWTアプリケーションのコンパイル

前回はGoogleのGWT 2.0の入門チュートリアルの日本語訳(3-1)です。

↓原文はこちら
http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/buildui.html


例のごとく、始まる前に、まず、お断りを…。

私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。

GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。

日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。

最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。

3.アプリケーションをホストページに埋め込む

ブラウザ内で実行するStockWatcherアプリケーションを取得するために、それをHTMLファイル、すなわちホストページの中に埋め込む必要があります。 StockWatcherプロジェクトのホストページ＝StockWatcher.htmlはwebAppCreatorによって生成されたものです。スターターアプリケーションのために、StockWatcher.htmlのbody要素は空っぽだった。その結果、Root panelはbody要素全体をラッピングした。ブラウザに表示されるすべてのモノはGWTに構築された動的な要素でした。もしあなたのアプリケーションは静的な要素を持たないのであれば、HTMLホストページを編集する必要はありません。

しかし、StockWatcherは動的な要素だけではなく、静的なHTMLテキストやイメージも使用します。あなたはstockListという名の<div>要素をプレースホルダとして使い、GWTアプリケーションをブラウザページに埋め込みます。この実装方法は、既存のアプリケーションにGWTを埋め込む時に特に役立ちます。

1. ホストページ「StockWatcher/war/StockWatcher.html」を開きます。
2. head要素の中のtitleをStockWatcherに変更します。
3. body要素の中に、<h1>の見出し「StockWatcher」を追加します。
4. body要素の中に、<div>要素を追加し、idをstockListに設定します
5. 不要になったスターターアプリケーション用の要素を削除します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link type="text/css" rel="stylesheet" href="StockWatcher.css">

    <title>StockWatcher</title>

    <script type="text/javascript" language="javascript" src="stockwatcher/stockwatcher.nocache.js"></script>

  </head>

  <body>



    <h1>StockWatcher</h1>

    <div id="stockList"></div>

    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

    <noscript>

      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">

        Your web browser must have JavaScript enabled

        in order for this application to display correctly.

      </div>

    </noscript>



    <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>

  </body>

</html>

（注）HTMLコメントは省略されました。

4.ウィジェットとパネルの実装
次に、GWTのウィジェットやパネルを使ってユーザーインターフェイスを構築します。
UIのほとんどはStockWatcherが立ち上げてからスグ表示されます。従いまして、あなたはこれらをonModuleLoadメソッドの中で実装します。このセクションでは、これらのことを行います：

1. 各ウィジェットとパネルのインスタンスを作成します。
2. 株式データを格納するテーブルを作成します。
3. Add StockパネルとMainパネルを使ってウィジェットをレイアウトします。
4. Main PanelをRoot panelに関連付けます。
5. カーソルのフォーマを入力ボックスに移動させます。

あなたはこのチュートリアルの手順を一つ一つ進めてもイイし、あるいは最後のサマリーからコードをコピーペーストしても構いません。

1.各ウィジェットとパネルのインスタンスを作成します。

「StockWatcher/src/com/google/gwt/sample/stockwatcher/client/StockWatcher.java」を開く。

StockWatcher.javaの中の既存のスターターアプリケーションのためのすべてのコードを下記のコードで置き換えます。

package com.google.gwt.sample.stockwatcher.client;



public class StockWatcher implements EntryPoint {



  private VerticalPanel mainPanel = new VerticalPanel();

  private FlexTable stocksFlexTable = new FlexTable();

  private HorizontalPanel addPanel = new HorizontalPanel();

  private TextBox newSymbolTextBox = new TextBox();

  private Button addStockButton = new Button("Add");

  private Label lastUpdatedLabel = new Label();



  /**

   * Entry point method.

   */

  public void onModuleLoad() {

    // TODO Create table for stock data.

    // TODO Assemble Add Stock panel.

    // TODO Assemble Main panel.

    // TODO Associate the Main panel with the HTML host page.

    // TODO Move cursor focus to the input box.



  }



}

2.Eclipseは変数定義のエラーフラグを立ちます、なぜならこれらの型は解決出来ません。
ヒント：Eclipseを活用するのも一つの方法は、"suggest(提案)"機能を利用し、必要なインポート宣言を追加させることです。

3.対応するインポート宣言をインクルードします。
X（*左のバツマーク）をクリックして提案を取得します。
"import EntryPoint（com.google.gwt.core.client.EntryPoint）"をエンターで選びます。
4.同じ方法で、インポート宣言を宣言することによって他のすべてのエラーを解決します。Eclipseを利用していない場合、下のコードからコピー＆ペーストしてください。

package com.google.gwt.sample.stockwatcher.client;



import com.google.gwt.core.client.EntryPoint;

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

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

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

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

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

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



public class StockWatcher implements EntryPoint {



  private VerticalPanel mainPanel = new VerticalPanel();

  private FlexTable stocksFlexTable = new FlexTable();

  private HorizontalPanel addPanel = new HorizontalPanel();

  private TextBox newSymbolTextBox = new TextBox();

  private Button addStockButton = new Button("Add");

  private Label lastUpdatedLabel = new Label();



  /**

   * Entry point method.

   */

  public void onModuleLoad() {

    // TODO Create table for stock data.

    // TODO Assemble Add Stock panel.

    // TODO Assemble Main panel.

    // TODO Associate the Main panel with the HTML host page.

    // TODO Move cursor focus to the input box.



  }



}

2.株式データを格納するテーブルを作成します。

株式データを格納するテーブルを実装します。
ユーザがStockWatcherを起動する時に表示されるヘッダー行を設定します。これを行うために、setTextメソッドを使って「証券コード、価格、変動、削除」の各列のためのラベルを作成します。

1.株価データのテーブルを作成します。

onModuleLoadメソッドに、以下の強調されたコードで「// TODO Create table for stock data.」コメントを置き換えます。

package com.google.gwt.sample.stockwatcher.client;



import com.google.gwt.core.client.EntryPoint;

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

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

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

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

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

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



public class StockWatcher implements EntryPoint {



  private VerticalPanel mainPanel = new VerticalPanel();

  private FlexTable stocksFlexTable = new FlexTable();

  private HorizontalPanel addPanel = new HorizontalPanel();

  private TextBox newSymbolTextBox = new TextBox();

  private Button addStockButton = new Button("Add");

  private Label lastUpdatedLabel = new Label();



  /**

   * Entry point method.

   */

  public void onModuleLoad() {

    // Create table for stock data.

    stocksFlexTable.setText(0, 0, "Symbol");

    stocksFlexTable.setText(0, 1, "Price");

    stocksFlexTable.setText(0, 2, "Change");

    stocksFlexTable.setText(0, 3, "Remove");



    // TODO Assemble Add Stock panel.

    // TODO Assemble Main panel.

    // TODO Associate the Main panel with the HTML host page.

    // TODO Move cursor focus to the input box.



  }



}

setTextメソッドを使えば、テーブルへの追加を実現できたことを確認できます。setTextメソッドの最初のパラメータは行(*Y軸)、次のパラメータは列(*X軸)、最後のパラメータはテーブルのセルに表示される文字列です。


3. ウィジェットをレイアウトします

ウィジェットをレイアウトするために、Main panelとAdd Stock panelの二つのパネルを作成します。まずはAdd Stockパネル、これは入力ボックスをAddボタンをラッピングする水平パネルです。次はMainパネル、これはstock listテーブル、Add Stock panelとタイムスタンプを入れるための垂直パネルです。


1.Add Stock panelとMain panelの中のウィジェットをレイアウトします。

onModuleLoadメソッドの中の「// TODO Assemble Add Stock panel.」と「// TODO Assemble Main panel.」コメントを、下記の強調されたコードで置き換えます

package com.google.gwt.sample.stockwatcher.client;



import com.google.gwt.core.client.EntryPoint;

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

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

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

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

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

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



public class StockWatcher implements EntryPoint {



  private VerticalPanel mainPanel = new VerticalPanel();

  private FlexTable stocksFlexTable = new FlexTable();

  private HorizontalPanel addPanel = new HorizontalPanel();

  private TextBox newSymbolTextBox = new TextBox();

  private Button addStockButton = new Button("Add");

  private Label lastUpdatedLabel = new Label();



  /**

   * Entry point method.

   */

  public void onModuleLoad() {

    // Create table for stock data.

    stocksFlexTable.setText(0, 0, "Symbol");

    stocksFlexTable.setText(0, 1, "Price");

    stocksFlexTable.setText(0, 2, "Change");

    stocksFlexTable.setText(0, 3, "Remove");



    // Assemble Add Stock panel.

    addPanel.add(newSymbolTextBox);

    addPanel.add(addStockButton);



    // Assemble Main panel.

    mainPanel.add(stocksFlexTable);

    mainPanel.add(addPanel);

    mainPanel.add(lastUpdatedLabel);



    // TODO Associate the Main panel with the HTML host page.

    // TODO Move cursor focus to the input box.



  }



}

4. Main PanelをRoot panelに関連付けます。

HTMLホストページに埋め込まれるすべてのGWTウィジェットやパネルは、必ずRootパネルに含まれています。垂直パネルのmainPanelをRootパネルに関連付けます。ルートパネルはStockWatcherのホストページの中の「stocklistのid」を持つHTML要素をラッピングします。今回の場合では、それは<div>要素です。

1.Rootパネルを介して、Mainパネルとホストページの関連付けを行います。
onModuleLoadメソッドの中の「// TODO Associate the Main panel with the HTML host page.」コメントを、下記の強調されたコードで置き換えます

package com.google.gwt.sample.stockwatcher.client;



import com.google.gwt.core.client.EntryPoint;

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

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

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

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

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

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



public class StockWatcher implements EntryPoint {



  private VerticalPanel mainPanel = new VerticalPanel();

  private FlexTable stocksFlexTable = new FlexTable();

  private HorizontalPanel addPanel = new HorizontalPanel();

  private TextBox newSymbolTextBox = new TextBox();

  private Button addStockButton = new Button("Add");

  private Label lastUpdatedLabel = new Label();



  /**

   * Entry point method.

   */

  public void onModuleLoad() {

    // Create table for stock data.

    stocksFlexTable.setText(0, 0, "Symbol");

    stocksFlexTable.setText(0, 1, "Price");

    stocksFlexTable.setText(0, 2, "Change");

    stocksFlexTable.setText(0, 3, "Remove");



    // Assemble Add Stock panel.

    addPanel.add(newSymbolTextBox);

    addPanel.add(addStockButton);



    // Assemble Main panel.

    mainPanel.add(stocksFlexTable);

    mainPanel.add(addPanel);

    mainPanel.add(lastUpdatedLabel);



    // Associate the Main panel with the HTML host page.

	RootPanel.get("stockList").add(mainPanel);



    // TODO Move cursor focus to the input box.



  }



}

EclipseはRootPanelにエラーフラグを立ち、適切なインポート宣言を示します。

2.import宣言をインクルードします。

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

5.カーソルのフォーマを入力ボックスに移動させます

最後に、カーソルのフォーカスを入力ボックスに移動させましょう。そうすれば、StockWatcherをロードする直後に、ユーザは株の追加を始めれます。

1.onModuleLoadメソッドの中の「// TODO Move cursor focus to the input box.」コメントを、下記の強調されたコードで置き換えます

package com.google.gwt.sample.stockwatcher.client;



import com.google.gwt.core.client.EntryPoint;

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

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

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

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.VerticalPanel;



public class StockWatcher implements EntryPoint {



  private VerticalPanel mainPanel = new VerticalPanel();

  private FlexTable stocksFlexTable = new FlexTable();

  private HorizontalPanel addPanel = new HorizontalPanel();

  private TextBox newSymbolTextBox = new TextBox();

  private Button addStockButton = new Button("Add");

  private Label lastUpdatedLabel = new Label();



  /**

   * Entry point method.

   */

  public void onModuleLoad() {

    // Create table for stock data.

    stocksFlexTable.setText(0, 0, "Symbol");

    stocksFlexTable.setText(0, 1, "Price");

    stocksFlexTable.setText(0, 2, "Change");

    stocksFlexTable.setText(0, 3, "Remove");



    // Assemble Add Stock panel.

    addPanel.add(newSymbolTextBox);

    addPanel.add(addStockButton);



    // Assemble Main panel.

    mainPanel.add(stocksFlexTable);

    mainPanel.add(addPanel);

    mainPanel.add(lastUpdatedLabel);



    // Associate the Main panel with the HTML host page.

    RootPanel.get("stockList").add(mainPanel);



    // Move cursor focus to the input box.

	newSymbolTextBox.setFocus(true);



  }



}

サマリー
この時点では、下記のような作業を終えたハズです。

package com.google.gwt.sample.stockwatcher.client;



import com.google.gwt.core.client.EntryPoint;

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

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

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

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.VerticalPanel;



public class StockWatcher implements EntryPoint {



  private VerticalPanel mainPanel = new VerticalPanel();

  private FlexTable stocksFlexTable = new FlexTable();

  private HorizontalPanel addPanel = new HorizontalPanel();

  private TextBox newSymbolTextBox = new TextBox();

  private Button addStockButton = new Button("Add");

  private Label lastUpdatedLabel = new Label();



  /**

   * Entry point method.

   */

  public void onModuleLoad() {

    // Create table for stock data.

    stocksFlexTable.setText(0, 0, "Symbol");

    stocksFlexTable.setText(0, 1, "Price");

    stocksFlexTable.setText(0, 2, "Change");

    stocksFlexTable.setText(0, 3, "Remove");



    // Assemble Add Stock panel.

    addPanel.add(newSymbolTextBox);

    addPanel.add(addStockButton);



    // Assemble Main panel.

    mainPanel.add(stocksFlexTable);

    mainPanel.add(addPanel);

    mainPanel.add(lastUpdatedLabel);



    // Associate the Main panel with the HTML host page.

    RootPanel.get("stockList").add(mainPanel);



	// Move cursor focus to the input box.

	newSymbolTextBox.setFocus(true);



  }



}

コードのせいでかなり長く成ってしまいましたので、一旦切ります。

次回はこのセクションのラスト「5.レイアウトをテストする」に続きます。

Google Web Toolkit(GWT) 2.0の入門チュートリアルのリスト

Google Web Toolkit(GWT) 2.0の入門チュートリアル：スタート ガイド
Google Web Toolkit(GWT) 2.0の入門チュートリアル：1.GWT プロジェクトの作成-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：1.GWT プロジェクトの作成-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：2.アプリケーションの設計
Google Web Toolkit(GWT) 2.0の入門チュートリアル：3.ユーザー インターフェースの構築-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：3.ユーザー インターフェースの構築-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：3.ユーザー インターフェースの構築-3
Google Web Toolkit(GWT) 2.0の入門チュートリアル：4.クライアントのイベントの管理-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：4.クライアントのイベントの管理-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：5.クライアント機能のコーディング-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：5.クライアント機能のコーディング-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：5.クライアント機能のコーディング-3
Google Web Toolkit(GWT) 2.0の入門チュートリアル：6.GWT アプリケーションのデバッグ
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-3
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-4
Google Web Toolkit(GWT) 2.0の入門チュートリアル：8.GWTアプリケーションのコンパイル

前回はGoogle Web Toolkit(GWT) 2.0の入門チュートリアルの日本語訳(0)で、

今回は「1.GWT プロジェクトの作成」です。



始まる前に、まずはお断り。

私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。

GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。

日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。

最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。

→


ステップ1.GWT プロジェクトの作成

この時点では、あなたは最新版のグーグルウェブツールキットをダウンロードしたはずです。

このセクションでは、あなたはEclipseのGoogleプラグインかGWTのコマンドラインユティリティwebAppCreatorでStockWatcherプロジェクトを作成します。これらのユティリティはスタートするためのサブディレクトリやファイルを生成してくれます。プロジェクトは正しく設定されていることをテストするために、あなたはGWTスターターアプリケーションを開発モード(development mode)で実行します。最後に、生成されたプロジェクトファイルを調査します。



1.GWTアプリケーションの作成

エクリプスでStockWatcherアプリケーションを作成する

Java IDEに提供されているリファクタリング・コード補完、デバッグなどの機能を利用出来るのは、GWTを利用するメリットの一つです。このチュートリアルでは、我々はEclipseを利用します。なぜならそれは広く使われていて、なおかつ無料です。無論、自由にお好みのIDEを使ってもらっても構いません。

GWTアプリケーションを生成するためのウィザードはEclipse用のGoogleプラグインに含まれています。スターターアプリケーションを生成する手順は以下のようになっています。

1. ツールバーの「新規Webアプリケーション・プロジェクト」をクリックする。(*「ファイル」→「新規」→「新規Webアプリケーション・プロジェクト」でもOK)
2. • プロジェクト名に「StockWatcher」を入力する。
   • パッケージ名に「com.google.gwt.sample.stockwatche」を入力する。
   • Google SDKの「Google Webツールキットを使用」をチェックして、デフォルトSDKを使用します。
   • （オプション）もしあなたはGoogle App Engineを使うのであれば、「Google Appエンジンを使用する」もチェックして、デフォルトSDKを使用してください。
   • もしあなたはGoogle Plugin for Eclipseをインストールする時にSDKをインストールしなかったら、「SDK構成…」をクリックして、GWT(必要ならばGAE)のSDKが置かれているディレクトリを指定してください。
3. 「完了」をクリックする。

エクリプスを使わずにStockWatcherアプリケーションを作成する…(略)



生成されるディレクトリ

/src/com/google/gwt/sample/stockwatcher

GWTモジュール定義と(初期の)アプリケーションファイルが入っている

/test/com/google/gwt/sample/stockwatcher

Junitのテストディレクトリとスターター用のテストクラスが入っている

war(*Web Application Resources)

画像・スタイルシート・HTMLホストページなど、公開される静的リソースが入っている

/war/WEB-INF

Javaウェブアプリケーションのファイルが入っている

/war/WEB-INF/lib

Javaウェブアプリケーションのライブラリが入っている

生成されるファイル

StockWatcher.gwt.xml

GWTモジュール定義

StockWatcher.html

ホストページ

StockWatcher.css

アプリケーションのスタイルシート

web.xml

Javaウェブアプリケーションの記述語

StockWatcher.java

GWTのエントリポイントクラス

GreetingService.java, GreetingServiceAsync.java, GreetingServiceImpl.java

GWTのRPCサンプルクラス

gwt-servlet.jar

GWTサーバーのランタイムライブラリ

StockWatcherTest.java

StockWatcherのためのスターターテストケース

生成されるスクリプト

build.xml

開発モードでアプリケーションを実行するために、コマンドラインでGWTコンパイラを稼働させるためのAntビルドファイル

(*Eclipseでやるときはあんまり関係ありません)

生成されるEclipseファイル

• .project
• .classpath
• StockWatcher.launch
• StockWatcherTest-dev.launch
• StockWatcherTest-prod.launch

更にプロジェクト構造に関する情報を知りたいなら、開発者ガイドを御覧下さい。
→Directory/Package Conventions.(*英語です)



2.デフォルトのプロジェクトコンポーネントをテストする

生成されたすべてのプロジェクトコンポーネントをテストすため、開発モードでスターターアプリケーションを実行します。ローカルの開発モードでは、あなたはデプロイ(*アップして、利用出来るように発行すること)した時と同じように、ブラウザでアプリケーションとインタラクト(*双方向の動作)することが出来る、

エクリプスで開発モードコードサーバーを実行する

1. パッケージエクスプローラビューで、StockWatcherプロジェクトを選択する。
2. ツールバーで、「実行」ボタンをクリックし、「Webアプリケーション」で実行する。
3. 開発モード(*コンソールの右側の「Development Mode」)のタブが開いたら、そこのURL(*「http://localhost:8888/」ではなく、こんな感じのやつ「http://127.0.0.1:8888/StockWatcher.html?gwt.codesvr=127.0.0.1:9997」)を右クリックし、コピーする
4. このURLをお好みのブラウザに貼り付ける。

エクリプスを使わずに開発モードコードサーバーを実行する(略)

開発モードコードサーバーに接続する。

Eclipseから開発モード(Development Mode)を一度スタートさせ、そのURLをブラウザに入力したら、ブラウザは接続を試みる。初めて開発モードでGWTアプリケーションを実行した時、あなたはGoogle Web Toolkit Developer Pluginのインストールを促される。ページに表示された指示に従い、プラグインをインストールしてください。その後、ブラウザを再起動し、同じURLに戻って下さい。


(*こんな感じの画面です、Operaには未対応とか…。)

開発を始める前に、すべてのコンポーネントがインストールされ、設定されているかどうかをテストするために、GWTはスターターアプリケーションと共に出荷した。StockWatcherアプリケーションを書き始めたら、あなたはこのスターターアプリケーションのコードを書き換えて行く。






ちょっと長くなりましたので、二回に分けます。

このチュートリアルの後半、

→「3.プロジェクトコンポーネントを調査する」はこちらです。

Google Web Toolkit(GWT) 2.0の入門チュートリアルのリスト

Google Web Toolkit(GWT) 2.0の入門チュートリアル：スタート ガイド
Google Web Toolkit(GWT) 2.0の入門チュートリアル：1.GWT プロジェクトの作成-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：1.GWT プロジェクトの作成-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：2.アプリケーションの設計
Google Web Toolkit(GWT) 2.0の入門チュートリアル：3.ユーザー インターフェースの構築-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：3.ユーザー インターフェースの構築-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：3.ユーザー インターフェースの構築-3
Google Web Toolkit(GWT) 2.0の入門チュートリアル：4.クライアントのイベントの管理-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：4.クライアントのイベントの管理-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：5.クライアント機能のコーディング-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：5.クライアント機能のコーディング-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：5.クライアント機能のコーディング-3
Google Web Toolkit(GWT) 2.0の入門チュートリアル：6.GWT アプリケーションのデバッグ
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-1
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-2
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-3
Google Web Toolkit(GWT) 2.0の入門チュートリアル：7.スタイルの適用-4
Google Web Toolkit(GWT) 2.0の入門チュートリアル：8.GWTアプリケーションのコンパイル

ここ最近ほぼ毎日Google App Engine for Java(GAE/J)と

GWT(Google Web Toolkit)を遊んでいます。

色々触って少しずつ分かってきましたが、改めて思ったのは、

「GWTの部分はちょっと引っ掛かりやすい…」ことですね。



一応グーグル様が用意したGWTのチュートリアル(英語)は一通り適当にやりましたが、

改めて内容を再確認しようじゃないか〜っと思いました。

それならば、ついでに勉強のメモを残そう…っと思ったワケですね。



GWTのチュートリアルは非常によく出来ていますが、

残念ながら現在は公式の日本語訳がありません。

それならば。GWTのチュートリアルを勉強しつつ、

内容確認のため、日本語訳もやっていこうかな〜っと思いました。



始まる前に、ちょっといくつか断っときます。

私は英語のネイティブでも日本語のネイティブでも、プログラミング言語のネイティブでもないので、私が訳したモノの正確性に関しては、全く責任を持ちませんし、これらのドキュメントによって、何かの損害を被ても、やっぱり何一つ責任を持つことが出来ませんので、読みに来られた方、すべて自己責任でお願いします。

GoogleののGWT規約によれば、GWTはGoogle製のサンプルなども含めて、著作権に関してはApache 2.0のライセンスを利用していますし、グーグルのチュートリアルについても、「クリエイティブ・コモンズの表示 3.0 ライセンス」でライセンスされていますので、翻訳しても、出典を知らせれば特に問題がないと認識しています。もし著作権法などに対し、何か問題がありましたら、ぉぅぇぃまでお知らせして頂けましたら、素早く適切に対処致します。

日本語訳なんですが、適宜にコメント、いわゆる「訳注」的なモノも入れます。訳注は(*...)のように表記します。可能な限りオリジナルとの区別をつけますし、間違いが出ないように注意しますが、漏れ・誤りがありましたらごめんなさい。

最後に、基本的にぉぅぇぃはEclipseを使っていますので、申し訳ございませんが、Eclipseと全く関係ない部分は飛ばすつもりです。

GWTを始まる前に、まず環境を整える必要があります。

幸い、GWTの導入については日本語訳されていますので、そちらを参照してください。

→スタート ガイド - クイック スタート -Google Web Toolkit

Java SDKやJava IDEは自分でどうにかしてください…。






というわけで、今日は第一弾、

「Getting Started(スタート ガイド)」から行きます。

→http://code.google.com/intl/ja/webtoolkit/doc/latest/tutorial/gettingstarted.html

スタート ガイド

はじめに

このチュートリアルでは、あなたは簡単なAJAXアプリケーション、「StockWatcher(株式ウォッチャー)」を書きます。




まずStockWatcherを使ってみて下さい。いくつか証券コード(Symbol)を追加(Add)し、挙動を確認してみてください。

(*操作可能なStockWatcherの完成画面はこちら)

StockWatcherを構築していくプロセスの中で、あなたは、GWTが提供したツールを使って、以下のことを実現するための方法を学びます。

• お好みのJavaのIDE(統合開発環境)でウェブブラウザアプリケーションを書く
• GWTの開発モードでJavaをデバッグする
• あなたのJavaコードを高度な最適なされたJavascriptにクロスコンパイルする。
• 一種類のコード(Java)だけを保守しながら、複数ブラウザ向きの実装(Javascript)を実現する

GWTを利用したAJAXアプリケーションの開発プロセス

このスタートガイドチュートリアルは典型的なアプリケーション開発サイクルに沿って、８つのセクションに分けられている。何れのセクションも、その前のセクションの成果を基づいています。
(*順番通りでやらないと行けないので、飛ばさないでくださいってことです。)

ここ(スタートガイド)のStockWaterの基本的な実装では、すべての機能はクライアントサイドのものです。サーバーサイトのコーティングやクライアントサーバー間の通信については、他のチュートリアルに含まれています。

各セクションの内容は以下の通り。

やること

学習のコンセプト

利用するGWTのツールとAPI

1.GWT プロジェクトの作成

始めるためのファイルやディレクトリの生成

Eclipse用のGoogleプラグイン、コマンドラインのGWTツール、webAppCreator(*多分訳しません)、開発モード

2.アプリケーションの設計

機能要件の定義、制約と実装の戦略

言語の制約

3.ユーザー インターフェースの構築

ビジュアルデザインとユーザインタフェースコンポネントのレイアウト

GWT widgets(ウィジェット)とパネル、ルートパネル

4.クライアントのイベントの管理

マウスとキーボードのハンドリング

ClickHandler(クリックハンドラー)とKeyPressHandler(キープレスハンドラー)インターフェース

5.クライアント機能のコーディング

一種類のコードだけを保守しながら、複数ブラウザ向きの実装を実現する。リファクタリングやコード生成のJava IDEの機能を利用。

いくつかのGWTメソッド

6.GWT アプリケーションのデバッグ

JavaScriptにコンパイルする前にJavaコードをデバッグする。アプリケーションを開発モードで実行しながら、Java IDEのデバッグツールを利用する

開発モード

7.スタイルの適用

アプリケーションに視覚スタイルを追加する。CSS(スタイルシート)の中に視覚スタイルを定義する。プログラムでHTML要素にクラス属性を設定する。スタイルをダイナミックに変える。これらはイメージファイルのような静的要素も含む。

GWTモジュール、GWTテーマ、アプリケーションのスタイルシート、GWTメソッド:addStyleName,addStyleDependentName,setStyleName、リソースの自動追加

8.GWT アプリケーションのコンパイル

あなたのクライアントサイドのJavaコードをJavaScriptにコンパイルする。製品モードでテストする。遅延バインディングのメリットを学習する。

GWTコンパイラ

次回のチュートリアル

もしあなたは開発環境（Java SDK,EclipseなどのJava IDE、最新版のGoogle Web Toolkit）を揃ってないのであれば、まずはそれを整えましょう。

次はGWTのプロジェクトの作成です。

→1.GWT プロジェクトの作成

今日もちょっとGAE/J(Google App Engine for Java)とGWT(Google Web Toolkit)の話。



ここ数日、Slim3やらドラッグアンドドロップやら、色々試してみましたが、

ちょっと原点に戻ろうかと思います。

Google製の「GWT」ですね。



Google Web Toolkitについて、グーグル様によれば…。

→Google Web Toolkit

デベロッパーには生産性を、ユーザーにはパフォーマンスを

最新のウェブ アプリケーションの作成は、面倒でエラーの発生しやすいプロセスです。デベロッパーは 90% の時間をブラウザ固有の動作への対処に費やすことがあります。それに加えて、JavaScript の大規模なコード ベースや AJAX コンポーネントの作成、再利用、管理はもろくなりやすく、困難です。Google Web Toolkit（GWT）を使用すると、この難題が容易になります（Google Plugin for Eclipse を使用するとさらに便利です）。デベロッパーは Java プログラミング言語を使用して、複雑かつ高パフォーマンスの JavaScript フロントエンド アプリケーションをすばやく作成し、管理できるようになります。

Javaで書いて、そしてGWTのエンジンでそれをJavascriptというか、

AJAXなコードを生成してくれるものです。

要するに、リッチなクライアントのインタフェースを作ってくれる…のです。



そして、サーバー(GAE/Jの場合はJava)とクライアント(AJAX)の間に、

データをやり取りするためにいくつかの手段が用意されています。

→Communicating with the server

・GWT RPC：Making Remote Procedure Calls (GWT RPC)
Javaのクラスをシリアライズ（直列化）して受け渡しをする

・JSON：Retrieving JSON Data via HTTP
JSONやXMLのデータをHTTPで受け渡す

・Cross-Site：Making Cross-Site Requests for JSONP
JSONP (JSON with padding)で受け渡す。

何れも悪くないのですが、ぉぅぇぃは「GWT RPC」が好きなんですね。

他の二つの方式は、結局テキストやスクリプトデータを受け渡ししていますが、

RPCの場合はオブジェクトそのものを受け渡しが出来ますので、

汎用性が高いし、オブジェクト指向的にも、

こっちのほうが色々強固なシステムを構築出来そうなんですね。



で、最近はこのパターンでちょっとハマっていましたので、

ちょっと簡単に感想や所見を述べたいと思います。



まず、GWT RPCはオブジェクトをシリアライズして受け渡しをしている…わけなんですが、

すべてのクラスをそれで受け渡せるワケではありません。

サーバー側は、要するにJVMが回っていますので、基本的に何でもOKで、

それといった制限がありません。



が、GWTで生成したクライアント側は、

「何から何まで」のライブラリを対応しているわけではありません。

つまり、クライアント側に処理出来ないクラスを渡しても、

クライアント側はうまく捌けない…のです。



従いまして、クライアント側に「処理出来無さそう」なクラスをアクセスしようとしたら、

GWTコンパイルの時、こんな感じのエラーが出ます。

No source code is available for type パッケージ.クラス; did you forget to inherit a required module?

エラーメッセージの通り、つまりこれらのクラスのためのコードが足りません…、

必要なモジュールを継承(?)してください…ということですね。



一般的に、ウェブサービス上のデータ（リクエスト?）の流れはこんな感じ…、

「クライアント(GWT)⇔サーバ(GAE)⇔データベース(Datastore)」。

GAEのほうは割りとフリーダムですが、GWTとDatastoreには制限があります、



同じグーグル様のパッケージなので、共通している…っと思いたいところですが、

困ったことに、GWTとDatastoreの制限は必ずしも一致していないのですね。

つまり、Datastoreには使えるのに、GWTには扱えない、

GWTには扱えるのに、Datastoreには扱えない…のようなケースがあります。



例えば、Datastoreのほうには、GAEのために用意されたUserクラスを保存出来ますが、
（＊com.google.appengine.api.users.User）

デフォルトのGWTはそれを対応していませんので、

UserのインスタンスをRPCでGWT側に送ろうとしたら、エラーが出ます。



この問題に対して、無理やりGWTをDatastoreにあわせる…、

両方同時に扱えるクラスしか使わないようにする方法もありますが、

いろいろ制限が多いのですね。



その他、その差異をサーバー(GAE)に吸収させる方法もあると思われます。

つまり、保存するためにRPCでGWTから送られたオブジェクトを

そのままDatastoreに入れるではなく、

何かしらのクラスやデータの変換を行ってから永続化（格納）する。

同じくDatastoreから取り出したデータオブジェクトも、

そのままGWTに送るではなく、何かしらの変換を行ってからクライアントへ…ですね。



もしGWTのほうに色々なクラスを扱いたいのであれば、

それをGWTの設定ファイルである◯◯.gwt.xmlの中に記述する必要があります。

例えばこんな感じ

<inherits name='com.google.gwt.user.User' /<

この「com.google.gwt.user.User」というのは、

GWT SDKの「gwt-user.jar」の中のパッケージを辿っていけば、

「User.gwt.xml」ってファイルを確認することが出来ます。

まあ、さらに色々継承している…って感じだけどね。

ちなみにこんな感じです。

↓User.gwt.xmlの中身




つまり、だ、基本的にサポートされているクラスなら良いのですが、

そうではないモノならば、モジュールを入れたり、

無かったら自分でモジュールを作ったり、いろいろやらないと、

クライアント側には扱えない…ということですね。



で、このモジュールの扱い方について、色々試しましたら、

少しずつ分かってきた…のような気がしますが、

もうちょっと調べないと行けませんので、

更に詳しく成ったら、何かしらの記事を書きたいと思います。



ちなみにGWTのプロジェクトはデフォルトに、

client、server、sharedの三つのパッケージがあります。

クライアント関連のものはclient(設定すればsharedも)パッケージの中に入れるようにしたい。



GWTの制限を受けずに色々処理させたいなら、

それをサーバー側に定義し、serverパッケージの中に入れといたほうが、

色々分かりやすい…のような気がします。

意識せずに適当にやったら、色々とエラーに悩まされてしまいますね。

ちなみにどのパスをGWTのコンパイルに含むかどうかは、

自分のプロジェクトにある「*.gwt.xml」の中の「source path」で設定できます。





GAE/Jにしても、GWTにしても、チュートリアルに沿ってやったら、

そのお気楽さとパフォーマンスに感動するばかりですが、

お気楽モードでいじりまわすと、あっちこっち引っかかってしまいますね。

う〜む、まずは正しい理解、これ大事ですね。

やっぱり真面目に勉強しないと！



また色々触っていきます。

今日も楽しくGoogle App Engine for JavaとGWTを色々試す。



GAE/Jは普通のRDBMS（リレーショナルデータベース管理システム）を使えずに、

Google特有のBigTableというデータベースシステムしか利用できません。

で、データを扱うために、「DataStore(データストア)」を利用するわけですが、

データをアクセスするためのインターフェースとして、

グーグルは JDO（Java Data Objects）やJPA（Java Persistence API）を推奨しています。



ここ数日、グーグルのチュートリアルに沿って、JDOを使って来ましたが、

クエリの書き方など、色々調べていましたら、

JDOはグーグルに推奨されていますが、

どうもクエリとかのパフォーマンス的にあんまり良くない…らしい。



（実はあんまり深く理解していないのですが）、

Slim3のDatastoreがイイ…という噂を聞きつけました。

赤い彗星並に、JDOの３倍以上早いらしい。

→Slim3 Datastoreに乗り換える(1)
→javaのdatastore操作は slim3 がおすすめ

それならばオラも…ということで、チャレンジしてみました。



ちなみに、Slim3と言うのはGAE/Jに向けて最適化したMVCフレームワークです。

で、Slim3 Datastoreはそのフレームワークの中の一部ですね。

フレームワークを丸ごと使うかどうかは要検討…ですが、

データアクセスが早いのは嬉しいので、とりあえずDatastoreだけを使ってみようかと。

ドキュメントとかを読むと、どうやらJDOよりも色々と高性能で、

仕組みも自然で分かりやすいし、

クエリ出来るパターンのバリエーションも多く、なかなか良いらしい。

→本家のSlim3のドキュメント（英語）
→有志が作ったSlim3 Datastoreの日本語訳



で、チュートリアル（英語）の通りにやると、

…いきなり上手くいかない。

こんな感じのエラーが出て、うまくビルドが出来ないのです…。

Buildfile: /workspace/slim3-blank/build.xml
gen-service:

BUILD FAILED
/workspace/slim3-blank/build.xml:42: java.lang.UnsatisfiedLinkError: Cannot load 32-bit SWT libraries on 64-bit JVM

色々調べると、どうやらこれはMac特有で、

32-bitの環境と64-bitの環境が混在している問題らしい。

チュートリアルもこんな感じのこと言っていますし、

Ant Build(first item). If you encounter an exception, confirm that you use Java 32 bit and Eclipse 32 bit.

（＊もし例外を遭遇したら、java 32bitとEclipse32bitを使っているかを確認してください。）

なんか32bitのjavaとEclipseをオススメとか。

いろいろ調べると、Java6は対応していないから、

Java5をダウンロードすれば解決できるとか、そういう解決法がありましたが、

Java5を使ってもなんだか上手くいかない。



更に調べると、これは32bit版のEclipseの問題で、

64bit版のEclipseを使えば、問題を解消出来る…ことが分かりました。

→Slim3のチュートリアルでjava.lang.UnsatisfiedLinkError: Cannot load 64-bit SWT libraries on 32-bit JVM

で、自分が使っているEclipseは32bitなのか64bitか分かりませんので、

とりあえず64bit版をダウンロード、展開してみました。

ちなみにEclipseを実行してみると、元々のは32bitってことが分かりました。

↓32bitのEclipseの立ち上げ画面


↓64bitのEclipseの立ち上げ画面



http://download.eclipse.org/eclipse/downloads/から、

とりあえず最新の安定リリース（RCついてないやつ）を選んで、

その中から、「Mac OSX (Mac/Cocoa/x86_64) 」のやつを選べばよいかと。

ファイル名はこんな感じです。

「eclipse-SDK-?.?.?-macosx-cocoa-x86_64.tar.gz」





とりあえず、Mac OS の場合、64 bitのEclipseを使えば、

ビルドが出来るようになりましたので、チュートリアルを一通りやってみました。

特に大きな問題が無かったです。



で、次にSlim3のデータストアとGWT(Google Web Toolkit)との連動ですが、

ここにも問題が…。

ほぼSlim3チュートリアルの通りのデータのクラスを作って、

それをGWTのクライアントで受け取れるようにして、

GWT コンパイルすると、エラーが出ます。

↓Eclipseで出されるエラー画面


エラーメッセージはこんな感じです…。

[ERROR] Errors in 'file:/workspace/GoogleWebToolkitSlim3/src/gwt/test/client/ServerService.java'
[ERROR] Line 17: No source code is available for type gwt.test.server.Tweet; did you forget to inherit a required module?

で、いろいろ調べると、GWTを利用する際、基本的にclientパッケージ内のクラスは、

clientパッケージ内のクラスしか利用出来ない…らしい。
（場合によってsharedパッケージも行ける。）

それならば、データのクラスをshared.modelの中に移動させました。



これでイケる！っと思いましたが、

そうしたら、こんな感じのエラーが出るようになりました。

[ERROR] Errors in 'file:/workspace/GoogleWebToolkitSlim3/src/gwt/test/shared/model/Tweet.java'
[ERROR] Line 30: No source code is available for type com.google.appengine.api.datastore.Key; did you forget to inherit a required module?

このエラーメッセージで検索しても、なかなか解決策にたどり着きませんでした…。



分かったことと言えば、GWTはすべてのJavaライブラリを対応していないので、

対応外のライブラリを利用しようとしたら、弾かれてしまうのですね。

一応、インクルードするために、inheritsに何かを追加しないと行けないのですが、

その書き方がよく分からない…。

いや、他の例を見れば、書き方は分かるのですが、

なにをインヘリタンスすれば良いのかわからんのじゃ。



かなり根気よく色々探し回りましたら、

ようやくGWTでslim3を使うための設定法と出会いました。
→Slim3でGWTのブランクプロジェクトを作る手順

上記URLの「2010-01-27 追記」の部分で対策法が書かれていました。

{プロジェクト名}.gwt.xmlのファイルに、こんな感じの一行を追加すれば行けます。

<inherits name='org.slim3.gwt.emul.S3Emulation' />

場所は他のinheritsの記述、

例えば<inherits name='com.google.gwt.user.User' />の前後でOKです。


折角なので、上記の「Slim3でGWTのブランクプロジェクトを作る手順」に沿って、

Eclipse＋GAE/J＋GWT＋Slim3のための環境を設定し直しました。

そうしたら、エラーも無く問題無くいろいろ実行出来ました！

これでおらもシャア並の三倍速をゲットだぜ！






いやいや、今回は超ハマってしまいました。

GWTの仕組みへの理解が不十分のは一番大きかったのですが、

ドキュメントになかなか辿り着け無かったのもしんどかったですね〜

まあ、理解が不十分なので、こんなエラーが出たのはぉぅぇぃくらい…ってことかしら。






またまたGAE/J＋GWTを遊ぶぜ！

今日も引き続き、Google App Engine for Javaの話題です。



GAE/JとGWTを色々触ってみて、そのポテンシャルを感動しているところです。

インストールして、

グーグルが用意したチュートリアルとドキュメントを沿って、

GAE/JとGWTを一通り触りました。



この環境でドラッグアンドドロップ出来れば、

PCのほぼすべての操作はウェブ上で出来るじゃん…っと思って、

調べみましたら…出来るのですね…。しかもあんまり難しくない…。

いや、いつのまにこんな時代に成ってしまった…って感じです。

恐るべし、クラウドコンピューティング。



というわけで、今日はちょこっと、

GAE/J＋GWT環境でドラッグアンドドロップを実現している、

gwt-dndライブラリを少々紹介します。



このライブラリは、名前通り、

「Drag-and-Drop Library for Google-Web-Toolkit (GWT)」、つまり

「ドラッグアンドドロップライブラリforグーグルウェブツールキット」です。

このライブラリを利用することで、

GWTの上でドラッグアンドドロップが出来るように成ます。



どんな感じなものなの？っと思う方も居るかも知れません。

説明するよりも見たほうが早いと思いますので、

まず下記のURLでデモを見てみて下さい…。

→demo - DragHandleExample

全部で１３個のデモがあります。適当に「Demo #」タブをクリックして、

適当に赤い「drag me!」をドラッグアンドドロップして遊んでみて下さい。

スゴイでしょう…、簡単に出来るぜ、コレ…。



ちなみに、GWTは基本的にajaxのツールキットなので、

このgwt-dndも同じように、基本的にjavascriptで動かしています。

しかし、GWTを利用するプログラマは基本的にjavascriptを触ることなく、

javaのプログラムを書いてら、

GWTが勝手にそれを適切なajaxのコードに変換してくれます。

従って、javascriptの知識がゼロでも、javaさえ扱えれば、

GWTとgwt-dndでリッチなドラッグアンドドロップも出来ちゃうのですね。



一応のチュートリアル（英語）は、グーグル・コードにあります。

→http://code.google.com/p/gwt-dnd/
→Getting started with gwt-dnd in your own application.



一通りみれ、その通りにやれば、

コンポーネント(Widgetのほうが妥当？)をドラッグアンドドロップしてみる…

くらいはスグ出来るように成ます。



しかし、ぉぅぇぃみたいな非プロのアマチュアプログラマが、

ちょっとでも複雑なことをやろうとしたら、挫折しそうになってしまうのですね。

そういう時に、デモをローカルで実行してみて、

そこのコードを見て、中身を読んで行けば、なんとなく使えるようになります。

が、なんかこのデモをzipとかでまとめて

ダウンロード出来るように成っていませんので、ちょっと苦労しました。



一応、gwt-dndのデモをローカルのGAE/J＋GWTを実行したら、

こんな感じの画面になります。

↓gwt-dndのDemo 5を単体で実行してみました




折角だし、自分用のメモも兼ねて、

このデモを自分のローカル環境で実行出来るまでの手順を残します。

一応、既にGAE/Jの環境を整えていることが前提になります。

後、テスト用のプロジェクトが既に作成されていることも前提ですね。



1.ライブラリをダウンロード

http://code.google.com/p/gwt-dnd/wiki/GettingStartedの一番上に、

大量のgwt-dnd-?.?.?.jarファイルがあります。

自分のGWTバージョンに合うモノをダウンロードしてくださみ。

ぉぅぇぃがGAE/JとGWTを入れたのはここ数日のことなので、

GWT2.0に対応しているgwt-dnd-3.0.0.jarをダウンロードしました。



2.ライブラリをビルド・パスに入れる

Javaのビルド・パスに、この「gwt-dnd-?.?.?.jar」を指定します。

Eclipseの場合は、「プロジェクト」に右クリック

→Javaのビルド・パス→外部JARの追加→「gwt-dnd-?.?.?.jar」を選びます。



3.デモのダウンロード

まず、下記のURLを読んでみて下さい。

サブバージョンとかの意味が理解出来る方は、この通りでやれば、

難なく行けると思います。

ぉぅぇぃは、このページを読まずに、

デモページから勝手にコードを漁ったので、大変なことになりました…。

→How to checkout the gwt-dnd library and demo source code using Eclipse
（英語です。）

意味が理解出来ない方は、手動で一つ一つ自分で落として行く必要があります。



コードは場所は、下記のURLで確認出来ます。

→svn/ trunk/ DragDrop/ demo/ com/ allen_sauer/ gwt/ dnd/ demo

基本的に、この下のモノを全部落として行けば良いのですが、

なにせ、ファイル数が非常に多いので、一つ一つ落として行くのはかなり大変。



とりあえず一つだけ入れてみたい…方のために、

ぉぅぇぃが試した「Demo 5」のための、

必要最小限のファイルをまとめてみます。


com.allen_sauer.gwt.dnd.demo/DragDropDemo.gwt.xml
com.allen_sauer.gwt.dnd.demo.client/DemoDragHandler.java
com.allen_sauer.gwt.dnd.demo.client/DragDropDemo.java
com.allen_sauer.gwt.dnd.demo.client/ExampleTabPanel.java
com.allen_sauer.gwt.dnd.demo.client/RedBoxDraggableWidget.java
com.allen_sauer.gwt.dnd.demo.client.example/DraggableFactory.java
com.allen_sauer.gwt.dnd.demo.client.example/Example.java
com.allen_sauer.gwt.dnd.demo.client.example.insertPanel/InsertPanelExample.java
com.allen_sauer.gwt.dnd.demo.client.example.insertPanel/VerticalPanelWithSpacer.java
com.allen_sauer.gwt.dnd.demo.client.ui/MultiRowTabHistoryTokens.java
com.allen_sauer.gwt.dnd.demo.client.ui/MultiRowTabPanel.java
com.allen_sauer.gwt.dnd.demo.client.ui/StylableVerticalPanel.java
com.allen_sauer.gwt.dnd.demo.client.util/GWTUtil.java

基本的に、設定ファイルの「DragDropDemo.gwt.xml」は当然必須で、

uiパッケージ、utilパッケージ、exampleパッケージ直下のすべてのファイルも必要です。

その他の部分は、実行したいDemoによって変わってきます。



このデモの全体の構造ですが、

gwtのEntryPointをimplementsした画面全体のクラスはDragDropDemoです。

その中に１３個のデモのパネルを入れています。

そしてタブを使って切り替えるようにしています。

これらのクラスは、uiやutilのクラスを利用しています。



何れのデモパネル（例えばDemo 5の場合はInsertPanelExample）も、

com.google.gwt.user.client.ui.SimplePanelを継承したExampleクラスを

さらに継承しています。

実際に各デモの動作を記述したクラスは、

com.allen_sauer.gwt.dnd.demo.client.exampleの下の各パッケージの中の

◯◯Exampleになります。



Javaクラスのダウンロードはこんな感じでOKですが、

これらのクラスと連動するhtmlとcssも落とす必要があります。

これらは、下のURLから取得しましょう。

→Source path: svn/

ここからDragDropDemo.htmlとDragDropDemo.cssをダウンロード。

DragDropDemo.htmlの中に、

グーグルアナリティクス用のコードも入っていますが、

これは消してしまいましょう。具体的に言うと、39行から47行ですね。



4.ソースコードを微調整する。

で、一つしかデモをダウンロードしていないのであれば、

DragDropDemoにある他のデモのコードはもちろん全部エラーになりますので、

豪快に全部コメントアウトしてしまいましょう。

ちなみに、いじらないと行けないのはDragDropDemoだけです。

↓こんな感じでコメントアウト


↓さらにコメントアウト


↓もっとコメントアウト


まあ、Eclipseの場合、エラーが出ているところをちょこちょこ対処すればよいかと。


5.デモのビルド

warの下のdemoフォルダを生成するために、

ビルドする必要があります。



Eclipseの場合は、DragDropDemo.gwt.xmlを配置したら、

勝手にビルドのための設定してくれます。

なんかの問題で自動設定してくれなかった場合、

「プロジェクト」に右クリック

→Google→Webツールキット→エントリー・ポイント・モデル→追加

で「DragDropDemo」を追加して下さい。



（わざわざ説明するのもアレなんですが、）ビルドの方法は、

Eclipseの場合は、「プロジェクト」に右クリック

→Google→GWTコンパイル



6.デモを見てみる。

普通にGAE/J＋GWTを実行してみる。
（「プロジェクトを右クリック→実行→Webアプリケーション」とか）

下のような感じのURLで確認出来ます。

http://localhost:8888/DragDropDemo.html

↓実際の画面はこんな感じ



7.コードを読んだり、いじったり、お好みでどうぞ。

Demo 5の場合は、主にinsertPanelExampleを見たら良いかと思います。

例えばこんな感じで調整してみるとか。

・行（COLUMNS）と列（ROWS）の数を一つずつ増やしてみたり、
・挙動を確認するためのTESTボタンを追加してみたり…。

↓しょうもないテストをしてみました。


本当にしょうもないけど、

いろいろいじってみたら、結構理解出来ちゃうもんですね。






さ〜っとこんな感じですね。

いやいや、ここ数日ず〜っとGAE/JとGWTをいじっていますが、

本当にスゴイですね、コレ。

しばらくの間は飽きそうもないので、またちょこちこと関連の話をしたいと思います。