GWT - 水平分割面板小部件

介紹

HorizontalSplitPanel 小部件表示一個面板，它將兩個小部件排列在單行水平排列中，並允許使用者互動式地更改分配給這兩個小部件的寬度比例。包含在 HorizontalSplitPanel 中的小部件將在必要時自動裝飾捲軸。

類宣告

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

@Deprecated
public final class HorizontalSplitPanel
   extends Panel

CSS 樣式規則

以下預設 CSS 樣式規則將應用於所有 HorizontalSpiltPanel 小部件。您可以根據需要覆蓋它。

.gwt-HorizontalSplitPanel { }

.gwt-HorizontalSplitPanel hsplitter { }

類建構函式

序號	建構函式和說明
1	HorizontalSplitPanel() 已棄用。
2	HorizontalSplitPanel(HorizontalSplitPanel.Resources resources) 已棄用。建立一個空的水平分割面板。
3	HorizontalSplitPanel(HorizontalSplitPanel (HorizontalSplitPanelImages images)) 已棄用。已由 HorizontalSplitPanel(Resources) 替代。

序號

建構函式和說明

HorizontalSplitPanel()

已棄用。

HorizontalSplitPanel(HorizontalSplitPanel.Resources resources)

已棄用。建立一個空的水平分割面板。

HorizontalSplitPanel(HorizontalSplitPanel (HorizontalSplitPanelImages images))

已棄用。已由 HorizontalSplitPanel(Resources) 替代。

類方法

序號	函式名稱和說明
1	void add(Widget w) 已棄用。將小部件新增到 HorizontalSplitPanel 中的面板。
2	protected Element getElement(int index) 已棄用。獲取給定索引的內容元素。
3	Widget getEndOfLineWidget() 已棄用。獲取佈局中位於行尾方向的面板中的小部件。
4	Widget getLeftWidget() 已棄用。獲取面板左側的小部件。
5	Widget getRightWidget() 已棄用。獲取面板右側的小部件。
6	protected Element getSplitElement() 已棄用。獲取充當分隔符的元素。
7	Widget getStartOfLineWidget() 已棄用。獲取佈局中位於行首方向的面板中的小部件。
8	protected Widget getWidget(int index) 已棄用。獲取包含的小部件之一。
9	boolean isResizing() 已棄用。指示分割面板是否正在調整大小。
10	java.util.Iterator<Widget> iterator() 已棄用。獲取包含的小部件的迭代器。
11	void onBrowserEvent(Event event) 已棄用。每當接收到瀏覽器事件時觸發。
12	protected void onEnsureDebugId(java.lang.String baseID) 已棄用。受影響的元素：-splitter = 包含分隔符元素的容器。-right = 分隔符右側的容器。-left = 分隔符左側的容器。
13	protected void onLoad() 已棄用。此方法在小部件附加到瀏覽器的文件後立即呼叫。
14	protected void onUnload() 已棄用。此方法在小部件將從瀏覽器的文件中分離之前立即呼叫。
15	boolean remove(Widget widget) 已棄用。移除子小部件。
16	void setEndOfLineWidget(Widget w) 已棄用。設定佈局中位於行尾方向的面板中的小部件。
17	void setLeftWidget(Widget w) 已棄用。設定面板左側的小部件。
18	void setRightWidget(Widget w) 已棄用。設定面板右側的小部件。
19	void setSplitPosition(java.lang.String pos) 已棄用。移動分隔符的位置。
20	void setStartOfLineWidget(Widget w) 已棄用。設定佈局中位於行首方向的面板中的小部件。
21	protected void setWidget(int index, Widget w) 已棄用。設定包含的小部件之一。

繼承的方法

此類繼承自以下類的方法：

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

HorizontalSplitPanel 小部件示例

此示例將引導您完成簡單的步驟，以展示如何在 GWT 中使用 HorizontalSplitPanel 小部件。按照以下步驟更新我們在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>HorizontalSplitPanel Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

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

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HorizontalSplitPanel;
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 Horizontal Split Panel
      HorizontalSplitPanel horizontalSplitPanel = new HorizontalSplitPanel();
      horizontalSplitPanel.setSize("300px", "200px");
      horizontalSplitPanel.setSplitPosition("30%");

      // Add some content
      String randomText = "This is a sample text.";
      for (int i = 0; i < 2; i++) {
         randomText += randomText;
      }
      horizontalSplitPanel.setRightWidget(new HTML(randomText));
      horizontalSplitPanel.setLeftWidget(new HTML(randomText));

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

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

gwt_layout_panels.htm

列印頁面