Gwt-style-with-css

提供：Dev Guides
移動先:案内、検索

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

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

たとえば、ボタンウィジェットのデフォルトスタイルは_gwt-Button_であり、同様の方法でTextBox widgestのデフォルトスタイルは_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です。

Sr.No. API & Description
1

public void setStyleName(java.lang.String style)

このメソッドは、既存のスタイルをクリアし、_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");

プライマリスタイルとセカンダリスタイル

デフォルトでは、ウィジェットの_primary style_名は、そのウィジェットクラスのデフォルトのスタイル名になります（たとえば、ボタンウィジェットの場合は_gwt-Button_）。 AddStyleName（）メソッドを使用してスタイル名を追加および削除する場合、これらのスタイルはセカンダリスタイルと呼ばれます。

ウィジェットの最終的な外観は、ウィジェットに追加されたすべてのセカンダリスタイルとそのプライマリスタイルの合計によって決まります。 _setStylePrimaryName（String）_メソッドを使用して、ウィジェットのプライマリスタイルを設定します。 説明のために、Labelウィジェットがあるとします。 私たちの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>要素を使用します。
  • ClientBundle に含まれる CssResource を使用します。
  • UiBinder テンプレートでインライン<ui：style>要素を使用します。

GWT CSSの例

この例では、GWT widgestにさまざまなCSSルールを適用する簡単な手順を紹介します。 GWTプラグインとともにEclipse IDEを使用し、次の手順に従ってGWTアプリケーションを作成します。

Step Description
1 Create a project with a name HelloWorld under a package com.finddevguides as explained in the GWT - Create Application chapter.
2 Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorldl and HelloWorld.java as explained below. Keep rest of the files unchanged.
3 Compile and run the application to verify the result of the implemented logic.

以下は、変更されたモジュール記述子 src/com.finddevguides/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.finddevguides.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%;
}

以下は、2つのボタンに対応するように変更されたHTMLホストファイル war/HelloWorldl の内容です。 

<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>

HTMLに2つのボタンを追加し、カスタムCSSスタイルを適用するJavaファイル src/com.finddevguides/HelloWorld.java のコンテンツを見てみましょう。 

package com.finddevguides.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);
   }
}

すべての変更が完了したら、link：/gwt/gwt_create_application [GWT-アプリケーションの作成]の章で行ったように、アプリケーションをコンパイルして開発モードで実行します。 すべてがあなたのアプリケーションでうまくいけば、これは次の結果を生成します-

GWT CSSアプリケーション結果

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

「https://www.finddevguides.com/index.php?title=Gwt-style-with-css&oldid=14899」から取得
Powered by MediaWiki