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

学会二日目なのです

つ、つ、つ、疲れた…。

comments

学会一日目なのです

直線的な距離はそれほどでもないかもしれませんが、

JR→地下鉄→私鉄→バスの乗り換えで、

片道2.5時間の日帰りコースをチョイスしました。

ほんとう〜に疲れましたね〜

いや、新幹線で東京に行くほうが楽です、マジで。

比較的に交通不便な大学に行くと思うのですが、

アクセスが便利な京都駅から徒歩7分のKCGKCGIは、

本当に恵まれていますよね〜

幸い、ぉぅぇぃの発表は今日で終わりましたので、

明日は比較的に気楽に他の人の研究発表を聞くことが出来ます。

が、今日と同じく、朝はかなり早いので、今日も早めに休むようにしたいですね〜

というわけで、昨日に続いて、今日も手短コースなのです!

comments

土日は学会なのです

年度末というか、3月あたりに大会をやる学会が多いのです。

明日・明後日は学会なのです。

ぉぅぇぃも準備しないと行けないのです。

というわけで、今日は手短で終わりますです。

明日・明後日も同じ感じになる予定なのです。

ここ数日はあんまり記事書けない〜のです。

ではではです。

ノシノシ

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

[速報]ニンテンドー 3 D S(スリーディーエス)が発表される

ニュースリリースが出ましたので、紹介します。

http://www.nintendo.co.jp/ir/pdf/2010/100323.pdf

2010年3月23日
新携帯ゲーム機の発売に関して
任天堂株式会社(京都市南区、社長岩田聡)は、裸眼で 3D 映像によりゲームが楽しめる「ニンテンドー 3 D S (スリーディーエス)」(仮称)を、2011年3月期に発売い たします。
スリーディーエス 「ニンテンドー 3 D S 」(仮称)は、2009年12月末時点での当社からの全世界向け連結販売台数が1億2500万台に上る「ニンテンドーDSシリーズ」の後継機となる 新型の携帯型ゲーム機であり、ニンテンドーDSi を含むニンテンドーDSシリーズ用ソフ トもお楽しみいただける互換機能も有しております。
その他の詳細に関しましては、2010年6月15日からアメリカ合衆国のロサンゼル スで開催されますビデオゲーム展示会であるE3ショーにて発表予定です。

裸眼で3D、しかも携帯機…、どんな技術を使っているかは気になりますね。

それにしても、さすがは京都の任天堂、

相変わらずプロモーション&マーケティングはウマイですね。

値段・仕様・中身については全く何一つ明らかにされていませんが、

「予想外」の部分だけ強調して、

「え?裸眼?3D?携帯機?」から

「これはスゴイかもしれません」と思わせるのは、やっぱりスゴイですね。

どんなものかについて、実物を見てみないと、

ちょっと疑問を感じなくもありませんが、

最近出すものすべてがヒットする「あの任天堂」が出す商品だから、

うまく消費者を惹きつける商品を仕上げているハズですね。

6月のE3(エレクトロニック・エンターテインメント・エキスポ)でお手並み拝見!ですね。

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