Gwt-dialogbox-widget

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

GWT-DialogBoxウィジェット

前書き

*DialogBox* ウィジェットは、上部にキャプション領域があり、ユーザーがドラッグできるポップアップのフォームを表します。 PopupPanelとは異なり、PopupPanel.setWidth（String）およびPopupPanel.setHeight（String）を呼び出すと、ウィジェットがまだ追加されていない場合でも、ダイアログボックス自体の幅と高さが設定されます。

クラス宣言

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

public class DialogBox
   extends DecoratedPopupPanel
      implements HasHTML, HasSafeHtml, MouseListener

クラスコンストラクター

Sr.No. Constructor & Description
1

DialogBox()

空のダイアログボックスを作成します。

2

DialogBox(boolean autoHide)

  • auto-hide* プロパティを指定して、空のダイアログボックスを作成します。
3

DialogBox(boolean autoHide, boolean modal)

  • auto-hide* および *modal* プロパティを指定して、空のダイアログボックスを作成します。

クラスメソッド

Sr.No. Function name & Description
1

protected void beginDragging(MouseDownEvent event)

キャプション領域でマウスダウンで呼び出され、イベントキャプチャをオンにしてドラッグループを開始します。

2

protected void continueDragging(MouseMoveEvent event)

キャプション領域でのマウスの移動時に呼び出され、beginDragging（com.google.gwt.event .dom.client.MouseDownEvent）によって開始された場合はドラッグを続けます。

3

protected void doAttachChildren()

ウィジェットに論理ウィジェット階層にない1つ以上の子ウィジェットが含まれる場合（子はDOMレベルでのみ物理的に接続されます）、このメソッドをオーバーライドし、その子ウィジェットごとにWidget.on Attach（）を呼び出す必要があります。

4

protected void doDetachChildren()

ウィジェットに論理ウィジェット階層にない子ウィジェットが1つ以上含まれる場合（子はDOMレベルでのみ物理的に接続されます）、このメソッドをオーバーライドし、その子ウィジェットごとにWidget.onDetach（）を呼び出す必要があります。

5

protected void endDragging(MouseUpEvent event)

キャプション領域でマウスを呼び出すと、イベントキャプチャを終了してドラッグを終了します。

6

DialogBox.Caption getCaption()

ダイアログのキャプションへのアクセスを提供します。

7

java.lang.String getHTML()

このオブジェクトのコンテンツをHTMLとして取得します。

8

java.lang.String getText()

このオブジェクトのテキストを取得します。

9

void hide()

ポップアップを非表示にして、ページから切り離します。

10

void onBrowserEvent(Event event)

ブラウザイベントが受信されるたびに発生します。

11

protected void onEnsureDebugId(java.lang.String baseID)

影響を受ける要素：-caption = DialogBoxの上部のテキスト。 -content =コンテンツの周りのコンテナ。

12

void on Mouse Down(Widget sender, int x, int y)

廃止予定です。 ドラッグ開始（com.google.gwt.event.dom。 client.Mouse Down Event）および代わりにCaption（）を取得

13

void on Mouse Enter(Widget sender)

廃止予定です。 Has Mouse Over Handlersを使用します。 マウスオーバーハンドラー（com.google.gwt.event.dom。 代わりにclient.Mouse Over Handler）

14

void onMouseLeave(Widget sender)

廃止予定です。 Has Mouse Out Handlers.addマウス出力ハンドラー（com.google.gwt.event.dom。 client.Mouse Out Handler）代わりに

15

void onMouseMove(Widget sender, int x, int y)

廃止予定です。 continueDragging（com.google.gwt.event.domを使用します。 代わりにclient.MouseMoveEvent）およびgetCaption（）

16

void onMouseUp(Widget sender, int x, int y)

廃止予定です。 endDragging（com.google.gwt.event.domを使用します。 代わりにclient.MouseUpEvent）およびgetCaption（）

17 *protected void onPreviewNativeEvent(Event.NativePreviewEvent event) *
18
  • void setHTML(SafeHtml html)*

キャプション内のHTML文字列を設定します。

19

void setHTML(java.lang.String html)

キャプション内のHTML文字列を設定します。

20

void setText(java.lang.String text)

キャプション内のテキストを設定します。

21

void show()

ポップアップを表示し、ページに添付します。

