やっとDEKEました、使い易い簡単FW。まだ、β版ですが… 第４回
開発手順にそって、詳細な説明をしていきます。
■ ユーザーレビュー
モックHTMLを利用して、ユーザーレビューを行ないます。この作業はFWでのサポートはありません。
■ モックHTMLのプログラム化(FW専用タグの埋め込み)
モックHTMLにFW特殊タグを埋め込み、画面情報を動的に変更可能にします。
このサポートを行なうプラグインが「FWタグ補完plugin」になります。
【FWタグ補完pluginの機能概要】
操作方法はこれまた単純で、モックHTMLを選択し、同pluginを実行(クリック)します。
するとモックHTMLに下記の補完を行ないます。
１．モックHTMLの＜input type="xxxx" ...＞タグにname属性が存在しない場合は、
自動でname属性を追記します。
例：＜input type="text" name="■" ...＞
typeが"text"、"checkbox"、"radio"の場合は、name属性に指定した名前が、
Viewクラスのフィールド名になります。
typeが"button"の場合は、name属性に指定した名前が、Controllerクラスのメソッドに
なります。
注：＜input＞系タグ以外に＜select＞タグ＜textarea＞タグ＜a＞タグも同様の補完
を行ないます。
２．モックHTML中に"任意文字列."が存在した場合は、"任意文字列."を
＜tg:label name="■"＞＜/tg＞で囲みます。
例：＜tg:label name="■"＞
任意文字列.
＜/tg＞
＜tg:label name="■"＞タグのname属性に指定した名前が、
プロパティーファイルのキー名になります。
３．モックHTML中に"任意文字列"が存在した場合は、"任意文字列"を
＜tg:out name="■"＞＜/tg＞で囲みます。
例：＜tg:out name="■"＞
任意文字列
＜/tg＞
＜tg:label name="■"＞タグのname属性に指定した名前が、Viewクラスの
フィールド名になります。
また、name属性が未設定の行は、下記のように左端の空白を排除(TABも排除)し、開発者に未設定である事がわかるように返照します。
name属性を指定し、再度同pluginを実行すると適切な位置にタグを移動します。
また、第二の機能としてtgのタグの開始(＜tx:＞)と終了(＜/tg＞)の数がアンマッチの場合は、欠落している個所を予測(あくまでも予測なので絶対個所ではない)してエラー表示します。
【FWタグ補完pluginを実行した場合の例】
Sample.html
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"＞
＜html xmlns="http://www.w3.org/xxx/xhtml" lang="en" xml:lang="en"＞
＜head＞
＜/head＞
＜body ＞
＜form method="POST"＞
＜center＞
＜h1＞
サンプル画面
＜/h1＞
＜table border="0" cellspacing="1" cellpadding="1"＞
＜tr＞
＜td nowrap align="center" width="100"＞
項目１.
＜/td＞ ＜td nowrap＞
＜input type="text" maxlength="3" size="6" value=""＞
＜/td＞
＜/tr＞
＜/table＞
＜input type="button" value="実行" onclick="" style="width:115px"＞
＜/center＞
＜/form＞
＜/body＞
＜/html＞
上記、モックHTMLに対してpluginを実行した結果
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"＞
＜html xmlns="http://www.w3.org/xxxx/xhtml" lang="en" xml:lang="en"＞
＜head＞
＜/head＞
＜body ＞
＜form method="POST"＞
＜center＞
＜h1＞
＜tg:out name="#[OUT_FIELD_NAME]"＞
サンプル画面
＜/tg＞
＜/h1＞
＜table border="0" cellspacing="1" cellpadding="1"＞
＜tr＞
＜td nowrap align="center" width="100"＞
＜tg:label name="#[LABEL_NAME]"＞
項目１.
＜/tg＞
＜/td＞
＜td nowrap＞
＜input type="text" name="#[TEXT_NAME]" maxlength="3" size="6" value=""＞
＜/td＞
＜/tr＞
＜/table＞
＜input type="button" name="#[BUTTON_NAME]" value="実行" onclick="" style="width:115px"＞
＜/center＞
＜/form＞
＜/body＞
＜/html＞
name属性を指定し、再度pluginを実行した結果
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"＞
＜html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"＞
＜head＞
＜/head＞
＜body ＞
＜form method="POST"＞
＜center＞
＜h1＞
＜tg:out name="header"＞
サンプル画面
＜/tg＞
＜/h1＞
＜table border="0" cellspacing="1" cellpadding="1"＞
＜tr＞
＜td nowrap align="center" width="100"＞
＜tg:label name="label.column1"＞
項目１.
＜/tg＞
＜/td＞
＜td nowrap＞
＜input type="text" name="field1" maxlength="3" size="6" value=""＞
＜/td＞
＜/tr＞
＜/table＞
＜input type="button" name="doSubmit" value="実行" onclick="" style="width:115px"＞
＜/center＞
＜/form＞
＜/body＞
＜/html＞
モックHTMLの作成段階では、name属性の指定や
ユーザーレビュー後に、名称などが決まり次第、このpluginで
