GWT - Widget de FormPanel

Introducción

los FormPanel widget representa un panel que envuelve su contenido en un elemento HTML <FORM>.

Declaración de clase

A continuación se muestra la declaración de com.google.gwt.user.client.ui.FormPanel clase -

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

Constructores de clases

No Señor.	Constructor y descripción
1	FormPanel() Crea un nuevo FormPanel.
2	protected FormPanel(Element element) Este constructor puede ser usado por subclases para usar explícitamente un elemento existente.
3	protected FormPanel(Element element, boolean createIFrame) Este constructor puede ser usado por subclases para usar explícitamente un elemento existente.
4	FormPanel(NamedFrame frameTarget) Crea un FormPanel que se dirige a un NamedFrame.
5	FormPanel(java.lang.String target) Crea un nuevo FormPanel.

Métodos de clase

No Señor.	Nombre y descripción de la función
1	void add Form Handler (FormHandler handler) Obsoleto. Use add Submit Complete Handler (com.google.gwt.user.client.ui.Form Panel.Submit Complete Handler) y agregue Submit Handler (com.google.gwt.user.client.ui.Form Panel.Submit Handler) en su lugar
2	Handler Registration addSubmit Complete Handler (FormPanel.SubmitCompleteHandler handler) Agrega un controlador de evento completo FormPanel.Submit.
3	HandlerRegistration addSubmitHandler(FormPanel.SubmitHandler handler) Agrega un controlador FormPanel.SubmitEvent.
4	java.lang.String getAction() Obtiene la 'acción' asociada con este formulario.
5	java.lang.String getEncoding() Obtiene la codificación utilizada para enviar este formulario.
6	java.lang.String getMethod() Obtiene el método HTTP utilizado para enviar este formulario.
7	java.lang.String getTarget() Obtiene el 'destino' del formulario.
8	protected void onAttach() Este método se llama cuando se adjunta un widget al documento del navegador.
9	protected void onDetach() Este método se llama cuando un widget se separa del documento del navegador.
10	boolean onFormSubmit() Se activa cuando se envía un formulario.
11	void onFrameLoad()
12	void removeFormHandler(FormHandler handler) Obsoleto. Use el método HandlerRegistration.removeHandler () en el objeto devuelto por y agregue el método * Handler en su lugar
13	void reset() Restablece el formulario, borrando todos los campos.
14	void setAction(java.lang.String url) Establece la 'acción' asociada con este formulario.
15	void setEncoding(java.lang.String encodingType) Establece la codificación utilizada para enviar este formulario.
dieciséis	void setMethod(java.lang.String method) Establece el método HTTP utilizado para enviar este formulario.
17	void submit() Envía el formulario.
18	static FormPanel wrap(Element element) Crea un FormPanel que envuelve un elemento <form> existente.
19	static FormPanel wrap(Element element, boolean createIFrame) Crea un FormPanel que envuelve un elemento <form> existente.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

Ejemplo de widget de FormPanel

Este ejemplo lo llevará a través de sencillos pasos para mostrar el uso de un widget FormPanel en GWT. Siga los siguientes pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo Crear aplicación -

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación .
2	Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado 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>

A continuación se muestra el contenido del archivo de hoja de estilo modificado 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;
}

A continuación se muestra el contenido del archivo de host HTML modificado 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>

Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java que demostrará el uso del widget 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);
   }

}

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo de desarrollo como hicimos en el capítulo GWT - Crear aplicación . Si todo está bien con su aplicación, esto producirá el siguiente resultado:

↰ Previous page