はじめに
本連載では、PHP上で動作するアプリケーションフレームワークであるZend Frameworkについて紹介していきます。今回はZend_Dojoモジュールの後編で、前回から引き続き、Dojo Toolkitが提供するウィジェット(Dijit)をZend Frameworkから使う方法についての説明を行います。前回はDijitの基本的な使い方の説明でしたが、今回は具体的に各Dijitを使う方法について説明していきます。
今回紹介するのは、ページ内で描画される内容の配置や切り替えを行うための仕組みであるDijitレイアウトと、ウェブフォームの部品として使えるDijitウェブフォームです。Dijitレイアウトに関するDijit4種類、ウェブフォームに関するDijit18種類について説明します。また、このDijitレイアウトとDijitウェブフォームを組み合わせて使うには、ちょっとしたコツが必要となります。これについても今回の記事で説明します。
対象読者
PHPの基本構文は一通り理解しているが、フレームワークを利用したことはないという方を対象としています。
必要な環境
Zend FrameworkはPHP 5.1.4以降とWebサーバがインストールされている環境で利用可能です。本稿ではWebサーバとしてApache 2.2を、OSにWindows XPを採用し、アプリケーションを作成していきます。
以下に、今回アプリケーション作成/動作確認に用いた環境を示します(インストールにあたっては最新安定版の使用を推奨します)。各項目の詳細なインストール手順は、「サーバサイド技術の学び舎 - WINGS」より「サーバサイド環境構築設定手順」を参照ください。
- Windows XP SP2
- PHP 5.2.9-1
- Apache 2.2.11
LinuxやFreeBSDなどUNIX系OSをお使いの方もコマンドはほぼ一緒ですので、パスなどは適宜読み替えてください。
Dijitレイアウト
最初に、ページ内での部品の配置を行うためのDijitを4種類紹介します。これらのレイアウト用のDijitはただ単純に部品の位置を指定するものだけでなく、ユーザーの入力によって表示する内容を変えるタイプのものも準備されています。レイアウト用のDijitは、ページ内で描画される内容をペインと呼ばれる単位で管理します。このペインを単位として、表示している内容を切り替えたり、位置を指定して表示したりします。
Zend_Dojoで生成できるページ内のレイアウトに関するDijitは5種類ありますが、このうち、Accordionレイアウト、Borderレイアウト、Stackレイアウト、Tabレイアウトの4つを紹介します。なお、ここで紹介しないSplitは互換性のために残されているレイアウトで、代わりにBorderレイアウトを利用することが奨励されています。
レイアウト関係のDijitを利用するための一般的な流れは、次のようになっています。
- レイアウトのインスタンスの作成
- 中の各ペインの作成、レイアウトへの追加
- レイアウトの出力
それでは、具体的にそれぞれのレイアウトについて見ていきましょう。
Accordionレイアウト
Accordionレイアウトは、図1のように表示したいペイン以外のペインが上下に折り畳まれているようなレイアウトです(サンプルはhttp://localhost/index/accordionで表示されます)。
Accordionレイアウトを利用するにはZend_DojoビューヘルパのaccordionContainer
メソッドとaccordionPane
メソッドを利用します。
... //(1)インスタンスの作成 $accordion = $this->accordionContainer(); $accordion->captureStart('accordion', array('duration' => '500'), array('style' => 'width: 400px; height: 200px;',) ); //(2) ペインの追加 //ペインの内容の描画開始 $this->accordionPane()->captureStart('accordion1', array('title' => 'Accordion1')); echo 'data1'; //ここの echo の出力はペインの内容となる //ペインの内容の描画終了と出力 //ここのechoの出力はレイアウトの内容となる echo $this->accordionPane()->captureEnd('accordion1'); ... //(3) 全体の出力 echo $accordion->captureEnd('accordion'); ...
まず(1)でレイアウトのインスタンスを作成します。インスタンス作成の時点で表示の内容(つまりペイン)ができていれば、この時点で内容を渡してレイアウトを完成させることもできますが、ここでは内容は後から追加するためにレイアウトのcaptureStart
メソッドを利用しています。このcaptureStart
は(3)のcatpureEnd
と対になっていて、ここの間に標準出力に出力されたものはレイアウトの内容として記録されます。
この内容を出力しているのが(2)のペインの追加を行っている部分です。Accordionレイアウトで使うペインはZend_DojoヘルパのaccordionPane
メソッドで作成することができます。こちらのペインもレイアウトと同様に、captureStart
とcaptureEnd
の対で囲われた領域で、ペインの内容の描画を行っています。最後のcaptureEnd
の返り値を出力していますが、これはこのペイン自体をHTMLとして出力するためです。この出力はレイアウトのcaptureStart
とcaptureEnd
に挟まれているので、レイアウトの内容になります。
最後に(3)でレイアウトのcatpureEnd
を呼び出し、その返り値を出力しています。この出力が追加したペインを含む、レイアウト全体の出力となっています。
なお、レイアウト関係のcaptureStart
とcatpureEnd
の引数は共通で、次の形式で呼び出します。
メソッド | 引数 | 説明 |
captureStart | $id, $params, $attribs | $idはこのオブジェクトのID(他のオブジェクトと同じであってはならない)、$paramsはDijitで使うパラメータの配列、$attribsはそれ以外のHTMLタグの属性の配列 |
captureEnd | $id | $idは出力の横取りをやめるオブジェクトのID、返り値は捉えられた内容をHTMLに変換したもの |
これらのうち、パラメータ($params)については、それぞれのレイアウトで説明します。accordionレイアウトで利用できるパラメータは次のとおりです。
オブジェクト | パラメータ名 | 説明 |
AccordionContainer | duration | ペインの切り替えにかかる時間 |
AccordionPane | title | ペインのタイトル |