wiQuery - WicketとJQueryを統合するライブラリー　その1

　WicketでJQueryをWicketっぽく使いたい！
そんな人にうってつけのライブラリーがwiQueryです。

まだまだ使い始めて間もないのですが「おぉ、こいつはSUGEEE！」って感じなのでエントリー書いていこうかなと思います。

wiQueryとは

WicketでJQueryと言えばWickeXtというライブラリーがありましたが、どうやらそいつが前身のようです（統合された？？。詳しい経緯は不明です、ゴメンなさい・・）。以前にWickeXtを使った時はJQueryの機能を使うためにJavaのソースコード上にて文字列のJavaScript ソースコードを結構書いてて「う〜ん、UIはかっこいいけどちょっとWicketっぽくないなぁ〜」って感じだったのですがwiQueryは上手くJQueryをラップしたJavaのクラスが沢山用意されていてWicketに慣れている人なら違和感無く使える感じです。

WicketでAjax

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