GWT - 對話方塊元件

上一頁
下一頁

引言

DialogBox 元件表示一種彈出視窗，頂部有一個標題區域，使用者可以拖動它。與 PopupPanel 不同的是，對 PopupPanel.setWidth(String) 和 PopupPanel.setHeight(String) 的呼叫將設定對話方塊本身的寬度和高度，即使尚未新增小部件也是如此。

類宣告

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

public class DialogBox
   extends DecoratedPopupPanel
      implements HasHTML, HasSafeHtml, MouseListener

類建構函式

序號 建構函式 & 描述
1

DialogBox()

建立一個空的對話方塊。
2

DialogBox(boolean autoHide)

建立一個空的對話方塊，並指定其 自動隱藏 屬性。
3

DialogBox(boolean autoHide, boolean modal)

建立一個空的對話方塊，並指定其 自動隱藏 和 模態 屬性。

類方法

序號 函式名稱 & 描述
1

protected void beginDragging(MouseDownEvent event)

在標題區域滑鼠按下時呼叫，透過啟用事件捕獲來開始拖動迴圈。
2

protected void continueDragging(MouseMoveEvent event)

在標題區域滑鼠移動時呼叫，如果由 beginDragging(com.google.gwt.event .dom.client.MouseDownEvent) 啟動，則繼續拖動。
3

protected void doAttachChildren()

如果一個小部件包含一個或多個不在邏輯小部件層次結構中的子小部件（子小部件僅在 DOM 級別物理連線），則必須重寫此方法併為其每個子小部件呼叫 Widget.onAttach()。
4

protected void doDetachChildren()

如果一個小部件包含一個或多個不在邏輯小部件層次結構中的子小部件（子小部件僅在 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 onMouseDown(Widget sender, int x, int y)

已棄用。請改用 beginDragging(com.google.gwt.event.dom.client.MouseDownEvent) 和 getCaption()。
13

void onMouseEnter(Widget sender)

已棄用。請改用 HasMouseOverHandlers.addMouseOverHandler(com.google.gwt.event.dom.client.MouseOverHandler)。
14

void onMouseLeave(Widget sender)

已棄用。請改用 HasMouseOutHandlers.addMouseOutHandler(com.google.gwt.event.dom.client.MouseOutHandler)。
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 應用：

步驟 描述
1 根據 GWT - 建立應用 章中的說明，建立一個名為 HelloWorld 的專案，該專案位於 com.tutorialspoint 包下。
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;
}

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

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

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

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

GWT DialogBox Widget
gwt_layout_panels.htm
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.