GWT - Manejo de eventos

GWT proporciona un modelo de controlador de eventos similar a los marcos de interfaz de usuario de Java AWT o SWING.

Una interfaz de escucha define uno o más métodos que el widget llama para anunciar un evento. GWT proporciona una lista de interfaces correspondientes a varios eventos posibles.
Una clase que desea recibir eventos de un tipo particular implementa la interfaz del controlador asociado y luego pasa una referencia a sí misma al widget para suscribirse a un conjunto de eventos.

Por ejemplo, el Button la clase publica click eventspor lo que tendrá que escribir una clase para implementar ClickHandler para manejarclick evento.

Interfaces del controlador de eventos

Todos los controladores de eventos de GWT se han ampliado desde la interfaz EventHandler y cada controlador tiene un único método con un único argumento. Este argumento es siempre un objeto de tipo de evento asociado. Cadaeventobject tiene varios métodos para manipular el objeto de evento pasado. Por ejemplo, para el evento de clic, tendrá que escribir su controlador de la siguiente manera:

/**
 * create a custom click handler which will call 
 * onClick method when button is clicked.
 */
public class MyClickHandler implements ClickHandler {
   @Override
   public void onClick(ClickEvent event) {
      Window.alert("Hello World!");
   }
}

Ahora cualquier clase que desee recibir eventos de clic llamará addClickHandler() para registrar un controlador de eventos de la siguiente manera:

/**
 * create button and attach click handler
 */
Button button = new Button("Click Me!");
button.addClickHandler(new MyClickHandler());

Cada widget que admita un tipo de evento tendrá un método de la forma HandlerRegistration addFooManipulador(FooEvento) donde Foo es el evento real como Click, Error, KeyPress, etc.

A continuación se muestra la lista de controladores de eventos GWT importantes y eventos asociados y métodos de registro de controladores:

No Señor.	Interfaz de eventos	Método y descripción del evento
1	Antes del controlador de selección <I>	void on Before Selection (Before Selection Event<I> event); Se llama cuando se activa BeforeSelectionEvent.
2	BlurHandler	void on Blur(Blur Event event); Se llama cuando se activa el evento Blur.
3	ChangeHandler	void on Change(ChangeEvent event); Se llama cuando se activa un evento de cambio.
4	ClickHandler	void on Click(ClickEvent event); Se llama cuando se activa un evento de clic nativo.
5	CloseHandler <T>	void on Close(CloseEvent<T> event); Se llama cuando se activa CloseEvent.
6	Controlador de menú contextual	void on Context Menu(Context Menu Event event); Se llama cuando se activa un evento de menú contextual nativo.
7	Controlador de doble clic	void on Double Click(Double Click Event event); Se llama cuando se activa un evento de doble clic.
8	Manejador de errores	void on Error(Error Event event); Se llama cuando se activa un evento de error.
9	Controlador de enfoque	void on Focus(Focus Event event); Llamado cuando se dispara Focus Event.
10	Panel de formulario Enviar controlador completo	void on Submit Complete(Form Panel.Submit Complete Event event); Se activa cuando un formulario se ha enviado correctamente.
11	FormPanel.SubmitHandler	void on Submit(Form Panel.Submit Event event); Despedido cuando se envía el formulario.
12	Controlador de llave abajo	void on Key Down(Key Down Event event); Se llama cuando se activa KeyDownEvent.
13	KeyPressHandler	void on KeyPress(KeyPressEvent event); Se llama cuando se activa KeyPressEvent.
14	KeyUpHandler	void on KeyUp(KeyUpEvent event); Se llama cuando se activa KeyUpEvent.
15	LoadHandler	void on Load(LoadEvent event); Se llama cuando se activa LoadEvent.
dieciséis	MouseDownHandler	void on MouseDown(MouseDownEvent event); Se llama cuando se activa MouseDown.
17	MouseMoveHandler	void on MouseMove(MouseMoveEvent event); Se llama cuando se activa MouseMoveEvent.
18	MouseOutHandler	void on MouseOut(MouseOutEvent event); Se llama cuando se activa MouseOutEvent.
19	MouseOverHandler	void on MouseOver(MouseOverEvent event); Se llama cuando se activa MouseOverEvent.
20	MouseUpHandler	void on MouseUp(MouseUpEvent event); Se llama cuando se activa MouseUpEvent.
21	MouseWheelHandler	void on MouseWheel(MouseWheelEvent event); Se llama cuando se activa MouseWheelEvent.
22	ResizeHandler	void on Resize(ResizeEvent event); Se activa cuando se cambia el tamaño del widget.
23	ScrollHandler	void on Scroll(ScrollEvent event); Se llama cuando se activa ScrollEvent.
24	SelectionHandler <I>	void on Selection(SelectionEvent<I> event); Se llama cuando se activa SelectionEvent.
25	ValueChangeHandler <I>	void on ValueChange(ValueChangeEvent<I> event); Se llama cuando se activa ValueChangeEvent.
26	Window.CierreHandler	void on WindowClosing(Window.ClosingEvent event); Se activa justo antes de que la ventana del navegador se cierre o navegue a un sitio diferente.
27	Window.ScrollHandler	void on WindowScroll(Window.ScrollEvent event); Se activa cuando se desplaza por la ventana del navegador.

