プライマリ・コンテンツに移動
Oracle® Application Expressチュートリアル: アプリケーションの構築
リリース5.1
E89953-01
目次へ移動
目次
索引へ移動
索引

前
次

6 「Team Member」ページの開発

ページの作成ウィザードで生成された「Team Member」レポートをチーム・メンバーに便利なディレクトリに開発し、「Team Member」フォームを開発してユーザーがより簡単に「Team Member」データを編集できるようにします。

このレッスンについて

これまでに、アプリケーションの作成ウィザードを使用して、DEMO_TEAM_MEMBERS表のレポートとフォームを生成しました。

このレッスンでは、ページ・デザイナを使用して一般的なページの組み合せ、レポートとフォームを開発します。レポートはSQL問合せの書式設定された結果で、フォームはレポートと対になるページで、レポートが問い合せる表をユーザーが更新できるようにします。(通常、フォームは親レポート・ページの子ページです。)どちらのページもDEMO_TEAM_MEMBERS表を問い合せます。

「Team Members」レポートはユーザーの連絡先情報のリポジトリとして使用されますが、「Team Members」フォームは、ユーザーが開いて「Team Members」レポートの情報を更新できる、別のページです。

レポート・ページを開発するには、SQL問合せで問い合せられた列のリストを更新し、ランタイムに表示された列の一部を削除して、ページの下部を移動してそのテキストを編集することによって主レポートを更新します。

アプリケーションの作成ウィザードでレポートとフォームが作成されると、デフォルトでフォームはランタイムにモーダル・ダイアログとして表示されます。モーダル・ダイアログは、同じブラウザ・ウィンドウ内に表示されるオーバーレイ・ウィンドウです。それはユーザーが終了して閉じるまで、アクティブでフォーカスされたままです。

フォーム・ページでは、ページの作成ウィザードのデフォルトから、一部のフィールドへの必須条件の追加など、フィールドの外観と機能を更新し、いくつかの「表示のみ」アイテムを構成します。また、ユーザーが必要に応じて展開し、あまり使用されない情報を参照できるサブ・リージョンを追加します。

ここから開始:

Basic Projects App Export - Topic 4.sql

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

6.1 対話モード・レポートのSQL問合せの編集

Oracle Application Expressの対話モード・レポートでは、エンド・ユーザーが必要に合せてデータを操作でき、アプリケーション開発者に多数のレポートを定義してもらう必要がありません。エンド・ユーザーが表示されるデータとその表示方法を操作できるようにするには、基礎になるOracle Database表からデータをすべて取得するSQL文を定義する必要があります。

ページ・デザイナのコード・エディタを使用して、対話モード・レポートのDEMO_TEAM_MEMBERS表の列を問い合せるSQLを編集します。これにより、ユーザーが他のユーザーのタスクの表示や自分のワークフローの更新などの操作ができるようになります。

ページ・デザイナで「Team Members」対話モード・レポートを編集するには次のステップを実行します。

  1. アプリケーションのホームページで、「2 - Team Members」をクリックしてページ2に移動します。
  2. 「レンダリング」ツリーで、「Team Members」リージョンを選択します。
  3. プロパティ・エディタの「ソース: SQL問合せ」の下で、「コード・エディタ」アイコンをクリックします。
    「コード・エディタ」アイコン
  4. コード・エディタで現在のコンテンツを削除してから、次のコードをコピーして貼り付けます。
    select
    "ID",
    "USERNAME",
    "FULL_NAME",
    "EMAIL",
    "PROFILE",
    "CREATED",
    "CREATED_BY",
    "UPDATED",
    "UPDATED_BY"
     from "DEMO_TEAM_MEMBERS"
  5. 「検証」アイコン(チェックマーク)をクリックして、SQL文が有効であることを確認します。

    「検証」アイコン
  6. 「OK」をクリックします。
これで対話モード・レポートのSQL問合せを更新できました。

6.2 ランタイムの対話モード・レポートに表示される列の変更

対話モード・レポートのSQL文は上述のすべての列を問い合せないと機能しませんが、対話モード・レポートにそれらをすべて表示するとユーザーに迷惑です。IDCREATEDおよびCREATED_BYなどの列は、主にエンド・ユーザーでなく開発者に情報を伝えるために存在します。

