20090306 wicket勉強会第2回
TRANSCRIPT
![Page 1: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/1.jpg)
第2回 Wicket勉強会
WickeXtのお話
![Page 2: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/2.jpg)
自己紹介
• 尾崎 智仁
• ID:yuroyoro
• フリーエンジニア
• Java、最近はScala,Lift
• TracのPluginとか
![Page 3: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/3.jpg)
Blog
![Page 4: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/4.jpg)
WickeXtって?
![Page 5: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/5.jpg)
×
![Page 6: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/6.jpg)
![Page 7: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/7.jpg)
WickeXtって?
• WicketとJQueryを統合する
• JavaからJQueryのjavascriptを生成
• JQuery UIを利用したコンポーネント
![Page 8: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/8.jpg)
Page/Componentでこんな風に書くと
public MyPage() {
JsQuery jsq = new JsQuery();
jsq.$(".foo")
.chain("css",
"{border: '1px solid red'}");
jsq.contribute(this);
}
JQueryのjavascript生成
JQueryっぽいAPI �
![Page 9: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/9.jpg)
$(".foo")
.css( {border: '1px solid red’});
こんなjavascriptが生成される
JQueryのjavascript生成
![Page 10: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/10.jpg)
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
ダブルクリックすると呼ばれる�
![Page 11: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/11.jpg)
UI Componet
![Page 12: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/12.jpg)
Window window = new Window("modal");
add(window);
window.add(new Label("message", "これはWickextで出してるダイアログなんだぜ?"));
window.setAutoOpen(true);
モーダルダイアログ
![Page 13: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/13.jpg)
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
![Page 14: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/14.jpg)
add(new GridPlugin("flexigrid-example"));
JQuery Pluginとの組み合わせ
![Page 15: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/15.jpg)
Demo
![Page 16: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/16.jpg)
まとめ!
![Page 17: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/17.jpg)
Javaのコードで全て完結する!
![Page 18: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/18.jpg)
JQueryでjavascriptを書かかなくて
おk
![Page 19: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/19.jpg)
JQueryのPluginとの 組み合わせ!
![Page 20: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/20.jpg)
現在は0.9。 これからComponentや Behaviorが増えそう。
![Page 21: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/21.jpg)
もっとkwsk!
![Page 22: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/22.jpg)
公式サイト: 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
![Page 23: 20090306 Wicket勉強会第2回](https://reader034.vdocuments.site/reader034/viewer/2022052700/55a05c8c1a28abf4678b4832/html5/thumbnails/23.jpg)
ご清聴 ありがとう ございました