編集部からのお知らせ
オススメ記事選集PDF:MAツールのいま
「これからの企業IT」の記事はこちら

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

沖林正紀

2007-11-14 18:00

スクロール可能なパネル

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

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

図2 図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 図3 タブ切り替え前
図4 図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らしいアプリケーションを構築してみたい。

ZDNet Japan 記事を毎朝メールでまとめ読み(登録無料)

特集

CIO

モバイル

セキュリティ

スペシャル

ホワイトペーパー

新着

ランキング

  1. クラウドコンピューティング

    AWSが提唱する、モダン分析プラットフォームのアーキテクチャと構築手法

  2. クラウドコンピューティング

    AWS資料、ジョブに特化した目的別データベースを選定するためのガイド

  3. セキュリティ

    Zero Trust Workbook--ゼロ トラストの先にある世界を知るためのガイダンス

  4. セキュリティ

    「ゼロトラスト」時代のネットワークセキュリティの思わぬ落とし穴に注意せよ

  5. クラウドコンピューティング

    データ駆動型の組織でビジネスの俊敏性を実現するには?戦略的な意思決定とイノベーションを両立へ

NEWSLETTERS

エンタープライズ・コンピューティングの最前線を配信

ZDNet Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。
ITビジネス全般については、CNET Japanをご覧ください。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]