ランタイムで「アクション」メニューを使用して対話モード・レポートの主レポートを構成し、エンド・ユーザーがどの列にアクセスできるかを変更します。

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

  1. ページ・デザイナで「ページの保存と実行」ボタンをクリックします。
    1. ページのフォーカシングに関するメッセージで求められた場合、「再試行」をクリックします。
    別のブラウザ・ウィンドウにランタイムが開くかリフレッシュされます。
  2. ランタイムで、検索バーの横にある「アクション」メニュー・ボタンをクリックします。
  3. 「列」を選択します。
    「列選択」ダイアログが表示されます。
  4. 「レポートに表示」列で、[Ctrl]キーを押したまま次のアイテムをクリックして、複数のアイテムを選択します。
    • ID

    • ユーザー名

    • 作成日

    • 作成者

    • 更新日

    • 更新者

  5. 列ペインの間にある「削除」ボタン( < )をクリックします。
  6. 「適用」をクリックします。

表のデフォルトの順序を「フルネーム」列のアルファベット順に構成して、レポートの操作性を向上させることもできます。

「フルネーム」を基準に行の順序をソートするには、次のステップを実行します。

  1. 「フルネーム」列ヘッダーをクリックして「列ヘッダー」メニューを開き、「昇順ソート」アイコンをクリックします。

最後に、レポートを保存してこれらの変更を対話モード・レポートの主レポートに維持する必要があります(他のレポート・タイプにはプライベート、代替およびパブリックがあります)。

すべてのユーザーがプライベート・レポートを保存できますが、主レポートを保存できるのは開発者のみです。主レポートは、最初に表示されるレポートです。他のユーザーが主レポートの名前を変更したり削除したりすることはできません。

現在の設定をデフォルトで保存するには、次のステップを実行します。

  1. 「アクション」をクリックし、「レポート」「レポートの保存」の順に選択します。
  2. 「保存」で、「デフォルトのレポート設定として保存」を選択します。
  3. デフォルトのレポート・タイプが「主」であることを確認し、「適用」をクリックします。

    注意:

    主レポートは、すべてのエンド・ユーザーが初めてページにアクセスするときのレポート表示方法です。任意の数の代替レポートを保存できます。なんらかの追加のレポート・レイアウトが保存されたら、エンド・ユーザーは、自動的に表示されるドロップダウン・リストからそれを選択して実行できます。
これで、いくつかの列をビューから非表示にして、対話モード・レポートのデフォルトのソート順を変更できました。

6.3 異なるリージョンへのボタンの移動

ページの作成ウィザードは対話モード・レポートに自動的に「CREATE」ボタンを追加して、エンド・ユーザーが新しいメンバーをすぐに表に追加できるようにしていますが、ボタンを別の場所に配置しなおす方が適切な場合があります。

ページ・デザイナのコンテキスト・メニューを使用して、「CREATE」ボタンを「ブレッドクラム」リージョンに移動します。

ヒント:

ドラッグ・アンド・ドロップで「レイアウト」にアイテムを移動することもできます。

ヒント:

「元に戻す」ボタン 前のアクションを元に戻すには、「元に戻す」ボタンをクリックします。

コンテキスト・メニューを使用して異なるリージョンにボタンを移動するには、次のステップを実行します。

  1. ランタイムで、開発者ツールバーの「ページの編集 2」をクリックします。
  2. 「レイアウト」ペインで、「CREATE」ボタンを右クリックします。
  3. 「移動先」を選択し、「ブレッドクラム」を選択して、「作成」を選択します。

    「CREATE」ボタンが「ブレッドクラム」リージョンのCREATEプレースホルダに移動します。

    注意:

    「レンダリング」ツリーで、「リージョン・ボタン」フォルダ(「CREATE」ボタンを含む)は、コンテンツ本体からブレッドクラムに自動的に移動します。


    GUID-5DCC113C-CD31-4AF8-9EF5-BF023441B323-default.pngの説明が続きます
    図GUID-5DCC113C-CD31-4AF8-9EF5-BF023441B323-default.pngの説明
  4. Property Editorで、次のように操作します。
    1. 指定: ラベル - 「Add Team Member」と入力します
    2. 外観: ホット - 「はい」を選択します。
  5. 「ページの保存と実行」をクリックして、変更されたボタンを確認します。
    1. 「ページにフォーカス」ダイアログが表示されたら、「再試行」をクリックします。
    別のブラウザ・ウィンドウにランタイムが開くかリフレッシュされます。

これで「作成」ボタンを移動できました。

Team Membersのレポートとフォームのレポート部分が完成しました。次に、「Team Members」フォームを開発します。

6.4 モーダル・ダイアログでのストレッチ・フォーム・フィールドの有効化

次に、「Team Members」レポート・ページに、「Maintain Team Member」フォームを開発します。

「Maintain Team Member」フォームはモーダル・ダイアログです。モーダル・ダイアログは、ページ・デザイナでは別のページとみなされます。動作はページ内ページのようですが、複雑度は同等だからです。

