2018年11月21日GWTはコンパイル時に自動的にスタイルシートを生成する。これは、開発モードでも行われる。Oxygen)でGWTサンプルを動かすまでで作成したEclipseのGWTプラグインが生成するサンプルを使用する。目次gwt.xmlの例スタイルシートはどこにあるのか?スタイルシートの中身は何か?スタイルシートを変更するには?複数指定するとどうなるのか?無くすことはできるのか?独自のGWT用スタイルシートモジュールを作るには?関連する議論gwt.xmlの例サンプルでは、以下のようなgwt.xmlが自動生成されている。name=’com.google.gwt.user.theme.clean.Clean’/>という記述によって、スタイルシートが生成されているのである。スタイルシートはどこにあるのか?開発モードの実行でもコンパイルでも同じなのだが、この記述によって自動的にスタイルシートが生成され、以下に格納される。モジュール名がsampleなので、war/sampleの下のgwtの中に作られる。スタイルシートの中身は何か?この中のclean.cssを見てみると以下のような記述になっている。#ccc;}(略)基本的には、GWTに備わっているウィジェトのためのスタイルを決めている。ChromeのデベロッパーツールでButtonウィジェットを見てみると、gwt-Buttonというclassが指定されている。先の生成スタイルシートの.gwt-Buttonが使われるというわけである。スタイルシートを変更するには?最初のgwt.xmlのコメントにあるように、GWTには複数のスタイルシートが提供されており、これを変更するだけで別のスタイルシートになるようだ。試しに、darkというスタイルシートに変更してみる。name='com.google.gwt.user.theme.dark.Dark'/>アプリ画面は以下に変わり、war/sample/gwtは以下に変わる(削除しなければcleanは残ったまま)複数指定するとどうなるのか?例えば以下のように指定する。name='com.google.gwt.user.theme.dark.Dark'/>すると、指定通りすべてが生成される。実際に使用されるのは最後のもの、つまりDarkになるようだ。スタイルシートではない、通常のモジュールの中でスタイルシートが指定されていた場合、それも有効になってしまう。以下のように指定する。name='foo.bar.Bar'/>Barモジュールの中でDarkが指定されていた場合、Clean、Dark共に生成されて、Darkが有効になる。※非常に面倒になるので、他で使用されるモジュールにはスタイルシートを指定すべきではない。無くすことはできるのか?ときにはGWTのウィジェットを全く使わない場合もありうる。すべてを異なるウィジェットセットにし、専用のスタイルシートを使う場合である。この場合でもGWTの生成するスタイルシートにはbody等へのfont-familyが指定されており、場合によってはGWTの指定が採用されてしまう。この場合にはgwt.xmlでどのスタイルシートもコメントアウトしてしまう。すると、当然GWTはスタイルシートを生成しなくなる。結果以下のような表示になり、war/sample/gwtフォルダ自体が生成されない。独自のGWT用スタイルシートモジュールを作るには?では、GWTのウィジェットを使いつつ、例えばfont-familyを変更することはできるのだろうか。GWTの提供するモジュールがそのまま生成するスタイルシートでは以下のようになるが、より日本語に適したフォントを使いたいのである。small;}単純なことだった。スタイルシート及び必要なイメージを特定のフォルダに入れ、モジュールとして参照するだけだ。Cleanの場合を見てみる。gwt-user.jarの中の「com.google.gwt.user.theme.clean」パッケージを見てみると以下のようになっている。Clean.gwt.xmlを見てみると以下の記述になっている。pathとして指定されたpublicというフォルダ以下が、Cleanをinheritsしたモジュールの下にコピーされる。この場合は、gwt以下がコピーされていたわけである。src=”gwt/clean/clean.css”/>で指定しているわけである。この説明も先のマニュアルの中にある。ちなみに、CleanRTL.gwt.xmlは右から左に書く言語のためのもの、CleanResources.gwt.xmlはstylesheet指定が無く、単純にコピーするだけのものらしい。関連する議論これに関連する議論がStackOverflowにある。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。