SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Zend Framework入門

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

Borderレイアウト

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

図2: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レイアウト
図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レイアウト
図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で指定します。

次のページ
Dijitウェブフォーム要素

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
Zend Framework入門連載記事一覧

もっと読む

この記事の著者

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、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本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

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

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

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3763 2009/04/13 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング