Google App Engine for Java(GAE/J)のQuotaとCPU TIMEのチューニング

最近コツコツGAE/Jでウェブサービスを作っているぉぅぇぃです。

利用者数がちょこちょこ増えて、

いい感じ(?)にQuota(割り当て)の数値が上がってきました。っと言っても、

一番高いCPU Timeも無料割当分の10%くらいしか来てないのですが、

気が早いぉぅぇぃは、

「おろおろ、おろおろ、ユーザが10倍増えたらOver Quotaでサービス停止になるじゃなイカ!?」

ということで、今までの適当コードを見直すことにしました。

っと言っても、CPU TIMEの場合は要するに情報を処理するのに時間かかりすぎた…、

ということなので、できるだけ処理を簡素化し、無駄な処理を省き、

データストアへのアクセスを極力減らして、

キーの取得だけで済ませるものはキーだけを取って、

データが短い文字列や数字なら、キーの中に入れてみるとか、

キャッシュ出来そうなものは可能なかぎりキャッシュして、

システム内でハンドルしてた処理を、可能ならば外部のシステムに委譲してみる…とか。

まあ、色々ですね。

ぉぅぇぃの持論ですが、

ダイエットしたいなら、毎日食事メモを取って、体重を測ってデータを取らなければならない。

家計を改善したいのであれば、毎日家計簿を付けて、定期的に分析をしなければならない、

同じく、リソースを節約したいのであれば、まずは測定しないと、話が始まらないです。

で、当たり前のことですが、GAE/JはCPUの使用状況をモニタリングするためのAPIがあります。

サンプルコードはこんな感じ。

http://code.google.com/intl/en/appengine/docs/quotas.html

In the Java API, the com.google.appengine.api.quota package provides the QuotaService interface (with an implementation and factory) with several methods. See the Javadoc for details.

import com.google.appengine.api.quota.QuotaService;
import com.google.appengine.api.quota.QuotaServiceFactory;
// ...
QuotaService qs = QuotaServiceFactory.getQuotaService();
long start = qs.getCpuTimeInMegaCycles();
doSomethingExpensive();
long end = qs.getCpuTimeInMegaCycles();
double cpuSeconds = qs.convertMegacyclesToCpuSeconds(end - start);

まあ、こんな感じですが、毎回毎回これを書くのがさすがに面倒くさい…というか、

コードのメンテナンスが大変なので、

シンプルにCPU TIME測定してくれるQuotaCheckerクラスを作ってみた。

package aaa.bbb.ccc;

import com.google.appengine.api.quota.QuotaService;
import com.google.appengine.api.quota.QuotaServiceFactory;
import com.google.appengine.repackaged.org.apache.commons.logging.Log;
import com.google.appengine.repackaged.org.apache.commons.logging.LogFactory;

public class QuotaChecker {
private static QuotaService quotaService = QuotaServiceFactory
.getQuotaService();
private Log log = LogFactory.getLog(QuotaChecker.class);

private long start = -1L;
private long end = -1L;

public QuotaChecker() {
}

public void start(){
log.debug("start()");
start = quotaService.getCpuTimeInMegaCycles();
}

public void check(String message) {
end = quotaService.getCpuTimeInMegaCycles();
if (start != -1L) {
double time =
quotaService.convertMegacyclesToCpuSeconds(end - start);
log.debug(message+":"+(int)(time*1000)+"cpu_ms");
}
start = end;
}
}

使い方はこんな感じ。

    QuotaChecker qc = new QuotaChecker();
qc.start();
//何かの処理その1
qc.check("何かの処理その1");
//何かの処理その2
qc.check("何かの処理その2");
//何かの処理その3
qc.check("何かの処理その3");

そうしたら、こんな感じのログが出てきます。

DEBUG – 何かの処理その1:xxxcpu_ms
DEBUG – 何かの処理その2:yyycpu_ms
DEBUG – 何かの処理その3:zzzcpu_ms

こんな感じで、処理に費やしたCPU時間は大体分かるようになります。

しかし、どんな仕組みかはよく分かりませんが、

QuotaServiceで計算したCPU時間とログで表示されるCPU時間は合わない。

1桁違う…くらい合わないのですが、まあ、

各プロセスのパフォーマンスを測定するのに十分な数値じゃないかと思います。

後、全く同じ処理でも、ほーんーとーうーにかなりバラツキが大きいので、

何回か実行して、平均で見たほうがいいでしょう。

ちなみに、ここらへんのチューニングは、結構効果があります。

意外なところに無駄な処理が行ってたり、妙に時間かかるな…っと思ったら、

構文のミスでバグに近いコードがあったり…まあ、色々ですね。

どれくらい効果があるか…の一例ですが、今回チューニングしたコートだとこんな感じ。
(*クローンによる同じ同等な定期処理です)

ビフォー:1674ms 3928cpu_ms 3181api_cpu_ms 0kb
アフター:635ms 259cpu_ms 95api_cpu_ms 0kb

…。

ァッハッハ、元々はどれほど雑で無駄が多いコードかが分かりますね。

しかし、元々のコードも動いてなかった…というわけではなく、

非常に効率が悪いのですが、一応フツウに動いていました。

しかし、アフターのコードは、ビフォーのコードと比べたら、

ランニングコストは十分の一…だよね。

そう考えますと、これからの時代では、

パフォーマンスが抜群のコードが書ける腕の良いプログラマーの価値は、

今よりも高くなていくじゃないかと思います。

そういう意味では、これからのIT業界で生き残るためには、

しっかり腕を磨くことは重要になりますね。

そう考えたら、20−30年前から存在しているような古いスタイルの情報教育…ではなく、

最先端なやり方を教えてくれるところで学びたいよね。

IT業界を目指したい方は、良かったらKCGKCGIも見てみると良いかもしれません。

超先端とは言いませんが、かなり良い線には行ってると思いますよ。

comments

Google Web Toolkit(GWT) 2.0入門チュートリアル日本語訳:8.GWTアプリケーションのコンパイル

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 Web Toolkit(GWT) 2.0の入門チュートリアルの日本語訳(7-4)です。

今回は「8.GWTアプリケーションのコンパイル」です。

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

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

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

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

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

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

ステップ8:GWTアプリケーションのコンパイル

この時点では、あなたはStockWatcher機能要件の初期実装を完成しました。これまでは、StockWatcherを開発モードで実行してきました。開発モードでは、コード変更の影響を即座に確認でき、そしてあなたのIDE(統合開発環境)のデバッグツールを利用できます。StockWatcherをコンパイルした後、プロダクションモードで実行・テストできます。アプリケーションをプロダクションモードで実行する際、アプリケーションはあらゆるブラウザのプラグインやJavaバーチャルマシン(JVM)を必要としない純粋なJavaScriptとして存在します。

このセクションでは、以下のことを行います。

  1. Javaソースコードをコンパイルします
  2. プロダクションモードでStockWatcherをテストします
  3. StockWatcherをウェブサーバーにデプロイ(deploy)します。

そしてこのセクションで遅延バインディング(deferred binding)についても学びます、これはブラウザ(あるいはオプションとして言語など他の要素)に要求されるコードのみを提供するGWTのメカニズムです。

1.JavaからJavaScriptにコンパイルする

JavaソードコードからJavaScriptにコンパイルするために、GWTコンパイラーを利用します。

StockWatcherアプリケーションをコンパイル(Eclipseの場合)

  1. パッケージ・エクスプローラで、StockWatcherプロジェクトを選択します。
  2. ツールバーから、「GWTコンパイル・プロジェクト
    GWT コンパイル・プロジェクトボタン

    」を選びます。

  3. コンパイルのオプションを確認し、コンパイルボタンをクリックします。

Eclipseのコンソールで、GWTコンパイラの出力を確認できます、たとえばこんな感じ。

Compiling module com.google.gwt.sample.stockwatcher.StockWatcher
Compiling 6 permutations
Compiling permutation 0…
Compiling permutation 1…
Compiling permutation 2…
Compiling permutation 3…
Compiling permutation 4…
Compiling permutation 5…
Compile of permutations succeeded
Linking into /Document/workspace/StockWatcher/war/stockwatcher.
Link succeeded
Compilation succeeded — 32.905s

