前回までの作業によって，ブログアプリケーションを実行環境で動作させるところまで進めることができました。今回から2回に渡って，画面設計とバリデーション定義を行いアプリケーションを最終形に近づけていきます。具体的には，各画面の入力項目や表示項目を検討し，その結果をHTMLテンプレートに反映します。さらに，入力値の簡単なバリデーションを行い，その結果によってページフローが分岐するようにフロー定義ファイルの内容を変更します。これらの作業の目的は，画面の項目の洗い出しとページフローの見直しです。

Piece_Unity_Component_Flexy 1.0.0から1.1.0へのアップグレード

今回からはPiece_Unity_Component_Flexy 1.1.0の機能を使いますので，作業を始める前にアップグレードを行いましょう。

> 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テンプレートは下記のようになります。

<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の実行環境が自動的に設定するテンプレート変数です。

ビルトインビューエレメントは上記の他にも多数用意されています。詳細は，Piece_Unityユーザーズマニュアルのビューエレメントの項を参照ください。

さて，上記の準備が完了したらブラウザを起動しエントリポイントにアクセスしてみましょう。新規エントリー入力画面のCreateボタンをクリックすると，今までどおり新規エントリー入力確認画面に遷移するはずです。

この画面はこれで完了といきたいところですが，まだ不完全な部分が残っています。下記はブラウザに表示されたHTMLのソースからform要素部分を抜粋したものです。

...
<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コードから設定することができるので，アクションクラスを使って設定してみましょう。