GWT - การจัดการเหตุการณ์

GWT มีโมเดลตัวจัดการเหตุการณ์ที่คล้ายกับ Java AWT หรือ SWING User Interface frameworks

  • อินเทอร์เฟซสำหรับผู้ฟังกำหนดวิธีการอย่างน้อยหนึ่งวิธีที่วิดเจ็ตเรียกใช้เพื่อประกาศเหตุการณ์ GWT มีรายการอินเทอร์เฟซที่เกี่ยวข้องกับเหตุการณ์ต่างๆที่เป็นไปได้

  • คลาสที่ต้องการรับเหตุการณ์ประเภทใดประเภทหนึ่งจะใช้อินเทอร์เฟซตัวจัดการที่เกี่ยวข้องจากนั้นส่งการอ้างอิงถึงตัวเองไปยังวิดเจ็ตเพื่อสมัครสมาชิกชุดของเหตุการณ์

ตัวอย่างเช่นไฟล์ Button ชั้นเผยแพร่ click eventsดังนั้นคุณจะต้องเขียนคลาสเพื่อใช้ClickHandlerเพื่อจัดการclick เหตุการณ์.

อินเทอร์เฟซตัวจัดการเหตุการณ์

ตัวจัดการเหตุการณ์ GWT ทั้งหมดได้รับการขยายจากอินเทอร์เฟซEventHandlerและแต่ละตัวจัดการมีเพียงวิธีเดียวที่มีอาร์กิวเมนต์เดียว อาร์กิวเมนต์นี้เป็นวัตถุประเภทเหตุการณ์ที่เกี่ยวข้องเสมอ แต่ละeventวัตถุมีหลายวิธีในการจัดการกับวัตถุเหตุการณ์ที่ส่งผ่าน ตัวอย่างเช่นเหตุการณ์การคลิกคุณจะต้องเขียนตัวจัดการของคุณดังนี้ -

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

ตอนนี้ชั้นเรียนใดต้องการรับกิจกรรมคลิกจะโทร addClickHandler() เพื่อลงทะเบียนตัวจัดการเหตุการณ์ดังนี้ -

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

แต่ละวิดเจ็ตที่รองรับประเภทเหตุการณ์จะมีวิธีการเพิ่ม HandlerRegistration แบบฟอร์มFooตัวจัดการ (FooEvent) ที่ไหน Foo คือเหตุการณ์จริงเช่น Click, Error, KeyPress เป็นต้น

ต่อไปนี้เป็นรายการตัวจัดการเหตุการณ์ GWT ที่สำคัญและเหตุการณ์ที่เกี่ยวข้องและวิธีการลงทะเบียนตัวจัดการ -

ซีเนียร์ อินเทอร์เฟซเหตุการณ์ วิธีการและคำอธิบายเหตุการณ์
1 ก่อนตัวจัดการการเลือก <I>

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

เรียกว่าเมื่อ BeforeSelectionEvent เริ่มทำงาน

2 BlurHandler

void on Blur(Blur Event event);

เรียกว่าเมื่อเกิดเหตุการณ์เบลอ

3 ChangeHandler

void on Change(ChangeEvent event);

เรียกว่าเมื่อเหตุการณ์การเปลี่ยนแปลงเริ่มทำงาน

4 ClickHandler

void on Click(ClickEvent event);

เรียกเมื่อเหตุการณ์คลิกเนทีฟเริ่มทำงาน

5 ปิดตัวจัดการ <T>

void on Close(CloseEvent<T> event);

เรียกว่าเมื่อ CloseEvent เริ่มทำงาน

6 ตัวจัดการเมนูบริบท

void on Context Menu(Context Menu Event event);

เรียกว่าเมื่อเหตุการณ์เมนูบริบทดั้งเดิมเริ่มทำงาน

7 Double Click Handler

void on Double Click(Double Click Event event);

เรียกเมื่อเหตุการณ์ดับเบิลคลิกเริ่มทำงาน

8 ตัวจัดการข้อผิดพลาด

void on Error(Error Event event);

เรียกเมื่อเกิดเหตุการณ์ข้อผิดพลาด

9 ตัวจัดการโฟกัส

void on Focus(Focus Event event);

เรียกว่าเมื่อโฟกัสเหตุการณ์ถูกยิง

10 แผงแบบฟอร์มส่งตัวจัดการที่สมบูรณ์

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

เริ่มทำงานเมื่อส่งแบบฟอร์มสำเร็จ

11 FormPanel.SubmitHandler

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

เริ่มทำงานเมื่อส่งแบบฟอร์ม

12 ตัวจัดการคีย์ลง

void on Key Down(Key Down Event event);

เรียกว่าเมื่อ KeyDownEvent เริ่มทำงาน

13 แป้นกดที่จัดการ

void on KeyPress(KeyPressEvent event);

เรียกว่าเมื่อ KeyPressEvent เริ่มทำงาน

14 KeyUpHandler

void on KeyUp(KeyUpEvent event);

เรียกว่าเมื่อ KeyUpEvent เริ่มทำงาน

15 LoadHandler

void on Load(LoadEvent event);

เรียกว่าเมื่อ LoadEvent เริ่มทำงาน

16 MouseDownHandler

void on MouseDown(MouseDownEvent event);

เรียกว่าเมื่อ MouseDown ถูกไล่ออก