StockWatcherアプリケーションをコンパイル(Eclipseの場合)
(*省略します)

プロダクションモードでテストします

アプリケーションがコンパイルされた後、新しいブラウザウィンドウでStockWatcher.htmlを開けば、プロダクションモードとして実行できます。StockWatcherは開発モードと同じ外観と振る舞いになっています。両者の本当の違いは隠蔽されています。現在StockWatcherとインタラクトをする時、JVM内Javaバイトコードとしてではなく、ブラウザ内のJavaScriptとして実行されます。

ヒント:既に開発モードサーバを起動した場合、(コンパイルの後に)アプリケーションをロードする前に、URLからgwt.codesrvパラメータを削除することで、アプリケーションをプロダクションモードで実行できます。

アプリケーションをウェブサーバーにデプロイ(deploy)します。

この時点で、出力ディレクトリのファイルをアップロードすることで、StockWatcherを公開ウェブサーバにデプロイ(depoly=配置)できます。初期バージョンでは、何かの方式でサーバーとコミュニケーションすることがありません;従いまして、ウェブサーバー側に何らか特別なことをやる必要が全くありません。静的ウェブページを提供できるなら、どんなサーバーでもうまく稼働します。

コンパイルの出力

GWTコンパイラに生成されたファイルを確認してみましょう。それらは出力ディレクトリ「StockWatcher/war/stockwatcher」にあります。こんな感じのファイル群を確認できます。

0A9476898799A150D840F0B1C3672921.cache.png
22DDC9A8C788BFBCEEEAA734857E3059.cache.html
396F806CD63ABD414BFBB9D57429F05B.cache.png
6ABCE431DC27AE00CB8C17C5733C2DE7.cache.html
6F932480CC748B4E76F4459CA37673F9.cache.html
B8C926AAD169CD6635C4A89C53DD6320.cache.html
DF7764EEC1903CD03C9545B354D8D8E4.cache.png
E44767377485D18D6B6864F65BA8EF73.cache.png
EA2171DAFBE55EFA551D710B6E5B8E2C.cache.html
EDC7827FEEA59EE44AD790B1C6430C45.cache.png
clear.cache.gif
gwt
hosted.html
stockwatcher.nocache.js

StockWatcher/warに含まれる静的リソーソ(HTMLホストページ、スタイルシート、画像ディレクトリ)に加えて、ファイル名にGUID(*Globally Unique Identifier=グローバル一意識別子「0A9476898799A150D840F0B1C3672921」のような感じのもの)が含まれているファイルを注意してください。これらのファイルはStockWatcherの複数種類のJavaScript実装を含めています。GWTはあなたのアプリケーションのために複数の実装、サポートされる各ウェブブラウザに独自な順列を生成します。

遅延バインディング(deferred binding)でランタイムを最適化

実行時、GWTは遅延バインディング(deferred binding)と呼ばれるメカニズムで、各エンドユーザのブラウザのための正しい順列をロードします。遅延バインディングはユーザが必要とするコード以外のものを提供しません。遅延バインディングの利点は?各順列はウェブブラウザの特質やバグの中に仕立てられて実行されていますので、遅延バインディングを利用することで、

ユーザにとって速い
アプリケーションは必要無いバイトをダウンロードしません。アプリケーションはブラウザを見極める必要もないし、あるいは何れのブラウザのために複数のバージョンを提供する必要もありません。
あなたにとって速い
GWTは何れのブラウザのための正しいJavaScriptを生成しますので、ブラウザ間の違いのために時間を費やする必要がありません。

ブラウザの検出のほか、遅延バインディングは好きなだけの他の変数のために、独自のバージョンを生成することも出来ます。最も一般的な例は国際化です。遅延バインディングを使うことで、GWTは各言語のために、アプリケーションの異なる実装を生成します、さらに例えば、英語を使う人は、フランス語のテキストをダウンロードする必要がありません(逆の場合も同じ)。

GWTアプリケーションの国際化(*英語です)のチュートリアルでこれを自ら試すことが出来ます。

(*ここらへんは翻訳しにくいので、ちょっと説明します。簡単に言えば、GWTはサポートされた個々のブラウザのために、適切なJavaScriptを別々に生成してくれます。ユーザは不必要なコードをダウンロードしなくでもよいので操作が高速、開発者はブラウザ間のHTMLの解釈の違いのために、コードレベルでイチイチ対応しなくでも良いので開発が速い…だそうです。そしてブラウザ間だけではなく、例えば言語間の違いにも同じ仕組みを利用出来ますので、多言語対応のアプリケーションが作りやすい、とのことです。)

次回は?

この時点では、あなたは開発モードとプロダクションモードの両方でStockWatcherをテストしました。今なら、クライアント側の機能のみを実現するGWTアプリケーションを開発方法について、最初から最後まで、結構よく理解しているはずです。

初期実装を基づいてStockWatcherを構築し、更にGWTの他の機能を学ぶために、下記のチュートリアルから選んで下さい。

(*全部英語です)

  • GWTアプリケーションの国際化
  • GWT RPCでサーバーとコミュニケーションする
  • HTTPでJSONデータを利用する
  • Junitでユニットテストをする
  • Google App EngineでGWTアプリケーションを実行する

GWTチュートリアルの日本語訳はとりあえずはこれで一段落です。

約一ヶ月強の時間でやりましたが、速いのか遅いのか、結構微妙ですね。

飛ばし読みよりも、一文一句読んで、翻訳していくのは、全然理解度が違いますね。

あらためて色々確認できました。

これからの予定ですが、学校も始まりますし、

ちょっと忙しくなる時期に入ります。

とりあえず一息ついて、時間の余裕が出来ましたら、

GWTなり、GAE/Jなり、

面白いと思ったグーグルモノを遊んでいきたいと思います。

まずは一つ何かのアプリケーションを作りたいな〜っと思っているところです。

comments

Google Web Toolkit(GWT) 2.0入門チュートリアル日本語訳:7.スタイルの適用-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 Web Toolkit(GWT) 2.0の入門チュートリアルの日本語訳(7-3)です。

今回は「7.スタイルの適用」の最終回です。

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

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

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

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

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

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

6.要素のHTML属性を設定します

CSSの中にスタイルルールを定義するではなく、スタイル属性を直接HTML要素に設定したい時があります。例えば、HTMLテーブル要素は枠内余白(cellpadding)属性があり、これはテーブル内のすべてのセルに余白を設定するのに便利です。

GWTでは、HTML要素にもよるが、Javaコードの中で属性を設定し、適切なHTMLを生成させることが出来ます。

1.株式テーブルのための枠内余白(cellpadding)を記述する。
StockWatcher.javaのonModuleLoadメソッドに、setCellPaddingメソッドを追加します。

  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");

// Add styles to elements in the stock list table.
stocksFlexTable.setCellPadding(6);

2.変更を保存し、確認するために、開発モードで実行中のブラウザをリフレッシュ(リロード)します。

7.画像や他の静的HTML要素を追加します。

アプリケーションのHTMLホストページは、必要ならば、どんな静的HTML要素でも追加な出来ます。例えば、StockWatcherでは、グーグルコードロゴを追加します。画像を入れるために、これらをプロジェクトのpublicディレクトリに配置します。GWTコンパイラーは開発のために必要なすべてのファイルを出力デイレクトリにコピーします。

アプリケーションの中に静的画像を入れます

1.アプリケーションに関連付けする画像を格納するためのディレクトリーを作成します。
warディレクトリーに、imagesディレクトリーを作成します。

StockWatcher/war/images

2.このページから、ロゴ画像をコピーし、それをimagesディレクトリーに貼りづけます。

 StockWatcher/war/images/GoogleCode.png

3.StockWatcher.htmlに、ロゴファイルに指すimgタグを挿入します。

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

<img src="images/GoogleCode.png" />

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

</body>
</html>

注意:HTMLコメントは省略されています。

もっと深く:スタイルシート、JavaScriptや他のGWTモジュールのインクルードに関する情報のために、開発者ガイドを見てください。Automatic Resource Inclusion(*英語です)

次回のチュートリアル

