7 「Tasks」ページの開発

ページの作成ウィザードを使用して、エンド・ユーザーがプロジェクト・タスクを管理できるフォーム付きの新しいレポートを作成します。

このレッスンについて

このレッスンでは、新しいページのペア(フォーム付きレポート)をアプリケーションに追加します。

「フォーム付きレポート」(または「レポートとフォーム」)は、Webアプリケーションで最も一般的なページ構成です。エンド・ユーザーはレポートを表示し、フォーム・ページを使用して変更を送信します。

アプリケーションでは、(SAMPLE$PROJECT_TASKS表に基づいて)関連付けられているプロジェクトで行う作業の詳細がタスク・レポートに表示されます。タスクの更新フォームを使用すると、タスクのステータスや期日などをユーザーが更新できます。

ページの作成ウィザードを使用してページのペアを生成します。レポート・ページから開始します。通常のタスク(共有コンポーネントのナビゲーション・メニューの更新、余分な列の非表示、レポートへの参照の適用)を繰り返して、レポートを開発します。

日付および数値の書式が設定された列に書式マスクを適用します。

decode SQL文を使用して、「はい/いいえ」列内の「Y」または「N」のすべてのインスタンスを「はい」または「いいえ」と表示するように変換します。

モーダル・フォーム・ページについては、ページ・デザイナを使用してフィールドを調整し、レポート内の対応するフィールドをミラーリングします。フォームの手順の多くは、レポートの手順とよく似ています。

ここから開始:

7 - Tasks.sql

前のレッスンを完了していない場合、付録「作業領域へのアプリケーションのインストール」を使用して上述のSQLスクリプトを作業領域にインポートし、このレッスンから先に学習を続けられます。このスクリプトは、このチュートリアル付属の.zipファイルを解凍した場所の/filesサブディレクトリにあります。

7.1 対話モード・レポート・ページの作成

ページの作成ウィザードを使用して、フォーム・ページ付きの新しい対話モード・レポートをアプリケーションに追加します。SAMPLE$PROJECTS_TASKSに基づいたものにします。

フォーム付きの対話モード・レポートをアプリケーションに追加するには、次のステップを実行します。

  1. アプリケーションのホーム・ページで、「ページの作成」をクリックします。
  2. 「レポート」をクリックします。
  3. 「フォーム付きレポート」をクリックします。
  4. 「ページ属性」で、次のステップを実行します。
    1. ページ番号 - 「6」と入力します
    2. レポート・ページ名 - 「Tasks」と入力します
    3. フォーム・ページ番号 - 「7」と入力します
    4. フォーム・ページ名 - 「Update Task」と入力します
    5. フォーム・ページ・モード - 「モーダル・ダイアログ」を選択します
    6. 「次」をクリックします。
  5. 「ナビゲーション・メニュー」で、次のステップを実行します。
    1. ナビゲーションのプリファレンス - 「新規ナビゲーション・メニュー・エントリの作成」選択します
    2. 「次」をクリックします。
  6. 「データ・ソース」で、次のステップを実行します。
    1. 表/ビューの名前 - 「LOV」アイコンをクリックします。
    2. 「SAMPLE$PROJECTS_TASKS」を選択します
    3. 列のリストで、「ID」(番号)をダブルクリックして左の列に移動させます(こうするとレポートで表示されなくなります)。

      「ID」列には、表の各行の数値識別子が含まれています。ユーザーがこの情報を表示したりアクセスしたりする必要はありません。後で両方のページの列を非表示にするので、この手順を実行すると時間を節約できます。

    4. 「次」をクリックします。
  7. 「フォーム・ページ」で、次のステップを実行します。
    1. 主キー列 - 「ID」(数字)を選択します

      ウィザードでは、前の画面のレポートの列と一致するように「ID」が削除されることに注意してください。

    2. 「作成」をクリックします。

    ウィザードによってページが作成されます。ページ・デザイナにより、対話モード・レポート・ページ(ページ6の「Tasks」)がロードされます。

このページには、対話モード・レポート・リージョン「レポート1」が含まれています。

