編集部からのお知らせ
動画セミナー「Security Trend Winter」公開中!
最新記事まとめ「医療IT」

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

沖林正紀

2007-11-14 18:00

パネルにウィジェットを追加

 図1は緑色の領域の中に文字列を表示している(Firefox2.0.0.8で確認、以下同じ)。領域はSimplePanelによるもので、文字列はHTMLウィジェットを用いた(リスト1)。色や枠線はCSS(リスト2)を適用している。これ以降、ソースコードはUTF-8で記述されているものとする。それ以外の文字コードを用いる場合は第3回を参照していただきたい

図1 図1 SimplePanel内にHTMLウィジェットを表示(例)

リスト1 領域の中にHTMLを表示(Java)

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.HTML;

public class GWTPanels implements EntryPoint {
  public void onModuleLoad() {

    // 1つのウィジェットしか入れられないパネル
    final SimplePanel sPanel = new SimplePanel();

    // HTMLウィジェットを追加
    sPanel.add( new HTML( "パネルにHTMLを表示させる
" + "ソースコードはUTF-8で作成
" + "別の文字コードを用いる場合は第3回を参照" ) ); // スタイルシート(リスト2)を設定 sPanel.setStyleName( "ex-simple-panel" ); //
の領域にパネルを表示 RootPanel.get( "panels" ).add( sPanel ); } }

リスト2 領域への設定(CSS)

.ex-simple-panel {
  width   : 300px;
  height  : 55px;
  margin  : 5pt;
  padding : 5pt;
  border  : 1px solid black;
  background-color : lightgreen;
}

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

特集

CIO

モバイル

セキュリティ

スペシャル

NEWSLETTERS

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

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

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