この時点では、あなたはStockWatcher機能要件の初期実装を完成した。クライアント側の昨日は稼働中であり、ユーザインタフェースは新しビジュアルデザインを持っています。

ほぼ完成したStockWatcher

注意:簡略化のため、このチュートリアルのプログラムでは、我々はウィジェットを使ってユーザインタフェースを構築しました。StockWatcherのユーザインタフェースはシンプルなので、これはうまく動きます。但し、GWTはXML宣言ファイルを使って複雑なインターフェースを構築するための、UiBinderという強力なツールがあります、このツールはコードのサイズと複雑さを低減してくれます。UiBinderと一般的なユーザインタフェースデザインに関しては、宣言によるレイアウトをUiBinderで行う(*英語です)ユーザインタフェースの構築(*英語です)の開発者ガイドセクションを見てください。

これで、あなたはStockWatcherをコンパイルする準備ができました。JavaコードをJavaScriptにコンパイルし、プロダクションモードのStockWatcherは開発モードと同じように稼働することを確認します。

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

comments

Google Web Toolkit(GWT) 2.0入門チュートリアル日本語訳:7.スタイルの適用-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 Web Toolkit(GWT) 2.0の入門チュートリアルの日本語訳(7-2)です。

今回は「7.スタイルの適用」の三回目です。

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

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

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

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

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

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

4.プライマリーに依存するセカンドスタイルの作成

次に、削除ボタンのスタイルを変更したい。削除ボタンはButtonウィジェットからスタイルを継承しています。すべてのGWTボタンウィジェットのデフォルトスタイルはstandard.cssの中に、GWTによって定義されています。

<button class="gwt-Button tabindex="0" type="button">x</button>

.gwt-Button {
background:transparent url(images/hborder.png) repeat-x scroll 0px -27px;
border:1px outset #CCCCCC;
cursor:pointer;
font-size:small;
margin:0pt;
padding:3px 5px;
text-decoration:none;
}

StockWatcherのために、削除ボタンだけにスタイルの変更を適用したい。そのために、これまでの通りに処理します:削除ボタン要素にセカンドスタイルを追加します。但し今回では、セカンドスタイルをプライマリースタイルに依存するようにします。依存スタイルは強力的です、なぜならこれらはプライマリースタイル名の変更の共に、自動的にアップデートされます。対照的に、セカンドスタイル名はスタイル名に依存していませんので、プライマリースタイル名が変更されても自動的にアップデートされません。

これを行うために、addStyleNameメソッドの代わりに、addStyleDependentNameメソッドを利用します。

1.スタイルルールを定義します。

/* Add Stock panel */
.addPanel {
margin: 10px 0px 15px 0px;
}

/* stock list, the Remove button */
.gwt-Button-remove {
width: 50px;
}

2.スタイルを適用します。
StockWatcher.javaに、addStyleDependentNameメソッドを使って、削除ボタンにセカンド・依存クラス属性を追加します。

    // Add a button to remove this stock from the table.
Button removeStockButton = new Button("x");
removeStockButton.addStyleDependentName("remove");

3.変更を保存し、確認するために、開発モードで実行中のブラウザをリフレッシュ(リロード)します。
削除ボタンは高さよりも広くなります。株追加ボタンはこの変更に影響されません。

4.これにより、生成されたHTMLは二つのクラス属性を所持します。

<button class="gwt-Button gwt-Button-remove" tabindex="0" type="button">x</button>

(*この部分はちょっとわかりにくいので、補足説明します。通常のクラス属性は複数のクラス名を追加・保有出来ますが、プライマリースタイル名は一つしか所持出来ない特殊なスタイル名です。ボタンの場合、デフォルトでプライマリースタイル名はgwt-Buttonになります。依存(dependent)クラス属性の「依存」は、プライマリースタイル名に依存している…ことを意味しています。従って、addStyleDependentNameで「remove」を設定しますと、「remove」に元々のプライマリースタイル名「gwt-Button」に加え、実際のクラス属性は「gwt-Button-remove」になります。)
(*それならば、最初からaddStyleNameに「gwt-Button-remove」を入れたらいいじゃないか?と思われるかもしれませんが、この手法のメリットは、プライマリースタイル名を変更する際に、依存クラス属性も自動的に更新されるところにあります。例えばクリック可能かどうか…などボタンの状態によって、gwt-Buttonとgwt-ButtonDisableの二つのプライマリースタイル名を設定する可能性がある場合、addStyleNameだとプライマリースタイルを変更するたびに、イチイチ既存の設定を削除しながら、「gwt-Button-remove」と「gwt-ButtonDisable-remove」に切り替えなければならないのですが、addStyleDependentNameを使えば、一度記述するだけで、後はプライマリースタイル名変更に伴ない、自動的に「gwt-Button-remove」と「gwt-ButtonDisable-remove」を切り替えてくれます。)

5.動的にスタイルをアップデートします。

最後に実装したいスタイルの変更は、価格変動率の色を変えることです。株価が上昇したら、StockWatcherはそれを"緑"で表示し、下落したら"赤"、変動が無かったら"黒"。これはStockWatcherの実行中に、動的に変化する一つのスタイルです。

セルの中の数値を右寄りにするようなクラス属性を既に適用しました。コードをシンプルにするために、セルの中のテキストのみHTMLクラス属性を適用したほうが良さそうです。これを実現するための簡単の方法は、ウィジェットのネストを利用することです。このケースでは、テーブル2行目に含まれているすべてのセルの中にラベルウィジェットを挿入します。

1.スタイルの定義
StockWatcher.cssの中に、これらのスタイルルールを追加します。

/* stock list, the Remove button */
.gwt-Button-remove {
width: 50px;
}

/* Dynamic color changes for the Change field */
.noChange {
color: black;
}

.positiveChange {
color: green;
}

.negativeChange {
color: red;
}

2.テーブルのセルの中に、ラベルウィジェットを挿入します。

StockWatcher.javaのaddStockメソッドの中に、2行目のすべてのセルの中にラベルウィジェットを作成します。


// Add the stock to the table.
int row = stocksFlexTable.getRowCount();
stocks.add(symbol);
stocksFlexTable.setText(row, 0, symbol);
stocksFlexTable.setWidget(row, 2, new Label());
stocksFlexTable.getCellFormatter().addStyleName(row, 1, "watchListNumericColumn");
stocksFlexTable.getCellFormatter().addStyleName(row, 2, "watchListNumericColumn");
stocksFlexTable.getCellFormatter().addStyleName(row, 3, "watchListRemoveColumn");

テーブルセルにテキストを設定する代わりに、ラベルウィジェットのテキストを設定する必要があります。

3.changeWidgetのテキストを設定します
updateTable(StockPrice)メソッドに、(*テーブルの)2行目を変更するためのsetTextメソッドのコールを削除します。
ラベルウィジェットのインスタンスを作成し、changeWidgetと名付けます。
changeWidgetにテキストを設定します。

    // Populate the Price and Change fields with new data.
stocksFlexTable.setText(row, 1, priceText);
stocksFlexTable.setText(row, 2, changeText + " (" + changePercentText
+ "%)");

Label changeWidget = (Label)stocksFlexTable.getWidget(row, 2);
changeWidget.setText(changeText + " (" + changePercentText + "%)");

4.それぞれの値を基づいて、何れのchangeWidgetの色を変更します。

    // Populate the Price and Change fields with new data.
stocksFlexTable.setText(row, 1, priceText);
Label changeWidget = (Label)stocksFlexTable.getWidget(row, 2);
changeWidget.setText(changeText + " (" + changePercentText + "%)");

// Change the color of text in the Change field based on its value.
String changeStyleName = "noChange";
if (price.getChangePercent() < -0.1f) {
changeStyleName = "negativeChange";
}
else if (price.getChangePercent() > 0.1f) {
changeStyleName = "positiveChange";
}

changeWidget.setStyleName(changeStyleName);

5.変更を保存し、確認するために、開発モードで実行中のブラウザをリフレッシュ(リロード)します。
変動率欄の色はその値の変動が"負"・"正"・"不変"によって、"赤"・"緑"・"黒"になります。

変動率に色をつけた後のStockWatcher

このセクションは非〜常〜に長いので、もっとさらに分割します。

