GWT-ラベルウィジェット

前書き

*Label* には任意のテキストのみを含めることができ、HTMLとして解釈することはできません。 このウィジェットは<div>要素を使用するため、ブロックレイアウトで表示されます。

クラス宣言

以下は com.google.gwt.user.client.ui.Label クラスの宣言です-

public class Label
   extends Widget
      implements HasHorizontalAlignment, HasText, HasWordWrap,
         HasDirection, HasClickHandlers, SourcesClickEvents,
            SourcesMouseEvents, HasAllMouseHandlers

CSSスタイルルール

次のデフォルトのCSSスタイルルールがすべてのラベルに適用されます。要件に応じて上書きできます。

.gwt-Label { }

クラスコンストラクター

Sr.No.	Constructor & Description
1	Label() 空のラベルを作成します。
2	protected Label(Element element) このコンストラクタは、既存の要素を明示的に使用するためにサブクラスによって使用される場合があります。
3	Label(java.lang.String text) 指定されたテキストでラベルを作成します。
4	Label(java.lang.String text, boolean wordWrap) 指定されたテキストでラベルを作成します。

クラスメソッド

Sr.No.	Method & Description
1	void addClickListener(ClickListener listener) クリックイベントを受け取るためのリスナーインターフェイスを追加します。
2	void addMouseListener(MouseListener listener) マウスイベントを受け取るためのリスナーインターフェイスを追加します。
3	void addMouseWheelListener(MouseWheelListener listener) このウィジェットの親パネルを取得します。
4	HasDirection.Direction getDirection() ウィジェットの方向性を取得します。
5	HasHorizontalAlignment. HorizontalAlignmentConstant getHorizontalAlignment() 水平方向の配置を取得します。
6	java.lang.String getText() このオブジェクトのテキストを取得します。
7	boolean getWordWrap() ワードラップが有効かどうかを取得します。
8	void onBrowserEvent(Event event) 以前に追加されたリスナーインターフェイスを削除します。
9	void removeClickListener(ClickListener listener) このメソッドは、ウィジェットがブラウザのドキュメントから切り離される直前に呼び出されます。
10	void removeMouseListener(MouseListener listener) 以前に追加されたリスナーインターフェイスを削除します。
11	void removeMouseWheelListener(MouseWheelListener listener) 以前に追加されたリスナーインターフェイスを削除します。
12	void setDirection(HasDirection.Direction direction) ウィジェットの方向性を設定します。
13	void setHorizontalAlignment(HasHorizontalAlignment. HorizontalAlignmentConstant align) 水平方向の配置を設定します。
14	void setText(java.lang.String text) このオブジェクトのテキストを設定します。
15	void setWordWrap(boolean wrap) ワードラッピングを有効にするかどうかを設定します。
16	static Label wrap(Element element) 既存の<div>または<span>要素をラップするLabelウィジェットを作成します。

継承されるメソッド

このクラスは、次のクラスからメソッドを継承します-

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget

ラベルウィジェットの例

この例では、簡単な手順でGWTのラベルウィジェットの使用方法を示します。次の手順に従って、_GWTで作成した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-Label{
   font-size: 150%;
   font-weight: bold;
   color:red;
   padding:5px;
   margin:5px;
}

.gwt-Green-Border{
   border:1px solid green;
}

.gwt-Blue-Border{
   border:1px solid blue;
}

以下は、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>
      <h1>Label Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Labelウィジェットの使用方法を示すJavaファイル src/com.finddevguides/HelloWorld.java の内容を以下に示します。

package com.finddevguides.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
     //create two Labels
      Label label1 = new Label("This is first GWT Label");
      Label label2 = new Label("This is second GWT Label");

     //use UIObject methods to set label properties.
      label1.setTitle("Title for first Lable");
      label1.addStyleName("gwt-Green-Border");
      label2.setTitle("Title for second Lable");
      label2.addStyleName("gwt-Blue-Border");

     //add labels to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.add(label1);
      panel.add(label2);

      RootPanel.get("gwtContainer").add(panel);
   }
}

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

GWT Label Widget

Gwt-label-widget

目次