GWTでJavaScriptを書かないAjax開発--第5回：ウィジェットを表示するパネル - (page 3)

スクロール可能なパネル

　領域の大きさは決まっているが、コンテンツが追加されるなどして領域より大きくなってしまう場合にはスクロールできるようにしたい。その際にはScrollPanelが役に立つ。

　図2は領域のサイズ（320px×240px）より大きな画像（640px×480px）を表示させた例だ。画像はImageウィジェットによる。ソースコードをリスト3に示す。ただし、パネルによっては自動的にスクロールバーを表示するものもあるので、ScrollPanelが必要かどうかは、パネルがどのように動作するかを確かめてからにしよう。

図2 領域のサイズより大きな画像をスクロールさせる

リスト3 ScrollPanelで画像を表示（Java）

import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.ScrollPanel;
    ....................
ScrollPanel scPanel = new ScrollPanel();
// ピクセル単位でサイズ指定
scPanel.setPixelSize( 320, 240 );
// 元のサイズは640px X 480pxの画像を追加
scPanel.add( new Image( "kaminari-mon.jpg" ) );
RootPanel.get( "panels" ).add( scPanel );

タブ切り替えを行うパネル

　最後にタブ切り替えを行うTabPanelを紹介しよう。図3、図4はタブを選ぶと対応した画像が表示される様子を示したものだ。

　タブはウィジェットが追加された順に表示される（リスト4）。初めに追加されたものが0番目となる。ウィジェットを表示させる前に必ず最初に選択済みのタブを番号で設定しよう。そうしないと何も表示されない。

　選択されたタブだけを違う色にしたり、画像に枠をつけたりしているのは、リスト5のCSSだ。TabPanelはTabBarとDeckPanelという2つのウィジェットが成り立っているため、タブと画像表示部分とを別のクラスで設定しなければならないことに注意してほしい。

図3 タブ切り替え前

図4 タブ切り替え後

リスト4 TabPanelによる画像切り替え（Java）

import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.TabPanel;
    ....................
TabPanel tPanel = new TabPanel();
// タブに対応するウィジェットを追加
tPanel.add( new Image( "図4の画像ファイル名" ), "鶴岡八幡宮" );
tPanel.add( new Image( "図3の画像ファイル名" ), "横浜" );
tPanel.add( new HTML( "HTMLコンテンツ" ), "パネルの紹介" );
// "横浜"を選択した状態にする
tPanel.selectTab( 1 );

リスト5 TabPanelに関する設定（CSS）

/* 選択されていないタブ */
.gwt-TabBar .gwt-TabBarItem {
  background-color : #edb;
  font-weight : normal;
  padding : 5pt;
}
/* 選択されたタブ */
.gwt-TabBar .gwt-TabBarItem-selected {
  background-color : orange;
  font-weight : bold;
  padding : 5pt;
}
/* TabPanel自身の設定 */
.gwt-TabPanel {
  background-color : white;
}
/* タブに対応するコンテンツ（画像）の設定 */
.gwt-TabPanelBottom {
  border : 3px solid orange;
}

　他にもさまざまなパネルがあるので、Kitchen Sinkというデモやリファレンスを参考にして、有効に活用していただきたい。

　次回は、さまざまなイベント処理を紹介しよう。ウィジェットを動的に変化させるAjaxらしいアプリケーションを構築してみたい。