次回は「6.要素のHTML属性を設定します」に続きます。

comments

Google Web Toolkit(GWT) 2.0入門チュートリアル日本語訳:7.スタイルの適用-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 Web Toolkit(GWT) 2.0の入門チュートリアルの日本語訳(7-1)です。

今回は「7.スタイルの適用」の二回目です。

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

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

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

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

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

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

3.GWTが生成したHTML要素にスタイルルールを関連付けする

要素のプライマリースタイル

StockWatcherのボタンはグラデーションバックグランドに成っていることに気づいた方も居るかもしれません。このボタンのスタイルはどこから来たでしょうか?

StockWatcherをコンパイルした後、もしAddボタンのために生成されたJavaScriptを見れば、そのボタンには「gwt-Button」というクラス属性を持っていることを確認できます。

<button class="gwt-Button" tabindex="0" type="button">Add</button>

GWTでは、ウィジェットの各クラスはCSSスタイルルールに関連付けされた(gwt-Buttonのような)スタイル名を持っています。これはウィジェットのプライマリースタイルになります。テーマのスタイルシートの中に、プライマリースタイルのためのデフォルト値が定義されています。

静的HTMLの中のボタンとGWT生成のボタン
HTMLタグ:<button>
CSSセレクター:button
GWT生成のボタンのみ
HTMLタグ:<button class="gwt-Button">
CSSセレクター:button.gwt-Button
俺専用の特殊なGWT生成ボタンのみ
HTMLタグ:<button class="gwt-Button my-button">
CSSセレクター:button.my-button

ヒント:GWTのAPIレファレンスのWidget Galleryを見ることで、各ウィジェットのためのスタイルルールの名称(CSSセレクター)を確認することが出来ます。

HTML要素に複数のクラス属性に関連付け出来ますので、他の同じタイプの要素に影響することなく、特殊なGWT生成要素のスタイルを明記することが出来ます。このセクションでは、GWT生成のHTML要素にセカンドクラスを設定する方法を学びます。

セカンドスタイルを作成します

HTML要素のためにセカンドスタイルを作成する方法には二つのステップがあります。

  1. StockWatcher.cssにスタイルルールを記入します。
  2. StockWatcher.javaの中に、プログラムでこのスタイルをHTMLクラス属性として設定します。

まずは簡単な変更を行い、このメカニズムはどう稼働するかを見てみましょう。後で、他の変更をまとめて行います。ここでは、ヘッダー情報を格納した一列目の色を変更するところから始めます。

CSSの中にスタイルを定義します

StockWatcherアプリケーションを作成する時に、webAppCreatorはアプリケーションスタイルシート(StockWatcher.css)を生成し、それに指すポインターをモジュールXMLファイル(StockWatcher.gwt.xml)に追加します。従いまして、スタイルルールを定義する準備は既に整えられています。

1.アプリケーションスタイルシートを開く
StockWatcher/war/StockWatcher.cssを開きます

2.watchListHeaderというクラス属性を持つ全てのHTML要素のために、色とテキストのプロパティを設定します。StockWatcher.cssのコンテンツを下記のスタイルルールで置き換えて下さい。

/* Formatting specific to the StockWatcher application */

body {
padding: 10px;
}

/* stock list header row */
.watchListHeader {
background-color: #2062B8;
color: white;
font-style: italic;
}

3.StockWatcher.cssへの変更を保存します。

addStyleNameメソッドでスタイルを適用します

静的要素を含むウェブページの場合、HTMLソースを一通り見て、色々な要素にクラス属性を追加し、CSSファイルに定義されたスタイルに関連付けます。例えばこんな感じ、

<tr class="watchListHeader">

しかし、GWT要素は実行中に動的に生成されます。従って、Javaソースの中に、addStyleNameメソッドを使ってHTMLクラス属性を設定する事になります。まずは、列(ヘッダーは0列目)とセカンドクラス名「watchListHeader」を設定します。

1.StockWatcher.javaの中のonModuleLoadメソッドに、株式テーブルの中のヘッダー列にセカンドスタイルを追加します。

  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");

// Add styles to elements in the stock list table.
stocksFlexTable.getRowFormatter().addStyleName(0, "watchListHeader");

2.StockWatcher.javaへの変更を保存し、確認するために開発モードで実行中のブラウザにリフレッシュ(リロード)します。
そうしたら、flexテーブルのヘッダー列に、青い背景で白いイタリックなヘッディングが表示されます。

StockWatcherのための既存なセカンドスタイル変更を実装します

セカンドスタイルを作成することで変更する箇所は下のほうに要約しました。これらを一つずつ追加し、何れの変化の影響を確認しながら作業してもいいし、あるいはこのセクションの最後にある変更のまとめをコピーアンドペーストしても構いません。

  • 株式リストの外にボーダーを設定します
  • 株式リストの中の数値データは右寄りにします
  • 削除ボタンを中寄りにし、広くします。
  • AddStockパネルにホワイトスペース(padding)を追加します。

株式リストの外にボーターを設定します

1.スタイルの定義
StockWatcher.cssの中に、watchListというクラス属性を持つHTML要素のためのスタイルを作成します。

/* stock list header row */
.watchListHeader {
background-color: #2062B8;
color: white;
font-style: italic;
}

/* stock list flex table */
.watchList {
border: 1px solid silver;
padding: 2px;
margin-bottom:6px;
}

2.スタイルの適用
StockWatcher.javaに株式flexテーブルにセカンドクラス属性を追加します。

   // Add styles to elements in the stock list table.
stocksFlexTable.getRowFormatter().addStyleName(0, "watchListHeader");
stocksFlexTable.addStyleName("watchList");

3.変更を保存し、確認するために、開発モードで実行中のブラウザをリフレッシュ(リロード)します。
株式リストテーブルに銀色なボーダーが追加されます。

株式リストの中の数値データは右寄りにします
まず、StockWatcherが起動され時にロードされる株式テーブルのヘッダーのテキストを整形します。後に、株式データを格納する列に同じスタイルルールを追加します。

1.スタイルの定義
StockWatcher.cssの中に、株価と変動率欄を含む右寄りの行のスタイルを作成します。

/* stock list flex table */
.watchList {
border: 1px solid silver;
padding: 2px;
margin-bottom:6px;
}

/* stock list Price and Change fields */
.watchListNumericColumn {
text-align: right;
width:8em;
}

2.スタイルの適用
StockWatcher.javaの中の、株価欄と変動率欄の両方にセカンドクラス属性を追加します。

    // Add styles to elements in the stock list table.
stocksFlexTable.getRowFormatter().addStyleName(0, "watchListHeader");
stocksFlexTable.addStyleName("watchList");
stocksFlexTable.getCellFormatter().addStyleName(0, 1, "watchListNumericColumn");
stocksFlexTable.getCellFormatter().addStyleName(0, 2, "watchListNumericColumn");

3.変更を保存し、確認するために、開発モードで実行中のブラウザをリフレッシュ(リロード)します。
株価と変動率の行は設定された横幅を持ち、ヘッダー列のテキストは右寄りになります。

削除ボタンを中寄りにし、広くします

1.スタイルの定義
StockWatcher.cssの中に、削除ボタンを含む行を中寄りにするスタイルを作成します。

/* stock list Price and Change fields */
.watchListNumericColumn {
text-align: right;
width:8em;
}

/* stock list Remove column */
.watchListRemoveColumn {
text-align: center;
}

2.スタイルの適用
StockWatcher.javaの中の、削除欄にセカンドクラス属性を追加します。

    // Add styles to elements in the stock list table.
stocksFlexTable.getRowFormatter().addStyleName(0, "watchListHeader");
stocksFlexTable.addStyleName("watchList");
stocksFlexTable.getCellFormatter().addStyleName(0, 1, "watchListNumericColumn");
stocksFlexTable.getCellFormatter().addStyleName(0, 2, "watchListNumericColumn");
stocksFlexTable.getCellFormatter().addStyleName(0, 3, "watchListRemoveColumn");

3.変更を保存し、確認するために、開発モードで実行中のブラウザをリフレッシュ(リロード)します。
キャプションによって欄の横幅は設定されます。次のステップでデータ列の整形を行った後、削除行のボタンが中寄りになることを確認できるようになります。

