GWT - FormPanel 元件

上一頁
下一頁

介紹

FormPanel 元件表示一個面板，它將其內容包裝在 HTML <FORM> 元素中。

類宣告

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

public class FormPanel
   extends SimplePanel
      implements FiresFormEvents, 
         com.google.gwt.user.client.ui.impl.FormPanelImplHost

類建構函式

序號 建構函式 & 描述
1

FormPanel()

建立一個新的 FormPanel。
2

protected FormPanel(Element element)

子類可以使用此建構函式顯式使用現有元素。
3

protected FormPanel(Element element, boolean createIFrame)

子類可以使用此建構函式顯式使用現有元素。
4

FormPanel(NamedFrame frameTarget)

建立一個目標為 NamedFrame 的 FormPanel。
5

FormPanel(java.lang.String target)

建立一個新的 FormPanel。

類方法

序號 函式名稱 & 描述
1

void addFormHandler(FormHandler handler)

已棄用。請改用 addSubmitCompleteHandler(com.google.gwt.user.client.ui.FormPanel.SubmitCompleteHandler) 和 addSubmitHandler(com.google.gwt.user.client.ui.FormPanel.SubmitHandler)。
2

HandlerRegistration addSubmitCompleteHandler(FormPanel.SubmitCompleteHandler handler)

新增 FormPanel.SubmitComplete 事件處理程式。
3

HandlerRegistration addSubmitHandler(FormPanel.SubmitHandler handler)

新增 FormPanel.Submit 事件處理程式。
4

java.lang.String getAction()

獲取與此表單關聯的“action”。
5

java.lang.String getEncoding()

獲取用於提交此表單的編碼。
6

java.lang.String getMethod()

獲取用於提交此表單的 HTTP 方法。
7

java.lang.String getTarget()

獲取表單的“target”。
8

protected void onAttach()

當小部件附加到瀏覽器的文件時，將呼叫此方法。
9

protected void onDetach()

當小部件從瀏覽器的文件中分離時，將呼叫此方法。
10

boolean onFormSubmit()

提交表單時觸發。
11

void onFrameLoad()
12

void removeFormHandler(FormHandler handler)

已棄用。請改用 add*Handler 方法返回的物件上的 HandlerRegistration.removeHandler() 方法。
13

void reset()

重置表單，清除所有欄位。
14

void setAction(java.lang.String url)

設定與此表單關聯的“action”。
15

void setEncoding(java.lang.String encodingType)

設定用於提交此表單的編碼。
16

void setMethod(java.lang.String method)

設定用於提交此表單的 HTTP 方法。
17

void submit()

提交表單。
18

static FormPanel wrap(Element element)

建立一個包裝現有 <form> 元素的 FormPanel。
19

static FormPanel wrap(Element element, boolean createIFrame)

建立一個包裝現有 <form> 元素的 FormPanel。

繼承的方法

此類繼承自以下類的方法：

  • 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

  • java.lang.Object

FormPanel 元件示例

本示例將引導您完成簡單的步驟，以演示在 GWT 中使用 FormPanel 元件的方法。請按照以下步驟更新我們在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;
}

以下是修改後的 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>FormPanel Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

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

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.DecoratorPanel;
import com.google.gwt.user.client.ui.FileUpload;
import com.google.gwt.user.client.ui.FormPanel;
import com.google.gwt.user.client.ui.FormPanel.SubmitCompleteEvent;
import com.google.gwt.user.client.ui.FormPanel.SubmitEvent;
import com.google.gwt.user.client.ui.ListBox;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {

   public void onModuleLoad() {
      // Create a FormPanel and point it at a service.
      final FormPanel form = new FormPanel();
      form.setAction("/myFormHandler");

      // Because we're going to add a FileUpload widget, 
      // we'll need to set the form to use the POST method, 
      // and multipart MIME encoding.
      form.setEncoding(FormPanel.ENCODING_MULTIPART);
      form.setMethod(FormPanel.METHOD_POST);

      // Create a panel to hold all of the form widgets.
      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);
      form.setWidget(panel);

      // Create a TextBox, giving it a name so that it will be submitted.
      final TextBox tb = new TextBox();
      tb.setWidth("220");

      tb.setName("textBoxFormElement");
      panel.add(tb);

      // Create a ListBox, giving it a name and 
      // some values to be associated with its options.
      ListBox lb = new ListBox();
      lb.setName("listBoxFormElement");
      lb.addItem("item1", "item1");
      lb.addItem("item2", "item2");
      lb.addItem("item3", "item3");
      lb.setWidth("220");
      panel.add(lb);

      // Create a FileUpload widget.
      FileUpload upload = new FileUpload();
      upload.setName("uploadFormElement");
      panel.add(upload);

      // Add a 'submit' button.
      panel.add(new Button("Submit", new ClickHandler() {
         @Override
         public void onClick(ClickEvent event) {
            form.submit();					
         }
      }));

      // Add an event handler to the form.
      form.addSubmitHandler(new FormPanel.SubmitHandler() {
         @Override
         public void onSubmit(SubmitEvent event) {
            // This event is fired just before the form is submitted. 
            // We can take this opportunity to perform validation.
            if (tb.getText().length() == 0) {
               Window.alert("The text box must not be empty");
               event.cancel();
            }					
         }
      });

      form.addSubmitCompleteHandler(new FormPanel.SubmitCompleteHandler() {
         @Override
         public void onSubmitComplete(SubmitCompleteEvent event) {
            // When the form submission is successfully completed,
            // this event is fired. Assuming the service returned 
            // a response of type text/html, we can get the result
            // here.
            Window.alert(event.getResults());					
         }
      });

      DecoratorPanel decoratorPanel = new DecoratorPanel();
      decoratorPanel.add(form);
      // Add the widgets to the root panel.
      RootPanel.get().add(decoratorPanel);
   }

}

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

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