GWT - Penanganan Acara

GWT menyediakan model penanganan peristiwa yang mirip dengan kerangka kerja Antarmuka Pengguna AWT atau SWING Java.

Antarmuka pendengar menentukan satu atau beberapa metode yang dipanggil widget untuk mengumumkan suatu peristiwa. GWT menyediakan daftar antarmuka yang sesuai dengan berbagai kemungkinan kejadian.
Sebuah kelas yang ingin menerima kejadian dari jenis tertentu mengimplementasikan antarmuka penangan terkait dan kemudian meneruskan referensi ke widget itu sendiri untuk berlangganan sekumpulan kejadian.

Misalnya, file Button kelas menerbitkan click eventssehingga Anda akan harus menulis kelas untuk melaksanakan ClickHandler untuk menanganiclick peristiwa.

Antarmuka Penangan Peristiwa

Semua penangan peristiwa GWT telah diperluas dari antarmuka EventHandler dan setiap penangan hanya memiliki satu metode dengan satu argumen. Argumen ini selalu merupakan objek dari tipe kejadian terkait. Setiapeventobjek memiliki sejumlah metode untuk memanipulasi objek acara yang dilewatkan. Misalnya untuk acara klik Anda harus menulis penangan Anda sebagai berikut -

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

Sekarang setiap kelas yang ingin menerima peristiwa klik akan menelepon addClickHandler() untuk mendaftarkan event handler sebagai berikut -

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

Setiap widget yang mendukung tipe event akan memiliki metode dari bentuk penambahan HandlerRegistrationFooPenangan (FooAcara) di mana Foo adalah kejadian sebenarnya seperti Klik, Kesalahan, KeyPress, dll.

Berikut adalah daftar penangan peristiwa GWT penting dan peristiwa terkait serta metode pendaftaran penangan -

Sr.No.	Antarmuka Acara	Metode & Deskripsi Acara
1	Sebelum Penangan Pemilihan <I>	void on Before Selection (Before Selection Event<I> event); Dipanggil saat BeforeSelectionEvent diaktifkan.
2	BlurHandler	void on Blur(Blur Event event); Dipanggil saat Blur Event diaktifkan.
3	ChangeHandler	void on Change(ChangeEvent event); Dipanggil saat peristiwa perubahan diaktifkan.
4	ClickHandler	void on Click(ClickEvent event); Dipanggil saat peristiwa klik asli diaktifkan.
5	CloseHandler <T>	void on Close(CloseEvent<T> event); Dipanggil saat CloseEvent diaktifkan.
6	Penangan Menu Konteks	void on Context Menu(Context Menu Event event); Dipanggil saat peristiwa menu konteks asli diaktifkan.
7	Double Click Handler	void on Double Click(Double Click Event event); Dipanggil saat Peristiwa Klik Ganda diaktifkan.
8	Penangan Kesalahan	void on Error(Error Event event); Dipanggil saat Peristiwa Kesalahan diaktifkan.
9	Penangan Fokus	void on Focus(Focus Event event); Dipanggil saat Focus Event diaktifkan.
10	Panel Formulir. Kirim Penangan Lengkap	void on Submit Complete(Form Panel.Submit Complete Event event); Diaktifkan ketika formulir telah berhasil dikirim.
11	FormPanel.SubmitHandler	void on Submit(Form Panel.Submit Event event); Dipecat saat formulir dikirimkan.
12	Penangan Key Down	void on Key Down(Key Down Event event); Dipanggil saat KeyDownEvent diaktifkan.
13	KeyPressHandler	void on KeyPress(KeyPressEvent event); Dipanggil saat KeyPressEvent diaktifkan.
14	KeyUpHandler	void on KeyUp(KeyUpEvent event); Dipanggil saat KeyUpEvent diaktifkan.
15	LoadHandler	void on Load(LoadEvent event); Dipanggil saat LoadEvent diaktifkan.
16	MouseDownHandler	void on MouseDown(MouseDownEvent event); Dipanggil saat MouseDown ditembakkan.
17	MouseMoveHandler	void on MouseMove(MouseMoveEvent event); Dipanggil saat MouseMoveEvent diaktifkan.
18	MouseOutHandler	void on MouseOut(MouseOutEvent event); Dipanggil saat MouseOutEvent diaktifkan.
19	MouseOverHandler	void on MouseOver(MouseOverEvent event); Dipanggil saat MouseOverEvent diaktifkan.
20	MouseUpHandler	void on MouseUp(MouseUpEvent event); Dipanggil saat MouseUpEvent diaktifkan.
21	MouseWheelHandler	void on MouseWheel(MouseWheelEvent event); Dipanggil saat MouseWheelEvent diaktifkan.
22	ResizeHandler	void on Resize(ResizeEvent event); Diaktifkan saat widget diubah ukurannya.
23	ScrollHandler	void on Scroll(ScrollEvent event); Dipanggil saat ScrollEvent diaktifkan.
24	SelectionHandler <I>	void on Selection(SelectionEvent<I> event); Dipanggil saat SelectionEvent diaktifkan.
25	ValueChangeHandler <I>	void on ValueChange(ValueChangeEvent<I> event); Dipanggil saat ValueChangeEvent diaktifkan.
26	Window.ClosingHandler	void on WindowClosing(Window.ClosingEvent event); Diaktifkan tepat sebelum jendela browser menutup atau menavigasi ke situs lain.
27	Window.ScrollHandler	void on WindowScroll(Window.ScrollEvent event); Diaktifkan saat jendela browser di-scroll.

