20090306 Wicket勉強会第2回

第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

ご清聴 ありがとう ございました