この段階での動作確認
ここまでのコードの大半はツールで自動時に作成したものです。ここから、この段階のコードの動作を確認していきます。まずプロジェクトをクリーンビルドし、Tomcatのオートデプロイの完了を待ちます。オートデプロイが完了したら、「http://localhost:8080/dfbbs2」にアクセスします。ページが表示されると［掲示板/記事管理］メニューが表示されているはずなので、それを選択します。
この段階で表示されているのは、検索条件を入力するArticleQueryFormだけです。ArticleQueryResultFormとArticleEditFormはページ中に存在しますが、表示されていません。このフォームで［検索］ボタンを押すと、サーバーの検索処理が呼び出され、その結果をArticleQueryResultFormに表示します。
まだデータは何も入力されていないため結果は0件になりますが、Eclipseのコーンソールを確認すると、以下のSQLが実行されていることがわかります。このSQLはArticleDao.ArticleTableQueryで定義したSQLをサブクエリにして、ページ単位に切り出すSQLになっています。このようなSQLはデータベースシステムによって異なることが多いのですが、dataforms.jarがその違いを吸収してくれます。
select * from (select row_number() over() as row_no, m.* from (select m.article_id as article_id ,m.thread_id as thread_id ,m.title as title ,m.auther as auther ,m.contents as contents ,m.delete_flag as delete_flag ,m.create_user_id as create_user_id ,m.create_timestamp as create_timestamp ,m.update_user_id as update_user_id ,m.update_timestamp as update_timestamp from article as m where m.delete_flag='0' order by m.article_id asc) as m) as m where (:row_from + 1) <= m.row_no and m.row_no <= (:row_to + 1)
データが存在しないと面白くないので、［新規登録］を押して、ArticleEditFormを表示します。ArticleEditFormはデータの新規登録、更新、表示の機能で使われます。
データは以下のように入力します。添付ファイルのテーブルも入力だけは可能です。以下のように［＋］ボタンで2行追加して、各種ファイルを入力することができます。以下の例では画像ファイルと、動画ファイルを入力しています。ファイルを指定すると、画像ファイルはサムネイルが表示され、動画ファイルはプレーヤーにデータがセットされます。
［確認］ボタンを押すと、以下のように各フィールドが表示モードになります。今までのフレームワークでは、確認用のページを別途作成するケースが多かったのですが、dataforms.jarではフォーム中の各フィールドをロックする方法で実現しています。
確認画面を省略するには
Webシステムではよく使用される確認画面ですが、確認など行わずさっさと登録したいという場合もあります。そのような場合は［確認］ボタンをHTMLから削除するだけでOKです。dataforms.jar中の"EditForm.js"は、［確認］ボタンがフォーム中に存在しない場合、［登録］ボタンを表示します。当然［登録］ボタンを押下すれば、保存処理が動作しデータを登録します。
［登録］ボタンを押下すると、データが登録され、一覧に登録されたデータが表示されます。
検索結果に表示された［タイトル1］のリンクをクリックすると、以下のようにArticleEditFormが更新モードで表示されます。添付ファイルのテーブルの編集はできますが、まだ保存処理を作成していません。そのため表示されるのはArticleTableに保存された情報のみとなります。この状態で表示された内容を編集し、データを更新することができます。
さらにデータをもう1件登録し、検索結果リストを表示すると以下のようになります。
ArticleQueryResultFormのqueryPageメソッドが返すマップの中には、"queryResult"というキーで検索結果リストが入っています。そのデータの型はList<Map<String, Object>>になっており、以下のようなjson形式でブラウザに送信されます。
{
"contentType": "text/plain; charset=utf-8",
"result": {
"linesPerPage": "10",
"hitCount": "3",
"pageNo": "0",
"sortOrder": null,
"articleId": null,
"queryResult": {
{
"threadId": null,
"deleteFlag": "0",
"rowNo": "1",
"createUserId": "1000",
"contents": "本文1",
"updateUserId": "1000",
"articleId": "0",
"auther": "著者1",
"title": "タイトル1",
"updateTimestamp": "20170309224034608",
"createTimestamp": "20170309224034608"
},
{
"threadId": null,
"deleteFlag": "0",
"rowNo": "2",
"createUserId": "1000",
"contents": "本文2",
"updateUserId": "1000",
"articleId": "1",
"auther": "著者2",
"title": "タイトル2",
"updateTimestamp": "20170309224131603",
"createTimestamp": "20170309224131603"
}
}
},
"status": 0
}
このjsonを受信したブラウザでは、dataforms.jarの提供するスクリプトが動作し、このリストの件数分の<tr>...</tr>を展開した後、各フィールドの値を設定します。その結果以下のようなテーブルができあがります。
<table id="queryResult">
<thead>
<tr class="evenTr">
<th>
No.
</th>
<th><span class="sortableLabel"><span class="ui-icon ui-icon-triangle-2-n-s sortableMark"></span>
記事タイトル
</span></th>
<th><span class="sortableLabel"><span class="ui-icon ui-icon-triangle-2-n-s sortableMark"></span>
著者
</span></th>
<th><span class="sortableLabel"><span class="ui-icon ui-icon-triangle-2-n-s sortableMark"></span>
本文
</span></th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr class="oddTr">
<td>
<span id="queryResult[0].rowNo" name="queryResult[0].rowNo" style="text-align: right;">1</span>
・・・ 中略 ・・・
</td>
<td>
<a id="queryResult[0].updateButton" href="javascript:void(0);"><span id="queryResult[0].title" name="queryResult[0].title">タイトル1</span></a>
</td>
<td>
<span id="queryResult[0].auther" name="queryResult[0].auther">著者1</span>
</td>
<td>
<span id="queryResult[0].contents" name="queryResult[0].contents">本文1</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><tr class="evenTr">
<td>
<span id="queryResult[1].rowNo" name="queryResult[1].rowNo" style="text-align: right;">2</span>
<input type="hidden" id="queryResult[1].articleId" name="queryResult[1].articleId" value="1" style="text-align: right;">
・・・ 中略 ・・・
</td>
<td>
<a id="queryResult[1].updateButton" href="javascript:void(0);"><span id="queryResult[1].title" name="queryResult[1].title">タイトル2</span></a>
</td>
<td>
<span id="queryResult[1].auther" name="queryResult[1].auther">著者2</span>
</td>
<td>
<span id="queryResult[1].contents" name="queryResult[1].contents">本文2</span>
</td>
<td>
<input type="button" id="queryResult[1].viewButton" value="表示">
<input type="button" id="queryResult[1].referButton" value="参照登録">
<input type="button" id="queryResult[1].deleteButton" value="削除">
</td>
</tbody>
</table>
HtmlTableクラスは基本的に上記のように動作します。ArticleQueryResultFormでは、HtmlTableから派生したPageScrollHtmlTableクラスを配置しています。そのため<table id="queryResult">の前に、ページスクロール制御用のボタンやプルダウンが追加されています。
まとめ
今回は主に開発ツールを使用して作業を進めてきました。最終形であるdataforms.jarサンプルプログラム（dfbbs）の記事管理の動作と比べてみるとわかると思いますが、まだまだ手を加えていく必要があります。次回はこのプログラムを完成形に持っていく手順を説明したいと思います。
