イベント情報を検索して、一覧が表示され、一覧の「詳細」リンクをクリックすると、詳細ダイアログが開き、イベントの詳細情報が表示されるというのが今までのアプリケーションでした。今回は、詳細情報が表示される際に、イベント名でテクノラティのブログ検索を行い、さらにそのブログについてはてなブックマークでブックマークしてる人の数を、はてなAPIを使って検索し、今までの詳細画面の一番下に表示するというサンプルを作成します。

(今回作成するサンプル)

まずは、イベントの詳細情報が検索された場合に、Eventクラスのオブジェクトの中にブログ情報を含めるために、EventにWeblogのリストを持たせて、そのsetter/getterを持たせます。

(Event.java)

public class Event implements Serializable {
    (略)
    private List weblogList;
    (略)
    public List getWeblogList() {
        return weblogList;
    }

    public void setWeblogList(List weblogList) {
        this.weblogList = weblogList;
    }
}

イベントの詳細情報が検索された場合に、今までのサーバサイドマッシュアップを組み合わせて、イベント名からテクノラティのblog検索をし、はてブ数の検索を行うように、EventBeanのgetEventメソッドを変更します。

(EventBean.java)

    public Event getEvent(String id) {
        Event event = eventDao.findByPrimaryKey(id);
        List weblogs = technoratiBlogSearch.search(event.getName());
        for (Weblog weblog:weblogs) {
            int count = hatebuSearch.search(weblog.getPermalink());
            weblog.setHatebuCount(count);
        }
        event.setWeblogList(weblogs);
        return event;
    }

この結果、WeblogクラスのオブジェクトもDWRでやりとりをするようになるので、Serializableをimplementsします。

(Weblog.java)

public class Weblog implements Serializable {
   （略)

Eventクラスのオブジェクトが持つ、WeblogクラスもDWRによってコンバートしてもらうために、dwr.xmlにコンバーターの設定を行います。

(dwr.xml)

    (略)
    <convert converter="bean" match="jp.tkrb.event.beans.Community" />
    <convert converter="bean" match="jp.tkrb.event.beans.Event" />
    <convert converter="bean" match="jp.tkrb.event.beans.Weblog" />
    (略)

ここまでで、イベントの詳細情報をgetEven メソッドで検索したときに、Eventが持つWeblogに、Event名に関係したブログの情報とはてブ数が入ることになります。これをクライアント側のJavaScriptで表示させます。先に、表示するための領域として、top.jspのイベント表示フローティングウィンドウのテンプレートに、idがblogListというdiv要素を追加します。

(top.jsp のフローティングウィンドウのテンプレート)

        <div id="event_detail" style="width:280px;height:120px;">
            <table>
                <tr>
                    <td>ID</td>
                    <td><span id="id"></span></td>
                </tr>
                <tr>
                    <td>コミュニティ名</td>
                    <td><span id="community.name"></span></td>
                </tr>
                <tr>
                    <td>イベント名</td>
                    <td><span id="name"></span></td>
                </tr>
                <tr>
                    <td>開始日時</td>
                    <td><span id="startDate"></span></td>
                </tr>
                <tr>
                    <td>終了日時</td>
                    <td><span id="endDate"></span></td>
                </tr>
            </table>
            <div id="blogList" />
            </ul>
        </div>

次に、実際に表示させるために、top.jspのopenEventDetail関数を次のように変更します。

(top.jspのopenEventDetail関数)

         function openEventDetail(id) {
            EventBean.getEvent(id, function(data) {
                dwr.util.setValue("id", data.id);
                dwr.util.setValue("community.name", data.community.name);
                dwr.util.setValue("name", data.name);
                dwr.util.setValue("startDate", dateFormat.format(data.startDate));
                dwr.util.setValue("endDate", dateFormat.format(data.endDate));

                if (data.weblogList.length > 0) {
                    var blogListStr = "<ul>";
                    for (var i = 0; i < data.weblogList.length; i++) { 
                       var weblog = data.weblogList[i];
                       blogListStr += '<li><a href="'+weblog.permalink+'">'+weblog.title+'</a>：はてブ数 '+weblog.hatebuCount+'</li>';
                    }
                    blogListStr += "</ul>";
                    $("blogList").innerHTML = blogListStr;
                } else {
                    $("blogList").innerHTML = "";
                }
                win.showCenter();
            });
         }

DWR経由で、EventBeanのgetEventを呼び出した結果、Eventをあらわすdata変数の中に、weblogListの長さが0以上であれば、ループをまわして、各Weblogオブジェクトが持っている情報を箇条書きで表示します。「$("blogList")」は、prototype.jsの関数で、idがblogListのHTML要素を取得するための関数です。

ここまでで、題材のアプリケーションとサーバーサイドマッシュアップの統合の実装は完了です。DWRでの通信やサーバサイドでの処理は以下のような構成になっています。

(全体の構成)

ここまでの記事で、Ajaxを使った開発やサーバサイドでのマッシュアップを行う際の構成など一連の流れについて、一例をご理解いただけたかと思います。