はじめに
本連載では、PHP上で動作するアプリケーションフレームワークであるZend Frameworkについて紹介していきます。今回はZend Framework 1.6から追加されたモジュールの一つであるZend_Dojoの紹介の中編で、高機能ウィジットのDijitをZend Frameworkから利用する方法について説明します。
「Dijit」はDojo Widgitの略で、静的なHTMLだけでは実現できないような「動きのある」部品をいくつか提供しています。Zend_DojoにはこのDijitのうち、レイアウトに関するものとウェブフォームに関するものを作成するための機能が付属しています。今回はZend_DojoからDijitを利用する基本的な方法について説明します。
対象読者
PHPの基本構文は一通り理解しているが、フレームワークを利用したことはないという方を対象としています。
必要な環境
Zend FrameworkはPHP 5.1.4以降とWebサーバがインストールされている環境で利用可能です。本稿ではWebサーバとしてApache 2.2を、OSにWindows XPを採用し、アプリケーションを作成していきます。
以下に、今回アプリケーション作成/動作確認に用いた環境を示します(インストールにあたっては最新安定版の使用を推奨します)。各項目の詳細なインストール手順は、「サーバサイド技術の学び舎 - WINGS」より「サーバサイド環境構築設定手順」を参照ください。
- Windows XP SP2
- PHP 5.2.6
- Apache 2.2.10
LinuxやFreeBSDなどUNIX系OSをお使いの方もコマンドはほぼ一緒ですので、パスなどは適宜読み替えてください。
DijitとZend_Frameworkからの使い方
最初にも述べたとおり、DijitはDojo Toolkitが提供するウェブ部品です。Dijit自体にはさまざまな機能のものが提供されていますが、その中でZend_Dojoから利用できるのはページ内で部品を配置するための「レイアウト機能」と、Dojo Toolkit独自の「フォーム要素」です。図1は、レイアウト機能の「Tabレイアウト」と、フォーム要素の「ComboBox要素」を使った例です。
これらを含め、Zend_Dojoから利用できるレイアウトに関するDijitは4種類、ウェブフォームに関するDijitは18種類あります(正確にはSplitレイアウトもありますが、互換性のために残されているだけなので扱わないことにします)。
Dijitレイアウトはページ内で描画される内容の配置や切り替えを行うための仕組みです。ページ内で描画される内容はペインと呼ばれる単位で管理されます。このペインを切り替えて表示したり、画面内で配置したりするわけです。
クラス名 | 必要なモジュール | 説明 |
Accordion | dijit.layout.accordion | 表示したいペイン以外のペインが上下に折り畳まれているようなレイアウト |
Border | dijit.layout.border | ペインの配置を上下左右などで指定するレイアウト |
Stack | dijit.layout.stack | ペインが重なって配置されていて、JavaScriptで表示したいペインを指定するレイアウト |
Tab | dijit.layout.tab | ペインが重なって配置されていて、タブで表示するペインを切り替えるレイアウト |
Zend_Dojoから利用できるDijitウェブフォーム要素は、Spinnerのように通常のHTMLでは実現できないようなものや、NumberTextBoxのように入力のチェックをしてくれるものなどがあります。また、これらはZend_Formのウェブフォーム要素と互換性のあるように設計されているため、既存のウェブフォームと混ぜて使ったり、置き換えたりすることが可能です。
クラス名 | 必要なモジュール | 説明 |
Button | dijit.form.Button | 通常のHTMLのボタン |
SubmitButton | dijit.form.Button | 送信ボタン |
CheckBox | dijit.form.CheckBox | 選択されている・いないの二つの状態を持つボタン |
RadioButton | dijit.form.CheckBox | 複数の選択肢から排他的に一つを選ぶためのボタン |
Editor | dijit.Editor | リッチなテキストも編集できるテキストエリア |
Textarea | dijit.form.Textarea | 入力された文章によって長さが伸びるテキストエリア |
HorizontalSlider | dijit.form.Slider | 水平スライダー |
VerticalSlider | dijit.form.Slider | 垂直スライダー |
ComboBox | dijit.form.ComboBox | ユーザーからの任意の入力も受け付けるテキスト選択 |
FilteringSelect | dijit.form.FilteringSelect | 与えられた値以外の値はエラーにするテキスト選択 |
TextBox | dijit.form.TextBox | 基本的なテキストボックス |
ValidationTextBox | dijit.form.ValidationTextBox | 入力が与えられた正規表現にマッチするか調べるテキストボックス |
PasswordTextBox | dijit.form.ValidationTextBox | パスワード入力用テキストボックス |
DateTextBox | dijit.form.DateTextBox | 日付入力用のテキストボックス |
TimeTextBox | dijit.form.TimeTextBox | 時間入力用のテキストボックス |
NumberSpinner | dijit.form.NumberSpinner | 数値入力用のテキストボックスで、数値増減用のボタンが付いている |
NumberTextBox | dijit.form.NumberTextBox | 数値入力用のテキストボックス |
CurrencyTextBox | dijit.form.CurrencyTextBox | 金額入力用のテキストボックス |
Zend_DojoからDijitを使えば、見栄えの良いページをあまり面倒な手間をかけずに作成することができます。今回は、図1のサンプルがどのように動作しているかについての説明を通じて、Zend_DojoからDijitをどのように使うかについての基本的な方法と、その動作の仕組みについて見ていきます。
DijitもDojo Toolkitの一部ですので、基本的な使い方はDojo Toolkitの他の機能と同じになります。
- Zend_Dojoビューヘルパを有効にする
- Zend_Dojoの設定を行う
- Zend_Dojoに関係するヘッダを出力
- Dijitを作成(場合によっては(3)より前に行う必要がある:後述)
- Dijitの出力
おさらいとなりますが、Zend_Controller経由でページを描画する際の処理の流れはフロントコントローラ(index.php)→アクションコントローラ(IndexController.php等)→ビュースクリプト(index.phtml等)となっています。このうち(1)と(2)はアクションコントローラで、(3)~(5)はビュースクリプトで処理することになります。
では、まずアクションコントローラで行う処理について見ていきます。