やっとDEKEました、使い易い簡単FW。まだ、β版ですが… 第５回

開発手順にそって、詳細な説明をしていきます。

■ 画面設計書(元ネタ)作成
　モックHTML(＜tg＞タグ追記済み)より、画面設計書(元ネタ)を作成します。
　このサポートを行なうプラグインが「画面設計書作成plugin」になります。

【画面設計書作成pluginの機能概要】
操作方法はこれまた単純で、モックHTMLを選択し、同pluginを実行(クリック)します。
するとモックHTMLの情報より、画面設計書の元ネタとなるExcelファイルを作成します。

Excelファイルに出力される内容

■　HTMLパスの設定
　　HTMLの保存先PATHを出力します。

■　Viewクラス階層の設定
　　HTMLの入出力項目をセットする「Viewクラス」の名称を出力します。
　　ネスト(＜tg:loop name="ネストクラス名"＞)が存在する場合は、「Viewクラス」のインナークラス
　　のネストクラス名も出力します。

■　Contrllerクラスの設定
　　HTMLのボタンによる動作(画面遷移)を制御するクラス名を出力します。

■　非表示項目(HIDDEN)設定
　　HTMLの非表示項目(input type="hidden")を出力します。

■　表示項目設定(PROPERTIES)
　　HTMLのプロパティー項目(tg:label)を出力します。

■　入力項目(TEXT,PASSWORD,TEXTAREA)の設定
　　HTMLの入力項目(input type="text", input type="password", textarea)を出力します。

■　入力項目(CHECKBOX, RADIO, SELECT)設定
　　HTMLの入力項目(input type="checkbox", input type="radio", select)を出力します。

■　表示項目設定(BEAN)
　　HTMLの表示項目(tg:out)を出力します。

■　表示・非表示フラグ設定
　　HTMLの表示項目(tg:true, tg:false)を出力します。

■　アップロード項目(FILE)設定
　　HTMLのファイル項目(input type="file")を出力します。

■　ボタン(method)設定
　　HTMLのボタン(input type="button" , aタグ)を出力します。

【Sample.html】
＜!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＞
　　　　　サンプル画面
　　　　＜/h1＞
　　　　＜table＞
　　　　　＜tr＞
　　　　　　＜td ＞
　　　　　　　項目１
　　　　　　＜/td＞
　　　　　　＜td nowrap＞
　　　　　　　＜input type="text" maxlength="15" size="15" value=""＞
　　　　　　＜/td＞
　　　　　＜/tr＞
　　　　　＜tr＞
　　　　　　＜td ＞
　　　　　　　項目２
　　　　　　＜/td＞
　　　　　　＜td nowrap＞
　　　　　　　＜input type="text" maxlength="15" size="15" value=""＞
　　　　　　＜/td＞
　　　　　＜/tr＞
　　　　＜/table＞
　　　　＜br＞
　　　　＜input type="button" value="実行" onclick="" style="width:115px"＞
　　　　＜br＞
　　　　＜br＞
　　　＜/center＞
　　＜/form＞
　＜/body＞
＜/html＞

【Sample.htmlのソース-＜tg＞タグ追記後】
＜!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="header"＞
　　　　　サンプル画面
　　　　　＜/tg＞
　　　　＜/h1＞
　　　　＜table＞
　　　　　＜tr＞
　　　　　　＜td nowrap width="100"＞
　　　　　　　＜tg:label name="label.text"＞
　　　　　　　項目１
　　　　　　　＜/tg＞
　　　　　　＜/td＞
　　　　　　＜td nowrap＞
　　　　　　　＜input type="text" name="field1" maxlength="15" size="15" value=""＞
　　　　　　＜/td＞
　　　　　＜/tr＞
　　　　　＜tr＞
　　　　　　＜td nowrap width="100"＞
　　　　　　　＜tg:label name="label.text"＞
　　　　　　　項目２
　　　　　　　＜/tg＞
　　　　　　＜/td＞
　　　　　　＜td nowrap＞
　　　　　　　＜input type="text" name="field2" maxlength="15" size="15" value=""＞
　　　　　　＜/td＞
　　　　　＜/tr＞
　　　　＜/table＞
　　　　＜br＞
　　　　＜input type="button" name="doSubmit" value="実行" onclick="" style="width:115px"＞
　　　　＜br＞
　　　　＜br＞
　　　＜/center＞
　　＜/form＞
　＜/body＞
＜/html＞

【Sample.htmlの画面定義書】

上記の画像を参照してください。

【Sample.htmlの画面定義書で設定する内容】

上記の画像の赤い箇所を設定します。

画像のExcelに必要な情報を記述することにより、設計書の元ネタ＆JAVAソース自動生成の元ネタになっちゃいます…(^^)v