Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Zend Framework入門(18):
ウィジェットDijitでビュー開発を効率化しよう - Zend_Dojo(後編)-

Zend Frameworkによる実践的なPHPアプリケーション開発 18

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/04/13 14:00

 本連載では、PHP上で動作するアプリケーションフレームワークであるZend Frameworkについて紹介していきます。今回はZend_Dojoモジュールの後編で、前回から引き続き、Dojo Toolkitが提供するウィジェット(Dijit)をZend Frameworkから使う方法について、具体的な説明を行います。

目次

はじめに

 本連載では、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を利用するための一般的な流れは、次のようになっています。

  1. レイアウトのインスタンスの作成
  2. 中の各ペインの作成、レイアウトへの追加
  3. レイアウトの出力

 それでは、具体的にそれぞれのレイアウトについて見ていきましょう。

Accordionレイアウト

 Accordionレイアウトは、図1のように表示したいペイン以外のペインが上下に折り畳まれているようなレイアウトです(サンプルはhttp://localhost/index/accordionで表示されます)。

図1:Accordionレイアウト
図1:Accordionレイアウト

 Accordionレイアウトを利用するにはZend_DojoビューヘルパのaccordionContainerメソッドとaccordionPaneメソッドを利用します。

[リスト1]Accodionレイアウトのサンプル(accordion.phtml)
...

//(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メソッドで作成することができます。こちらのペインもレイアウトと同様に、captureStartcaptureEndの対で囲われた領域で、ペインの内容の描画を行っています。最後のcaptureEndの返り値を出力していますが、これはこのペイン自体をHTMLとして出力するためです。この出力はレイアウトのcaptureStartcaptureEndに挟まれているので、レイアウトの内容になります。

 最後に(3)でレイアウトのcatpureEndを呼び出し、その返り値を出力しています。この出力が追加したペインを含む、レイアウト全体の出力となっています。

 なお、レイアウト関係のcaptureStartcatpureEndの引数は共通で、次の形式で呼び出します。

レイアウトのcaptureStartとcaptureEnd
メソッド 引数 説明
captureStart $id, $params, $attribs $idはこのオブジェクトのID(他のオブジェクトと同じであってはならない)、$paramsはDijitで使うパラメータの配列、$attribsはそれ以外のHTMLタグの属性の配列
captureEnd $id $idは出力の横取りをやめるオブジェクトのID、返り値は捉えられた内容をHTMLに変換したもの

 これらのうち、パラメータ($params)については、それぞれのレイアウトで説明します。accordionレイアウトで利用できるパラメータは次のとおりです。

Accordionレイアウトで使うDijitパラメータ
オブジェクト パラメータ名 説明
AccordionContainer duration ペインの切り替えにかかる時間
AccordionPane title ペインのタイトル

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

  • WINGSプロジェクト 風田 伸之(カゼタ ノブユキ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

バックナンバー

連載:Zend Framework入門

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5