MGWTにおけるスタイル表示方法

MGWTのProjectページに
スタイルシートの設定方法についての
Wikiページがあったので
翻訳してみました。


先に謝っておきますが、
このパートの翻訳はあまり品質が良くありません。
AT YOUR OWN RISKでの参照願います。

翻訳元：

• Styling
• AnimationDisplay

----
MGWTにおけるスタイル表示方法
提供されているテーマの使い方や独自構築方法などを紹介します。

イントロダクション

表示の際にもっとも効果的にするために、mgwtはGWT ClientBundlesを使用します。
この文書ではGWT ClientBundlesがどうやって動作するのか説明しません、かわりにmgwtがどうやってGWT ClientBundlesを使用しているのかに焦点をあてます。

ClientBundlesについての基本的な情報は完璧なGWTドキュメントを参照して下さい：

ClientBundle


mgwtの見た目をカスタマイズするためにはいくつかの方法があります：

　1. selector obfuscationを分岐し、カスタムCSSファイルを追加
　2. mgwt cssインターフェイスを拡張し、ベースとなるCSSファイルを変更もしくは拡張
　3. デフォルトのカスタムカラーテーマを使用
　4. スタイルに影響する他のGWTメカニズムを使用

このドキュメントはカスタムテーマのローリング同様にmgwtの見た目の小さな変更をどうやって行うかについて明確にすることを意図しています。

デザインをどう見せるかについて決まっているのであれば、それらの最適化のためにClient Bundleを使用すべきです。それゆえgwt css インターフェイスとバンドル、いくつかのCSSを簡単に拡張することができます。


Selector Obfuscationの分岐

もしあなたがselector obfuscationを分岐させるならあなたはプレーンなCSSクラス名を使ってアプリケーションを表現することができます。しかし同時ににコンパイル時チェックとパフォーマンを犠牲にしています。このアプローチは素早くテストしたい場合にはよいアイディアです。

gwt.xmlファイルにこのルールを記述します：

　

設定後、このプロパティクラス名はこれ以上わかりずらい難読化されません、それらは"mgwt-Button"の様な可読なプレーンな名称になります。
CSSが処理すべきことを終了し計算し終えたら、同様にClientBundlesの使用を始めます。

CSSを使ったスタイリング：

selector obfuscationを切った後、DOM内のmgwt クライアントバンドルよりも後にCSSファイルをインクルードする必要があります、このため、スタイルをオーバライドすることができます。

これによりCSSを簡単に拡張可能となります：

//this will create a link element at the end of head 

  MGWTStyle.getTheme().getMGWTClientBundle().getMainCss().ensureInjected();

//append your own css as last thing in the head 

MGWTStyle.injectStyleSheet("yourcssfile.css");

エントリポイントへ記述してください、ただしClientBundleの使用やエンベッデッドバンドルをオーバライド使用がより効果的です。

拡張mgwt css インタフェイス

gitリポジトリに完全なスタイリング例があります。


この方法で、簡単にウィジェットをオーバライドして気の向くままにスタイリングを行うことができます：


1. ClientBundleマッチングの拡張
2. 適当なgetter(例：getButtonCss())をオーバライド
3. 最初にベースCSSをアノテート+カスタムCSS
4. バンドルを返却するMGWTThemeのカスタム実装を記述
5. テーマをデフォルトとしてセット、もしくはカスタムWidgetのコンストラクタを通す

GWTはCSSファイルを記述するためのインタフェイスを使用します。mgwtにおいても怒鳴時アプローチを使用しています。Widgetごとに（重要）１つのCSSインタフェイスと（少なくとも）１つのCSSファイルがあります。CSSインタフェイスやCSSファイルは１つのバンドルと一緒に運ばれます。どのCSSファイルがどのインタフェイスのために使用するかを簡単にアノテートします。MGWTは、異なるプラットフォームのために、異なる（イメージを含む）バンドルを保有しています。これは、iOSアプリ内にはAndroidに特化したCSSが無いことを意味しています。

現在７つの異なるBundleが存在します：

　iPhone (非 Retina ディスプレイ)
　iPhone (Retina ディスプレイ)
　iPad
　Android 携帯
　Android タブレット
　Blackberry
　デスクトップ

MGWTColorBundleNonRetinaの例をちょっと見てください：

　public interface MGWTColorBundleNonRetina
　　extends MGWTClientBundleBaseThemeNonRetina {
　　
　　@Source({ "color.css",
　　　"com/googlecode/mgwt/ui/client/theme/base/css/progressbar.css",
　　　"css/progressbar.css" })
　　ProgressBarCss getProgressBarCss();
  　...
　}

