01/12
post by 笹山 昭秀 @ 2010 年 1 月 12 日 10:20
ExtJS, JavaScript
遅くなりましたが、明けましておめでとうございます。
笹山です。
前回の記事から更新が滞ってしまいました。（気づいたら2010年！）
記事用の時刻表ExtJSソースは準備していたのですが更新を怠けておりました。
（怠けている間にExt JS 3.1.0がリリースされておりました）
ですので必死で思い出しながら書きます。（本当に完全に忘れている・・・やばい。）
今回はExtJS3.0を用いて時刻表を作成する完結編です。
前回は、
- ページング機能
- Gridの高さ変更
- Grid内のツールチップ表示
について書きましたが、やはり検索機能や飛行機の情報なんかも欲しくなるわけです。
今回は検索機能、飛行機の情報表示を実装してオレオレ時刻表の作成を終わりたいと思います。
[続きを読む...]
Tags: Ext.grid.GridPanel, Ext.Template, Ext.ux.form.SearchField, Ext.ux.grid.RowExpander, ExtJS, ExtJS3.0
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: Wicket
09/08
post by 笹山 昭秀 @ 2009 年 9 月 8 日 12:40
ExtJS, JavaScript
こんにちは。笹山です。
前回Ext.grid.GridPanelを用いてシンプルな時刻表を作成しました。
まだまだ物足りないので機能を追加していきます。
せっかくなのでExtJS3.0の新機能を用いてもっとリッチにしていこうと思います。
（前回のGridは実際のところExtJS3.0でなくても作成できます。）
今回は以下の機能追加を行います。
- ページング機能を追加する
- Gridの高さを自由に変更可能にする
- Gridの各Cellにマウスを合わせた時、内容をツールチップに表示する
※今回は全便の時刻表データを使ってサンプルを作成します（8月時刻表全便データ）
[続きを読む...]
Tags: Ext.grid.GridPanel, Ext.override, Ext.ux.data.PagingMemoryProxy, Ext.ux.ProgressBarPager, Ext.ux.SlidingPager, ExtJS, ExtJS3.0, オーバーライド, ツールチップ
09/04
post by 武輪 恭代 @ 2009 年 9 月 4 日 11:35
Java, Wicket
ども、武輪です。
Webアプリケーションでは、データを登録したり編集したり削除したりといった操作が日常茶飯事です。
そして「削除ボタンを押した時にいきなり削除するのではなく、confirmメッセージを出す」というのはよくあるパターンですね。
さてWicket小話その2では、「Wicketで確認メッセージを出すにはどうすればよいのか？」について、実際のコードを踏まえて試してみようと思います。
[続きを読む...]
Tags: Wicket
09/02
post by 笹山 昭秀 @ 2009 年 9 月 2 日 10:14
ExtJS, JavaScript
こんにちは。笹山です。
WebアプリケーションでDBなどからデータを取得して一覧表示させる方法は、HTMLのTABLEタグで書かれたものが多いと思います。
もちろんスタイルシートを駆使すればカッコよくはなるのでしょうが、今回はこれをもう少し手軽にリッチにしようとExtJSを使ってみました。
余談ですが今回のExtJSサンプルは、私自身の趣味のために作成しました。
趣味でよく伊丹空港に飛行機を撮影に行きます。エアーバンドで便名を聞いて、その飛行機が
「どこ行き？どこから来た？機種は何？」
というのが知りたいことがよくあります。（私だけか？）
これから数回に渡り、ExtJSで伊丹空港の8月の時刻表を私好みにしていこうと思います。
[続きを読む...]
Tags: Ext.grid.GridPanel, ExtJS, ExtJS3.0
