GWTでJavaScriptを書かないAjax開発--第4回:ウィジェットの表示 - (page 3)

沖林正紀 2007年11月07日 07時00分

  • このエントリーをはてなブックマークに追加
  • 印刷

クリックしたら色が変わるボタン

 以上を応用して、クリックしたら色が変わるボタンを作成してみた。デフォルトは図1のような通常のボタンだが、クリックするごとに図2のように色を変え、4回目のクリックで元のデフォルトに戻るというものだ。

図1 図1 デフォルト表示のボタン(Hosted modeで実行)
図2 図2 クリックによるボタンの色の変化(青→黄→赤)

 ソースコードをリスト2(HTML)、リスト3(Java)に示す。筆者の環境ではHosted modeはもちろん、Web mode(コンパイル)でもFirefox 2.0.0.7とIE7で実行を確認している。リストの詳細は字数の関係から割愛させていただくが、前述した説明を参考にして、ぜひGWTアプリケーションを体験していただきたい。

リスト2 ボタンなどを表示するHTML


  
    GWTのウィジェット表示
    
    
    
  
  
    

GWTのウィジェット表示

ボタンをクリックすると、色が変わります。

スタイル

リスト3 GWTによるJavaアプリケーション

package gwt.exmaple.client;

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

public class ColorChangeableButton implements EntryPoint  {

  public void onModuleLoad()  {

    final Button   button = new Button( "色が変わるボタン" );
    final Label    label  = new Label( button.getStyleName() );

    button.addClickListener( new ClickListener()  {

      // スタイルシートの名称
      String[] style = { "gwt-button", "button-blue",
                         "button-yellow", "button-red" };
      // スタイルシート切り替え用
      int   idx  = 0;

      // クリックされたらスタイルシートを変更
      public void onClick( Widget sender )  {
        idx = ( ++idx % ( style.length ) );
        label.setText( style[ idx ] );
        button.setStyleName( style[ idx ] );
      }

    });

    RootPanel.get( "div-label" ).add( label );
    RootPanel.get( "div-button" ).add( button );
  }

}

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

  • このエントリーをはてなブックマークに追加

関連ホワイトペーパー

連載

CIO
月刊 Windows 10移行の心・技・体
ITアナリストが知る日本企業の「ITの盲点」
シェアリングエコノミーの衝撃
デジタル“失敗学”
コンサルティング現場のカラクリ
Rethink Internet:インターネット再考
インシデントをもたらすヒューマンエラー
トランザクションの今昔物語
エリック松永のデジタルIQ道場
研究現場から見たAI
Fintechの正体
米ZDNet編集長Larryの独り言
大木豊成「仕事で使うアップルのトリセツ」
山本雅史「ハードから読み解くITトレンド放談」
田中克己「展望2020年のIT企業」
松岡功「一言もの申す」
松岡功「今週の明言」
内山悟志「IT部門はどこに向かうのか」
林 雅之「デジタル未来からの手紙」
谷川耕一「エンプラITならこれは知っとけ」
大河原克行「エンプラ徒然」
内製化とユーザー体験の関係
「プロジェクトマネジメント」の解き方
ITは「ひみつ道具」の夢を見る
セキュリティ
セキュリティインシデント対応の現場
エンドポイントセキュリティの4つの「基礎」
企業セキュリティの歩き方
サイバーセキュリティ未来考
ネットワークセキュリティの要諦
セキュリティの論点
スペシャル
エンタープライズAIの隆盛
インシュアテックで変わる保険業界
顧客は勝手に育たない--MAツール導入の心得
「ひとり情シス」の本当のところ
ざっくり解決!SNS担当者お悩み相談室
生産性向上に効くビジネスITツール最前線
ざっくりわかるSNSマーケティング入門
課題解決のためのUI/UX
誰もが開発者になる時代 ~業務システム開発の現場を行く~
「Windows 10」法人導入の手引き
ソフトウェア開発パラダイムの進化
エンタープライズトレンド
10の事情
座談会@ZDNet
Dr.津田のクラウドトップガン対談
Gartner Symposium
IBM World of Watson
de:code
Sapphire Now
VMworld
Microsoft WPC
Microsoft Connect()
HPE Discover
Oracle OpenWorld
Dell Technologies World
AWS re:Invent
AWS Summit
PTC LiveWorx
吉田行男「より賢く活用するためのOSS最新動向」
古賀政純「Dockerがもたらすビジネス変革」
中国ビジネス四方山話
ベトナムでビジネス
日本株展望
企業決算
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]