Google Web Toolkit (GWT) を初めて学ぶ人のための学習サイトです。実用的なコード例でわかりやすく解説しています。
Google Web Toolkit (GWT) 入門Google Web Toolkit (GWT) 入門
GWT 開発環境
GWT の基本
さらに学ぶ
サイト情報

スタイルの適用

2つのスタイルシート

基本の 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) のインスタンスを2つパネルに追加しています。

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 メソッドを持つことになります。



© 2010-2017 Keisuke Oyama Google Web Toolkit (GWT) 入門