GWT - Gestione degli eventi

GWT fornisce un modello di gestore eventi simile ai framework Java AWT o SWING User Interface.

  • Un'interfaccia listener definisce uno o più metodi che il widget chiama per annunciare un evento. GWT fornisce un elenco di interfacce corrispondenti a vari eventi possibili.

  • Una classe che desidera ricevere eventi di un tipo particolare implementa l'interfaccia del gestore associata e quindi passa un riferimento a se stessa al widget per iscriversi a una serie di eventi.

Ad esempio, il file Button la classe pubblica click eventsquindi dovrai scrivere una classe per implementare ClickHandler da gestireclick evento.

Interfacce del gestore di eventi

Tutti i gestori di eventi GWT sono stati estesi dall'interfaccia EventHandler e ogni gestore ha un solo metodo con un singolo argomento. Questo argomento è sempre un oggetto del tipo di evento associato. Ognieventobject dispone di numerosi metodi per manipolare l'oggetto evento passato. Ad esempio per l'evento click dovrai scrivere il tuo gestore come segue:

/**
 * 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!");
   }
}

Ora qualsiasi classe che desideri ricevere eventi di clic chiamerà addClickHandler() per registrare un gestore di eventi come segue:

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

Ogni widget che supporta un tipo di evento avrà un metodo nella forma HandlerRegistration addFooGestore (FooEvento) dove Foo è l'evento reale come Click, Error, KeyPress ecc.

Di seguito è riportato l'elenco dei gestori di eventi GWT importanti, degli eventi associati e dei metodi di registrazione dei gestori:

Sr.No. Interfaccia evento Metodo e descrizione dell'evento
1 Prima del gestore della selezione <I>

void on Before Selection (Before Selection Event<I> event);

Chiamato quando BeforeSelectionEvent viene attivato.
2 BlurHandler

void on Blur(Blur Event event);

Chiamato quando viene attivato Blur Event.
3 ChangeHandler

void on Change(ChangeEvent event);

Chiamato quando viene generato un evento di modifica.
4 ClickHandler

void on Click(ClickEvent event);

Chiamato quando viene attivato un evento clic nativo.
5 CloseHandler <T>

void on Close(CloseEvent<T> event);

Chiamato quando viene attivato CloseEvent.
6 Gestore del menu contestuale

void on Context Menu(Context Menu Event event);

Chiamato quando viene attivato un evento del menu contestuale nativo.
7 Gestore doppio clic

void on Double Click(Double Click Event event);

Chiamato quando viene generato un evento di doppio clic.
8 Gestore degli errori

void on Error(Error Event event);

Chiamato quando viene generato un evento di errore.
9 Gestore di messa a fuoco

void on Focus(Focus Event event);

Chiamato quando viene attivato l'evento focus.
10 Pannello modulo Invia gestore completo

void on Submit Complete(Form Panel.Submit Complete Event event);

Generato quando un modulo è stato inviato con successo.
11 FormPanel.SubmitHandler

void on Submit(Form Panel.Submit Event event);

Licenziato quando viene inviato il modulo.
12 Key Down Handler

void on Key Down(Key Down Event event);

Chiamato quando KeyDownEvent viene attivato.
13 KeyPressHandler

void on KeyPress(KeyPressEvent event);

Chiamato quando KeyPressEvent viene attivato.
14 KeyUpHandler

void on KeyUp(KeyUpEvent event);

Chiamato quando KeyUpEvent viene attivato.
15 LoadHandler

void on Load(LoadEvent event);

Chiamato quando LoadEvent viene attivato.
16 MouseDownHandler

void on MouseDown(MouseDownEvent event);

Chiamato quando viene attivato MouseDown.
17 MouseMoveHandler

void on MouseMove(MouseMoveEvent event);

Chiamato quando MouseMoveEvent viene attivato.
18 MouseOutHandler

void on MouseOut(MouseOutEvent event);

Chiamato quando MouseOutEvent viene attivato.
19 MouseOverHandler

void on MouseOver(MouseOverEvent event);

Chiamato quando MouseOverEvent viene attivato.
20 MouseUpHandler

void on MouseUp(MouseUpEvent event);

Chiamato quando MouseUpEvent viene attivato.
21 MouseWheelHandler

void on MouseWheel(MouseWheelEvent event);

Chiamato quando MouseWheelEvent viene attivato.
22 ResizeHandler

void on Resize(ResizeEvent event);

Attivato quando il widget viene ridimensionato.
23 ScrollHandler

void on Scroll(ScrollEvent event);

Chiamato quando ScrollEvent viene attivato.
24 SelectionHandler <I>

void on Selection(SelectionEvent<I> event);

Chiamato quando SelectionEvent viene attivato.
25 ValueChangeHandler <I>

void on ValueChange(ValueChangeEvent<I> event);

Chiamato quando ValueChangeEvent viene attivato.
26 Window.ClosingHandler

void on WindowClosing(Window.ClosingEvent event);

Attivato appena prima che la finestra del browser si chiuda o acceda a un sito diverso.
27 Window.ScrollHandler

void on WindowScroll(Window.ScrollEvent event);

Attivato quando si scorre la finestra del browser.

Metodi evento

Come accennato in precedenza, ogni gestore ha un singolo metodo con un singolo argomento che contiene l'oggetto evento, ad esempio void onClick (evento ClickEvent) o void onKeyDown (evento KeyDownEvent) . Gli oggetti evento come ClickEvent e KeyDownEvent hanno pochi metodi comuni elencati di seguito:

Sr.No. Metodo e descrizione
1

protected void dispatch(ClickHandler handler) Questo metodo dovrebbe essere chiamato solo da HandlerManager
2

DomEvent.Type <FooHandler> getAssociatedType() Questo metodo restituisce il tipo utilizzato per la registrazione Foo evento.
3

static DomEvent.Type<FooHandler> getType() Questo metodo ottiene il tipo di evento associato a Foo eventi.
4

public java.lang.Object getSource() Questo metodo restituisce l'origine che ha generato l'ultima volta questo evento.
5

protected final boolean isLive() Questo metodo restituisce se l'evento è in diretta.
6

protected void kill() Questo metodo uccide l'evento

Esempio

Questo esempio ti guiderà attraverso semplici passaggi per mostrare l'utilizzo di un file Click Evento e KeyDownGestione degli eventi in GWT. Segui i seguenti passaggi per aggiornare l'applicazione GWT che abbiamo creato in GWT - Capitolo Crea applicazione -

Passo Descrizione
1 Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint come spiegato nel capitolo GWT - Crea applicazione .
2 Modifica HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java come spiegato di seguito. Mantieni il resto dei file invariato.
3 Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata.

Di seguito è riportato il contenuto del descrittore del modulo modificato 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>

Di seguito è riportato il contenuto del file del foglio di stile modificato 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;
}

Di seguito è riportato il contenuto del file host HTML modificato 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>

Cerchiamo di avere il seguente contenuto del file Java src/com.tutorialspoint/HelloWorld.java che dimostrerà l'uso della gestione degli eventi in 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 volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità sviluppo come abbiamo fatto nel capitolo GWT - Crea applicazione . Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato: