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

类构造函数

类方法

继承的方法

该类继承了以下类的方法 −

• 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 Widget 示例

此示例将带您通过简单的步骤展示如何在 GWT 中使用 FormPanel Widget。按照以下步骤更新我们在 GWT - 创建应用程序 一章中创建的 GWT 应用程序 −

以下是修改后的模块描述符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() {
        // 创建一个 FormPanel 并将其指向服务。
        final FormPanel form = new FormPanel();
        form.setAction("/myFormHandler");
        
        // 因为我们要添加一个 FileUpload 小部件，
        // 我们需要将表单设置为使用 POST 方法，
        // 和多部分 MIME 编码。
        form.setEncoding(FormPanel.ENCODING_MULTIPART);
        form.setMethod(FormPanel.METHOD_POST);
        
        // 创建一个面板来容纳所有表单小部件。
        VerticalPanel panel = new VerticalPanel();
        panel.setSpacing(10);
        form.setWidget(panel);
        
        // 创建一个 TextBox，为其命名以便提交。
        final TextBox tb = new TextBox();
        tb.setWidth("220");
        
        tb.setName("textBoxFormElement");
        panel.add(tb);
        
        // 创建一个 ListBox，为其指定名称和
        // 与其选项关联的一些值。
        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);
        
        // 创建一个 FileUpload 小部件。
        FileUpload upload = new FileUpload();
        upload.setName("uploadFormElement");
        panel.add(upload);
        
        // 添加"提交"按钮。
        panel.add(new Button("Submit", new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                form.submit();
            }
        }));
        
        // 向表单添加事件处理程序。
        form.addSubmitHandler(new FormPanel.SubmitHandler() {
            @Override
            public void onSubmit(SubmitEvent event) {
                // 此事件在表单提交前触发。
                // 我们可以借此机会执行验证。
                if (tb.getText().length() == 0) {
                    Window.alert("文本框不能为空");
                    event.cancel();
                }
            }
        });
        
        form.addSubmitCompleteHandler(new FormPanel.SubmitCompleteHandler() {
            @Override
            public void onSubmitComplete(SubmitCompleteEvent event) {
                // 当表单提交成功完成后，
                // 此事件被触发。假设服务返回
                // text/html 类型的响应，我们可以在这里获得结果。
                Window.alert(event.getResults());
            }
        });

      DecoratorPanel decoratorPanel = new DecoratorPanel();
      decoratorPanel.add(form);
      // 将小部件添加到根面板。
      RootPanel.get().add(decoratorPanel);
   }

}

完成所有更改后，让我们像在 GWT - 创建应用程序 一章中一样，在开发模式下编译并运行应用程序。如果您的应用程序一切正常，这将产生以下结果 −

gwt_layout_panels.html