株式データを保持する列に同じセルフォーマットを適用する
StockWatcherが起動された時に表示されるflexテーブルのヘッダ列を既に整形しました。但し、ユーザがリストに株式を追加するまでに、flexテーブルの中の株式を保持する列は作成されないことを覚えて欲しい。従って、株式データを整形するためのコードをonModuleLoadメソッドではなく、addStockメソッドに追加することになります。

1.スタイルの定義
StockWatcher.cssの中に、既にスタイルを定義しました。

2.スタイルの適用
StockWatcher.javaの、addStockメソッドの中に、株価・変動率・削除行のテーブルセルにセカンドクラス属性を追加します。

    // Add the stock to the table.
int row = stocksFlexTable.getRowCount();
stocks.add(symbol);
stocksFlexTable.setText(row, 0, symbol);
stocksFlexTable.getCellFormatter().addStyleName(row, 1, "watchListNumericColumn");
stocksFlexTable.getCellFormatter().addStyleName(row, 2, "watchListNumericColumn");
stocksFlexTable.getCellFormatter().addStyleName(row, 3, "watchListRemoveColumn");

3.変更を保存し、確認するために、開発モードで実行中のブラウザをリフレッシュ(リロード)します。
リストに株を追加します。株価と変動率データは右寄りになり、削除ボタンは中寄りになります。

AddStockパネルにホワイトスペースを追加します
AddStockパネルの中のテキストボックスと追加ボタンの外側にホワイトスペースを追加します。

1.スタイルの定義
StockWatcher.cssの中に、AddStockパネルの外側を広くするためのスタイルを作成します。

/* stock list Remove column */
.watchListRemoveColumn {
text-align: center;
}

/* Add Stock panel */
.addPanel {
margin: 10px 0px 15px 0px;
}

2.スタイルの適用
StockWatcher.javaの中の、onModuleLoadメソッドに、addPanelにクラス属性を追加します。

    // Assemble Add Stock panel.
addPanel.add(newSymbolTextBox);
addPanel.add(addStockButton);
addPanel.addStyleName("addPanel");

3.変更を保存し、確認するために、開発モードで実行中のブラウザをリフレッシュ(リロード)します。

株テーブルとaddStockパネルの間はマージンは増えました。

変更のサマリー
行った変更のまとめです。

整形後のStockWatcher

StockWatcher.cssへの変更

/* Formatting specific to the StockWatcher application */

body {
padding: 10px;
}

/* stock list header row */
.watchListHeader {
background-color: #2062B8;
color: white;
font-style: italic;
}

/* stock list flex table */
.watchList {
border: 1px solid silver;
padding: 2px;
margin-bottom:6px;
}

/* stock list Price and Change fields */
.watchListNumericColumn {
text-align: right;
width:8em;
}

/* stock list Remove column */
.watchListRemoveColumn {
text-align: center;
}

/* Add Stock panel */
.addPanel {
margin: 10px 0px 15px 0px;
}

StockWatcher.javaのonModuleLoadへの変更

  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");

// Add styles to elements in the stock list table.
stocksFlexTable.getRowFormatter().addStyleName(0, "watchListHeader");
stocksFlexTable.addStyleName("watchList");
stocksFlexTable.getCellFormatter().addStyleName(0, 1, "watchListNumericColumn");
stocksFlexTable.getCellFormatter().addStyleName(0, 2, "watchListNumericColumn");
stocksFlexTable.getCellFormatter().addStyleName(0, 3, "watchListRemoveColumn");

// Assemble the Add Stock panel
addPanel.add(newSymbolTextBox);
addPanel.add(addStockButton);
addPanel.addStyleName("addPanel");
.
.
.
}

StockWatcher.javaのaddStockへの変更

    // Add the stock to the table.
int row = stocksFlexTable.getRowCount();
stocks.add(symbol);
stocksFlexTable.setText(row, 0, symbol);
stocksFlexTable.getCellFormatter().addStyleName(row, 1, "watchListNumericColumn");
stocksFlexTable.getCellFormatter().addStyleName(row, 2, "watchListNumericColumn");
stocksFlexTable.getCellFormatter().addStyleName(row, 3, "watchListRemoveColumn");

このセクションはかなり長いので、さらに分割します。

次回は「4.プライマリースタイルに依存するセカンドスタイルを作成しますの作成」に続きます。

comments

Google Web Toolkit(GWT) 2.0入門チュートリアル日本語訳:7.スタイルの適用-1

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の入門チュートリアルの日本語訳(6)です。

今回は「7.スタイルの適用」の一回目です。

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

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

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

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

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

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

ステップ7:スタイルの適用

この時点では、StockWatcherは機能的です。これからこれにビジュアルスタイルを与えたい。

このセクションでは、あなたは以下のことを行います:

  1. プロジェクトとスタイルシートの関連付け
  2. テーマを変更します
  3. セカンドスタイルを作成します
  4. 依存されるセカンドスタイルを作成します
  5. 動的にスタイルをアップデートします
  6. 要素のHTML属性を設定します
  7. 画像や他の静的HTML要素を追加します。

CSSの優位性

GWTはスタイルに直結するJavaメソッドを沢山提供しているわけではありません。むしろ、我々はCSSの中でデザインを定義することを推奨しています。

ウェブアプリケーションのスタイリングのために、CSSは理想的です。スタイルをアプリケーションのロジックから明確的に分離するだけではなく、この分割によって、アプリケーションのロードやレンダリングは早くなり、メモリーの消費を押さえます。そしてスタイルの微調整のために再コンパイルする必要がないので、編集・デバッグサイクリへの微調整が簡単になります。

1.プロジェクトとスタイルシートの関連付け

StockWatcherプロジェクトに、既に二つのスタイルシードが関連付けされています。

  • テーマスタイルシート、standard.css:GWTデフォルトのスタイルが定義されています
  • アプリケーションスタイルスート、StockWatcher.css:StockWatcherのための特別なスタイルを定義する場所

webAppCreatorを使ってStockWatcherを生成する時、アプリケーションスタイル(StockWatcher.css)も生成されます。同時に、GWTモジュールの中にテーマが参照されています。

1. GWTモジュールを開く
StockWatcher/src/com/google/gwt/sample/stockwatcher/StockWatcher.gwt.xml
デフォルトでは、スタンダートテーマ(Standard theme)は使われていることを注意してください。

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='stockwatcher'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>

<!-- Inherit the default GWT style sheet. You can change -->
<!-- the theme of your GWT application by uncommenting -->
<!-- any one of the following lines. -->
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
<!-- <inherits name="com.google.gwt.user.theme.chrome.Chrome"/> -->
<!-- <inherits name="com.google.gwt.user.theme.dark.Dark"/> -->

<!-- Other module inherits -->

<!-- Specify the app entry point class. -->
<entry-point class='com.google.gwt.sample.stockwatcher.client.StockWatcher'/>
</module>

2. StockWatcher/war/StockWatcher.htmlを開きます。アプリケーションスタイルシートはStockWatcher.cssであることを注意してください。

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

</body>
</html>

自動リソースインクルージョン(Automatic Resource Inclusion)

CSSファイルは公開ディレクトリに格納されている静的リソースであり、それはHTMLホストページに参照されます。アプリケーションにスタイルシートを関連付けするために、二つの方法があります。

  • 参照:モジュールXMLファイル(StockWatcher.gwt.xml)で
  • 代替:HTMLホストページ(StockWatcher.html)で

何れの方法を選んでも、一つかそれ以上のスタイルシートをプロジェクトと関連付けすることが出来ます。HTMLドキュメントの中と同じく、これらはリストされた順番に段階的(cascade)に適用されます。

StockWatcherでは、「参照」法を利用します。HTMLホストページにスタイルシートをリンクする代わりに、モジュールXMLファイルを使用します。そうしたら、StockWatcherをコンパイルする時に、GWTコンパイラはアプリケーションを実行するための、スタイルシートも含めたすべての静的リソースをまとめます。このメカニズムは自動リソースインクルード(Automatic Resource Inclusion)と呼びます。

