DijitのためのZend_Dojoの設定
まずは、アクションコントローラで行う必要のある処理について説明します。ここでは、Zend_Dojoのビューヘルパを有効にする処理と、有効にしたZend_Dojoの設定を行います。
設定の項目はいくつかありますが、見た目の設定(テーマの設定)、利用したいDijitに関する設定(モジュールの読み込み)、Dijitの利用の方法の設定などを行う必要があります。
Zend_Dojoの設定
まず、Zend_Dojoを有効にするための設定から見ていきます。リスト1に、アクションコントローラでの下準備の例を示しています。
... 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('/dojo/dojo/dojo.js');//(3) $dojo->setDjConfigOption('isDebug', true);//(4) ... } ...
ここまでは前回とほとんど同じです。(1)でZend_DojoのenableView
静的メソッドでZend_Dojoヘルパを有効にした後、(2)でZend_Dojoの具体的な設定を行っています。この例では(3)Dojo Toolkitはサーバにローカルに設置したものを利用し、(4)デバッグ用の出力を行うように設定しています。
次に、どのような追加機能を利用するかの設定について見ていきます。Dojo Toolkitのさまざまな機能はDojo Toolkit本体とは別に、機能ごとの「モジュール」として提供されます。これらのモジュールは「dojo.js」を読み込んだだけでは有効にならず、別途、明示的に読み込む必要があります。Dijitの各機能も、基本的にはモジュールとして提供されるので、読み込むための設定が必要です。ここの設定は「テーマの読み込み」と「機能の読み込み」に分かれます。
テーマの読み込み
まず、テーマの指定について説明します。Dojo Toolkitのオブジェクトは、利用するテーマを切り換えることで見た目を変えることができます。具体的には、テーマに応じたスタイルシートを読み込み、オブジェクトにそのスタイルシートを利用するように指定することで、この機能を実現しています。これらのテーマを利用するには、
- ヘッダで利用するテーマのスタイルシートを読み込むように設定
- HTML中で利用するテーマを指定
という手順を踏むことになります。Dojo Toolkitで標準的に利用できるテーマはテーマモジュールという形で提供されており、Zend_Dojoからは、専用のメソッドを使って読み込む設定を行います。
... class IndexController extends Zend_Controller_Action { public function init() { ... $view = $this->view; ... //テーマの登録(1) $dojo->addStyleSheetModule('dijit.themes.tundra'); //dijitのモジュールの読み込み(2) $dojo->requireModule('dijit.layout.ContentPane'); } ...
この利用したいテーマを読み込むための設定がリスト2の(1)で、DojoビューヘルパのaddStyleSheetModule
メソッドを利用します。この設定を入れておくと、ビュースクリプトでヘッダが出力される際に、リスト3のようにテーマを読み込むための記述が出力されるようになります。
<style type="text/css"> <!-- @import "/~shnsk/dojo/dijit/themes/tundra/tundra.css"; -->
このテーマは通常のスタイルシートですので、HTMLのオブジェクトのclass
属性等で指定することで実際に利用されます。個別のオブジェクトで個別にテーマを指定することも可能ですが、通常はHTMLのbody
タグのclass
属性で利用するテーマを指定します(ここについては後のビュースクリプトのところで説明します)。
Dojo Toolkitには、標準で利用可能なテーマが5つ(a11y、nihilo、noir、soria、tundra)付属しています。なお、図2にあるように、これらのテーマの様子は「dojo/dijit/themes/templateThemeTest.html」で見ることができます。
このうち、「Tundra」が標準で利用されるテーマとなっています。また「a11y」はアクセサビリティの略で、くっきりとしたテーマになっています。
Zend_Dojoビューヘルパで、テーマ関係のメソッドには次のようなものがあります。
メソッド名 | 引数 | 説明 |
addStylesheetModule | $module | 利用したいテーマをモジュール名$moduleで追加する |
getStylesheetModules | (なし) | モジュール名で登録されているテーマのリストを返す |
addStylesheet | $path | 利用したいテーマをテーマのスタイルシートの設置されている場所$pathで指定する |
getStylesheets | (なし) | 設置場所で登録されているテーマのリストを返す |