Gwt-horizontalsplitpanel-widget

提供：Dev Guides
移動先:案内、検索

GWT-Horizo​​ntalSplitPanelウィジェット

前書き

*HorizantalSplitPanel* ウィジェットは、2つのウィジェットを1つの水平方向の行に配置するパネルを表し、ユーザーは2つのウィジェットのそれぞれに専用の幅の割合をインタラクティブに変更できます。 Horizo​​ntalSplitPanelに含まれるウィジェットは、必要なときにスクロールバーで自動的に装飾されます。

クラス宣言

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

@Deprecated
public final class HorizontalSplitPanel
   extends Panel

CSSスタイルルール

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

.gwt-HorizontalSplitPanel { }

.gwt-HorizontalSplitPanel hsplitter { }

クラスコンストラクター

Sr.No. Constructor & Description
1

HorizontalSplitPanel()

廃止予定です。

2

HorizontalSplitPanel(HorizontalSplitPanel.Resources resources)

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

3

HorizontalSplitPanel(HorizontalSplitPanel (HorizontalSplitPanelImages images))

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

クラスメソッド

Sr.No. Function name & Description
1

void add(Widget w)

廃止予定です。 Horizo​​ntalSplitPanelのペインにウィジェットを追加します。

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)

廃止予定です。 含まれているウィジェットの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 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)

廃止予定です。 含まれるウィジェットの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

Horizo​​ntalSplitPanelウィジェットの例

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

Horizo​​ntalSplitPanelウィジェットの使用法を示す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.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);
   }
}

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

GWT Horizo​​ntalSplitPanelウィジェット

「https://www.finddevguides.com/index.php?title=Gwt-horizontalsplitpanel-widget&oldid=14877」から取得
Powered by MediaWiki