GWT-画像ウィジェット

前書き

画像*ウィジェットは、指定されたURLの画像を表示します。画像ウィジェットは、「クリップされていない」モード（デフォルトモード）または「クリップされた」モードにできます。クリップモードでは、画像のサブセットが表示されるように、ビューポートが画像の上にオーバーレイされます。クリップされていないモードでは、ビューポートはありません-画像全体が表示されます。メソッドは、画像が存在するモードに応じて異なる動作をします。これらの違いは、各メソッドのドキュメントで詳しく説明されています。

クラス宣言

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

public class Image
   extends Widget
      implements SourcesLoadEvents, HasLoadHandlers,
         HasErrorHandlers, SourcesClickEvents,
            HasClickHandlers, HasAllMouseHandlers,
               SourcesMouseEvents

CSSスタイルルール

次のデフォルトのCSSスタイルルールがすべての画像ウィジェットに適用されます。要件に応じて上書きできます。

.gwt-Image { }

クラスコンストラクター

Sr.No.	Constructor & Description
1	Image() 空の画像を作成します。
2	protected Image(Element element) このコンストラクタは、既存の要素を明示的に使用するためにサブクラスによって使用される場合があります。
3	Image(java.lang.String url) 指定されたURLで画像を作成します。
4	Image(java.lang.String html, int left, int top, int width, int height) 指定されたURLと可視性の長方形でクリップされた画像を作成します。

クラスメソッド

Sr.No.	Function name & Description
1	void addClickListener(ClickListener listener) クリックイベントを受け取るためのリスナーインターフェイスを追加します。
2	void addLoadListener(LoadListener listener) ロードイベントを受信するリスナーインターフェイスを追加します。
3	void addMouseListener(MouseListener listener) マウスイベントを受け取るためのリスナーインターフェイスを追加します。
4	void addMouseWheelListener(MouseWheelListener listener) このウィジェットの親パネルを取得します。
5	int getHeight() 画像の高さを取得します。
6	int getOriginLeft() 画像の可視性長方形の左上頂点の水平座標を取得します。
7	int getOriginTop() 画像の可視性長方形の左上頂点の垂直座標を取得します。
8	java.lang.String getUrl() 画像のURLを取得します。
9	int getWidth() 画像の幅を取得します。
10	void onBrowserEvent(Event event) 以前に追加されたリスナーインターフェイスを削除します。
11	static void prefetch(java.lang.String url) ブラウザに、指定されたURLの画像をプリフェッチさせます。
12	void removeClickListener(ClickListener listener) このメソッドは、ウィジェットがブラウザのドキュメントから切り離される直前に呼び出されます。
13	void removeLoadListener(LoadListener listener) 以前に追加されたリスナーインターフェイスを削除します。
14	void removeMouseListener(MouseListener listener) 以前に追加されたリスナーインターフェイスを削除します。
15	void removeMouseWheelListener(MouseWheelListener listener) 以前に追加されたリスナーインターフェイスを削除します。
16	void setUrl(java.lang.String url) 表示する画像のURLを設定します。
17	void setUrlAndVisibleRect(java.lang.String url, int left, int top, int width, int height) 画像のURLと可視性の長方形を同時に設定します。
18	void setVisibleRect(int left, int top, int width, int height) 画像の可視矩形を設定します。
19	static Image wrap(Element element) 既存の<img>要素をラップする画像ウィジェットを作成します。

継承されるメソッド

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

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
java.lang.Object

画像ウィジェットの例

この例では、簡単な手順で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;
}

以下は、変更された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>Image Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

画像ウィジェットの使用方法を示すJavaファイル src/com.finddevguides/HelloWorld.java の内容を見てみましょう。

package com.finddevguides.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Image;
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 a Image widget
      Image image = new Image();

     //set image source
      image.setUrl("http://www.finddevguides.com/images/gwt-mini.png");

     //Add image to the root panel.
      VerticalPanel panel = new VerticalPanel();
      panel.add(image);

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

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

GWT Image Widget

Gwt-image-widget

目次