GWT-ScrollPanelウィジェット

前書き

*ScrollPanel* ウィジェットは、スクロール可能な領域にコンテンツをラップするシンプルなパネルを表します。

クラス宣言

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

public class ScrollPanel
   extends SimplePanel
      implements SourcesScrollEvents, HasScrollHandlers,
         RequiresResize, ProvidesResize

クラスコンストラクター

Sr.No.

Constructor & Description

1

ScrollPanel()

空のスクロールパネルを作成します。

2

ScrollPanel(Widget child)

指定された子ウィジェットで新しいスクロールパネルを作成します。

クラスメソッド

Sr.No.	Function name & Description
1	HandlerRegistration addScrollHandler(ScrollHandler handler) ScrollEventハンドラーを追加します。
2	void addScrollListener(ScrollListener listener) 廃止予定です。代わりにaddScrollHandler（com.google.gwt.event.dom.client.ScrollHandler）を使用してください
3	void ensureVisible(UIObject item) パネルのスクロール位置を調整することにより、指定されたアイテムが表示されるようにします。
4	protected Element getContainerElement() このメソッドをオーバーライドして、ルート要素以外の要素がパネルの子ウィジェットのコンテナになるように指定します。
5	int getHorizontalScrollPosition() 水平スクロール位置を取得します。
6	int getScrollPosition() 垂直スクロール位置を取得します。
7	void onResize() このメソッドは、実装者のサイズが変更されるたびに呼び出す必要があります。
8	void removeScrollListener(ScrollListener listener) 廃止予定です。代わりに、addScrollHandler（com.google.gwt.event.dom.client.ScrollHandler）によって返されたオブジェクトでHandlerRegistration.removeHandler（）メソッドを使用します
9	void scrollToBottom() このパネルの下部までスクロールします。
10	void scrollToLeft() このパネルの左端までスクロールします。
11	void scrollToRight() このパネルの右端までスクロールします。
12	void scrollToTop() このパネルの上部までスクロールします。
13	void setAlwaysShowScrollBars(boolean alwaysShow) このパネルに常にスクロールバーを表示するか、必要な場合にのみ表示するかを設定します。
14	void setHeight(java.lang.String height) オブジェクトの高さを設定します。
15	void setHorizontalScrollPosition(int position) 水平スクロール位置を設定します。
16	void setScrollPosition(int position) 垂直スクロール位置を設定します。
17	void setSize(java.lang.String width, java.lang.String height) オブジェクトのサイズを設定します。
18	void setWidth(java.lang.String width) オブジェクトの幅を設定します。

継承されるメソッド

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

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

ScrollPanelウィジェットの例

この例では、GWTでのScrollPanelウィジェットの使用法を示す簡単な手順を紹介します。次の手順に従って、_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>ScrollPanel Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

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

package com.finddevguides.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.ScrollPanel;

public class HelloWorld implements EntryPoint {

   public void onModuleLoad() {
     //Create scrollable text
      HTML contents = new HTML("This is a ScrollPanel."
         +" By putting some fairly large contents in the middle"
         +" and setting its size explicitly, it becomes a scrollable area"
         +" within the page, but without requiring the use of an IFRAME."
         +" Here's quite a bit more meaningless text that will serve primarily"
         +" to make this thing scroll off the bottom of its visible area."
         +" Otherwise, you might have to make it really, really"
         +" small in order to see the nifty scroll bars!");

     //create scrollpanel with content
      ScrollPanel scrollPanel = new ScrollPanel(contents);
      scrollPanel.setSize("400px", "100px");

      DecoratorPanel decoratorPanel = new DecoratorPanel();

      decoratorPanel.add(scrollPanel);

     //Add the widgets to the root panel.
      RootPanel.get().add(decoratorPanel);
   }
}

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

GWT ScrollPanelウィジェット

Gwt-scrollpanel-widget

目次