レポート・リージョンを削除するには、次のステップを実行します。

  1. 「レイアウト」タブまたは「レンダリング」タブで「レポート1」をクリックします。
  2. プロパティ・エディタで、次のように操作します。
    1. 指定: タイトル - 「タスク」と入力します
  3. 「ページの保存と実行」をクリックすると、ランタイムに対話モード・レポートが表示されます。

ランタイムに、ナビゲーション・メニュー(左側)の最後に空白のアイコンとともに「Tasks」アイテムが表示されることに注意してください。右にスクロールして、数値の識別子や監査詳細がレポートのいくつかの列に表示されることにも注目してください。

「Milestones」で実行したタスクと同じタスクを実行して「Tasks」ページを更新します。

7.2 ランタイムの「Tasks」ページの更新

実行時に一部のルーチン・タスクを完了して、「Tasks」ページの初期更新を実行します(「Milestones」ページに対して実行したタスクと同様ですか、「Tasks」では対話グリッドではなく、対話モード・レポートが使用されている点が異なります)。

  • 共有コンポーネントのナビゲーション・メニューの更新

  • ランタイムのデフォルト・レポートの監査列の非表示

「共有コンポーネント」にナビゲーション・メニューを表示するには、次のステップを実行します。

  1. 実行時開発者ツールバーの「ページ6の編集」をクリックしてページ・デザイナに戻ります。
  2. 「保存」ボタンの近くにある「共有コンポーネント」アイコン共有コンポーネントをクリックします。
  3. 「ナビゲーション」で、「ナビゲーション・メニュー」をクリックします。
  4. 「デスクトップ・ナビゲーション・メニュー」をクリックします。

「Tasks」リスト・エントリを更新するには、次のようにします。

  1. 「タスク」をクリックします。
  2. 「リスト・エントリ」で、次のステップを実行します。
    1. 順序 - 「60」と入力します
    2. イメージ/クラス - 「LOV」アイコンをクリックして「fa-table」を選択します。
    3. 「変更の適用」をクリックします。
  3. 右上隅の「実行」アイコン(再生ボタン)をクリックして、アプリケーションを実行します。ナビゲーション・サイドバーか変化したことに注意してください。

ランタイムのデフォルト・レポートに監査列が表示されないようにします。

対話モード・レポートで複数の列を非表示にするには、次のステップを実行します。

  1. 「アクション」メニューをクリックし、「列」を選択します。
  2. 「レポートに表示」の列のリストで、次のアイテムをダブルクリックして、「表示しない」に移動します。
    • 作成日

    • 作成者

    • 更新日

    • 更新者



  3. 「適用」をクリックします。

レポート・レイアウトを新しいデフォルトとして保存するには、次のステップを実行します。

  1. 「アクション」メニューをクリックし、「レポート」を選択して、「レポートの保存」をクリックします。
  2. 「レポートの保存」で、次のステップを実行します。
    1. 保存: 「デフォルトのレポート設定として保存」を選択します
    2. デフォルト設定(「主」)を使用して、「適用」をクリックします。

7.3 「Tasks」対話モード・レポートへの参照の適用

以前に作成した動的LOVは参照とも呼ばれます(問合せが別の表で値を参照するため)。

まず、共有コンポーネント内のPROJECT NAME動的LOVをコピーして、SAMPLE$PROJECT_MILESTONESを問い合せるように構成します。

次に、PROJECT_ID列およびMILESTONE_ID列に対して2つの参照を適用します。

LOVをコピーするには、次のようにします。

  1. 実行時開発者ツールバーの「ページ6の編集」をクリックしてページ・デザイナに戻ります。
  2. 「共有コンポーネント」アイコンをクリックします。
  3. 「他のコンポーネント」で、「LOV」をクリックします。
  4. 「コピー」をクリックします。
  5. 「LOVのコピー」で、次のステップを実行します。
    1. LOVのコピー - PROJECT NAME - 動的を選択します
    2. 新規LOV名 - 「Milestone Name」と入力します
    3. 「コピー」をクリックします。

    「LOV」画面が「MILESTONE NAME」アイテムで再表示されます。

  6. 「MILESTONE NAME」をクリックします。
  7. 「問合せ」の内容を削除し、次のコードをコピーして貼り付けます。
    select NAME d, ID r
    from SAMPLE$PROJECT_MILESTONES
    order by NAME
  8. 「検証」アイコン(チェックマーク)をクリックして、問合せが機能することを確認します。
  9. 「変更の適用」をクリックします。
  10. ページ・デザイナの「Tasks」ページに戻るには、右上にある「ページ6の編集」アイコンをクリックします。

