前回までの作業によって，ブログアプリケーションを実行環境で動作させるところまで進めることができました。今回から2回に渡って，画面設計とバリデーション定義を行いアプリケーションを最終形に近づけていきます。具体的には，各画面の入力項目や表示項目を検討し，その結果をHTMLテンプレートに反映します。さらに，入力値の簡単なバリデーションを行い，その結果によってページフローが分岐するようにフロー定義ファイルの内容を変更します。これらの作業の目的は，画面の項目の洗い出しとページフローの見直しです。
Piece_Unity_Component_Flexy 1.0.0から1.1.0へのアップグレード
今回からはPiece_Unity_Component_Flexy 1.1.0の機能を使いますので，作業を始める前にアップグレードを行いましょう。
Piece_Unity_Component_Flexyのアップグレード
> pear.bat upgrade piece/piece_unity_component_flexy ... > pear.bat list -a INSTALLED PACKAGES, CHANNEL __URI: ================================== (no packages installed) INSTALLED PACKAGES, CHANNEL PEAR.PHP.NET: ========================================= PACKAGE VERSION STATE Archive_Tar 1.3.2 stable Cache_Lite 1.7.2 stable Console_Getopt 1.2.3 stable HTML_Template_Flexy 1.2.5 stable Net_URL 1.0.15 stable PEAR 1.6.2 stable Structures_Graph 1.0.2 stable INSTALLED PACKAGES, CHANNEL PEAR.PIECE-FRAMEWORK.COM: ===================================================== PACKAGE VERSION STATE Piece_Examples_Basics 1.0.0 stable Piece_Flow 1.13.0 stable Piece_Right 1.7.0 stable Piece_Unity 1.1.0 stable Piece_Unity_Component_Authentication 0.13.0 beta Piece_Unity_Component_Flexy 1.1.0 stable Piece_Unity_Component_NullByteAttackPreventation 1.0.0 stable Stagehand_FSM 1.9.0 stable INSTALLED PACKAGES, CHANNEL PECL.PHP.NET: ========================================= (no packages installed)
では，早速新規エントリー入力フローから手を付けていきましょう。
入力項目の検討とHTMLテンプレートの変更－新規エントリー入力画面
このフローは新規エントリー入力画面と新規エントリー入力確認画面のふたつを持っています。新規エントリー入力画面は，ブログに新規エントリーを投稿する際に使われる画面となります。今回は，ブログのエントリーとして最低限必要な項目と思われる「タイトル」と「内容」を準備することにします。新規エントリー入力画面のHTMLテンプレートは下記のようになります。
/path/to/pieceblog/web/webapp/templates/Entry/New.html
<h4 class="date-header">New</h4>
<form name="New" id="New">
<input type="hidden" name="{__flowExecutionTicketKey}" value="{__flowExecutionTicket}" id="flowExecutionTicket" />
<p>
Title: <input type="text" name="title" id="title" />
</p>
<p>
Content: <textarea name="content" id="content"></textarea>
</p>
<p>
<input type="submit" name="{__eventNameKey}_DisplayNewConfirmFromDisplayNew" value="Create" />
</p>
</form>
先述のとおり，フロー定義に基づいた動作を行うエントリポイントに対しては，実行中のフローを特定するための情報であるフロー実行チケットとイベントを与える必要があります。上記フォームの場合は，hidden要素にフロー実行チケット，submit要素のname属性値にイベントを埋め込むことで対応しています。Piece_Unityの実行環境にイベントを与える方法はふたつあります。ひとつは，リクエストパラメータの名称にイベント名のキー，リクエストパラメータの値にイベント名を設定する方法です。もうひとつは，リクエストパラメータの名称に「イベント名のキー＋"_"（アンダースコア）＋イベント名」を設定する方法です。前者は，エントリポイントへのリンクに，後者はフォームに使われます。今回はフォームなので，{__eventNameKey}_DisplayNewConfirmFromDisplayNewをsubmit要素のname属性値として設定しています。
また，上記フォームには，__flowExecutionTicketKey, __flowExecutionTicket, __eventNameKeyという3種類のテンプレート変数が使われています。これらはビルトインビューエレメントと呼ばれる，Piece_Unityの実行環境が自動的に設定するテンプレート変数です。
ビルトインビューエレメント
| 名称 | 値 |
|---|---|
| __flowExecutionTicketKey | フロー実行チケットとして認識されるリクエストパラメータの名称 |
| __flowExecutionTicket | フロー実行チケット |
| __eventNameKey | イベント名として認識されるリクエストパラメータの名称 |
ビルトインビューエレメントは上記の他にも多数用意されています。詳細は，Piece_Unityユーザーズマニュアルのビューエレメントの項を参照ください。
さて，上記の準備が完了したらブラウザを起動しエントリポイントにアクセスしてみましょう。新規エントリー入力画面のCreateボタンをクリックすると，今までどおり新規エントリー入力確認画面に遷移するはずです。
新規エントリー入力画面
この画面はこれで完了といきたいところですが，まだ不完全な部分が残っています。下記はブラウザに表示されたHTMLのソースからform要素部分を抜粋したものです。
新規エントリー入力画面のHTMLソース
...
<form name="New" id="New"> <input type="hidden" name="_flowExecutionTicket" value="9ad59006046cf7ef42281c74ffe9a1e9d3148a38" id="flowExecutionTicket" />
<p>
Title: <input type="text" name="title" id="title" /> </p>
<p>
Content: <textarea name="content" id="content"></textarea> </p>
<p>
<input type="submit" name="_event_DisplayNewConfirmFromDisplayNew" value="Create" />
</p>
</form>
...
見てのとおり，form要素の必須属性であるactionが見あたりません。HTMLテンプレートに直接記述することも可能ですが，今回レンダラとして使われているテンプレートエンジンHTML_Template_Flexyでは，属性をPHPコードから設定することができるので，アクションクラスを使って設定してみましょう。