多くのケースでは、これは比較的に良い方式である、なぜならスタイルシートはモジュールに追随しますので、どのHTMLホストページにスタイルを埋め込んだと関係なく、どこでも使えます。もし複雑な開発に入り込んだ時、モジュールの再利用や共有をしたくなります。モジュールの共有にホストページは含まれていませんので、自動リソースインクルージョン(Automatic Resource Inclusion)を利用しなければ、アプリケーションスタイルシートの使用は保証できません。

もしモジュールが埋め込まれている各々のホストページに、ウィジェットのスタイルを別々に決めたいなら、これらのスタイルシートをモジュールXMLファイルに含めないようにしたほうがよいでしょう。

2.テーマの変更

GWTは三つのテーマと共に出荷されます:スタンダート(Standard)、クローム(Chrome)、そしてダーク(Dark)。GWTモジュールが生成された時、スタンダートテーマはデフォルトに選択されます。何れのアプリケーションは同時に一つのテーマしか利用できません。但し、もしあなたは既に既存のスタイルを持っているか、最初からデザインしたいのであれば、テーマを利用しなくでも構いません。ちょっと時間を使って、他のテーマの見た目を確認してみてください。

テーマをスタンダートからダークに変更します。

1.StockWatcher.gwt.xmlに、スタンダートテーマへの参照をコメントアウトします。
Eclipseショートカット、ソース→コメントの切り替え(* Ctrl+/かCommand+/)

2.ダークテーマへの参照のコメントアウトを外します。
Eclipseショートカット、ソース→コメントの切り替え(* Ctrl+/かCommand+/)


<!-- Inherit the default GWT style sheet. You can change -->
<!-- the theme of your GWT application by uncommenting -->
<!-- any one of the following lines. -->
<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
<!-- <inherits name="com.google.gwt.user.theme.chrome.Chrome"/> -->
<inherits name="com.google.gwt.user.theme.dark.Dark"/>

3.変化を確認します。
StockWatcher.gwt.xmlファイルへの変更を保存します。
開発モードは実行中ならば、それを終了し、もう一度StockWatcherを立ち上げます。

StockWatcherでは、スタンダートテーマを利用しますので、テーマの働きを確認した後に、もう一度テーマをスタンダートに戻して下さい。

注記:GWTテーマはアラビア語など、右から左に書く言語のために、RTL(right-to-left=右から左へ)バージョンもあります。right-to-leftテーマを利用するために、テーマ名にRTLを追加してください。
<inherits name=’com.google.gwt.user.theme.standard.StandardRTL‘/>

実装方法を決める

GWTのデフォルトのスタイルを調整するために、いくつかの方法があります。

  • アプリケーションスタイルスートのStockWatcher.cssに新しいスタイルルールを作成します。このアプローチはすべてのウィジェットタイプに適用します、たとえな。すべてのボタンに
  • HTML要素に他のクラス属性を追加することで、セカンドスタイルを追加できます。このアプローチは一つのウィジェットにスタイルを適用できます、例えば、StockWatcherの削除ボタンだけに
  • ウィジェットのプライマリスタイル名をオーバーライド出来ます。もしテーマからの継承や他のスタイルシートなどの既存のスタイルをクリアする必要があるなら、ウィジェットに関連付けしたデフォルトのプライマリクラスを変更出来ます。
  • GWTアプリケーションを既存のページに埋め込むのであれば、元々のスタイルシートを編集する方法もあります
  • 完全に最初から作り始めることもできます。

StockWatcherアプリケーションのために、あなたは二つ目のアプローチに集中します:セカンドスタイルを追加する方法を学びます。

このセクションはかなり長いので、分割します。

次回は「3.セカンドスタイルを作成します」に続きます。

comments

大学院でGoogle App EngineのFD研修会をやりました

FDとは、Faculty Developmentのことです。

これをカタカナで書くと「ファカルティ・ディベロプメント」になります

どういう意味かと言うと、Wikipediaによれば…、

http://ja.wikipedia.org/wiki/ファカルティ・ディベロップメント

ファカルティ・ディベロプメント (Faculty Development、FD)とは、「大学教員の教育能力を高めるための実践的方法」のことであり、大学の授業改革のための組織的な取り組み方法を指す。ファカルティ=Facultyとは、大学の教員組織を指す。ディベロプメント=developmentとは、能力開発の意である。
戦後ベビーブーマーたちが学んだマスプロ教育では、大学の授業は教授の専門領域が一方的に話されるのみであったが、少子高齢化にともなって、大学が学生のニーズに応える教育をする必要に迫られるなかから、さまざまな試みが行われている。

KCGIは新しい大学院なので、

こういう新しい取り組みにも熱心…というのもありますが、

専門職大学院は設置基準の中に、

「大学院教員のファカルティ・ディベロプメントをの義務化」がありますので、

普通の大学・大学院よりも真剣にFDに取り込んでいます。

実に言うと、KCGKCGIKCGも専修学校ながら、

21世紀に入る前から積極的にFD活動を取り組んでいるようです。

で、なぜいきなりFDの話をし出したかというと、

今日はFDの一環として、大学院のほうでFD研修会が開催されました。

ぉぅぇぃは最近楽しんで遊んでいる「Google App Engine」について、

大学院の先生方に紹介しました。

↓FD研修会資料の表紙

KCGIのFD研修会

↓FD研修会資料のスライド一覧

KCGIのFD研修会

一通り説明した後に、結構興味を頂いてもらったようで、先生方からの反応もよく、

KCGKCGIに、クラウドコンピューティング系の授業を始めるべきかどうかについて、

カリキュラム設計を担当している先生が早速検討し始めたようです。

ここらへんの意思決定の速さは流石ですね。

流石「最先端」を合言葉に使っているだけある。

もうちょっとしたら、KCGKCGIの学生は、

Google App Engineに何かのアプリケーションを作り始めるかもしれません。

いや〜どんなウェブアプリガ出来るかが楽しみですね!

comments

Google Web Toolkit(GWT) 2.0入門チュートリアル日本語訳:6.GWT アプリケーションのデバッグ

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の入門チュートリアルの日本語訳(5-3)です。

今回は「6.GWT アプリケーションのデバッグ」です。

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

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

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

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

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

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

ステップ6:GWT アプリケーションのデバッグ

この時点では、StockWatcherのユーザーインターフェースとクライアントサイドのすべての機能の実装を終えた。但し、あなたは変動率の欄に問題があることを気づいた。変動率のパーセンテージは正しく計算されていません。

このセクションでは、あなたは開発モードで実行中のStockWatcherにEclipseを使ってJavaコードのデバッグを行います。

利点

JavaScriptにコンパイルされる前に、Javaソースコードをデバッグすることができます。このGWT開発プロセスは、Java開発環境のデバッグツールの優位性をとることを手助けします。あなたは

  • ブレイクポイントの設定
  • 一行ずつコードを実行する
  • コードのドリルダウンを行う
  • 変数の値を観測する
  • 中断中のスレッドのスタックフレームを表示する

遅いコンパイルを行わなくでも、コードを変更し、ブラウザをリフレッシュすれば、即座に変更を確認できることはJavaScriptで開発する魅力の一つです。GWTの開発モードは完全に同じ開発サイクルを提供しています。何か変更を加えたたびに、再コンパイルする必要がありません、それはGWT開発モードの本質である。リフレッシュ(リロード)をクリックすれば、更新されたJavaコードの振る舞いを確認できます。

1.バグを探す

問題の分析

株価と変動率の欄の値を見てみたら、何らかの理由で、変動率のパーセンテージは正しい値の十分の一になっていることを確認できます。

変動率欄の値はupdateTable(StockPrice)メソッドでロードされます。

  /**
* Update a single row in the stock table.
*
* @param price Stock data for a single row.
*/
private void updateTable(StockPrice price) {
// Make sure the stock is still in the stock table.
if (!stocks.contains(price.getSymbol())) {
return;
}

int row = stocks.indexOf(price.getSymbol()) + 1;

// Format the data in the Price and Change fields.
String priceText = NumberFormat.getFormat("#,##0.00").format(
price.getPrice());
NumberFormat changeFormat = NumberFormat.getFormat("+#,##0.00;-#,##0.00");
String changeText = changeFormat.format(price.getChange());
String changePercentText = changeFormat.format(price.getChangePercent());

// Populate the Price and Change fields with new data.
stocksFlexTable.setText(row, 1, priceText);
stocksFlexTable.setText(row, 2, changeText + " (" + changePercentText
+ "%)");

}