「Project Name」動的LOVをPROJECT_ID列に適用します(「Milestones」ページのプロセスと同様)。次に、「Milestone Name」動的LOVを「MILESTONE_ID」に適用します。

「PROJECT NAME」LOVを対話モード・レポートに適用するには、次のステップを実行します。

  1. 「レンダリング」タブの「Tasks」で、「列」を展開して「PROJECT_ID」を選択します。
  2. プロパティ・エディタで、次のように操作します。
    1. 識別: タイプ - 「プレーン・テキスト(LOVに基づく)」を選択します。
    2. LOV: LOV - 「PROJECT NAME」を選択します。
    3. ヘッダー: ヘッダー -「Project」と入力します
    4. 保存」ボタンをクリックします。

「MILESTONE NAME」LOVを対話モード・レポートに適用するには、次のステップを実行します。

  1. 「レンダリング」タブの「列」で、「MILESTONE_ID」を選択します。
  2. プロパティ・エディタで、次のように操作します。
    1. 識別: タイプ - 「プレーン・テキスト(LOVに基づく)」を選択します。
    2. LOV: LOV - 「MILESTONE NAME」を選択します。
    3. ヘッダー: ヘッダー - 「Milestone」と入力します
  3. 「ページの保存と実行」をクリックします。
  4. レポートを下へスクロールして、ランタイムの「Project」列および「Milestone」列を確認します。完了したら、「ページ6の編集」をクリックしてページ・デザイナに戻ります。

7.4 タスク・レポートの残りの列の更新

タスク対話モード・レポートの他の残りの列を、ページの作成ウィザードで生成された未加工の状態から更新します。

  • NAME

  • START_DATE

  • END_DATE

  • COST

  • IS_COMPLETE_YN

対話モード・レポートの列ヘッダーを更新するには、次のステップを実行します。

  1. 「レンダリング」タブの「Tasks」で、「列」を展開して「NAME」を選択します。
  2. プロパティ・エディタで、次のように操作します。
    1. ヘッダー: ヘッダー -「Task」と入力します

複数の列に日付書式マスクを適用するには、次のステップを実行します。

  1. 「レンダリング」タブで、[Ctrl]を押しながら次の2つの列を選択します。
    1. START_DATE
    2. END_DATE
  2. プロパティ・エディタで、次のように操作します。
    1. 外観: 書式マスク - 「LOV」アイコンをクリックします
    2. 「12-JAN-2004」を選択します。

      ヒント:

      リストを開かずに、フィールドに「DD-MON-YYYY」と入力することもできます。

    3. 「保存」をクリックします。

ドル金額書式マスクを列に適用するには、次のステップを実行します。

  1. 「レンダリング」タブで、「COST」を選択します。
  2. プロパティ・エディタで、次のように操作します。
    1. 外観: 書式マスク - 「LOV」アイコンをクリックします
    2. $5,234.10を選択します。
    3. 「保存」をクリックします。

_YN列を含む対話モード・レポートで(YまたはNのかわりに)「Yes」および「No」を表示するように構成するには、次のステップを実行します。

  1. 「レンダリング」タブで、「IS_COMPLETE_YN」を選択します。
  2. プロパティ・エディタで、次のように操作します。
    1. ヘッダー: ヘッダー -「Complete」と入力します
    2. 「保存」をクリックします。
  3. 「Tasks」レポート・リージョン(「レンダリング」タブの「コンテンツ本文」の下)をクリックします。
  4. プロパティ・エディタで、次のように操作します。
    1. ソース: タイプ - 「SQL問合せ」を選択します。
    2. ソース: SQL問合せ - コンテンツを削除してから、次のコードをコピーして貼り付けます。
      select ID,
             PROJECT_ID,
             MILESTONE_ID,
             NAME,
             DESCRIPTION,
             ASSIGNEE,
             START_DATE,
             END_DATE,
             COST,
             decode(is_complete_yn, 'Y', 'Yes', 'No') IS_COMPLETE_YN,
             CREATED,
             CREATED_BY,
             UPDATED,
             UPDATED_BY
        from SAMPLE$PROJECT_TASKS

    decode文は、列値を最初の値("Y")と比較して一致する場合は次の値("Yes")で置換し、それ以外の場合は最後の値("No")で置換するために使用します。

  5. 「ページの保存と実行」をクリックします。
  6. レポートへの変更をランタイムに確認します。完了したら、次のセクションに進みます。