Métodos de eventos

Como se mencionó anteriormente, cada controlador tiene un único método con un único argumento que contiene el objeto de evento, por ejemplo, void onClick (evento ClickEvent) o void onKeyDown (evento KeyDownEvent) . Los objetos de evento como ClickEvent y KeyDownEvent tienen algunos métodos comunes que se enumeran a continuación:

No Señor.	Método y descripción
1	protected void dispatch(ClickHandler handler) Este método solo debe ser llamado por HandlerManager
2	DomEvent.Type <FooHandler> getAssociatedType() Este método devuelve el tipo utilizado para registrarse Foo evento.
3	static DomEvent.Type<FooHandler> getType() Este método obtiene el tipo de evento asociado con Foo eventos.
4	public java.lang.Object getSource() Este método devuelve la fuente que disparó este evento por última vez.
5	protected final boolean isLive() Este método devuelve si el evento está en vivo.
6	protected void kill() Este método mata el evento

Ejemplo

Este ejemplo le llevará a través de sencillos pasos para mostrar el uso de un Click Evento y KeyDownManejo de eventos 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>Event Handling Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java que demostrará el uso de Event Handling en GWT.

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.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyDownEvent;
import com.google.gwt.event.dom.client.KeyDownHandler;
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.HasHorizontalAlignment;
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 textbox and attach key down handler
       */
      TextBox textBox = new TextBox(); 
      textBox.addKeyDownHandler(new MyKeyDownHandler());

      /*
       * create button and attach click handler
       */
      Button button = new Button("Click Me!");
      button.addClickHandler(new MyClickHandler());

      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);
      panel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
      panel.setSize("300", "100");
      panel.add(textBox);
      panel.add(button);

      DecoratorPanel decoratorPanel = new DecoratorPanel();
      decoratorPanel.add(panel);
      RootPanel.get("gwtContainer").add(decoratorPanel);
   }

   /** 
    * create a custom click handler which will call 
    * onClick method when button is clicked.
    */
   private class MyClickHandler implements ClickHandler {
      @Override
      public void onClick(ClickEvent event) {
         Window.alert("Hello World!");
      }
   }

   /**
    * create a custom key down handler which will call 
    * onKeyDown method when a key is down in textbox.
    */
   private class MyKeyDownHandler implements KeyDownHandler {
      @Override
      public void onKeyDown(KeyDownEvent event) {
         if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
            Window.alert(((TextBox)event.getSource()).getValue());
         }
      }
   }
}

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 Next page ↱