リスナーの組み込み（選択肢の変更で画像切り替え）
選択肢を変更したら画像が切り替わるようにするには、ListBoxに対してChangeListenerを追加するという方法をとる（リスト5）。
ChangeListenerはJavaインタフェースだが、new ChangeListener() { ... }のようにしてChangeListenerの実装クラスを定義することが可能だ。もちろん、別途実装クラスを作成して組み込んでもかまわない。
なお、ここでは画像切り替え用のDeckPanelをRootPanelからたどって取得しているが、必ずしもこのようにしなくてもよい。
リスト5 リスナーの組み込み（Java）
lBox.addChangeListener( new ChangeListener() { // 選択肢が変更されたら
public void onChange( Widget sender ) { // 以下の処理を行う
// 画像を切り替えるDeckPanelの取得(リスト4参照)
HorizontalPanel hPanel =
(HorizontalPanel)RootPanel.get( "events" ).getWidget( 0 );
DeckPanel dPanel = (DeckPanel)hPanel.getWidget( 1 );
// 選択肢にしたがって画像切り替え
dPanel.showWidget( ((ListBox)sender).getSelectedIndex() );
}
} );
これで図1の操作を実現できるようになった。操作とリスナーとの関連を画面上で確かめてみよう。
リスナーは他にも、マウスのクリックを検知するClickListenerなどいろいろと用意されているので、com.google.gwt.user.client.uiパッケージのページを参照していただきたい。
次回は、本格的なAjaxアプリケーションを構築するにはどうしても欠かせない、サーバと通信を行う方法を紹介する。
