GWT-VerticalSplitPanelウィジェット

前書き

*VerticalSplitPanel* ウィジェットは、2つのウィジェットを1つの垂直列に配置するパネルを表し、ユーザーは2つのウィジェットのそれぞれに専用の高さの割合を対話的に変更できます。 VerticalSplitterPanelに含まれるウィジェットは、必要に応じて自動的にスクロールバーで装飾されます。

クラス宣言

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

@Deprecated
public final class VerticalSplitPanel
   extends Panel

CSSスタイルルール

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

.gwt-VerticalSplitPanel { }

.gwt-VerticalSplitPanel vsplitter { }

クラスコンストラクター

Sr.No.

Constructor & Description

1

VerticalSplitPanel()

廃止予定です。

2

VerticalSplitPanel(VerticalSplitPanel.Resources resources)

廃止予定です。空の垂直分割パネルを作成します。

3

VerticalSplitPanel(VerticalSplitPanelImages images)

廃止予定です。 VerticalSplitPanel（Resources）に置き換えられました

クラスメソッド

Sr.No.	Function name & Description
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) 廃止予定です。含まれているウィジェットの1つを取得します。
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) 廃止予定です。含まれるウィジェットの1つを設定します。

継承されるメソッド

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

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アプリケーションを更新します-アプリケーションの作成_の章-

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>VerticalSplitPanel Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

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

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

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

GWT VerticalSplitPanelウィジェット

Gwt-verticalsplitpanel-widget

目次