7.5 「Update Task」フォームの「Project」および「Milestone」フィールドの更新

ページの作成ウィザードでフォームを使用してタスク・レポートを作成したときに、フォームをモーダルにするように選択しました。(このチェック・ボックスの選択を解除したままにした場合は、ポップアップ・オーバーレイではなく別のページが実行時に表示されます。)実行時にモーダル・ページを表示するには、関連付けられたレポートからそのページを開く必要があります。

「Tasks」対話モード・レポートの編集アイコンのいずれかをクリックして、「Update Task」フォームを開きます。

実行時に対話モード・レポートのモーダル・フォームを表示するには、次のステップを実行します。

  1. 行の「編集」アイコン(鉛筆)をクリックします。

    「Update Task」フォームが表示されます。

    また、実行時開発者ツールバーのページ番号がレポート(ページ6)からフォーム(ページ7)に変更されたことにも注意してください。

フォームは未加工の状態ですが、SAMPLE$PROJECT_TASKSに基づいているため、開発プロセスはレポートの場合と非常によく似ています。

  • 「Milestone」および「Project」の名前フィールドには、名前のかわりに数値の識別子が使用されています。

  • 一部のフィールド(「プロジェクトID」など)は、わかりやすい名前にする必要があります。

  • 一部のフィールドは、制限付きの選択リストや表示専用ではなく、編集可能なテキスト・フィールドです。

  • 監査列をここに表示する必要はありません(これらはレポートに含まれています)。

最初に、PROJECT NAMEおよびMILESTONE NAME参照を適切なフィールドに適用します。

クイック編集を使用してページ・デザイナに戻るには、次のステップを実行します。

  1. ランタイム開発者ツールバーで、「クイック編集」(クイック編集)をクリックします。

    クイック編集モードになります。画面が暗くなり、様々な要素にマウス・カーソルを合わせると、レンチ・アイコンが表示されます。

  2. クイック編集モードで、「プロジェクトID」フィールドをクリックします(レンチ・アイコンをクリックしないでください)。

    P7_PROJECT_IDが選択された状態で、ページ・デザイナがロードされます。

「Project」および「Milestone」のフィールドに参照を適用する手順は、次のとおりです。

  1. プロパティ・エディタで、次のように操作します。
    1. 指定: タイプ - 「選択リスト」を選択します。
    2. ラベル: ラベル - 「Project」と入力します
    3. LOV: タイプ - 「共有コンポーネント」を選択します。
    4. LOV: LOV - 「PROJECT NAME」を選択します。
  2. 「P7_MILESTONE_ID」をクリックします。
  3. プロパティ・エディタで、次のように操作します。
    1. 指定: タイプ - 「選択リスト」を選択します。
    2. ラベル: ラベル - 「Milestone」と入力します
    3. LOV: タイプ - 「共有コンポーネント」を選択します。
    4. LOV: LOV - 「MILESTONE NAME」を選択します。
  4. 「保存」をクリックします。

    ページ・デザイナからモーダル・ページを直接実行できないことに注意してください。

  5. ランタイムに戻り、ページをリフレッシュしてから「編集」アイコン(鉛筆)をクリックすると、フォームが再表示されます。

    (ページ・デザイナからモーダル・ページを直接実行できないことに注意してください。関連付けられている非モーダル・ページを実行して、再度ページを開く必要があります。)

  6. 「Project」および「Milestone」のフィールドが変更されていることに注意してください。それぞれをクリックして、どのように動作するかを確認します。
  7. 終了したら、実行時開発者ツールバーで「ページ7の編集」をクリックします。

