Dojo ToolkitとZend_Dojo
最初に、Dojo Toolkitを使えるように設定し、さらにZend_Dojoを利用した例を見てみることにします。
Dojo Toolkitの設置
それではまず、Dojo Toolkitに添付されているDojo Toolkitのファイルを利用できるように設定します。これらのファイルはJavaScriptの格納されたファイルから構成されていて、Zend Frameworkのextrasの下のdojoフォルダに置かれています。
これらのJavaScriptは、最終的にはクライアントのブラウザから読み込まれる必要があるため、ウェブ上からアクセス可能な位置に置いておく必要があります。今回は、ウェブのルートディレクトリの下にJavaScriptを置いておくためのフォルダ「js」を作成し、ここ（つまり「C:\codezine\htdocs\js」）の下にdojoフォルダを置くことにします。
今回利用するファイルの配置は次のようになります。
C:\
codezine/
htdocs/
.htaccess
index.php フロントコントローラ
js/
dojo/
... Dojo Toolkit関係のファイル
zendapps/
controls/
IndexController.php 標準で使われるアクションコントローラ
ErrorController.php エラー処理の際に使われるアクションコントローラ
models/
views/
scripts/
index/
dojo.phtml Zend_Dojoを使わない例で利用するビュースクリプト
index.phtml ビュースクリプト
error/
error.phtml エラー処理の際に使われるビュースクリプト
なお、添付のサンプルからはdojoフォルダは削除してあります。サンプルを利用される場合には上にあるとおり、Dojo Toolkitのextrasフォルダからdojoフォルダをコピーしてください。
実は今回のサンプルの一部はZend Frameworkに付属のDojo Toolkitをローカルで利用した場合、Internet Explorerでの表示に問題が発生することがありました。
もしZend Framework添付のDojo Toolkitを利用して問題が発生する場合でも、最新のDojo Toolkit（執筆の時点では1.2.1）を別途ダウンロードするなり、後述のCDNを利用する方法するとうまくいく場合がありますので、ぜひお試しください。
次に、まずZend_DojoなしでDojo Toolkitを利用する例を見てみましょう。
Dojo Toolkitの利用
Dojo Toolkitを利用するための記述は、大きくページのヘッダの部分（headタグで囲まれた部分）に行うものと、ページの本文（bodyタグで囲まれた部分）のところに行うものとに分かれます。ヘッダにはまずDojo Toolkitの読み込みを宣言した後、Dojo Toolkitに関係するJavaScriptの記述を行います。
ページの本文には、Dojo Toolkitで操作する部品の記述を行います。Dojo Toolkitで操作したい部品を指定する方法にはIDやセレクタ構文を利用する方法と、独自の属性を利用して指定する方法と2通りありますが、今回はIDやセレクタ構文で指定する方法を利用することにします。
ここで、簡単な例を見てみましょう（リスト2）。
<html>
<head>
<title>Dojo Test</title>
<!-- (1)Dojo Toolkitの読み込み -->
<script type="text/javascript"
src="/js/dojo/dojo/dojo.js"
djConfig="isDebug:true"></script>
<script type="text/javascript">
var init = function() {
<!-- (2)ボタンの設定と関連づけ -->
var button = dojo.byId("button");
dojo.connect(button, "onclick", function() {
var name = dojo.byId("name");
alert("こんにちは、" + name.value + "さん!");
});
};
<!-- (3)初期化関数の登録 -->
dojo.addOnLoad(init);
</script>
</head>
<body>
<h1>Dojo Test</h1>
<p>
名前:<input type="text" id="name">
<!-- (4)Dojoで操作する部品 -->
<input type="button" id="button" value="こんにちは!">
</p>
</body>
この例ではボタンを押すとメッセージボックスを表示するようになっています。順を追って見ていくと、リスト2の（1）で、Dojo Toolkitの読み込みと、パラメータの受け渡しを行っています。ここではデバッグ機能を有効にする「isDebug:true」を指定しています。次に（2）で本文にあるボタンが押された時の動作の設定を行う関数の定義を行っています。まずdojo.byIDメソッドでボタンをIdで検索しています。次に、dojo.connectメソッドでこのボタンがクリックされた際（onClick）の動作を与えています。（3）でdojo.addOnLoadメソッドを利用して関数initがページがロードされた際に呼び出されるよう登録しています。そして、対象となるボタンは（4）で設定されています。
これを表示すると図1のようになります。
なお、図1の下の方に表示されている枠はデバッグ出力用の枠で、リスト2の（1）で初期化のパラメータ「djConfig="isDebug:true"」を渡したために表示されているものです。この例では利用していませんが、Dojo Toolkitのconsole.logメソッドを利用することで、ここにデバッグ時用のメッセージを表示することができます。
ここで行っている動作は非常に単純で、素のJavaScriptで書いてもそれ程大変ではないと思われる方もいるかもしれません。しかし、実際にはページの描画が一段落してページ内の要素の操作を行なって良いタイミングや、ページ内の要素を指定する方法などはブラウザごとに挙動か微妙に異なります。そこの差をDojo Toolkitのdojo.byIdやdojo.addOnLoadが吸収してくれているわけです。
次に、この例をZend_Dojoを利用して書く方法について説明します。
Zend_Dojoの利用
先程のリスト2ではZend_Dojoの（正確にはZend Framework）機能を利用せず、Dojo Toolkitに必要な記述はすべて直接行いました。これをZend_Dojoを利用すると、次のリスト3とリスト4のようになります。リスト3はアクションコントローラ内での記述、リスト4はビュースクリプトでの記述です。
...
class IndexController extends Zend_Controller_Action
{
public function init()
{
$view = $this->view;
//Zend_Dojoのビューヘルパを有効にする (1)
Zend_Dojo::enableView($view);
...
//Zend_Dojoを設定する (2)
$dojo = $view->dojo();
$dojo->setLocalPath('/js/dojo/dojo/dojo.js');
$dojo->setDjConfigOption('isDebug', true);
...
}
アクションコントローラでは、Zend_Dojoを利用するための下準備をします。まず最初にリスト3の（1）でZend_Dojoのビューヘルパを登録し、（2）でそれの設定を行っています。ここの詳細については、また後で説明します。
これをどのように表示するかは、ビュースクリプトに記述します（リスト4）。
<html>
<head>
<title>Zend Dojo Test</title>
<!-- (1)Dojo Toolkitの読み込み -->
<?php echo $this->dojo() ?>
<script type="text/javascript">
var init = function() {
<!-- (2)ボタンの設定と関連づけ -->
var button = dojo.byId("button");
dojo.connect(button, "onclick", function() {
var name = dojo.byId("name");
alert("こんにちは、" + name.value + "さん!");
});
};
<!-- (3)初期化関数の登録 -->
dojo.addOnLoad(init);
</script>
</head>
<body>
<h1>Zend Dojo Test</h1>
<p>
名前:<input type="text" id="name">
<!-- (4)Dojoで操作する部品 -->
<?php echo $this->button('button', 'こんにちは!') ?>
</p>
</body>
</html>
リスト4の（1）で、ヘッダ内にDojo Toolkitの読み込み／設定を行うための出力をします。（2）と（3）は通常のJavaScriptで、リスト2と同じです。（4）はZend_Dojoの機能を利用してボタンを作成しています。
このように、Dojo Toolkitの初期化やDojo Toolkitで操作するウェブフォーム部品の生成などをZend_Dojoで行うことができます。これで、ページのデザインにかかわる基本的な部分については、JavaScriptをあまり意識せず、PHPのみで記述することができます。
この例で利用したのは単純なボタンでしたが、Zend_Dojoには標準のHTMLに準備されていないさまざまな部品（Dijit）を利用したり、フォームが実際に送信される前にチェックしたりするための機能が準備されています。
それでは、Zend_Dojoの各機能について説明していきます。
