Prototype window

数あるJavascriptのライブラリの中から、Window表示するためにPrototype window(http://prototype-window.xilinus.com/)というライブラリを使用しています。このライブラリはWindowを表示することにフォーカスを当てたライブラリで非常にシンプルで且つ簡単に使用することができます。非常に有名なPrototype.jsをベースに作られており、リッチなクライアントエフェクト等を提供してくれるScript.aculo.usに影響されて作られています。 動作させるために必要なものは2つのJavascriptの外部ファイル（PrototypeとPrototype windowのファイル）と、CSSファイル（Windowの見た目）のみです。
（動作させるために必要な記述）

<script type="text/javascript" src="/javascripts/prototype.js"> </script>
<script type="text/javascript" src="/javascripts/window.js"> </script>
<link href="/stylesheets/themes/default.css" rel="stylesheet" type="text/css"/>
<link href="themes/alphacube.css" rel="stylesheet" type="text/css"/>

（Windowを表示させるための記述）

win = new Window({className: "alphacube", title: "Sample", width:200, height:150, destroyOnClose: true, recenterAuto:false});
win.getContent().update("<h1>Hello world !!</h1>");
win.showCenter();

上記のコードで簡単にWindowを表示させることができるとおもいます。 もちろん、Safari, Camino, Firefox, IE6, Operaなどの主要なブラウザで問題なく動作します。

フローティングウィンドウのテンプレート

Prototype windowはウィンドウの中身をinnerHTMLで指定する方法、ページをURLで指定する方法等いくつかやり方があるのですが、今回は、ページ内にあるエレメントをウィンドウの中身に指定してエレメントをテンプレート的に使用する方法をとっています。 具体的には、top.jspに記述してあるid=event_detailの要素がテンプレートとなっています。
(詳細情報表示のテンプレートとするtop.jsp内のDIVエレメント)

<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>

ページのロード時にフローティングウィンドウのオブジェクトを作成し、ウィンドウの中身として"event_detail"のエレメントを指定します。
フローティングウィンドウを先に準備しておいて、あとは参照ボタンがクリックされたときにサーバからイベントの詳細情報を取得、それぞれの値をSPANにセットして表示するようにするわけです。

(top.jsp)

var win;
window.onload = function(){
　　win = new Window({className: "alphacube", title:"イベント詳細", maximizable: false, minimizable:false, resizable:false, hideEffect:Element.hide, showEffect:Element.show});
　　win.setContent('event_detail', true, true);
}

ウィンドウの中身を表示する

さて、それではいよいよウィンドウの中身を表示するためのコードを実装しましょう。下のコードは、サーバから値を取得して、それぞれの表示テンプレート内のIDに値をセットしています。値のセットにはDWRのUtilを使用しました。dwr.util.setValueは指定したIDの要素の中身を第二引数の値で置き換えるユーティリティ関数です。
(top.jsp)

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));
　　win.showCenter();
　});
}

(クリックされたときのサーバのレスポンス)

throw 'allowScriptTagRemoting is false.';
//#DWR-INSERT
//#DWR-REPLY
var s0={};s0.id="1";s0.name="Java\u30E6\u30FC\u30B6\u30B0\u30EB\u30FC\u30D7";
dwr.engine._remoteHandleCallback('2','0',{community:s0,endDate:new Date(1196083800259),id:"1",name:"JavaSE
6.0 \u52C9\u5F37\u4F1A",startDate:new Date(1196064000259)});

一覧表示の「参照」をクリックされると、上記のopenEventDetailが呼ばれその結果サーバへ非同期にイベント情報を取得し、その結果ウィンドウに取得内容が表示されることになります。

いかかがだったでしょうか。「Actionクラスに直接ビジネスロジックを実装してはいけない」という指針に基づいてアプリケーションが作成されていれば、Web層が変更されても（今回の場合はStrutsからDWR(+HTML、JavaScript)）業務ロジックをそのまま使い回すことができるのです。