おきらくたぬきの次のへそ

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ベンチャーブログのランキングに参加しています。
下のバナーをクリックして応援していただけると嬉しいです。

それでは前回のサンプルアプリを、PnF上で構築したいと思います。まずPnFを使った開発の基本的な考え方を説明しておきましょう。

基本的な考え方

PnFによるWebアプリケーション開発は、以下の4つの部分に分けてアプローチします。

（1）画面全体の構成
（2）画面を構成するビューコンポーネント（VC）
（3）ビューコンポーネントで使用するビューパーツ（VP）
（4）データモデルオブジェクト（DM)

これらの要素を「PnFコア」で結びつけたものが、PnFで作成したWebアプリケーションになります。


（クリックすると拡大表示されます）

ビューコンポーネントとは、ひとまとまりの機能を提供する表示ブロックのことです。例えば前回のサンプルアプリでは、メニューを表示するボックス、フォームを表示するボックス、アイテムのリストを表示するボックス、各アイテムの情報を表示するボックスが、ビューコンポーネントとして記述されています。

ビューパーツは単一機能を提供する部品だとお考えください。例えばテキスト入力フィールドやテキストエリア入力フィールドは、それぞれひとつのビューパーツとして定義されます。また複数要素をもっている場合でも、機能としては単一であれば、ビューパーツの中に含めるべきだと考えています。例えばメニューリストやフォームのナビゲーションリンク等は、それぞれ複数の要素を持ちますが、基本的な機能は単一なので、それぞれビューパーツとして定義しています。

ここでポイントになるのは、ビューパーツの種類は限られていること、そして限られた種類のビューパーツを事前に作成しておけばアプリケーション開発者はそれを利用するだけでいいということです。つまりアプリケーション開発者は、基本的に（1）（2）（4）を視野に入れればいいことになります。もちろんビューパーツを追加することもできます。コード解説のところで述べますが、それぞれのビューパーツの記述はかなり短いものです。また（1）の画面全体の構成の記述もかなり短く、アプリ開発者は「使用するビューコンポーネント」と「そのビューコンポーネントを画面の中でどのように配置するか（HTMLテンプレート）」のみを意識すればＯＫです。

これに対してビューコンポーネントの記述は、PnFにおける開発の「キモ」といえる部分です。ビューコンポーネントの記述には、「ビューコンポーネントのプロパティ定義」「使用するビューパーツの定義」「このコンポーネントが担当するGET変数の定義」「イベントハンドリングの定義」「各イベントに対応したアクションメソッドの記述」「HTMLテンプレート」が含まれます。

POST変数の処理はビューパーツが担当します。一般的なWebアプリケーションの場合、POST変数は特定のHTMLタグに結びつけることが可能だからです。HTMLタグを直接記述するのはビューパーツなので、ここに処理を任せているのです。（とはいっても、具体的な処理内容は各ビューパーツの親クラスで行われており、その内容は各ビューパーツからは隠蔽されています。）


開発のアプローチ

前回のサンプルアプリケーションを作成する場合には、次のようにアプローチしていきます。

Step1：必要なビューコンポーネントを洗い出す。
前回のサンプルアプリケーションの場合、ビューコンポーネントは「メニューボックス（MenuBox）」「データ登録フォームボックス（FormBox）」「アイテムリストの表示ボックス（ItemListBox）」「各アイテムの表示ボックス（ItemBox）」に分けられそうです。また「ItemBox」は「ItemListBox」の下位コンポーネントにすると、全体がすっきりしそうです。



Step2：各ビューコンポーネントが保持すべき情報を洗い出す。
例えば「ItemListBox」では、登録されたデータの内容と、登録されたデータ数をSESSION変数で保持しておく必要がありそうです。また「FormBox」は表示/非表示を切り替えるために、表示モードを保持することが求められます。

Step3：各ビューコンポーネントが使用するビューパーツを洗い出す。
例えば「FormBox」では「テキスト入力フィールド」「メールアドレス入力フィールド」「テキストエリア入力フィールド」「ナビゲーションリンク」を使うことになります。

Step4：対応すべきイベントを洗い出す。
例えば「FormBox」では、「アイテムを追加」のクリック、「登録」のクリック、「キャンセル」のクリックが発生した時に、それぞれ何らかの処理が必要です。

Step5：各イベントに対応したアクションメソッドを定義する。
例えば「ItemBox」の「詳細を表示する」をクリックした時、「ItemBox」は詳細情報の表示を行うと共に、ナビゲーションの表示を「詳細を隠す」に切り替える必要があります。このような動的な処理を、アクションメソッドとして記述します。

あるビューコンポーネントが、他のビューコンポーネントの状態を変えたい時もあります。例えば「FormBox」の「登録」がクリックされた時には、何らかの手段で「ItemListBox」にそのイベントを伝達し、入力されたデータを引き渡す必要があります。この場合、直接他のコンポーネントの状態にアクセスしてしまうと、コンポーネント間が密結合になってしまいます。
そこでPnFではアクションメソッドで再びイベントを発生させ、そのイベントを他のコンポーネントが捕捉、必要な処理を行うという方法を採用しています。これは「Publish/Subscribeモデル」に基づいており、パブリッシュ側は「誰がそのイベントを捕捉するのか」、サブスクライブ側は「誰がそのイベントを発生させたか」を、まったく意識する必要はありません。もちろんどのようなイベント名で何を伝達するのかについては、きちんと取り決めしておく必要があります。

Step6：画面全体の構成を決める。
どのビューコンポーネントを使用するのか、画面全体の構成の中でどこに位置づけるのかを記述します。

なお前述のように、データモデルはアクションメソッドから呼び出す形になりますが、今回はデータベースなどのデータモデルは使用しません。そのためデータモデルの開発は行いません。（現時点ではMySQLにアクセスするための機能を実装しています）

ベンチャーブログのランキングに参加しています。
下のバナーをクリックして応援していただけると嬉しいです。