PetStoreはDojoでいっぱい
「Java PetStore 2.0ea1のインストール」によって動作を開始したJava PetStore。画像のエフェクトの種類が多く，触っていてなかなか面白い。どこでAjaxが使われているのか，さくっと触っただけではよくわからないが，Webブラウザ上でスクリプトが盛り沢山なのだけは明確にわかる。あまりスクリプトを書いたことのない僕としては，なかなか手ごわそうだ。
さて，さっそくコードを追っていきたいのだが，まず考えることといえば，どのファイルから見ていけばいいのか，ということだ。Webアプリケーションなんだから最初はindex.htmlだろうな，と勝手な推測は見事に的中。petstore/Web Pages/index.htmlファイルが，PetStore Demoを説明したページのファイルだった。
説明ページには，確か「Enter the Store」というリンクがあった。探してみると，以下のようになっていた。
<h2><a href=”/petstore/faces/index.jsp”>Enter the Store</a></h2>
なるほど，index.jspがPetStoreの本当の入り口のようだ。おもむろにpetstore/Web Pages/index.jspを見てみると，<body>タグまでは普通のHTMLだが，さっそく<script>タグが登場する。
<jsp:include page=”banner.jsp” />
<script>
dojo.require(“dojo.widget.FisheyeList”);
function browse(category) {
window.location.href=”/petstore/faces/catalog.jsp?catid=” + category;
}
</script>
dojoというオブジェクトのrequireメソッドを呼んでいる。dojoって聞いたことがある。なんだっけ？
Dojoは，Ajax時代のインタラクティブなWebアプリケーションを実現するためのJavaScriptライブラリである。豊富なWidgetの提供が特徴であり，Sunなどの企業がスポンサーとなっているため，今後の発展も期待できる注目すべきライブラリだ。と，完全に知ったかぶりをしてみたが，なるほど，PetStoreはDojoを使っているのか。
JavaScriptでは，大きなライブラリであれば，jsファイルにメソッド群がまとめられて，<script>タグのsrc属性を使ってjsファイルを読み込まれているのがセオリー。しかし，index.jspファイルには，それが見当たらない。気になるのが，上記のコードでbanner.jspファイルをインクルードしている点。もしや，banner.jspがくせ者なのか。
またも狙いは的中し，petstore/Web Pages/banner.jspファイルで，dojo.jsファイルを読み込んでいた。
<script type=”text/javascript” src=”/petstore/dojo.js”></script>
banner.jspファイル内では，バナーにPetStoreに関するRSSを表示するためのrss.jsファイルも読み込んでいる。banner.jspファイルでは，RSSの表示に関する処理をdojoオブジェクト読み込み時に実行することを割り当てるスクリプトが書かれている。RSSの表示に関する部分はまだよく見ていないので後回し。
index.jspファイルに戻ると，dojoというキーワードがあちこちにあることがわかる。<script>タグ内では，”dojo.widget.FisheyeList”というウィジェットを要求しているようだ。そして，
<div class=”dojo-FisheyeListItem” onClick=”browse(‘Dogs’);”
dojo:iconsrc=”/petstore/images/dogs_icon.gif”>
</div>
<div class=”dojo-FisheyeListItem” onClick=”browse(‘Cats’);”
dojo:iconsrc=”/petstore/images/cats_icon.gif”>
</div>
<div class=”dojo-FisheyeListItem” onClick=”browse(‘Birds’);”
dojo:iconsrc=”/petstore/images/birds_icon.gif”>
</div>
<div class=”dojo-FisheyeListItem” onClick=”browse(‘Fish’);”
dojo:iconsrc=”/petstore/images/fish_icon.gif”>
</div>
<div class=”dojo-FisheyeListItem” onClick=”browse(‘Reptiles’);”
dojo:iconsrc=”/petstore/images/reptiles_icon.gif”>
</div>
という箇所を見ると，どうもトップページの左側にある，まるでMacのDockのようなエフェクトの，ペットの種類を選ぶ部分でDojoが使われているようだ。
index.jspファイル内の<script>タグの中を見ると，browseメソッドの中でcatalog.jspファイルを呼び出している。index.jspページの中の具体的なペットの種類をWebブラウザ上でクリックしたときに呼び出されるメソッドがbrowse()メソッドだ。つまり，catalog.jspファイルは，具体的なペットを選ぶためのカタログページを表示するjspファイルだ。
petstore/Web Pages/catalog.jspファイルを開くと，このファイルでもbanner.jspファイルをインクルードしているので，必然的にdojo.jsファイルを読み込むことになる。dojo.jsファイル以外にも，scroller.jsファイルやaccordion.jsファイル，それにcatalog.jsファイルも読み込んでいることがわかる。
<script type=”text/javascript” src=”scroller.js”></script>
<link rel=”stylesheet” type=”text/css” href=”scroller.css”></link>
<script type=”text/javascript” src=”accordion.js”></script>
<link rel=”stylesheet” type=”text/css” href=”accordion.css”></link>
<script type=”text/javascript” src=”catalog.js”></script>
catalog.jspファイルの中では，dojoというキーワードは一つしか出てこない。しかし，読み込んでいる３つのjsファイルの中では，dojoというキーワードをいくつも発見することができる。しかし，widgetという単語ではなく，ioやbind，publishなどといった単語が見受けられるため，イベント関連やサーバとの通信でDojoが使われているようだ。
他のjspファイルではdojoという単語は見受けられないが，jsファイルを見るとdojoという単語を多くの箇所で見つけることができる。
PetStoreの動作にDojoが根幹をなしていることは確かなようだ。
- Posted:
- 07.18.2006
- Category:
- dojo
