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 記事を毎朝メールでまとめ読み(登録無料)

ホワイトペーパー

新着

ランキング

  1. セキュリティ

    「デジタル・フォレンジック」から始まるセキュリティ災禍論--活用したいIT業界の防災マニュアル

  2. 運用管理

    「無線LANがつながらない」という問い合わせにAIで対応、トラブル解決の切り札とは

  3. 運用管理

    Oracle DatabaseのAzure移行時におけるポイント、移行前に確認しておきたい障害対策

  4. 運用管理

    Google Chrome ブラウザ がセキュリティを強化、ゼロトラスト移行で高まるブラウザの重要性

  5. ビジネスアプリケーション

    技術進化でさらに発展するデータサイエンス/アナリティクス、最新の6大トレンドを解説

ZDNET Japan クイックポール

自社にとって最大のセキュリティ脅威は何ですか

NEWSLETTERS

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

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

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