Zend_Form + TwitterBootstrap + Smarty のフォームを作ってみる

最近、すっかり更新頻度が下がっているので、
たまには気合入れてみます。

Zend_FormのviewヘルパーとTwitterBootstrapのフォームのマークアップがけっこう違うので、
取り込もうとするとあれこれする必要があります。
過去作ったやつのソースなので、そのままでは動かないと思いますが、自分用も含めお役に立てれば幸いです。

ちなみにZendFrameworkは1系です。
今更がっつり書く内容でもないのかもしれませんが・・まだ現役なので(汗)

今回はこのTwitterBootstrapのマークアップの出力になるようにZend_Form周りを作ります。
http://twitter.github.io/bootstrap/base-css.html#forms

簡単なトピックス投稿フォームです。

ページャー付きの一覧リストから、新規投稿、編集、削除があって
トピックスはタイトルと本文、送信ボタン
そして確認画面と保存。

こんな流れを想定します。

完成イメージ
完成イメージ

フォームのグループ化を使い、フォームタイトルを出しています。
グループタイトルなので見出しを分けたフォームも可能な設計をします。

Zendコントローラーはだいたいこんな感じ。
継承先のCommon_Controller_Actionは、アプリのいろいろ定義してあるファイルと想定します。

ここは記事の一覧を出力。
ページャーのアダプターにZend_Paginator_Adapter_DbTableSelectを使います。
このアダプタの種類はArrayDbSelectDbTableSelectIteratorNullと複数あるので間違えないように。
特にDbSelectDbTableSelectはうっかり間違えやすい。

http://framework.zend.com/manual/1.12/ja/zend.paginator.usage.html

僕の場合は、新規も編集も同じfunctionへ飛ばします。
引数にZend_Db_Rowを持っているかどうかだけの判別です。

削除部分に関しては手抜きですが、
$this->_dbInfo->select()を使わずともfind()でも充分です。
元ソースは関連データなどの削除もしたかったので、select()を使いました

続いてフォーム部分。
こちらも継承先のCommon_Form_Registration
フォーム全体のもろもろを設定してある想定です。

グループ化を手抜きでループしちゃっていますが、
見出しを分けたいときは、別々にしましょう。

こっからが今回のキモです。
さきほどのもろもろを入れた部分。

フォームはだいたい複数設置するパターンが多いのでコアを1つにまとめています。
確認画面用のデコレーターの設定等

入力内容はセッション保存してます。

グループをmainと指定しちゃっていますが、
複数グループを作ったときは、それぞれ取得できるように二重ループにしましょう。

エラー用デコレーター

2013-09-25追記
入力エラーが起きたときに要素を赤くします。

一覧リスト

index.tpl

info_confirm
削除ボタンとかはTwitterBootstrapのconfirmモーダルウィンドウを使って確認アラートを表示させています。

ページャー

スタイルシートのvisible-phoneを使って、PC用と前後ページ送りしかないスマホ用の2パターン作っています。

scripts/pagination.tpl

scripts/form.tpl

zend_form_input_error
入力エラーサンプル
TwitterBootstrapのエラー

scripts/confirm.tpl

zend_form_confirm

えーっと・・これで
一通りの説明ができたのかな。。

話が長すぎて、1回の記事では無理があったかも(汗)

でも頑張った俺。
質問などあれば追記していきまふ。

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL