画面と遷移

初めに

このサンプル Web アプリケーションの主な画面は、大分類関連の画面・小分類関連の画面・知識関連の画面の３つです。この３つの画面を統括するトップページとなる画面は用意していません。このトップ画面は静的なHTML画面で十分でしょう。必要に応じて作成してください。個々の画面をデバッグする場合は、 web.xml ファイルの welcome-file タグを書き換えることで実現していました。

大分類関連の画面と遷移

大分類を操作する画面は１つだけです。その初期画面は以下のもので、登録済みの全大分類がテーブルに表示されています。「クリア」ボタンをクリックすると初期状態に移行します。

この画面で有効なボタンは、「追加」「クリア」ボタンです。

「追加」ボタンをクリックすると、上部に表示されている値で、大分類が１件登録されて、初期状態に移行します。

大分類の任意の行をマウスでクリックすると、次の行選択状態に移行します。

この画面で有効なボタンは、「追加」「読出」「クリア」です。

「追加」ボタンをクリックすると、上部に表示されている値で、大分類が１件登録されて、初期状態に移行します。

「読出」をクリックすると、次の読み出し後状態に移行します。

選択された項目の内容が上部に表示されます。「追加」「読出」ボタンは無効になり、「更新」「削除」が有効になります。

「更新」をクリックすると、読みだされたデータが、上部に表示されている内容で更新されて、初期状態に移行します。大分類コードは変更できません。

「削除」をクリックすると、読みだされたデータが、データベースから削除されて、初期状態に移行します。

小分類関連の画面と遷移

小分類を操作する画面は１つだけです。その初期画面は以下のものです。「クリア」ボタンをクリックすると、初期状態に移行します。

この画面で有効なボタンは、「追加」「クリア」です。この状態で、「大分類」のコンポボックスから任意の項目を選択すると、次の大分類選択状態に移行します。

「追加」ボタンをクリックすると、上部に表示されている値で、小分類が１件登録されて、初期状態に移行します。

選択した大分類に区分される小分類がテーブルに表示されます。この画面で有効なボタンには変更がありません。

小分類の任意の行をマウスでクリックすると、次の行選択状態に移行します。

この画面で有効なボタンは、「追加」「読出」「クリア」です。

「追加」ボタンをクリックすると、上部に表示されている値で、小分類が１件登録されて、初期状態に移行します。

「読出」をクリックすると、次の読み出し後状態に移行します。

選択された項目の内容が上部に表示されます。「追加」「読出」ボタンは無効になり、「更新」「削除」が有効になります。

「更新」をクリックすると、読みだされたデータが、上部に表示されている内容で更新されて、初期状態に移行します。大分類コードと小分類コードは変更できません。

「削除」をクリックすると、読みだされたデータが、データベースから削除されて、初期状態に移行します。

知識関連の画面と遷移

知識を操作する画面は以下の初期画面、追加専用画面、編集専用画面、削除専用画面の４つからなります。

この画面で有効なボタンは、「新規」「検索」「クリア」です。

「新規」ボタンをクリックすると、次の追加専用画面に移行します。

「保存」ボタンをクリックすると、表示されている内容の知識をデータベースに登録して、初期状態に移行します。

「戻る」ボタンをクリックすると、初期状態に移行します。

「クリア」ボタンをクリックすると、入力途中のデータをすべて初期値に戻します。

知識操作の初期画面には、４つの検索条件を組み合わせて指定することができます。次の画面では、大分類と小分類を指定して、「検索」ボタンをクリックした場合を示します。「タイトル」と「キーワード」の扱いは、文字列の部分一致になります。

検索条件に該当する知識がテーブルに表示されます。表示は、ご覧のようにページング処理されます。ページングは、先頭ページ、１ページ前、１ページ後、最終ページとページ番号を直接指定から選択できます。
この画面で有効なボタンは、「新規」「検索」「クリア」です。知識の任意の行をマウスでクリックすると、次の行選択状態に移行します。

「新規」ボタンをクリックすると、上記の追加専用画面に移行します。

「検索」ボタンをクリックすると、新しい検索条件で処理をやり直します。

「クリア」ボタンをクリックすると、初期画面に移行します。

この画面で有効なボタンは、「新規」「検索」「更新」「削除」「クリア」です。

「新規」ボタンをクリックすると、上記の追加専用画面に移行します。

「検索」ボタンをクリックすると、新しい検索条件で処理をやり直します。

「更新」ボタンをクリックすると、次の編集専用画面に移行します。

「削除」ボタンをクリックすると、２つ下の削除専用画面に移行します。

「クリア」ボタンをクリックすると、初期画面に移行します。

知識IDは変更することができません。この画面で有効なボタンは、「保存」「戻る」です。

「保存」ボタンをクリックすると、データベースを更新して、初期画面に移行します。

「戻る」ボタンをクリックすると、初期画面に移行します。

表示されている内容はすべて変更できません。この画面で有効なボタンは、「削除」「戻る」です。

「削除」ボタンをクリックすると、削除の確認後に、データベースから削除して、初期画面に移行します。

「戻る」ボタンをクリックすると、初期画面に移行します。

xhtml の共通部分

xhtml ファイルの共通枠を以下に示しておきます。この部分はすべての画面でほぼ共通です。

                     
<!DOCTYPE html>
<html jsfc="h:head">
    <head>
        <title></title>
        <link href="resources/css/bootstrap.min.css" rel="stylesheet" />
        <link href="resources/css/common.css" rel="stylesheet" />
        <script src="resources/js/jquery-2.1.1.min.js" type="text/javascript"></script>
        <script src="resources/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="resources/js/bluesky.js" type="text/javascript"></script>
        <script src="resources/js/makeMessage.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
            });
        </script>
    </head>
    <body jsfc="h:body">
    </body>
</html>

簡単な説明です。 <!DOCTYPE html> で HTML5 を指定しています。

２つの CSS ファイルの指定はそれぞれ、 Bootstrap 用と私が個人で使用しているものになります。

４つの js ファイルの指定はそれぞれ、 jQuery 用、Bootstrap 用、私が個人で使用しているもの、今回用にエラーメッセージの書式設定用のものになります。

jQuery のプログラムを記述するエリアがあって、 head タグは終わっています。

それ以降は空の body タグになります。