7.6 「Update Task」フォームの残りのフィールドの更新

最後に、一連の小さいタスクを実行して「Update Task」フォームの表示方法を更新します。
  • 名前 -「名前」フィールドをテキスト・フィールドに変更し、ラベルを「Task」に変更します。
  • 割当て先 - SQL問合せに基づく選択リストに変更します。
  • 「開始日」および「終了日」- 書式マスクを「DD-MM-YYYY」に変更します。
  • コスト - 位置合せと書式マスクを変更します($5,234.10)。
  • 完了(Y/N) - ラベルおよびタイプをスイッチに変更します。
  • 監査列(作成日、作成者、更新日、更新者)を非表示にします。

「P7_NAME」フィールドを更新する手順は、次のとおりです。

  1. 「P7_NAME」をクリックします。
  2. プロパティ・エディタで、次のように操作します。
    1. 指定: タイプ - 「テキスト・フィールド」を選択します。
    2. ラベル: ラベル - 「Task」と入力します

「P7_ASSIGNEE」フィールドを更新する手順は、次のとおりです。

  1. 「P7_ASSIGNEE」をクリックします。
  2. プロパティ・エディタで、次のように操作します。
    1. 指定: タイプ - 「選択リスト」を選択します。
    2. List of Values: タイプ - 「SQL問合せ」を選択します。
    3. LOV: SQL問合せ - 次のコードをコピーして貼り付けます。
      select distinct ASSIGNEE as d, 
             ASSIGNEE as r
        from SAMPLE$PROJECT_TASKS
       order by 1
    4. 「保存」をクリックします。

「P7_START_DATE」および「P7_END_DATE」フィールドを更新する手順は、次のとおりです。

  1. [Shift]または[Ctrl]を押しながら、「P7_START_DATE」および「P7_END_DATE」をクリックして両方を選択します。
  2. プロパティ・エディタで、次のように操作します。
    1. 外観: 書式マスク - 「LOV」アイコンをクリックします。
    2. 「12-JAN-2004」を選択します。
    3. 設定: 表示- 「両方」を選択します。
  3. 「P7_END_DATE」をクリックして、それのみを選択します。
  4. プロパティ・エディタで、次のように操作します。
    1. レイアウト: 新規行の開始 - 「いいえ」を選択します。
    2. 「保存」をクリックします。

「P7_COST」フィールドを更新する手順は、次のとおりです。

  1. 「P7_COST」をクリックします。
  2. プロパティ・エディタで、次のように操作します。
    1. 設定: 数字の位置合せ - 「左」を選択します。
    2. 外観: 書式マスク - 「LOV」アイコンをクリックします。
    3. $5,234.10を選択します。
    4. 「保存」をクリックします。

「P7_IS_COMPLETE_YN」フィールドを更新する手順は、次のとおりです。

  1. 「P7_IS_COMPLETE_YN」をクリックします。
  2. プロパティ・エディタで、次のように操作します。
    1. 指定: タイプ - 「切替え」を選択します。
    2. ラベル: ラベル - 「Complete」と入力します

監査列のフィールドを非表示にするには、次のようにします。

  1. [Ctrl]または[Shift]を押しながら、次の4つのアイテムを選択します。
    • P7_CREATED

    • P7_CREATED_BY

    • P7_UPDATED

    • P7_UPDATED_BY

  2. プロパティ・エディタで、次のように操作します。
    1. 指定: タイプ - 「非表示」を選択します。
    2. 「保存」をクリックします。
  3. ランタイムに戻り、ページをリフレッシュします。
  4. 「編集」アイコン(鉛筆)をクリックすると、フォームが再表示されます。
  5. 変更内容をレビューしてください。フォームをいろいろとクリックして新しいインタフェースを試してください。完了したら、実行時開発者ツールバーの「アプリケーション#####」をクリックしてアプリケーションのホーム・ページに戻ります。

フォーム付きの「Tasks」レポートが完成しました。次のレッスンに進みます。