インタフェイスProgressBarCssはProgressBarに関するすべてのCSSクラスを含んでいます。このインタフェイスにCSSファイルをアノテートします。重要：順序は通常のCSSファイル同様重要です。最初にカラーテーマのためのカラー定義、その後にmgwtテーマのベースとなるCSSフォーム、そして最後にカスタムCSS（クラスをオーバライドする場合）をインクルードします。デフォルトのprogressbar.cssのコピーを必要としないことに注意してください。必要な際、オーバライドすることができます。

つぎにやらなくてはならないことは、MGWTThemeインタフェイスを作成する事です。

　public interface MGWTTheme {
　
　　public MGWTClientBundle getMGWTClientBundle();
　
　}

すべてのプラットフォームのための単純な２つのカラーテーマの構築を始めましょう（このテーマは実際にmgwtの一部となり大変簡単に使用されます）：

最初にMGWTTheme実装の構築が必要です（参照：MGWTColorTheme）：

　public class MGWTColorTheme implements MGWTTheme {
　　
　　private MGWTClientBundle bundle;
　　
　　public MGWTColorTheme() {
　　　if (MGWT.getOsDetection().isIOs()) {
　　　　if (MGWT.getOsDetection().isRetina()) {
　　　　　bundle =
　　　　　　(MGWTColorBundleRetina) GWT.create(
　　　　　　　MGWTColorBundleRetina.class);
　　　　} else {
　　　　　bundle =
　　　　　　(MGWTColorBundleNonRetina)GWT.create(
　　　　　　　MGWTColorBundleNonRetina.class);
　　　　}
　　　} else {
　　　　bundle =
　　　　　(MGWTColorBundleNonRetina) GWT.create(
　　　　　　MGWTColorBundleNonRetina.class);
　　　}
　　}
　　
　　@Override
　　public MGWTClientBundle getMGWTClientBundle() {
　　　return bundle;
　　}
　}

上記実装ではMGWTClientBundleの２つの異なる実装のインスタンスを返します。一方はRetinaディスプレイ搭載iPhone向け、他方はその他すべてのデバイス向けです。
Retinaディスプレイ上できれいに見せるためアイコンはより大きいレゾリューションが必要なため、別々のMGWTClientBundle実装が必要です。
CSSファイル内で条件付きイメージをインクルードできないので（イメージは通常インライン定義される場合が多いが..）、異なるバンドルを使用します。

最後にやるべきこととしてデフォルトとしてのテーマのセットもしくはテーマをWidgetへパスします：

　MGWTStyle.setTheme(new MGWTColorTheme());

重要：アプリ処理の最初に行う必要があります。実行中テーマ変更はできません。

カスタムテーマをただ一つのWidgetへパスします：

　new Button(theme.getMGWTClientBundle().getButtonCss())

mgwtテーマ

mgwtは以下の各プラットフォームに対応するテーマを提供します：

　iPhone
　iPad
　Android
　Blackberry


そして、OSに依存せず簡単に拡張可能なテーマを１つサポートします：

　mgwt base

Widgetのスタイル定義方法

各Widgetや類似するCSSクラスのDOM構造を参照したい場合はWidgetのjavadocをちょっと見てください。Wikiで個別に更新するよりむしろ、コード内に直接文書化するほうが最新版を維持しやすいためjavadocを選択しました。



　Button
　ButtonBar
　CellList
　HeaderButton
　HeaderPanel
　LayoutPanel
　MCheckBox
　MValueBoxBase(MTextBoxのようなほとんどの入力要素向け)
　MListBox
　MRadioBox
　MSearchBox
　MSlider
　ProgressBar
　ProgressIndicator
　PullToRefresh
　ScrollPanel
　WidgetList
　TabPanel


ブラウザ内部のアニメーションの一般的な考え方

ブラウザ内部でどのようにアニメーションが処理されるかに関するブログ：
http://blog.daniel-kurka.de/2011/12/animating-in-browser.html


RootPanel vs RootLayoutPanel

GWT RootLayoutPanelは異なるブラウザでのスクリーンのリサイズをハンドルするために必要な処理を行います。IEにおけるボックスモデルの遅延のため、RootLayoutPanelはボックスモデルをサポートするブラウザ内で動作する必要がないコードを含んでいます。
RootLayoutPanelが複数のブラウザで動作する関連するレイアウトを提供する仕事をしている間、子供要素をレイアウトするためにJavaScriptが動作しています。

MGWTを使用して、WebKitエンジンにのみWidgetのレイアウトさせて、ほかのJavaScriptはレイアウトのための動作は行いません。
これはすべてのWidget上で早くスムースなレスポンスを保証します。なぜならすべてのコードはネイティブのレイアウトエンジンの範囲内で動作しているからです。

RootLayoutPanelはこのパターンを壊すため、MGWTでは使用しません。RootLayoutPanelを決して使用しないで下さい、AnimationDisplayを追加のためにはRootPanelを使用して下さい。
-----

ClientBundleをあまり使用してなかったから
もうちょっとそのあたりをしっかり利用したUI設計になれとかないと..