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と全く関係ない部分は飛ばすつもりです。
ステップ７：スタイルの適用
この時点では、StockWatcherは機能的です。これからこれにビジュアルスタイルを与えたい。
このセクションでは、あなたは以下のことを行います：
- プロジェクトとスタイルシートの関連付け
- テーマを変更します
- セカンドスタイルを作成します
- 依存されるセカンドスタイルを作成します
- 動的にスタイルをアップデートします
- 要素のHTML属性を設定します
- 画像や他の静的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.セカンドスタイルを作成します」に続きます。