17 MouseMoveHandler

void on MouseMove(MouseMoveEvent event);

เรียกว่าเมื่อ MouseMoveEvent เริ่มทำงาน

18 MouseOutHandler

void on MouseOut(MouseOutEvent event);

เรียกว่าเมื่อ MouseOutEvent เริ่มทำงาน

19 MouseOverHandler

void on MouseOver(MouseOverEvent event);

เรียกว่าเมื่อ MouseOverEvent เริ่มทำงาน

20 MouseUpHandler

void on MouseUp(MouseUpEvent event);

เรียกว่าเมื่อ MouseUpEvent เริ่มทำงาน

21 MouseWheelHandler

void on MouseWheel(MouseWheelEvent event);

เรียกว่าเมื่อ MouseWheelEvent เริ่มทำงาน

22 ปรับขนาดตัวจัดการ

void on Resize(ResizeEvent event);

เริ่มทำงานเมื่อปรับขนาดวิดเจ็ต

23 ScrollHandler

void on Scroll(ScrollEvent event);

เรียกว่าเมื่อ ScrollEvent เริ่มทำงาน

24 SelectionHandler <I>

void on Selection(SelectionEvent<I> event);

เรียกว่าเมื่อ SelectionEvent เริ่มทำงาน

25 ValueChangeHandler <I>

void on ValueChange(ValueChangeEvent<I> event);

เรียกว่าเมื่อ ValueChangeEvent เริ่มทำงาน

26 หน้าต่างการปิดตัวจัดการ

void on WindowClosing(Window.ClosingEvent event);

เริ่มทำงานก่อนที่หน้าต่างเบราว์เซอร์จะปิดหรือไปที่ไซต์อื่น

27 Window.ScrollHandler

void on WindowScroll(Window.ScrollEvent event);

เริ่มทำงานเมื่อหน้าต่างเบราว์เซอร์ถูกเลื่อน

วิธีการจัดงาน

ดังกล่าวก่อนหน้าแต่ละจัดการมีวิธีการเดียวกับอาร์กิวเมนต์เดียวซึ่งถือวัตถุเหตุการณ์เช่นโมฆะ onClick (event ClickEvent)หรือเป็นโมฆะ onkeydown (event KeyDownEvent) ออบเจ็กต์เหตุการณ์เช่นClickEventและKeyDownEventมีวิธีการทั่วไปไม่กี่วิธีซึ่งแสดงไว้ด้านล่าง -

ซีเนียร์ วิธีการและคำอธิบาย
1

protected void dispatch(ClickHandler handler) วิธีนี้ควรเรียกโดย HandlerManager

2

DomEvent.Type <FooHandler> getAssociatedType() วิธีนี้ส่งคืนประเภทที่ใช้ในการลงทะเบียน Foo เหตุการณ์.

3

static DomEvent.Type<FooHandler> getType() วิธีนี้ได้รับประเภทเหตุการณ์ที่เกี่ยวข้องกับ Foo เหตุการณ์

4

public java.lang.Object getSource() วิธีนี้ส่งคืนแหล่งที่มาที่ทำให้เหตุการณ์นี้เริ่มทำงานครั้งสุดท้าย

5

protected final boolean isLive() วิธีนี้จะคืนค่าว่าเหตุการณ์นั้นเป็นจริงหรือไม่

6

protected void kill() วิธีนี้จะฆ่าเหตุการณ์

ตัวอย่าง

ตัวอย่างนี้จะนำคุณผ่านขั้นตอนง่ายๆในการแสดงการใช้ไฟล์ Click เหตุการณ์และ KeyDownการจัดการเหตุการณ์ใน GWT ทำตามขั้นตอนต่อไปนี้เพื่ออัปเดตแอปพลิเคชัน GWT ที่เราสร้างในGWT - สร้างบทแอปพลิเคชัน -

ขั้นตอน คำอธิบาย
1 สร้างโครงการที่มีชื่อHelloWorldภายใต้แพคเกจcom.tutorialspointตามที่อธิบายไว้ในGWT - สร้างแอพลิเคชันบท
2 แก้ไขHelloWorld.gwt.xml , HelloWorld.css , HelloWorld.htmlและHelloWorld.javaตามที่อธิบายด้านล่าง เก็บไฟล์ที่เหลือไว้ไม่เปลี่ยนแปลง
3 คอมไพล์และเรียกใช้แอปพลิเคชันเพื่อตรวจสอบผลลัพธ์ของตรรกะที่ใช้งาน

ต่อไปนี้เป็นเนื้อหาของตัวอธิบายโมดูลที่แก้ไข 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>

ต่อไปนี้เป็นเนื้อหาของไฟล์ Style Sheet ที่แก้ไข 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>Event Handling Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

ให้เรามีเนื้อหาต่อไปนี้ของไฟล์ Java src/com.tutorialspoint/HelloWorld.java ซึ่งจะสาธิตการใช้ Event Handling ใน 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());
         }
      }
   }
}

เมื่อคุณพร้อมกับการเปลี่ยนแปลงทั้งหมดที่ทำให้เรารวบรวมและเรียกใช้โปรแกรมประยุกต์ในโหมดการพัฒนาในขณะที่เราทำในGWT - สร้างแอพลิเคชันบท หากทุกอย่างเรียบร้อยกับแอปพลิเคชันของคุณสิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -