HTMLの作成
開発ツールを使ったHTMLの作成
ここまでの作業で作成したArticlePageを元にHTMLを作成します。Pageとその中に配置されたForm、Field等のクラスは、全てWebComponentというクラスから派生しています。WebComponentから派生したクラスのうち、PageとDialogクラスは対応するWebリソースとしてHTMLを作成することができます。［開発ツール］［Webリソース作成］ページを表示し［機能］で［/bbs］を選択、［ページクラス名］にArticlePageクラスを指定して検索すると、以下のようにArticlePage中で使用されている各種クラスが表示されます。
先頭にArticlePageが表示されているので、それをクリックすると、［Webリソース作成］ダイアログが表示されます。今回は［フォームは別ファイルに出力］をチェックしてから、HTMLの［作成］ボタンを押下します。
［フォームは別ファイルに出力］をチェックすると、ArticlePage.html以外に、それぞれのフォームの内容が 「ArticleQueryForm.html」「ArticleQueryResultForm.html」「ArticleEditForm.html」に出力されます。今回なぜフォームを別ファイルに出力するかというと、ArticleEditFormを別のページに配置して流用する予定があるからです。
それぞれのHTMLの出力結果を以下に示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="mainDiv">
<form id="queryForm">
</form>
<form id="queryResultForm">
</form>
<form id="editForm">
</form>
</div>
</body>
</html>
フォームを別ファイルに出力しているため、Pageに対応するHTMLには内容が空の<form>タグが出力されます。ArticleQueryFormクラスのIDは「queryForm」が設定されます。Pageの初期化処理は、ArticleQueryFormに対応する「ArticleQueryForm.html」が存在した場合、<form id="queryForm"></form>の内容に「ArticleQueryForm.html」の内容を展開するようになっています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="queryForm">
<div class="formHeader">検索条件</div>
<table class="responsive">
<tbody>
<tr>
<th>記事タイトル</th>
<td><input type="text" id="title" /></td>
</tr>
<tr>
<th>著者</th>
<td><input type="text" id="auther" /></td>
</tr>
<tr>
<th>本文</th>
<td><input type="text" id="contents" /></td>
</tr>
</tbody>
</table>
<input type="submit" id="queryButton" value="検索">
<input type="button" id="resetButton" value="リセット">
<input type="button" id="newButton" value="新規登録">
</form>
</body>
</html>
「ArticleQueryForm.java」で指定した、フィールドが出力されています。QueryFormがデフォルトで持っている機能を呼び出すため、［検索］［リセット］［新規登録］のボタンも配置されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="queryResultForm">
<div class="formHeader">検索結果</div>
<input type="hidden" id="articleId" />
<table class="responsive">
<tbody>
</tbody>
</table>
<div class="hScrollDiv">
<table id="queryResult">
<thead>
<tr>
<th>
No.
</th>
<th>
記事タイトル
</th>
<th>
著者
</th>
<th>
本文
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span id="queryResult[0].rowNo"></span>
<input type="hidden" id="queryResult[0].articleId" />
・・・ 中略 ・・・
</td>
<td>
<a id="queryResult[0].updateButton" href="javascript:void(0);"><span id="queryResult[0].title"></span></a>
</td>
<td>
<span id="queryResult[0].auther"></span>
</td>
<td>
<span id="queryResult[0].contents"></span>
</td>
<td>
<input type="button" id="queryResult[0].viewButton" value="表示">
<input type="button" id="queryResult[0].referButton" value="参照登録">
<input type="button" id="queryResult[0].deleteButton" value="削除">
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
「ArticleQueryResultForm.html」にはIDが「queryResult」というテーブルが配置されます。このテーブルの<tbody>には1行分の<tr>...</tr>タグが生成されています。この1行でテーブル中のレコードの表示方法を指定します。テーブル中に記事の著者名を表示するフィールドは以下のように展開されています。
<span id="queryResult[0].auther"></span>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form id="editForm">
<div class="formHeader"><span id="editFormTitle"></span></div>
<input type="hidden" id="saveMode" />
・・・ 中略 ・・・
<table class="responsive">
<tbody>
<tr>
<th>記事タイトル</th>
<td><input type="text" id="title" /></td>
</tr>
<tr>
<th>著者</th>
<td><input type="text" id="auther" /></td>
</tr>
<tr>
<th>本文</th>
<td><input type="text" id="contents" /></td>
</tr>
</tbody>
</table>
<div class="hScrollDiv">
<table id="attachFileTable" class="editableTable">
<thead>
<tr>
<th class="buttonColumn" nowrap>
</th>
<th class="buttonColumn" nowrap>
</th>
<th nowrap>
No.
</th>
<th>
ファイルコメント
</th>
<th>
ファイルタイプ
</th>
<th>
ファイル
</th>
<th>
画像
</th>
<th>
動画
</th>
<th>
音声
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="buttonColumn">
<input type="button" id="attachFileTable[0].addButton" value="+"/>
</td>
<td class="buttonColumn">
<input type="button" id="attachFileTable[0].deleteButton" value="-"/>
</td>
<td style="text-align: right;">
<span id="attachFileTable[0].no"></span>
</td>
<td>
<input type="text" id="attachFileTable[0].fileComment" />
・・・ 中略 ・・・
</td>
<td>
<select id="attachFileTable[0].fileType"></select>
</td>
<td>
<input type="file" id="attachFileTable[0].attachFile" />
</td>
<td>
<input type="file" id="attachFileTable[0].attachImage" />
</td>
<td>
<input type="file" id="attachFileTable[0].attachVideo" />
</td>
<td>
<input type="file" id="attachFileTable[0].attachAudio" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="buttonColumn">
<input type="button" id="attachFileTable.addButton" value="+"/>
</th>
<th colspan="8">
</th>
</tr>
</tfoot>
</table>
</div>
<input type="button" id="confirmButton" value="確認"/>
<input type="button" id="saveButton" value="登録"/>
<input type="button" id="resetButton" value="リセット"/>
<input type="button" id="deleteButton" value="削除"/>
<input type="button" id="backButton" value="戻る"/>
</form>
</body>
</html>
このフォームにはArticleTableの各フィールドと、AttachFileTableの各フィールドを表示するためのテーブル（ID："attachFileTable"）が出力されています。このテーブルに対応するテーブルクラスは、EditableHtmlTableであるため、行の追加や削除のためのボタンが配置されています。