Metode Acara

Seperti disebutkan sebelumnya, setiap penangan memiliki satu metode dengan satu argumen yang menampung objek peristiwa, misalnya void onClick (peristiwa ClickEvent) atau void onKeyDown (peristiwa KeyDownEvent) . Objek acara seperti ClickEvent dan KeyDownEvent memiliki beberapa metode umum yang tercantum di bawah ini -

Sr.No.	Metode & Deskripsi
1	protected void dispatch(ClickHandler handler) Metode ini seharusnya hanya dipanggil oleh HandlerManager
2	DomEvent.Type <FooHandler> getAssociatedType() Metode ini mengembalikan tipe yang digunakan untuk mendaftar Foo peristiwa.
3	static DomEvent.Type<FooHandler> getType() Metode ini mendapatkan jenis acara yang terkait dengan Foo acara.
4	public java.lang.Object getSource() Metode ini mengembalikan sumber yang terakhir kali mengaktifkan peristiwa ini.
5	protected final boolean isLive() Metode ini mengembalikan apakah acara ditayangkan.
6	protected void kill() Metode ini mematikan acara tersebut

Contoh

Contoh ini akan memandu Anda melalui langkah-langkah sederhana untuk menunjukkan penggunaan file Click Acara dan KeyDownPenanganan acara di GWT. Ikuti langkah-langkah berikut untuk memperbarui aplikasi GWT yang kami buat di GWT - bab Membuat Aplikasi -

Langkah	Deskripsi
1	Buat proyek dengan nama HelloWorld di bawah paket com.tutorialspoint seperti yang dijelaskan di bab GWT - Membuat Aplikasi .
2	Modifikasi HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html dan HelloWorld.java seperti yang dijelaskan di bawah ini. Jaga file lainnya tidak berubah.
3	Kompilasi dan jalankan aplikasi untuk memverifikasi hasil dari logika yang diimplementasikan.

Berikut adalah isi dari deskriptor modul yang dimodifikasi 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>

Berikut ini adalah konten file Style Sheet yang dimodifikasi 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;
}

Berikut adalah konten dari file host HTML yang dimodifikasi 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>

Mari kita ikuti konten file Java berikut src/com.tutorialspoint/HelloWorld.java yang akan mendemonstrasikan penggunaan Penanganan Peristiwa di 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());
         }
      }
   }
}

Setelah Anda siap dengan semua perubahan yang dilakukan, mari kita kompilasi dan jalankan aplikasi dalam mode pengembangan seperti yang kita lakukan di bab GWT - Membuat Aplikasi . Jika semuanya baik-baik saja dengan aplikasi Anda, ini akan menghasilkan hasil sebagai berikut -