２つのスタイルシート

基本の GWT Web Application には、既に次の二つのスタイルが適用されています。

• GWT デフォルト・スタイル
• アプリケーション個別スタイル

GWT デフォルト・スタイル

GWT デフォルト・スタイル は GWT モジュール定義ファイルに記載されています。

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='mytest'>
   <-- 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.keicode.gwt.test.mytest.client.MyTest'/>

   <-- Specify the paths for translatable code                    -->
   <source path='client'/>
   <source path='shared'/>

</module>

GWT で組み込みで用意されているスタイルは、コメントに記載があるとおり、Default, Chrome, Dark の三種類です。

アプリケーション・個別スタイル

アプリケーション毎の個別のスタイルシートは、ホストページに既に関連付けされています。

<--                                                               -->
<-- Consider inlining CSS to reduce the number of requested files -->
<--                                                               -->
<link type="text/css" rel="stylesheet" href="MyTest.css">

つまり、GWT にはホストページから CSS ファイルへリンクする方法だけではなく、 モジュール定義ファイルを用いる方法があるのです。

Widget や Panel へのスタイルの割り当て

次のコードを見てください。 ボタン (Button) のインスタンスを２つパネルに追加しています。

private VerticalPanel mainPanel = new VerticalPanel();
...
private Button button1 = new Button("Default");
private Button button2 = new Button("Custom");
     
public void onModuleLoad() {
                    
     button2.addStyleName("mystyle1");
          
     mainPanel.add(button1);
     mainPanel.add(button2);
     ...

この結果、次のようにボタンが表示されます。

このとき、特に何もスタイルを指定していない Default ボタンは次のように gwt-Button という CSS クラス名が割り当てられます。

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

addStyleName メソッドを呼ぶことによって、そのコンポーネントの追加の CSS スタイル名を指定することができます。

button2.addStyleName("mystyle1");

この結果、次のように CSS クラス名が割り当てられます。

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

GWT のボタンとして、gwt-Button という CSS クラス名が割り当てられますが、addStyleName の呼び出しによって、 "mystyle1" という CSS クラス名が追加されます。

尚、addStyleDependentName メソッドを利用して CSS クラス名を割り当てると、基本の gwt スタイル名 (この場合 "gwt-Button")-指定した名前 という形式でクラス名が割り当てられます。

<button class="gwt-Button gwt-Button-mystyle1" type="button" tabindex="0">...

UI 操作メソッドは UIObject クラスのメソッド

Widget や Panel など、全ての UI コンポーネントのスーパークラスとなる UIObject には addStyleName メソッドがあります。 これによって、結局、全ての UI コンポーネントは addStyleName メソッドを持つことになります。