当社Webサイト

カテゴリー

Amazonサーチ

  • 09/29
    post by 武輪 恭代 @ 2009 年 9 月 29 日 17:20 Java, Wicket

    ども、武輪です。

    前回のWicket小話で、Confirmメッセージを出すにはどうすればよいのか?と言った話をしたのですが、今回も引き続きConfirmメッセージの話をしたいと思います。

    前回、AjaxボタンでConfirmメッセージを表示する方法として、Wicket-extensionのコンポーネントであるModalWindowを使い、独自のポップアップメッセージを表示する方法をとりました。
    しかしながら、これってぶっちゃけConfirmメッセージじゃないよね…!

    というわけで今回はAjaxボタンで正真正銘(?)のConfirmメッセージを表示する方法をご紹介します。

    AjaxボタンでConfirmメッセージ

    >Ajaxで中身を入れ替える以上、onclickアトリビュートをいじるのはややこしそうなので…

    と前回書いたのですが、
    「confirmで確認後、OKだったら既存AjaxのJavaScriptを実行してあげて、キャンセルだったらfalseを返す」
    ようなJavaScriptを書けば問題ないんじゃ…?と思いまして。

    そんなわけでさらっとサンプルを書いてみました。
    サンプルは前回同様、ボタンを押した時に確認メッセージを表示し、OKだったらカウントする、キャンセルだったら何もしない、といった仕様です。

    Confirm2.java

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    
    public class Confirm2 extends WebPage{
     
    	private int count = 0;
    	private Label result;
     
    	/**
    	 * コンストラクタ
    	 */
    	public Confirm2() {
    		add(result = new Label("result", new PropertyModel<Integer>(this, "count")));
    		result.setOutputMarkupId(true);
    		Form<?> form = new Form<Confirm2>("form");
     
    		form.add(new AjaxButton("count", new Model<String>("カウントしますか?")){
     
    			private static final long serialVersionUID = 1L;
     
    			@Override
    			protected void onSubmit(AjaxRequestTarget target, Form<?> form) {
    				count++;
    				target.addComponent(result);
    			}
     
    			@Override
    			protected IAjaxCallDecorator getAjaxCallDecorator() {
    				return new AjaxPreprocessingCallDecorator(super.getAjaxCallDecorator()) {
    					private static final long serialVersionUID = 1L;
     
    					@Override
    					public CharSequence preDecorateScript(CharSequence script) {
    						return "if(!confirm('" + getModelObject() + "')) return false;" + script;
    					}
    				};
    			}
    		});
    		add(form);
    	}
    }

    【メモ】
    25~34行目付近:
    AjaxButtonのgetAjaxCallDecoratorをオーバライドしてあげることで、出力されるAjax用JavaScriptに手を加えています。

    実際に出力されるhtmlは以下のようになります。

    onclick="if(!confirm('カウントしますか?')) return false;var wcall=wicketSubmitFormById('form2', ';[長いので略]"
    

    まとめ

    というわけで、AjaxButtonでも前回みたいな似非確認ダイアログではなくちゃんとした(?)Confirmメッセージを出すことができました。
    AjaxButtonを記述する度にgetAjaxCallDecorator()をオーバライドするのも面倒なので、AjaxButtonを継承したサブクラスを作っておくのが便利そうです。

    動作環境

    今回のサンプルソースは以下の環境で動作させています。

    バージョン
    JDK 1.6.0_13
    Apache Tomcat 6.0.16
    Apache Wicket 1.4.0

    あわせて読みたい

    Tags:

  • 09/08
    post by 笹山 昭秀 @ 2009 年 9 月 8 日 12:40 ExtJS, JavaScript

    こんにちは。笹山です。

    前回Ext.grid.GridPanelを用いてシンプルな時刻表を作成しました。

    まだまだ物足りないので機能を追加していきます。
    せっかくなのでExtJS3.0の新機能を用いてもっとリッチにしていこうと思います。
    前回のGridは実際のところExtJS3.0でなくても作成できます。)

    今回は以下の機能追加を行います。

    • ページング機能を追加する
    • Gridの高さを自由に変更可能にする
    • Gridの各Cellにマウスを合わせた時、内容をツールチップに表示する

    ※今回は全便の時刻表データを使ってサンプルを作成します(8月時刻表全便データ

    [続きを読む...]

    Tags: , , , , , , , ,

  • 09/04
    post by 武輪 恭代 @ 2009 年 9 月 4 日 11:35 Java, Wicket

    ども、武輪です。

    Webアプリケーションでは、データを登録したり編集したり削除したりといった操作が日常茶飯事です。
    そして「削除ボタンを押した時にいきなり削除するのではなく、confirmメッセージを出す」というのはよくあるパターンですね。

    さてWicket小話その2では、「Wicketで確認メッセージを出すにはどうすればよいのか?」について、実際のコードを踏まえて試してみようと思います。

    [続きを読む...]

    Tags:

  • 09/02
    post by 笹山 昭秀 @ 2009 年 9 月 2 日 10:14 ExtJS, JavaScript

    こんにちは。笹山です。

    WebアプリケーションでDBなどからデータを取得して一覧表示させる方法は、HTMLのTABLEタグで書かれたものが多いと思います。
    もちろんスタイルシートを駆使すればカッコよくはなるのでしょうが、今回はこれをもう少し手軽にリッチにしようとExtJSを使ってみました。

    余談ですが今回のExtJSサンプルは、私自身の趣味のために作成しました。
    趣味でよく伊丹空港に飛行機を撮影に行きます。エアーバンドで便名を聞いて、その飛行機が
    「どこ行き?どこから来た?機種は何?」
    というのが知りたいことがよくあります。(私だけか?)
    これから数回に渡り、ExtJSで伊丹空港の8月の時刻表を私好みにしていこうと思います。

    [続きを読む...]

    Tags: , ,

  • 09/01
    post by 正木 恵二 @ 2009 年 9 月 1 日 10:00 Google Android, プログラム
    このエントリーは下記の記事の続きです。

    アンドロイダー育成日記 -Androidと仲良くなるには- その3

    こんにちは。正木です。

    大事なコトを書きそびれていたのを思い出しましたので白状します。

    当方、Android1.5 + Eclipse3.5 を使って開発してます。

    技術がコンセプトのブログでこのような失態を犯していた事を、深くお詫び申し上げます< (_ _)>
    丸刈り……は しません。今年の3月に剃ったトコロなんで。

    それでは、本文へど~ぞ~。
    [続きを読む...]

    Tags: , , , , ,