ビュースクリプトでの出力
次に、これらを出力するためのビュースクリプトについて見ていきます。ここでは、Zend_Dojoに関係するヘッダを出力、Dijitの作成、Dijitの出力を行っています。では、順番に見ていきましょう。
Zend_Dojo関係のヘッダの出力
まず、ヘッダを出力するための記述を見ていきます。これはヘッダ内でZend_Dojoビューヘルパ（$this->dojo()）の内容を出力することで行います。
<html> <head> <title>Zend Dojo with Dijit Test</title> <!-- Dojo Toolkitの読み込み --> <?php echo $this->dojo() ?> </head> ...
リスト9での記述は短いですが、そこから出力される内容は、リスト10のように長くなります。
<html>
<head>
<title>Zend Dojo with Dijit Test</title>
<!-- Dojo Toolkitの読み込み -->
<style type="text/css">
<!--
@import "/~shnsk/dojo/dijit/themes/tundra/tundra.css";//（1）
-->
</style>
<script type="text/javascript">
//<!--
var djConfig = {"isDebug":true,"parseOnLoad":true};//（2）
//-->
</script>
<script type="text/javascript"
src="/~shnsk/dojo/dojo/dojo.js"></script> <--（3）-->
<script type="text/javascript"> <--（4）-->
//<!--
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
//-->
</script>
</head>
...
ここでは（1）テーマの読み込み、（2）Dojo Toolkitの設定（3）Dojo Toolkitの場所の説明、（4）利用する機能の読み込みが行われています。なお、（2）に「"parseOnLoad":true」というDojo Toolkitのオプションが有効になっています。これはDojo Toolkitを宣言的に利用する場合に必要なオプションなのですが、Zend_Dojoが自動的に追加してくれています。
Dijitの作成と出力
次に、Dijitの作成と出力を行います。ここでは利用するテーマの設定、Tabレイアウトの設定と、レイアウト内でのComboBoxの出力を行っています。
<html>
...
<body class="tundra"><!--（1）-->
<h1>Zend Dojo with Dijit Test</h1>
<p>
<?php
$url = $this->url(array('action'=>'datapost'));
//(2) タブの作成と中身追加開始
$tab = $this->tabContainer();
$tab->captureStart('tab',
array(),
array('style' => 'width: 400px; height: 200px;',)
);
//(3) ペインの作成と中身追加開始
$this->contentPane()->captureStart('tab1',
array('title' => 'Tab1'));
//(4) ペインの中身
echo 'data1';
//(5) ペインの中身追加終了と出力
echo $this->contentPane()->captureEnd('tab1');
...
//(6) タブの出力
echo $tab->captureEnd('tab');
?>
</p>
</body>
</html>
リスト11の（1）では、bodyタグで、利用するテーマを指定しています。この設定で、ページ内のDijitオブジェクトがすべて「Tundra」テーマを利用するように設定されます。
次に、Tabレイアウトについて見ていきます。Dijitレイアウトはページ内で描画される内容の配置や切り替えを行うための仕組みです。ページ内で描画される内容はペインと呼ばれる単位で管理され、このペインを切り替えて表示したり、画面内で配置したりすることでページ内のコンテンツのレイアウトを行います。
レイアウト関係のDijitを利用するための一般的な流れは、次のようになっています：
- レイアウトのインスタンスの作成
- 中の各ペインの作成、レイアウトへの追加
- レイアウトの出力
これはリスト11の（2）～（6）で行っており、（2）ではレイアウトのインスタンスの作成を、（3)～（5）でペインの作成と中身の作成を、（6）でレイアウトの出力を行っています。
おわりに
今回はDojo Toolkitの高機能ウェブウィジェットDijitをZend_Frameworkから使う方法について説明しました。カスタムウェブフォーム要素やレイアウトを少し活用するだけで、随分と見栄えのするページを作成することができると思います。次回は、Zend_Dojoの各レイアウト・各フォーム部品の紹介を行う予定です。