コードをちょっと見れば、changePercentText変数の値はここではなく、他のところ、price.getChangePercentに設定されています。従いまして、まずはその行にブレイクポイントを設定し、そして変動率のパーセンテージが誤って計算される箇所までドリルダウンします。

ブレークポイントの設定

1.取り掛かりたい(step in)・変数の値を検証したいコードの行にブレイクポイントを設定します。
StockWatcher.javaの中のupdateTable(StockPrice price)メソッドに、以下の二行にブレイクポイントを設定します。

String changePercentText = changeFormat.format(price.getChangePercent());

stocksFlexTable.setText(row, 1, priceText);

Eclipseはデバッグパースペクティブに変更します。

2.問題のあるコードを実行します。
問題が観測されたupdateTableメソッドのコードを実行するために、開発モードで実行中のブラウザに、株式を追加します。
最初のブレイクポイントに、実行は中断されます。

3.priceTextとchangeText変数の値を確認します。
Eclipseのデバッグパースペクティブの変数パネルを見ます。

4.次のブレイクポイント、priceTextが設定されるところまでコードを実行します。
デバッグパネルに、「再開(F8)」(*上の緑の再生ボタンぽいもの)アイコンを押す。

5.priceText・changeText・changePercentText変数の値を確認する、
Eclipseのデバッグパースペクティブの変数パネルを見ます。見たいなら、値をダブルクリックして問題点を確認しても構いません。

StockWatcherのデバッグ

6.最初のブレイクポイント、changePercentTextが設定されるところに戻る。
デバッグパネルの、「再開(F8)」アイコンを押す

コードを一行ずつ実行する

次に、コードに取り掛かり(step in)、changePercentTextがどのように計算されるかを確認します。

1.ChangePercentメソッドに取り掛かり(step in)、changePercentTextの値がどのように計算されたかを見ます。

  public double getChangePercent() {
return 10.0 * this.change / this.price;
}

getChangePercentメソッドを見れば、問題点を確認できます:変動率パーセンテージの乗算を100ではなく、10で行った。これは前に確認した事象と符合します、すべての変動率のパーセンテージは正しい値の十分の一だった。

2.バグを修正する

1.価格変動率のパーセンテージを計算する時の問題を修正します
StockPrice.javaのgetChangePercentメソッドを編集します。

  public double getChangePercent() {
return 100.0 * this.change / this.price;
}

ヒント:Eclipseでは、Javaパースペクティブのほうはデバッグパースペクティブよりも編集しやすいと思うなら、開発モードでStockWatcherが実行中でも、もとのパースペクティブに戻せます。

3.開発モードでバグフィックスをテストする

証券コードを入力した時点で、変動率欄は正しくなっているはずです。試して、見てください。

  1. Eclipseで、すべてのブレイクポイントをすべて外し、「再開(F8)」押します。
  2. 開発モードで実行中のブラウザに、リフレッシュ(リロード)を押して下さい
  3. 株を追加する。
  4. 変動率欄の値の計算を確認します。

次回のチュートリアル

この時点では、あなたはすべての機能要件を実装した。StockWatcherは稼働中で、バグの発見と修正も行った。

これで、あなたはStockWatcherのビジュアルデザインを強化する準備ができました。GWTウィジェットにCSSスタイルルールを追加し、ページに静的要素(ロゴ)を追加します。

7.スタイルの適用

comments

