Upload
tomohito-ozaki
View
1.678
Download
1
Embed Size (px)
Citation preview
第2回 Wicket勉強会
WickeXtのお話
自己紹介
• 尾崎 智仁
• ID:yuroyoro
• フリーエンジニア
• Java、最近はScala,Lift
• TracのPluginとか
Blog
WickeXtって?
×
WickeXtって?
• WicketとJQueryを統合する
• JavaからJQueryのjavascriptを生成
• JQuery UIを利用したコンポーネント
Page/Componentでこんな風に書くと
public MyPage() {
JsQuery jsq = new JsQuery();
jsq.$(".foo")
.chain("css",
"{border: '1px solid red'}");
jsq.contribute(this);
}
JQueryのjavascript生成
JQueryっぽいAPI �
$(".foo")
.css( {border: '1px solid red’});
こんなjavascriptが生成される
JQueryのjavascript生成
div1.add(
new WickextAjaxEventBehavior(MouseEvent.DBLCLICK) {
@Override
protected void respond(AjaxRequestTarget target) {
target.appendJavascript(
new JsQuery(div2) .$()
.chain(new FadeOut(EffectSpeed.SLOW))
.render() .toString());
}
});
WickextAjaxEventBehaviorでajax
JQueryでajax
ダブルクリックすると呼ばれる�
UI Componet
Window window = new Window("modal");
add(window);
window.add(new Label("message", "これはWickextで出してるダイアログなんだぜ?"));
window.setAutoOpen(true);
モーダルダイアログ
Form<Model<String>> acForm = new Form<Model<String>>("acForm");
final DatePicker<String> acText = new DatePicker<String>("datePickerText", new Model<String>(""));
acForm.add(acText);this.add(acForm);
Date Picker
add(new GridPlugin("flexigrid-example"));
JQuery Pluginとの組み合わせ
Demo
まとめ!
Javaのコードで全て完結する!
JQueryでjavascriptを書かかなくて
おk
JQueryのPluginとの 組み合わせ!
現在は0.9。 これからComponentや Behaviorが増えそう。
もっとkwsk!
公式サイト: http://www.wickext.org/
Google Code: http://code.google.com/p/wickext/
今日のデモとソース: http://wickext-sample.yuroyoro.staxapps.net/ http://github.com/yuroyoro/wickext-sample/tree/master
ご清聴 ありがとう ございました