Zend Framework入門

Zend Framework入門（17）：
ウィジェットDijitをPHPアプリで利用する - Zend_Dojo（中編）-

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

山田祥寛[監修] / WINGSプロジェクト　風田伸之[著]

更新日: 2009/09/07
公開日: 2009/03/11

ポスト

ダウンロードサンプルファイル (4.7 KB)

ビュースクリプトでの出力

　次に、これらを出力するためのビュースクリプトについて見ていきます。ここでは、Zend_Dojoに関係するヘッダを出力、Dijitの作成、Dijitの出力を行っています。では、順番に見ていきましょう。

Zend_Dojo関係のヘッダの出力

　まず、ヘッダを出力するための記述を見ていきます。これはヘッダ内でZend_Dojoビューヘルパ（$this->dojo()）の内容を出力することで行います。

［リスト9］ヘッダの出力（ビュースクリプト）

<html>
<head>
 <title>Zend Dojo with Dijit Test</title>
 <!-- Dojo Toolkitの読み込み  -->
 <?php echo $this->dojo() ?>
</head>
...

　リスト9での記述は短いですが、そこから出力される内容は、リスト10のように長くなります。

［リスト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の出力を行っています。

［リスト11］Zend_Dojoの作成と出力（ビュースクリプト）

<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の各レイアウト・各フォーム部品の紹介を行う予定です。

修正履歴: 2009/09/04 22:34 サンプルファイルのファイル構成に誤りがあったため，修正しました(sample/codezine/zendapps/view→sample/codezine/zendapps/views)．

この記事は参考になりましたか？

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。

印刷用を表示

ポスト

Zend Framework入門連載記事一覧: テスト記述の詳細 - Zend_Testのメソッド -

MVCフレームワークで単体テストを実施する - Zend_Test -

PHPアプリでメッセージキューサーバを活用する - Zend_Queue -

もっと読む

この記事の著者: 山田祥寛（ヤマダヨシヒロ）

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編」他、著書多数。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事; WINGSプロジェクト　風田伸之（カゼタノブユキ）

＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事