Google Web Toolkit(GWT) 2.0入門チュートリアル日本語訳:5.クライアント機能のコーディング-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の入門チュートリアルの日本語訳(5-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と全く関係ない部分は飛ばすつもりです。

3.タイムスタンプを追加する

タイムスタンプは実装しなければならない機能の最後の部分になります。ユーザインタフェースの中にタイムスタンプを作成するために、lastUpdatedLabelというLabelウィジェットを利用します。Labelウィジェットのためのテキストを設定します。このコードをupdateTable(StockPrice[])メソッドに追加します。

1.タイムスタンプの実装

updateTable(StockPrice)メソッドの中に、下の強調されたコードをコピーペーストしてください。


/**
* Update the Price and Change fields all the rows in the stock table.
*
* @param prices Stock data for all rows.
*/
private void updateTable(StockPrice[] prices) {
for (int i = 0; i < prices.length; i++) {
updateTable(prices[i]);
}

// Display timestamp showing last refresh.
lastUpdatedLabel.setText("Last update : "
+ DateTimeFormat.getMediumDateTimeFormat().format(new Date()));


}

EclipseはDateTimeFormatをDateにエラーフラグを立ちます

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

import com.google.gwt.i18n.client.DateTimeFormat;
import java.util.Date;

3.タイムスタンプをテストする
変更を保存します。ブラウザでリフレッシュ(再読み込み・リロード)を押し、変更をロードしてください。タイムスタンプラベルは株式テーブルの直下に表示されるはずです。株価と変動率がリフレッシュされるたび、タイムスタンプは最終更新日時を表示するはずです。

StockWatcherにタイムスタンプを追加しました

実装の注意点:もしかするとあなたはDateTimeFormatとNumberFormatはcom.google.gwt.i18nのサブパッケージに含まれているを気づき、これらは何らかの方式で国際化に関わっていると推測しているかもしれません。確かに、これらはそのようなことをやっています:両方のクラスは数値や日付をフォーマットする時に、自動的にあなたのアプリケーションのロケール(locale)の設定を利用します。Internationalizing a GWT Application(*英語)のチュートリアルで、GWTアプリケーションを他の言語に地域化(localizing)や翻訳(translating)する方法を学べます。

次回のチュートリアル

この時点では、あなたはユーザインタフェースコンポーネントを構築し、StockWatcherアプリケーションのすべてのクライアント側の基本機能をコーディングした。ユーザは株を追加・削除することができます。株価と変動率は5秒ごとにアップデートされます。タイムスタンプは最終更新される度に表示されます。

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

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

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

バグ

チュートリアルのために、我々はコードの中に一つのエラーを入れました。気づきましたでしょうか?

変動率のパーセンテージを見てください。これはちょっと小さすぎませんか?もしあなたが数学をやっているのであれば、これらはしかるべき数値よりもず〜っと小さいことを気づくでしょう。StockWatcherのコードの中に、計算の誤りが隠されています。次のステップは、GWTとあなたのJava統合開発環境(IDE)に提供されているツールを使って、問題点を探し出し、修正します。

ステップ6:GWT アプリケーションのデバッグ

comments

Google Web Toolkit(GWT) 2.0入門チュートリアル日本語訳:5.クライアント機能のコーディング-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の入門チュートリアルの日本語訳(5-1)です。

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

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

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

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

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

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

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

2.テーブルの中の株式の株価及び変化率を更新する

ユーザがウォッチングしている株価を更新することはStockWatcherの最も重要な特徴です。もしあなたは古典的なウェブ開発テクニックでStockWatcherを書いたら、株価を更新したい時、毎回毎回ページを丸ごとリロードしなければなりません。あなたはそれを手動(ユーザーにブラウザのリフレッシュボタンを押して貰うようにする)や自動(例えば、HTMLのヘッダに<meta http-equiv="refresh" content="5">タグを入れる)で行うことでしょう。しかしWeb2.0世代では、単純に、それは十分に効率的とは言えません。この時代では…StockWatcheのユーザはページ全体のリフレッシュを待たずに株価を更新したいのです。

このセクションではあなたは:

  1. タイマーを実装し、その更新率を指定して、株価と変動率を自動更新します
  2. StockPriceクラスを作成し、株データのカプセル化を行います。
  3. refreshWatchListメソッドを実装することで、株価と変動率のための株データをランダムに生成します
  4. updateTableメソッドを実装することで、株データから株価と変動率をロードします

1.株データの自動リフレッシュ

GWTは密かなアプリケーションコンテンツのアップデートを簡単にします。StockWatcherのために、あなたはGWTのTimer(*タイマー)クラスを使って株価を自動更新します。

Timerはシングルスレッド・ブラウザセーフなタイマークラスです。タイマーはコードを将来の特定の時刻でのスケジュール実行を可能にします、一回限りの場合はscheduleメソッド、繰り返し実行する時はschduleRepeatingメソッドを利用します。ここでは5秒ごとにStockWatcherに株価を更新させたいので、scheduleRepeatingメソッドを利用します。

Timer発火したら、runメソッドは実行されます。StockWatcherではあなたはrunメソッドをオーバーライドし、その中で株価と変動率を更新するためのrefreshWatchListメソッドをコールします。現時点では、refreshWatchListの土台だけを作り、このセクションの後半で、それの実装も行います。

1.タイマーの実装

onModuleLoadメソッドを修正し、下記のようにTimerの新しいインスタンスを作成します。

  public void onModuleLoad() {

...

// Move cursor focus to the text box.
newSymbolTextBox.setFocus(true);

// Setup timer to refresh list automatically.
Timer refreshTimer = new Timer() {
@Override
public void run() {
refreshWatchList();
}
};
refreshTimer.scheduleRepeating(REFRESH_INTERVAL);


...

}

EclipseはTimer、REFRESH_INTERVALとrefreshWatcherにエラーフラグを立ちます。

2.Timerのためのインポートを宣言します。
Eclipseのショットカットを利用する場合、GWT Timerを確実に選んで下さい。

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

3.リフレッシュレートを指定します
Eclipseショットカットを利用しているのであれば、「定数を’REFRESH_INTERVAL’作成します」を選び、リフレッシュ間隔を5000ミリ秒に指定してください。
あるいは、下のコードをコピーペーストしても構いません。

public class StockWatcher implements EntryPoint {

private static final int REFRESH_INTERVAL = 5000; // ms

private VerticalPanel mainPanel = new VerticalPanel();

4.新しい株が追加されたら、すぐに株価と変動率を入れるようにします

addStockメソッドに、下の強調されたコードでTODOコメントを置き換えます。


private void addStock() {

...

// Add a button to remove a 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);

// Get the stock price.
refreshWatchList();


}

EclipseはrefreshWatchListにエラーフラグを立ちます。

5.StockWatcherクラスに、refreshWatchListメソッドの土台を作ります。


private void refreshWatchList() {
// TODO Auto-generated method stub

}

2.株価データのカプセル化

EclipseでJavaクラスを作成する

GWTがAJAX開発を加速するための主要な方法の一つは、Java言語でアプリケーションを書くことを許可したことです。これゆえ、あなたはオブジェクト指向プログラミングの静的型検査(static type checking)とtime-tested patterns(*意味わかんねえ…)のアドバンテージを取れます。これらはコード補完・自動リファクタリングなどのモダンな開発環境の機能と結合することで、良くまとまったコードベースで強固なAJAXアプリケーションを簡単に書くことができます。

StockWatcherでは、あなたは株価データをそれの独自クラスにファクタリングする能力のアドバンテージをとります。

1.StockPriceと名づけられた新しいJavaクラスを作成します。
Eclipseでは、パッケージエクスプローラでcom.google.gwt.sample.stockwatcher.clientパッケージを選び、Eclipseメニューバーから、「ファイル」→「新規」→「クラス」を選びます。
Eclipseは新規Javaクラスウィンドウを開いてくれます。

2.新規クラスウィンドウに記入します
名前のところに「StockPrice」
他のフィールドはすべてデフォルトのままで、「完了」を押します。

StockPriceクラスの作成

3.EclipseはStockPriceクラスの土台を作成します。

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

public class StockPrice {

}

4.下記のコードで土台を置き換えます。

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

public class StockPrice {

private String symbol;
private double price;
private double change;

public StockPrice() {
}

public StockPrice(String symbol, double price, double change) {
this.symbol = symbol;
this.price = price;
this.change = change;
}

public String getSymbol() {
return this.symbol;
}

public double getPrice() {
return this.price;
}

public double getChange() {
return this.change;
}

public double getChangePercent() {
return 10.0 * this.change / this.price;
}

public void setSymbol(String symbol) {
this.symbol = symbol;
}

public void setPrice(double price) {
this.price = price;
}

public void setChange(double change) {
this.change = change;
}

}

3.株データを生成する

現在では、あなたは株価データをカプセル化するためのStockPriceクラスを持っていますので、実際のデータを生成できます。これを行うために、refreshWatchListメソッドを実装します。refreshWatchListメソッドはユーザが株式を追加する時と5秒ごとのタイマーが発火する時の両方にコールされることを覚えといて下さい。

データをランダムに生成します

オンラインでのデータソースからリアルタイムの株価を取得する代わりに、あなたは擬似的なランダムな価格と変動率を作成します。これを行うために、(*java.util.Randomではなく)GWTのRandomクラスを使用します。次に、updateTableメソッドに渡すStockPriceオブジェクトの配列を作成します。

1.ランダムな株価を生成します
StockWatcherクラスに、refreshWatchListメソッドを下のコードで置き換えて下さい。

  /**
* Generate random stock prices.
*/

private void refreshWatchList() {
final double MAX_PRICE = 100.0; // $100.00
final double MAX_PRICE_CHANGE = 0.02; // +/- 2%

StockPrice[] prices = new StockPrice[stocks.size()];
for (int i = 0; i < stocks.size(); i++) {
double price = Random.nextDouble() * MAX_PRICE;
double change = price * MAX_PRICE_CHANGE
* (Random.nextDouble() * 2.0 - 1.0);

prices[i] = new StockPrice(stocks.get(i), price, change);
}

updateTable(prices);

}

EclipseはRandomとupdateTableにエラーフラグを立ちます。

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

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

3.updateTable(StockPrice[])メソッドの土台を作成します。

  private void updateTable(StockPrice[] prices) {
// TODO Auto-generated method stub

}

4.株価と変動率を入れます

最後に、ランダムに生成された株価と変動率のデータをStockWatcherのテーブルにロードします。各株式のために、価格と変動率の行を整形(フォーマット)した後に、データをロードします。これを行うために、StockWatcherクラスの二つのメソッドを実装します。

  1. 株価の値を小数点以下2桁に整形します
  2. 変動率の前に(+/-)記号を付け加えます

1.updateTable(StockPrice[])メソッドを実装します
土台を下記のコードで置き換えます。

  /**
* Update the Price and Change fields all the rows in the stock table.
*
* @param prices Stock data for all rows.
*/

private void updateTable(StockPrice[] prices) {
for (int i = 0; i < prices.length; i++) {
updateTable(prices[i]);
}


}

EclipseはupdateTableにエラーフラグを立ちます。
updateTable(StockPrice)メソッドの土台を作成します。

2.updateTable(StockPrice)メソッドを実装します
土台を下記のコードで置き換えて下さい。


/**
* Update a single row in the stock table.
*
* @param price Stock data for a single row.
*/
private void updateTable(StockPrice price) {
// Make sure the stock is still in the stock table.
if (!stocks.contains(price.getSymbol())) {
return;
}

int row = stocks.indexOf(price.getSymbol()) + 1;

// Format the data in the Price and Change fields.
String priceText = NumberFormat.getFormat("#,##0.00").format(
price.getPrice());
NumberFormat changeFormat = NumberFormat.getFormat("+#,##0.00;-#,##0.00");
String changeText = changeFormat.format(price.getChange());
String changePercentText = changeFormat.format(price.getChangePercent());

// Populate the Price and Change fields with new data.
stocksFlexTable.setText(row, 1, priceText);
stocksFlexTable.setText(row, 2, changeText + " (" + changePercentText
+ "%)");
}

EclipseはNumberFormatにエラーフラグを立ちます。

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

import com.google.gwt.i18n.client.NumberFormat;

5.ランダムに生成された株価を変動率をテストします

この時点で、あなたがランダムに生成した株式データは株価と変動率の欄に入れられます。試して、見てみてください。

1.StockWatcherを開発モードで実行する
2.株を追加する
株価と変動率にデータが入るはずです。
5秒ごとに、データはリフレッシュされます。

StockWatcherに株価と変動率が追加されました

今回も長かったので、さらに分割します。

次回は「3.タイムスタンプの追加」に続きます。

comments