GWT - 垂直分割面板元件

簡介

VerticalSplitPanel 元件表示一個面板，該面板將兩個元件排列在一個垂直列中，並允許使用者互動式地更改專用於這兩個元件的每個元件的高度比例。包含在 VerticalSplitterPanel 中的元件在必要時將自動使用捲軸進行裝飾。

類宣告

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

@Deprecated
public final class VerticalSplitPanel
   extends Panel

CSS 樣式規則

以下預設 CSS 樣式規則將應用於所有 VerticalSpiltPanel 元件。您可以根據您的需求覆蓋它。

.gwt-VerticalSplitPanel { }

.gwt-VerticalSplitPanel vsplitter { }

類建構函式

序號	建構函式 & 描述
1	VerticalSplitPanel() 已棄用。
2	VerticalSplitPanel(VerticalSplitPanel.Resources resources) 已棄用。建立空垂直分割面板。
3	VerticalSplitPanel(VerticalSplitPanelImages images) 已棄用。由 VerticalSplitPanel(Resources) 替換。

序號

建構函式 & 描述

VerticalSplitPanel()

已棄用。

VerticalSplitPanel(VerticalSplitPanel.Resources resources)

已棄用。建立空垂直分割面板。

VerticalSplitPanel(VerticalSplitPanelImages images)

已棄用。由 VerticalSplitPanel(Resources) 替換。

類方法

序號	函式名稱 & 描述
1	void add(Widget w) 已棄用。將元件新增到 HorizontalSplitPanel 中的面板。
2	protected Element getElement(int index) 已棄用。獲取給定索引的內容元素。
3	Widget getEndOfLineWidget() 已棄用。獲取佈局行方向末尾的面板中的元件。
4	Widget getBottomWidget() 已棄用。獲取面板底部側的元件。
5	Widget getTopWidget() 已棄用。獲取面板頂部側的元件。
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 setBottomWidget(Widget w) 已棄用。設定面板底部側的元件。
18	void setTopWidget(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

VerticalSplitPanel 元件示例

此示例將引導您完成簡單的步驟，以演示如何在 GWT 中使用 VerticalSplitPanel 元件。請按照以下步驟更新我們在GWT - 建立應用程式章節中建立的 GWT 應用程式：

步驟	描述
1	在GWT - 建立應用程式章節中說明的包com.tutorialspoint下建立一個名為HelloWorld的專案。
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>VerticalSplitPanel Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

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

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.VerticalSplitPanel;
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 Vertical Split Panel
      VerticalSplitPanel verticalSplitPanel = new VerticalSplitPanel();
      verticalSplitPanel.setSize("300px", "200px");
      verticalSplitPanel.setSplitPosition("35%");

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

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

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

gwt_layout_panels.htm

列印頁面