CodeZine(コードジン)

特集ページ一覧

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

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

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

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

 次に、これらを出力するためのビュースクリプトについて見ていきます。ここでは、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を利用するための一般的な流れは、次のようになっています:

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

 これはリスト11の(2)~(6)で行っており、(2)ではレイアウトのインスタンスの作成を、(3)~(5)でペインの作成と中身の作成を、(6)でレイアウトの出力を行っています。

おわりに

 今回はDojo Toolkitの高機能ウェブウィジェットDijitをZend_Frameworkから使う方法について説明しました。カスタムウェブフォーム要素やレイアウトを少し活用するだけで、随分と見栄えのするページを作成することができると思います。次回は、Zend_Dojoの各レイアウト・各フォーム部品の紹介を行う予定です。



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

修正履歴

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

バックナンバー

連載:Zend Framework入門

もっと読む

著者プロフィール

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

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

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

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

あなたにオススメ

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