まずページ・デザイナでフォームに移動し、フォームの「テンプレート・オプション」でフィールド幅を構成して、フォームが見やすく、統一的に見えるようにします。

リージョン内のすべてのフィールドの幅を広げるには、次のステップを実行します。

  1. ランタイムで、チーム・メンバーの名前の横にある「編集」アイコン(鉛筆)をクリックし、「Maintain Team Member」モーダル・ダイアログを表示します。
  2. 開発者ツールバーの「ページの編集 3」をクリックして、ページ・デザイナにページを表示します。
  3. 「Maintain Team Member」リージョンを選択します。
  4. プロパティ・エディタで「外観: テンプレート・オプション」を見つけて「テンプレート・オプション」ボタン(「テンプレート・デフォルトの使用」)をクリックします。
  5. 「テンプレート・オプション」で、次のように操作します。
    • 詳細: アイテムの幅 - ストレッチ・フォーム・フィールドを選択します

  6. 「OK」をクリックします。
    「テンプレート・オプション」ボタンが「テンプレート・デフォルトの使用, ストレッチ・フォーム・フィールド」に変更されます。

6.5 フォーム・フィールドとTextareaの更新

アプリケーションの作成ウィザードは、DEMO_TEAM_MEMBERS表の列に基づくフィールドを使用して、このページに自動的にデータを移入しました。技術的にはフィールドはすべて機能していて正しく表示されていますが、次のようにインタフェースを変更するとユーザーに有益です。
  • ユーザー名など、特定のフィールドのユーザーによる入力を必須にする。これは一般的で適切な方法です。NOT NULL制約は、NULL値を受け入れないように列に強制します。これは常に値を含むようにフィールドに強制します。新しいレコードを挿入したり、このフィールドに値を追加しないでレコードを更新したりできないことを意味します。

  • ユーザーによる情報入力を奨励するには、「プロファイル」フィールドのサイズを増やします。このフィールドは、ロールとチームの任務の説明として役立ちます。

  • 写真BLOBのラベルを変更します。

  • 見やすくするために、不必要なフィールドをビューから非表示にします。

「ユーザー名」と「フルネーム」フィールドを必須に変更してユーザーが空白のままにすることができないようにします。

  1. [Ctrl]キーを押したままP3_USERNAMEP3_FULL_NAMEをクリックして、両方を選択します。
  2. Property Editorで、次のように操作します。
    1. 外観: テンプレート - 「必須」を選択します
    2. 検証: 必須の値 - 「はい」を選択します
    「ユーザー名」と「フルネーム」のフィールドが必須になりました。

「プロファイル」フィールドはユーザーが個人情報を入力するところなので、複数のテキスト行の表示をサポートする必要があります。それをテキスト領域に変換するには次のステップを実行します。

  1. P3_PROFILEを選択します。
  2. Property Editorで、次のように操作します。
    1. 指定: タイプ - 「テキスト領域」を選択します
    これで「プロファイル」フィールドが単一行でなく段落として表示されるようになりました。

「Photo Blob」フィールドのラベルを変更するには、次のステップを実行します。

  1. P3_PHOTO_BLOBを選択します。
  2. Property Editorで、次のように操作します。
    1. ラベル: ラベル - 「Photo」と入力します
    これでフィールドのラベルが「Photo」になりました。

ユーザーがプロファイルを更新するときに、いくつかのフィールドはまったく不必要です。

フィールドをビューから非表示にするには、次のステップを実行します。

  1. [Ctrl]キーを押したまま、次の4つのアイテムのみを選択します(P3_PHOTO_BLOBは選択しません)。
    • P3_PHOTO_FILENAME

    • P3_PHOTO_MIMETYPE

    • P3_PHOTO_CHARSET

    • P3_PHOTO_LAST_UPDATED

  2. Property Editorで、次のように操作します。
    1. 指定: タイプ - 「非表示」を選択します

    写真のファイル名、MIMEタイプ、キャラクタ・セットおよび最終更新日のフィールドが、ランタイムでビューから非表示になります。

    ヒント:

    「クイック選択」ボタンを使用して、リスト全体を表示するのでなく最も一般に使用されるタイプのショート・リストから選択することもできます。
    GUID-2462E263-19A7-4018-AFCD-860434F47477-default.pngの説明が続きます
    図GUID-2462E263-19A7-4018-AFCD-860434F47477-default.pngの説明

    注意:

    複数のコンポーネントを選択すると、プロパティ・エディタは共通の属性の属性名の横に青い三角形を付けて識別し、属性フィールドの外枠を青で示します。選択されたコンポーネントがすべて同じ属性値だった場合、名前と値は通常どおり表示されます。すべての値が一致しない場合、フィールドは空です。

