Gwt-event-handling
GWT-イベント処理
GWTは、Java AWTまたはSWINGユーザーインターフェイスフレームワークに類似したイベントハンドラモデルを提供します。
- リスナーインターフェイスは、ウィジェットがイベントをアナウンスするために呼び出す1つ以上のメソッドを定義します。 GWTは、さまざまなイベントに対応するインターフェースのリストを提供します。
- 特定のタイプのイベントを受信したいクラスは、関連付けられたハンドラーインターフェースを実装し、それからウィジェットへの参照を渡して、一連のイベントをサブスクライブします。
たとえば、 Button クラスは* clickイベント*を発行するため、 Click イベントを処理する_ClickHandler_を実装するクラスを作成する必要があります。
イベントハンドラーインターフェイス
すべての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 add * Foo * Handler(* Foo * Event)という形式のメソッドがあります。 Foo は、Click、Error、KeyPressなどの実際のイベントです。
以下は、重要なGWTイベントハンドラーと関連イベントおよびハンドラー登録メソッドのリストです-
Sr.No. | Event Interface | Event Method & Description |
---|---|---|
1 | Before Selection Handler<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 | CloseHandler<T> |
void on Close(CloseEvent<T> event); CloseEventが発生したときに呼び出されます。 |
6 | Context Menu Handler |
void on Context Menu(Context Menu Event event); ネイティブコンテキストメニューイベントが発生したときに呼び出されます。 |
7 | Double Click Handler |
void on Double Click(Double Click Event event); ダブルクリックイベントが発生したときに呼び出されます。 |
8 | Error Handler |
void on Error(Error Event event); エラーイベントが発生したときに呼び出されます。 |
9 | Focus Handler |
void on Focus(Focus Event event); フォーカスイベントが発生したときに呼び出されます。 |
10 | Form Panel.Submit Complete Handler |
void on Submit Complete(Form Panel.Submit Complete Event event); フォームが正常に送信されたときに発生します。 |
11 | FormPanel.SubmitHandler |
void on Submit(Form Panel.Submit Event event); フォームが送信されたときに発生します。 |
12 | Key Down Handler |
void on Key Down(Key Down Event event); KeyDownEventが発生したときに呼び出されます。 |
13 | KeyPressHandler |
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 | ResizeHandler |
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 | Window.ClosingHandler |
void on WindowClosing(Window.ClosingEvent event); ブラウザウィンドウが閉じるか、別のサイトに移動する直前に発生します。 |
27 | Window.ScrollHandler |
void on WindowScroll(Window.ScrollEvent event); ブラウザウィンドウがスクロールされたときに発生します。 |
イベントメソッド
前述のように、各ハンドラには、_void onClick(ClickEvent event)_や_void onKeyDown(KeyDownEvent event)_など、イベントオブジェクトを保持する単一の引数を持つ単一のメソッドがあります。 _ClickEvent_や_KeyDownEvent_などのイベントオブジェクトには、以下にリストされているいくつかの一般的なメソッドがあります-
Sr.No. | Method & Description |
---|---|
1 | protected void dispatch(ClickHandler handler) This method Should only be called by HandlerManager |
2 | DomEvent.Type <FooHandler> getAssociatedType() *This method returns the type used to register Foo* event. |
3 | static DomEvent.Type<FooHandler> getType() *This method gets the event type associated with Foo* events. |
4 | public java.lang.Object getSource() This method returns the source that last fired this event. |
5 | protected final boolean isLive() This method returns whether the event is live. |
6 | protected void kill() This method kills the event |
例
この例では、GWTでの Click イベントおよび KeyDown イベント処理の使用方法を示す簡単な手順を紹介します。 次の手順に従って、_GWTで作成したGWTアプリケーションを更新します-アプリケーションの作成_の章-
Step | Description |
---|---|
1 | Create a project with a name HelloWorld under a package com.finddevguides as explained in the GWT - Create Application chapter. |
2 | Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorldl and HelloWorld.java as explained below. Keep rest of the files unchanged. |
3 | Compile and run the application to verify the result of the implemented logic. |
以下は、変更されたモジュール記述子 src/com.finddevguides/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.finddevguides.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path = 'client'/>
<source path = 'shared'/>
</module>
以下は、変更されたスタイルシートファイル 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/HelloWorldl の内容です。
<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>
GWTでのイベント処理の使用法を示すJavaファイル src/com.finddevguides/HelloWorld.java の内容を見てみましょう。
package com.finddevguides.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());
}
}
}
}
すべての変更が完了したら、link:/gwt/gwt_create_application [GWT-アプリケーションの作成]の章で行ったように、アプリケーションをコンパイルして開発モードで実行します。 すべてがあなたのアプリケーションでうまくいけば、これは次の結果を生成します-