Gwt-dockpanel-widget

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

GWT-DockPanelウィジェット

前書き

*DockPanel* ウィジェットは、子ウィジェットを外側の端に「ドッキング」して配置し、最後のウィジェットが中央の残りのスペースを占有できるようにするパネルを表します。

クラス宣言

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

@Deprecated
public class DockPanel
   extends CellPanel
      implements HasAlignment

クラスコンストラクター

Sr.No. Constructor & Description
1

DockPanel()

DockPanelのコンストラクター。

クラスメソッド

Sr.No. Function name & Description
1

void add(Widget widget, DockPanel. DockLayoutConstant direction)

廃止予定です。 ドックの指定された端にウィジェットを追加します。

2

HasHorizontalAlignment. HorizontalAlignmentConstant getHorizontalAlignment()

廃止予定です。 水平方向の配置を取得します。

3

HasVerticalAlignment. VerticalAlignmentConstant getVerticalAlignment()

廃止予定です。 垂直方向の配置を取得します。

4

DockPanel. DockLayoutConstant getWidgetDirection(Widget w)

廃止予定です。 指定された子ウィジェットのレイアウト方向を取得します。

5

protected void onEnsureDebugId(java.lang. String baseID)

廃止予定です。 DockPanelは1つの方向に複数のセルを追加することをサポートしているため、デバッグIDの最後に整数が追加されます。

6

boolean remove(Widget w)

廃止予定です。 子ウィジェットを削除します。

7

void setCellHeight(Widget w, java.lang.String height)

廃止予定です。 パネル全体に関連する、特定のウィジェットに関連付けられたセルの高さを設定します。

8

void set Cell Horizontal Alignment(Widget w, Has Horizontal Alignment. Horizontal Alignment Constant align)

廃止予定です。 セル内の特定のウィジェットの水平方向の配置を設定します。

9

void set Cell Vertical Alignment (Widget w, HasVertical Alignment. Vertical Alignment Constant align)

廃止予定です。 セル内の特定のウィジェットの垂直方向の配置を設定します。

10

void setCellWidth(Widget w, java.lang.String width)

廃止予定です。 パネル全体に関連する、特定のウィジェットに関連付けられたセルの幅を設定します。

11

void set Horizontal Alignment (Has Horizontal Alignment. Horizontal Alignment Constant align)

廃止予定です。 このパネルに追加されたウィジェットに使用されるデフォルトの水平方向の配置を設定します。

12

void setVerticalAlignment(HasVerticalAlignment. VerticalAlignmentConstant align)

廃止予定です。 このパネルに追加されたウィジェットに使用されるデフォルトの垂直方向の配置を設定します。

継承されるメソッド

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

  • 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.ComplexPanel
  • com.google.gwt.user.client.ui.CellPanel
  • java.lang.Object

DockPanelウィジェットの例

この例では、GWTでDockPanelウィジェットの使用方法を示す簡単な手順を紹介します。 次の手順に従って、_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;
}
.dockpanel td {
   border: 1px solid #BBBBBB;
   padding: 3px;
}

以下は、変更された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>DockPanel Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

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

package com.finddevguides.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.ScrollPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {

   public void onModuleLoad() {
      DockPanel dockPanel = new DockPanel();
      dockPanel.setStyleName("dockpanel");
      dockPanel.setSpacing(4);
      dockPanel.setHorizontalAlignment(DockPanel.ALIGN_CENTER);

     //Add text all around
      dockPanel.add(new HTML("This is the first north component."),
      DockPanel.NORTH);
      dockPanel.add(new HTML("This is the first south component."),
      DockPanel.SOUTH);
      dockPanel.add(new HTML("This is the east component."),
      DockPanel.EAST);
      dockPanel.add(new HTML("This is the west component."),
      DockPanel.WEST);
      dockPanel.add(new HTML("This is the second north component."),
      DockPanel.NORTH);
      dockPanel.add(new HTML("This is the second south component"),
      DockPanel.SOUTH);

     //Add scrollable text in the center
      HTML contents = new HTML("This is a ScrollPanel contained"
         +" at the center of a DockPanel. "
         +" 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!");
      ScrollPanel scroller = new ScrollPanel(contents);
      scroller.setSize("400px", "100px");
      dockPanel.add(scroller, DockPanel.CENTER);


      VerticalPanel vPanel = new VerticalPanel();
      vPanel.add(dockPanel);

     //Add the widgets to the root panel.
      RootPanel.get().add(vPanel);
   }
}

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

GWT DockPanelウィジェット

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