Dojo,SAStruts,S2JDBC(1)

会社のプロジェクトでは、マスカット(http://maskat.sourceforge.jp/index.php?FrontPage)＋SAStruts＋S2JDBCという組み合わせでWebアプリケーションを構築しております。Seasar2周りのプロダクトは気に入っていて、個人的にも使ってみようかなと思っているのですが、フロントエンドのJavascriptはマスカットではなく、違ったものを使ってみようかなと思いました。（いや、マスカットもいいのですよ。）
前にちょっと調べ物をしていて、DojoかRialtoがいいかな〜と思っていたのを思い出し、dojo×SAStruts×S2JDBCで何か作ってみようかと思い立ったわけです。とはいってもいきなり何かを作り出せるわけでもなく、ここはひとつSAStrutsのチュートリアルから始めようかなと思い立ちました。
http://sastruts.seasar.org/download.htmlからチュートリアルをダウンロードし、eclipseにインポートします。
セットアップしておいた方がいいもの（しなきゃいけないものもありますけど；）

Tomcat(http://tomcat.apache.org/)
Tomcat Launcher(http://eclipse.seasar.org/update/3.2/)
SAStruts Plugin(http://eclipse.seasar.org/update/3.3/)
PropertiesEditor(http://propedit.sourceforge.jp/eclipse/updates/)

あとは、sa-struts-tutorialプロジェクトを右クリックして[Tomcatプロジェクト]-[コンテキスト定義を更新]を実行したらTomcatを起動します。そういえばTomcatの文字コードやセッションを設定しておけば文字化けなどに対応できる（http://sastruts.seasar.org/fileReference.html#server）とのことなので、それを書いておきましょう。Tomcatのserver.xmlですよ。

    <Connector port="8080" protocol="HTTP/1.1" useBodyEncodingForURI="true" URIEncoding="UTF-8"
               connectionTimeout="20000" 
               redirectPort="8443" />

さあここまでは問題ない、問題ないのです。普通SAStruts×S2JDBCのフロントといえばJSPになりますので、チュートリアルの内容の当然JSPです。Dojo×SAStruts×S2JDBCなんてサンプルは見つかりません。最初に躓いたのは、Dojoライブラリの置き場所と、JSPからの指定の仕方でした。まあライブラリの置き方なんて動いたあとも正しいかどうかなんて分からないのですが。

次にJSPからの指定方法ですが、ソースを貼り付けます。DojoのコードはCodezine(http://codezine.jp/)のDojo Grid特集から拝借です(http://codezine.jp/article/detail/3486)

<%@page pageEncoding="UTF-8"%>
<html>
<head>
<title>Dojo Sample</title>
<style type="text/css">
@import "../js/dijit/themes/soria/soria.css";
@import "../js/dojo/resources/dojo.css";
@import "../js/dojox/grid/resources/Grid.css";
@import "../js/dojox/grid/resources/soriaGrid.css";

body {

    margin: 10px;
}
#myDataGrid {
    width: 300px;
    height: 100px;
}
</style>
<script type="text/javascript" src="../js/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit._Calendar");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.DataGrid");

var myDataStore = new dojo.data.ItemFileWriteStore({data: {items: [
    {name: "鈴木一郎", email: "suzuki@ibm.com", group: 3,
        birthDate: 0, photo: "images/photo1.gif"},
    {name: "佐藤花子", email: "satoh@ibm.com", group: 2,
        birthDate: 450457200000, photo: "images/photo2.gif"},
    {name: "田中正夫", email: "tanaka@ibm.com", group: 2,
        birthDate: 646758000000, photo: "images/photo3.gif"},
    {name: "山田民子", email: "yamada@ibm.com", group: 1,
        birthDate: 586882800000, photo: "images/photo4.gif"},
    {name: "加藤三郎", email: "katoh@ibm.com", group: 3,
        birthDate: -575024400000, photo: "images/photo5.gif"}
]}});

var myDataGridStructure = [
    {cells: [
        {name: "名前", field: "name", width: "auto"},
        {name: "メールアドレス", field: "email", width: "auto"}
    ]}
];
</script>
</head>
<body class="soria">
<table dojoType="dojox.grid.DataGrid" id="myDataGrid" store="myDataStore" structure="myDataGridStructure" />
</body></html>

これで何とか表示できました。

今回は表示できただけなので、次回はサーバ処理との連携にチャレンジします。