継承されるメソッド

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

  • 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.SimplePanel
  • com.google.gwt.user.client.ui.PopupPanel
  • com.google.gwt.user.client.ui.DecoratedPopupPanel
  • java.lang.Object

DialogBoxウィジェットの例

この例では、GWTでのDialogBoxウィジェットの使用法を示す簡単な手順を紹介します。 次の手順に従って、_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;
}

.gwt-DialogBox .Caption {
   background: #e3e8f3 url(images/hborder.png) repeat-x 0px -2003px;
   padding: 4px 4px 4px 8px;
   cursor: default;
   border-bottom: 1px solid #bbbbbb;
   border-top: 5px solid #d0e4f6;
}

.gwt-DialogBox .dialogContent {
}

.gwt-DialogBox .dialogMiddleCenter {
   padding: 3px;
   background: white;
}

.gwt-DialogBox .dialogBottomCenter {
   background: url(images/hborder.png) repeat-x 0px -4px;
   -background: url(images/hborder_ie6.png) repeat-x 0px -4px;
}

.gwt-DialogBox .dialogMiddleLeft {
   background: url(images/vborder.png) repeat-y;
}

.gwt-DialogBox .dialogMiddleRight {
   background: url(images/vborder.png) repeat-y -4px 0px;
   -background: url(images/vborder_ie6.png) repeat-y -4px 0px;
}

.gwt-DialogBox .dialogTopLeftInner {
   width: 5px;
   zoom: 1;
}

.gwt-DialogBox .dialogTopRightInner {
   width: 8px;
   zoom: 1;
}

.gwt-DialogBox .dialogBottomLeftInner {
   width: 5px;
   height: 8px;
   zoom: 1;
}

.gwt-DialogBox .dialogBottomRightInner {
   width: 5px;
   height: 8px;
   zoom: 1;
}

.gwt-DialogBox .dialogTopLeft {
   background: url(images/corner.png) no-repeat -13px 0px;
   -background: url(images/corner_ie6.png) no-repeat -13px 0px;
}

.gwt-DialogBox .dialogTopRight {
   background: url(images/corner.png) no-repeat -18px 0px;
   -background: url(images/corner_ie6.png) no-repeat -18px 0px;
}

.gwt-DialogBox .dialogBottomLeft {
   background: url(images/corner.png) no-repeat 0px -15px;
   -background: url(images/corner_ie6.png) no-repeat 0px -15px;
}

.gwt-DialogBox .dialogBottomRight {
   background: url(images/corner.png) no-repeat -5px -15px;
   -background: url(images/corner_ie6.png) no-repeat -5px -15px;
}

html>body .gwt-DialogBox {
}

* html .gwt-DialogBox .dialogTopLeftInner {
   width: 5px;
   overflow: hidden;
}

* html .gwt-DialogBox .dialogTopRightInner {
   width: 8px;
   overflow: hidden;
}

* html .gwt-DialogBox .dialogBottomLeftInner {
   width: 5px;
   height: 8px;
   overflow: hidden;
}

* html .gwt-DialogBox .dialogBottomRightInner {
   width: 8px;
   height: 8px;
   overflow: hidden;
}

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

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

package com.finddevguides.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {

   private static class MyDialog extends DialogBox {

      public MyDialog() {
        //Set the dialog box's caption.
         setText("My First Dialog");

        //Enable animation.
         setAnimationEnabled(true);

        //Enable glass background.
         setGlassEnabled(true);

        //DialogBox is a SimplePanel, so you have to set its widget
        //property to whatever you want its contents to be.
         Button ok = new Button("OK");
         ok.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
               MyDialog.this.hide();
            }
         });

         Label label = new Label("This is a simple dialog box.");

         VerticalPanel panel = new VerticalPanel();
         panel.setHeight("100");
         panel.setWidth("300");
         panel.setSpacing(10);
         panel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
         panel.add(label);
         panel.add(ok);

         setWidget(panel);
      }
   }

   public void onModuleLoad() {
      Button b = new Button("Click me");
      b.addClickHandler(new ClickHandler() {
         @Override
         public void onClick(ClickEvent event) {
           //Instantiate the dialog box and show it.
            MyDialog myDialog = new MyDialog();

            int left = Window.getClientWidth()/2;
            int top = Window.getClientHeight()/2;
            myDialog.setPopupPosition(left, top);
            myDialog.show();
         }
      });

      RootPanel.get().add(b);
   }
}

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

GWT DialogBoxウィジェット

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