GWT-CSSを使用したスタイル

GWTウィジェットは、視覚的なスタイル設定をカスケードスタイルシート（CSS）に依存しています。デフォルトでは、各コンポーネントのクラス名はgwt-<classname>。

たとえば、Buttonウィジェットのデフォルトスタイルはgwt -Buttonであり、同様の方法でTextBoxwidgestのデフォルトスタイルはgwt -TextBoxです。

すべてのボタンとテキストボックスに大きなフォントを与えるために、アプリケーションのCSSファイルに次のルールを配置できます。

.gwt-Button  { font-size: 150%; }

.gwt-TextBox { font-size: 150%; }

デフォルトでは、ブラウザもGWTもデフォルトを作成しません idウィジェットの属性。CSSで使用できる要素の一意のIDを明示的に作成する必要があります。IDを持つ特定のボタンを与えるためにmy-button-id フォントが大きい場合は、アプリケーションのCSSファイルに次のルールを含めることができます-

#my-button-id { font-size: 150%; }

GWTウィジェットのIDを設定するには、そのDOM要素を取得してから、次のようにid属性を設定します。

Button b = new Button();
DOM.setElementAttribute(b.getElement(), "id", "my-button-id")

CSSスタイリングAPI

GWTウィジェットのCSS設定をハングアップするために利用できる多くのAPIがあります。以下は、GWTを使用した日常のWebプログラミングに役立ついくつかの重要なAPIです。

シニア番号	APIと説明
1	public void setStyleName(java.lang.String style) この方法は、既存のスタイルをクリアして使用して提供される新しいCSSクラスにウィジェットスタイルを設定しますスタイルを。
2	public void addStyleName(java.lang.String style) このメソッドは、ウィジェットにセカンダリまたは依存スタイル名を追加します。セカンダリスタイル名は追加のスタイル名です。つまり、以前に適用されたスタイル名があった場合、それらは保持されます。
3	public void removeStyleName(java.lang.String style) このメソッドは、ウィジェットから特定のスタイルを削除し、ウィジェットに関連付けられている他のスタイルを残します。
4	public java.lang.String getStyleName() このメソッドは、オブジェクトのすべてのスタイル名をスペースで区切られたリストとして取得します。
5	public void setStylePrimaryName(java.lang.String style) このメソッドは、オブジェクトのプライマリスタイル名を設定し、すべての依存スタイル名を更新します。

たとえば、テキストに適用する2つの新しいスタイルを定義しましょう-

.gwt-Big-Text { 
   font-size:150%;
}

.gwt-Small-Text { 
   font-size:75%;
}

.gwt-Red-Text { 
   color:red;
}

これで、setStyleName（Style）を使用して、デフォルト設定を新しい設定に変更できます。以下のルールを適用すると、テキストのフォントが大きくなります

txtWidget.setStyleName("gwt-Big-Text");

同じウィジェットにセカンダリCSSルールを適用して、次のように色を変更できます-

txtWidget.addStyleName("gwt-Red-Text");

上記の方法を使用すると、ウィジェットに適用するスタイルをいくつでも追加できます。ボタンウィジェットから最初のスタイルを削除しても、2番目のスタイルはテキストに残ります。

txtWidget.removeStyleName("gwt-Big-Text");

一次および二次スタイル

デフォルトでは、ウィジェットのプライマリスタイル名は、ウィジェットクラスのデフォルトのスタイル名になります（例：gwt-Button for Buttonウィジェット）。AddStyleName（）メソッドを使用してスタイル名を追加および削除する場合、それらのスタイルはセカンダリスタイルと呼ばれます。

ウィジェットの最終的な外観は、ウィジェットに追加されたすべてのセカンダリスタイルとそのプライマリスタイルの合計によって決まります。ウィジェットのプライマリスタイルは、setStylePrimaryName（String）メソッドを使用して設定します。説明のために、ラベルウィジェットがあるとしましょう。CSSファイルには、次のルールが定義されています-

.MyText {
   color: blue;
}

.BigText {
   font-size: large;
}

.LoudText {
   font-weight:  bold;
}

特定のラベルウィジェットに常に青いテキストを表示させ、場合によっては、強調を追加するために、より大きく太字のフォントを使用するとします。

私たちはこのようなことをすることができます-

// set up our primary style
Label someText = new Label();
someText.setStylePrimaryName("MyText");
...

// later on, to really grab the user's attention
someText.addStyleName("BigText");
someText.addStyleName("LoudText");
...

// after the crisis is over
someText.removeStyleName("BigText");
someText.removeStyleName("LoudText");

CSSファイルの関連付け

CSSファイルをモジュールに関連付けるには複数のアプローチがあります。最新のGWTアプリケーションは通常、CssResourceとUiBinderの組み合わせを使用します。この例では、最初のアプローチのみを使用しています。

ホストHTMLページで<link>タグを使用する。
モジュールXMLファイルの<stylesheet>要素を使用します。
を使って CssResource 内に含まれる ClientBundle。
でインライン<ui：style>要素を使用する UiBinder テンプレート。

GWTCSSの例

この例では、GWTウィジェットにさまざまなCSSルールを適用するための簡単な手順を説明します。Eclipse IDEとGWTプラグインを配置し、次の手順に従ってGWTアプリケーションを作成しましょう-

ステップ	説明
1	GWT-アプリケーションの作成の章で説明されているように、パッケージcom.tutorialspointの下にHelloWorldという名前のプロジェクトを作成します。
2	変更HelloWorld.gwt.xml、HelloWorld.css、HelloWorld.htmlとHelloWorld.javaは、以下のように説明しました。残りのファイルは変更しないでください。
3	アプリケーションをコンパイルして実行し、実装されたロジックの結果を確認します。

変更されたモジュール記述子の内容は次のとおりです src/com.tutorialspoint/HelloWorld.gwt.xml。

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

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

</module>

以下は、変更されたスタイルシートファイルの内容です。 war/HelloWorld.css。

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

.gwt-Button { 
   font-size: 150%; 
   font-weight: bold;
   width:100px;
   height:100px;
}

.gwt-Big-Text { 
   font-size:150%;
}

.gwt-Small-Text { 
   font-size:75%;
}

以下は、変更されたHTMLホストファイルの内容です。 war/HelloWorld.html 2つのボタンに対応します。

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <div id = "mytext"><h1>Hello, World!</h1></div>
      <div id = "gwtGreenButton"></div>
      <div id = "gwtRedButton"></div>
   </body>
</html>

以下のJavaファイルの内容を見てみましょう src/com.tutorialspoint/HelloWorld.java HTMLに2つのボタンを追加し、カスタムCSSスタイルを適用します。

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
     
   // add button to change font to big when clicked.
   Button Btn1 = new Button("Big Text");
   Btn1.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
         RootPanel.get("mytext").setStyleName("gwt-Big-Text");
      }
   });

   // add button to change font to small when clicked.
   Button Btn2 = new Button("Small Text");
   Btn2.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
         RootPanel.get("mytext").setStyleName("gwt-Small-Text");
      }
   });

   RootPanel.get("gwtGreenButton").add(Btn1);
   RootPanel.get("gwtRedButton").add(Btn2);
   }
}

すべての変更を行う準備ができたら、GWT-アプリケーションの作成の章で行ったように、アプリケーションをコンパイルして開発モードで実行します。アプリケーションに問題がない場合、次の結果が得られます-

表示された2つのボタンをクリックして、「Hello、World！」を確認してください。2つのボタンをクリックするとフォントが変化し続けるテキスト。