GWTでJavaScriptを書かないAjax開発--第6回：イベント処理の組み込み - (page 2)

GWTの場合

　GWTでは、イベントハンドラではなくリスナー（Listener）をウィジェットに組み込むことでイベント処理を実現する。Swingやサーブレット（Servlet）のプログラミングを経験していれば理解はたやすいが、そうでなくてもリスナーの種類とウィジェットへの組み込み方がわかれば、結局はイベントハンドラとほぼ同様のものであることに気がつくはずだ。

　まず、図1の画面表示に用いられているウィジェットとリスナーを確認しておこう。以下はいずれもcom.google.gwt.user.client.uiパッケージに属する。

• Image：画像オブジェクトでに相当
• DeckPanel：表示する画像の切り替え
• ListBox：画面左の選択肢でに相当
  FormPanel：ListBoxを収めるパネルで

  に相当
  HorizontalPanel：画面の左右にFormPanelとDeckPanelを表示
  ChangeListener：ListBoxの選択肢が変更されたことを検知するリスナー

  　では、それぞれの設定について説明しよう。リストはfinal宣言を省略して示すので、適宜補っていただきたい。

  画像切り替えの設定

  　表示する画像を切り替えるには、前回紹介したSimplePanelを用いることも可能だが、今回は切り替える画像をあらかじめ用意できるDeckPanelを用いた（リスト3）。ここにImageウィジェットとして画像を取り込んでおけば、後から読み込まなくてもすぐに表示を切り替えられる。

  リスト3 DeckPanelの設定（Java）

  String[][] photos = new String[][] {
     { "選択肢1", "ファイル名1" }, { ... }, ... };
  DeckPanel dPanel = new DeckPanel();
  for( int i = 0; i < photos.length; i++ )  {  // DeckPanelに画像を追加
    Image image = new Image( photos[ i ][ 1 ] );
    dPanel.add( image );
  }
  dPanel.showWidget( 0 );   // 最初に表示する画像を決定
  

  選択肢の設定と画面表示

  　選択肢は、>form>タグに相当するFormPanelに、>select>に相当するListBoxを追加することで表示させる。そして、選択肢と画像とを左右に表示させるためにHorizontalPanelを用いた（リスト4）。

  リスト4 ListBoxの設定と画面表示（Java）

  ListBox   lBox   = new ListBox();     // 

  に相当 FormPanel fPanel = new FormPanel(); // に相当 for( int i = 0; i < photos.length; i++ ) { // 選択肢を追加 lBox.addItem( photos[ i ][ 0 ], photos[ i ][ 1 ] ); } /* ..... リスナーの組み込み(リスト5) ..... */ fPanel.add( lBox ); // HorizontalPanelでレイアウト HorizontalPanel hPanel = new HorizontalPanel(); hPanel.add( fPanel ); hPanel.add( dPanel ); // リスト3参照 // Webブラウザ(
  )に表示 RootPanel.get( "events" ).add( hPanel );