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

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

Borderレイアウト

　Borderレイアウトは図2のように、ペインの位置を上下左右などで指定して配置するタイプのレイアウトです（サンプルはhttp://localhost/index/borderで表示されます）。

図2：Borderレイアウト

　このレイアウトで使うペインContentPaneはZend_DojoビューヘルパのメソッドcontentPaneで作成することができます。

［リスト2］Borderレイアウトのサンプル（border.phtml）

...

//(1)インスタンスの作成
$border = $this->borderContainer();
$border->captureStart('border',
   array(),
   array('style' => 'width: 400px; height: 200px;',)
);

//(2) 1つ目のペインの追加
$this->contentPane()->captureStart('border1',
   array('region'=>'left'));
echo 'data1';
echo $this->contentPane()->captureEnd('border1');

...

//(3) 全体の出力
echo $border->captureEnd('border');

...

　Borderレイアウトでは、ContentPaneクラスのペインを利用します（実はAccordionレイアウト以外のレイアウトではContentPaneを使います）。このリスト2の（2）でペインの作成を行っていますが、ここでDijitパラメータとしてこのペインをどこに配置するかを指定しています。

　ContentPaneが利用するDijitパラメータは「region」で、ここでペインを配置する位置をtop、bottom、left、center、rightのいずれかで指定します。

Stackレイアウト

　Stackレイアウトはすべてのペインを重ねて表示するレイアウトです。Stackレイアウトが他のレイアウトと違う点として、重なっているペインを切り替えるための手段が標準ではHTML上のオブジェクトとして準備されないことがあります。つまり、Stackレイアウトを利用する場合には、JavaScriptを利用してペインの切り替えを行う必要があります。

　図3の例では、ボタンを利用してペインの切り替えを行うようにしています（サンプルはhttp://localhost/index/stackで表示されます）。

図3：Stackレイアウト

　StackレイアウトのインスタンスはZend_DojoビューヘルパのstackContainerメソッドで作成します。

［リスト3］Stackレイアウトのサンプル（stack.phtml）

...

//(1)インスタンスの作成
$stack = $this->stackContainer();
$stack->captureStart('stack',
   array(),
   array('style' => 'width: 400px; height: 200px;',)
);

//(2) パネルの追加
$this->contentPane()->captureStart('stack1',
   array());
echo 'data1';
echo $this->contentPane()->captureEnd('stack1');

...

//(3) 全体の出力
echo $stack->captureEnd('stack');

//(4) ペインを切り替えるためのボタン
echo $this->button('prev', '前',
   array('onClick' => 'dijit.byId("stack").back()'));
echo $this->button('next', '次',
   array('onClick' => 'dijit.byId("stack").forward()'));

...

　リスト3の（1）（2）を見て分かるとおり、StackレイアウトへのDijitオプションは利用しません。また、ペインを切り替えるためにはStackレイアウトのJavaScriptのbackメソッドとforwardメソッドを呼び出す必要があるのですが、（4）でその切り替えのためのボタンを設置しています。

Tabレイアウト

　Tabレイアウトはペインを重ねて配置し、表示するペインをタブで切り替えられるようにしてあるレイアウトです（サンプルはhttp://localhost/index/tabで表示されます）。

図4：Tabレイアウト

　StackレイアウトのインスタンスはZend_DojoビューヘルパのtabContainerメソッドで作成します。

［リスト4］Tabレイアウトのサンプル（tab.phtml）

...

//(1)インスタンスの作成
$tab = $this->tabContainer();
$tab->captureStart('tab',
   array(),
   array('style' => 'width: 400px; height: 200px;',)
);

//(2) ペインの追加
$this->contentPane()->captureStart('tab1',
   array('title' => 'Tab1'));
echo 'data1';
echo $this->contentPane()->captureEnd('tab1');

...

//(3) 全体の出力
echo $tab->captureEnd('tab');

...

　それぞれのペインのタイトルはDijitパラメータのtitleで指定します。