WicketでJQueryをWicketっぽく使いたい！
そんな人にうってつけのライブラリーがwiQueryです。
まだまだ使い始めて間もないのですが「おぉ、こいつはSUGEEE！」って感じなのでエントリー書いていこうかなと思います。
wiQueryとは
WicketでJQueryと言えばWickeXtというライブラリーがありましたが、どうやらそいつが前身のようです（統合された？？。詳しい経緯は不明です、ゴメンなさい・・）。以前にWickeXtを使った時はJQueryの機能を使うためにJavaのソースコード上にて文字列のJavaScriptソースコードを結構書いてて「う～ん、UIはかっこいいけどちょっとWicketっぽくないなぁ～」って感じだったのですがwiQueryは上手くJQueryをラップしたJavaのクラスが沢山用意されていてWicketに慣れている人なら違和感無く使える感じです。
WicketにはAjax用のライブラリーがデフォルトでバンドルされています。また、その組み込みのAjaxクラス群を拡張したライブラリーであるwicket-extensionsを使えばかなりリッチなUIをAjaxで構築出来ます。そんな中なぜwiQueryかというと「ドラッグ・アンド・ドロップ」が超簡単に出来たりする所です（簡単なデモなら20行程度で出来てしまいます）。また、全体的にデフォルトのUIが格好良いです。
下記に本家サイトとデモのリンクを載せておきます。
個人的な意見ですが「Wicketを使うならAjaxのライブラリー*1を使わない手は無いし、使ってないのならめちゃくちゃ損してる」と思っています。さらにwiQueryを使えばドラッグ・アンド・ドロップさえ超簡単に出来てしまいます。
wiQueryを使ってみる
MavenでwiQueryを使う手順です。
1.ライブラリーを落としてくる
セントラルリポジトリー等にjarが登録されていないのでひとまず本家サイトの「Downloads」からwiquery-1.0.jarを落としてきます。
2.Mavenのローカルリポジトリーにインストールする。
下記コマンドを実行し、上記でダウンロードしてきたjarをローカルリポジトリにインストールします。
mvn install:install-file -Dfile=[落としてきたwiqueryのパス(例:/home/hayassh/download/wiquery-1.0.jar)] -DgroupId=org.odlabs.wiquery -DartifactId=wiquery -Dversion=1.0 -Dpackaging=jar
3.pom.xmlにwiQueryを定義する。
インストールしたwiqueryやらwicketやらロガーやらを定義します。
<dependencies>
<dependency>
<groupId>org.apache.wicket</groupId>
<artifactId>wicket</artifactId>
<version>1.4.6</version>
</dependency>
<dependency>
<groupId>org.odlabs.wiquery</groupId>
<artifactId>wiquery</artifactId>
<version>1.0</version>
</dependency>
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>1.4.2</version>
</dependency>
<dependency>
<groupId>log4j</groupId>
<artifactId>log4j</artifactId>
<version>1.2.14</version>
</dependency>
</dependencies>
4. WiQueryWebApplicationを継承したWebApplicationクラスを作成します。
public class SampleWiQueryApplication extends WiQueryWebApplication{
@Override
public Class<? extends Page> getHomePage() {
return SamplePage.class;
}
}
もしくは自前のWebApplicationクラスのサブクラス内のinitメソッド内にてListenerを追加します。
public class SampleWiQueryApplication extends WebApplication{
@Override
protected void init() {
super.init();
addComponentInstantiationListener(new WiQueryInstantiationListener());
}
@Override
public Class<? extends Page> getHomePage() {
return SamplePage.class;
}
}
実は上記のWebApplicationの変更は本家サイトで書いてあるのですが、上記を行わなくても自分が動かした範囲では影響がなかったりします。このあたりは要調査なのですが、一応本家に書いてあるのでここでも記載しました。
5.web.xmlにfilter登録
上記で作成したWebApplicationのサブクラスをweb.xmlに定義します。
<filter>
<filter-name>wiquery-samples</filter-name>
<filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
<init-param>
<param-name>applicationClassName</param-name>
<param-value>sample.wiquerysample.SampleWiQueryApplication</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>wiquery-samples</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
6.Pageクラス、HTMLおよびドラッグ・アンド・ドロップのコンポーネント作成
さていよいよPageクラスとHTMLの作成です。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Sample Page</title>
</head>
<body>
<ul wicket:id="sortableAjaxWicket" class="connectedSortable">
<li wicket:id="listAjaxView"><span wicket:id="itemName"></span></li>
</ul>
</body>
</html>
public class SamplePage extends WebPage {
private static final List<String> itemList = Arrays.asList(
"DraggableItem1",
"DraggableItem2",
"DraggableItem3",
"DraggableItem4",
"DraggableItem5");
public SamplePage() {
ListView<String> listAjaxView = new ListView<String>("listAjaxView", itemList) {
@Override
protected void populateItem(ListItem<String> item) {
item.add(new Label("itemName", item.getModel()));
item.setOutputMarkupId(true);
}
};
WebMarkupContainer sortableAjaxWicket = new WebMarkupContainer("sortableAjaxWicket");
SortableAjaxBehavior sortableAjaxBehavior = new SortableAjaxBehavior() {
@Override
public void onReceive(Component sortedComponent, int index,Component parentSortedComponent, AjaxRequestTarget ajaxRequestTarget) {
}
@Override
public void onUpdate(Component sortedComponent, int index,
AjaxRequestTarget ajaxRequestTarget) {
}
@Override
public void onRemove(Component sortedComponent, AjaxRequestTarget ajaxRequestTarget) {
}
};
sortableAjaxBehavior.getSortableBehavior().setConnectWith(".connectedSortable");
sortableAjaxWicket.add(sortableAjaxBehavior);
sortableAjaxWicket.add(listAjaxView);
add(sortableAjaxWicket);
}
}
たったこれだけで終了です。細かい説明は次回にしますが、これで
<li>
で表示されるリストの部分がグリグリ動かせるようになります。本当に驚愕ものです。
*1：wicketの組み込みライブラリ及びwicket-extensions
本家WicketのMLでwiQueryを使った新しいデモサイトが話題になっているっぽいのでリンクだけ貼っておきます。
wiQuery恐ろしい子！
Grid demosは驚愕モノです・・・・
wiQueryの1.0.1がリリースされてます。
maven用のRepositoryが用意されたようなので今後はわざわざローカルにダウンロードして（ry
というようなことをする必要がなくなりました。
ちなみにpomには以下を追加すればOKです。
<repositories>
<!-- wiQuery用リポジトリー -->
<repository>
<id>wiquery repository</id>
<name>wiQuery repository</name>
<url>http://wiquery.googlecode.com/svn/repo/</url>
<layout>default</layout>
</repository>
</repositories>
<dependencies>
<!-- wiQueryの依存関係追加 -->
<dependency>
<groupId>org.odlabs.wiquery</groupId>
<artifactId>wiquery</artifactId>
<version>1.0.1</version>
</dependency>
<!-- logger追加 -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
<version>1.5.8</version>
</dependency>
</dependencies>
また、デフォルトではwiQueryの依存関係はwicket1.4.3なので、最新のWicketのバージョンにしたい人とLog4jやめてlogback使いたい人は下記のように設定すればOKです。
<dependencies>
<dependency>
<groupId>org.odlabs.wiquery</groupId>
<artifactId>wiquery</artifactId>
<version>1.0.1</version>
<exclusions>
<exclusion>
<groupId>org.apache.wicket</groupId>
<artifactId>wicket</artifactId>
</exclusion>
<exclusion>
<artifactId>log4j</artifactId>
<groupId>log4j</groupId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.apache.wicket</groupId>
<artifactId>wicket</artifactId>
<version>1.4.7</version>
</dependency>
<dependency>
<groupId>ch.qos.logback</groupId>
<artifactId>logback-classic</artifactId>
<version>0.9.20</version>
</dependency>
</dependencies>
