GWT - ScrollPanel 元件

介紹

ScrollPanel 元件表示一個簡單的面板，它將內容包裝在可滾動區域中。

類宣告

以下是 com.google.gwt.user.client.ui.ScrollPanel 類的宣告：

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

類建構函式

序號	建構函式 & 描述
1	ScrollPanel() 建立一個空的滾動面板。
2	ScrollPanel(Widget child) 使用給定的子元件建立一個新的滾動面板。

序號

建構函式 & 描述

ScrollPanel()

建立一個空的滾動面板。

ScrollPanel(Widget child)

使用給定的子元件建立一個新的滾動面板。

類方法

序號	函式名稱 & 描述
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 應用程式：

步驟	描述
1	按照GWT - 建立應用章節中的說明，建立一個名為HelloWorld的專案，放在com.tutorialspoint包下。
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;
}

以下是修改後的 HTML 宿主檔案war/HelloWorld.html的內容。

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

讓我們來看一下 Java 檔案src/com.tutorialspoint/HelloWorld.java的內容，它將演示 ScrollPanel 元件的使用。

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

完成所有更改後，讓我們像在GWT - 建立應用章節中一樣，在開發模式下編譯並執行應用程式。如果應用程式一切正常，將會產生以下結果：

gwt_layout_panels.htm

列印頁面