6.6 展開可能サブ・リージョンの作成

一部の詳細(タイムスタンプなど)は便利ですが、ほとんどの時間、ユーザーが参照する必要はありません。それらを「Audit Details」サブ・リージョンにグループ化し、将来の使用に備えて維持しつつフォームのスペースを節約することができます。

折りたためるサブ・リージョンを作成するには、次のステップを実行します。

  1. 「レンダリング」ツリーで、「Maintain Team Member」リージョンを右クリックして「サブ・リージョンの作成」を選択します。
    「新規」サブ・リージョンが、「サブ・リージョン」フォルダに表示されます。
  2. Property Editorで、次のように操作します。
    1. 指定: タイトル - 「Audit Details」と入力します
    2. 外観: テンプレート - 折りたたみ可能を選択します

プロパティ・エディタで、監査列を「Audit Details」サブ・リージョンに移動します。

  1. [Ctrl]キーを押したまま次のアイテムを選択します。
    • P3_CREATED

    • P3_CREATED_BY

    • P3_UPDATED

    • P3_UPDATED_BY

  2. Property Editorで、次のように操作します。
    1. レイアウト: リージョン - 「..Audit Details」を選択します

      注意:

      2つの終止符は、インタフェースにおけるサブ・リージョンの名前の短縮機構です。実際には「Sub Region, Audit Details」と読まれると思ってください。

    アイテムがサブ・リージョンに移動します。
  3. 「Audit Details」リージョンをクリックします。
  4. 「外観: テンプレート・オプション」ボタンを見つけます(「テンプレート・デフォルトの使用, スクロール - デフォルト」を使用)。
  5. 「テンプレート・オプション」で、次のように操作します。
    1. デフォルト状態 - 折りたたみを選択します
    2. スタイル - UI装飾の削除を選択します
  6. 「OK」をクリックします。
  7. プロパティ・エディタで「グループに移動」アイコンをクリックしてサーバー側の条件を選択します。
    「グループに移動」アイコン
  8. Property Editorで、次のように操作します。
    1. サーバー側の条件: タイプ - 「アイテムはNULLではない」を選択します
    2. サーバー側の条件: アイテム - P3_IDを入力または選択します

6.7 「表示のみ」アイテム・タイプによるユーザー・アクセスの制限

ユーザーが監査列の情報を参照するのは許容できますが、このシステム生成データを直接変更する権限は決して持たせてはいけません。「表示のみ」にすることで、ユーザーがこれらのアイテムを編集するのを制限できます。

セキュリティ目的のために、この情報がランタイムで制限されていることを確認することも必要です。

リージョンの監査列へのユーザーのアクセスを制限するために「表示のみ」にするには、次のステップを実行します。

  1. [Ctrl]キーを押したまま、「Audit Details」サブ・リージョンの次のアイテムを選択します。
    • P3_CREATED

    • P3_CREATED_BY

    • P3_UPDATED

    • P3_UPDATED_BY

  2. Property Editorで、次のように操作します。
    1. 指定: タイプ - 「表示のみ」を選択します

ページ・デザイナでモーダル・ダイアログを編集している場合、保存と実行のボタンは変更を保存するのみで、新しいブラウザ・ウィンドウのページには移動しません。ランタイムの親ページでモーダル・ダイアログを開く必要があります。

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

ランタイムでモーダル・ダイアログを表示するには、次のステップを実行します。

  1. 次のいずれかを行います:
    • アプリケーション・ランタイムを含んでいるブラウザ・ウィンドウをリフレッシュします。
    • ページ・デザイナで「ページ・ファインダ」に「2」と入力して[Enter]を押し、モーダル・ダイアログの親ページに移動します。保存と実行をクリックします。ランタイムが、新しいブラウザ・ウィンドウに表示されます。
  2. ユーザーの名前の横にある「編集」アイコン(鉛筆)をクリックすると、改善されたモーダル・ダイアログが表示されます。
  3. 完了したら、開発者ツールバーの「アプリケーション####」をクリックしてアプリケーションのホームページに戻ります。

これで「Team Members」ページのレポートとフォームの更新を完了しました。

このレッスンでは、対話モード・レポートと、そのSQL問合せと主レポートを編集する方法、「ブレッドクラム」リージョンにボタンを移動する方法、モーダル・ダイアログのフィールドのデフォルト設定からの更新、および「表示のみ」アイテムを持つサブ・リージョンの作成について学習しました。

次のレッスンに進みます。