プライマリ・コンテンツに移動
Oracle® Application Expressアプリケーション・ビルダー・ユーザーズ・ガイド
リリース18.1
E98591-01
目次へ移動
目次
索引へ移動
索引

前
次

7.4 ダイアログ・ページの作成

Oracle Application Expressには、モーダルおよび非モーダル・ダイアログ・ページに対するサポートが提供されています。モーダルまたは非モーダル・ダイアログ・ページは、テンプレート・タイプが「ダイアログ・ページ」のページ・テンプレートが、カレント・アプリケーション・テーマに1つ以上含まれている場合にのみサポートされます。

7.4.1 サポートされているダイアログについて

新しいページを作成するときに、ウィザードによって、ページ・モードを選択するプロンプトが表示されます。ページ・モードによって、ページが標準アプリケーション・ページであるかダイアログ・ページであるかが決まります。Oracle Application Expressは、次の2つのダイアログ・ページ・タイプをサポートしています。

  • モーダル・ダイアログ - モーダル・ダイアログは、同じブラウザ・ウィンドウ内に配置されるオーバーレイ・ウィンドウです。モーダル・ダイアログは、ユーザーが終了して閉じるまで、アクティブでフォーカスされたままです。モーダル・ダイアログがアクティブである間は、ダイアログを閉じるまでユーザーは残りのページと対話できません。

  • 非モーダル・ダイアログ - 非モーダル・ダイアログは、個別のポップアップ・ブラウザ・ウィンドウを表示します。ユーザーは、非モーダル・ダイアログおよびページのコンテンツと対話できます。リクエストされる情報が続行に必要でない場合に、非モーダル・ダイアログを使用します。このウィンドウ・タイプは、別の場所で作業が続いている間、開いたままにできます。

7.4.2 ダイアログ・ページ・テンプレートの使用

Oracle Application Expressには、ユニバーサル・テーマ - 42にダイアログ・ページ・テンプレートが含まれています。ページ・モードを「モーダル」または「非モーダル」に設定すると、Oracle Application Expressは自動的にデフォルトのダイアログ・ページ・テンプレートを使用します。この項では、テーマにダイアログ・テンプレートが含まれていない場合にそれを作成する方法と、ダイアログ・テンプレート属性を編集する方法について説明します。

7.4.2.1 ダイアログ・ページ・テンプレートの作成

既存のアプリケーションを使用し、テーマにそのようなダイアログ・ページ・テンプレートが含まれない場合は、ダイアログ・ページ・テンプレートを作成する必要があります。最初から作成できますが、最も簡単な方法は既存のダイアログ・テンプレートをコピーすることです。

ダイアログ・ページ・テンプレートを作成するには、次のステップを実行します。

  1. サンプル・データベース・アプリケーションからダイアログ・ページ・テンプレートをコピーします。

    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。

    2. テンプレートをコピーするアプリケーションを選択します。

    3. 「共有コンポーネント」をクリックします。

    4. 「ユーザー・インタフェース」で、「テンプレート」を選択します。

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

    6. テンプレートの作成ウィザードで、次のステップを実行します。

      • テンプレート・タイプ - 「ページ」を選択して、「次へ」をクリックします。

      • 作成方法 - 「既存のテンプレートのコピーとして」を選択して、「次へ」をクリックします。

      • コピー元 - 「サンプル・データベース・アプリケーション」を選択して、「次へ」をクリックします。

      • テーマの指定 - コピー元のテーマおよびコピー先のテーマを選択して、「次へ」をクリックします。

      • 新規テンプレート - 「モーダル・ダイアログ」テンプレートを探します。「コピー」で、「はい」を選択します。

      • 「ページ・テンプレートのコピー」を選択して作成します。

  2. ダイアログ・ページ・テンプレートがカレント・テーマでアクティブになっていることを確認します。デフォルトのページ・テンプレートの選択を参照してください。

7.4.2.2 ダイアログ・ページ・テンプレート属性の定義について

ダイアログ・ページ・テンプレートには、ダイアログ・ページの初期化、クローズおよび取消を処理するJavaScriptファンクション・コールが含まれています。ダイアログ・ページ・テンプレートを作成する場合は、これらおよび他のダイアログ・ページ・テンプレート属性を定義する必要があります。

7.4.3 ページ・デザイナでのダイアログとしてのダイアログ・ページの定義

ページ・デザイナでダイアログとしてページを定義するには、次のステップを実行します。

  1. ページ・デザイナでページを表示します。
    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
    2. アプリケーションを選択します。
    3. ページを選択します。
    ページ・デザイナが表示されます。
  2. 「ページ・デザイナ」で「外観」を見つけます。
  3. 「ページ・モード」で、次のいずれかを選択します。
    • モーダル・ダイアログ - ページはモーダル・ダイアログとして表示されます。モーダル・ダイアログは、ビューポート内に配置されたオーバーレイ・ウィンドウで、エンド・ユーザーが終了する(閉じる)までアクティブでフォーカスされたままです。基になるページはグレーアウトされ、ダイアログを閉じるまで、エンド・ユーザーは残りのページと対話できません。
    • 非モーダル・ダイアログ - ページは非モーダル・ダイアログとして表示されます。非モーダル・ダイアログはビューポート内に配置されたオーバーレイ・ウィンドウであり、エンド・ユーザーはこれを使用してダイアログおよびダイアログを起動したページのコンテンツと対話できます。非モーダル・ダイアログは、リクエストされる情報が続行するために必要な情報ではなく、ウィンドウが開いたままでも別の場所で作業を続行できる場合に使用できます。
  4. 必要に応じて他の「外観」属性を編集します。

    ヒント:

    属性の詳細は、フィールドレベル・ヘルプを参照してください。

  5. 「ダイアログ」で、適切な属性を編集します。
    1. - ダイアログの幅をピクセル単位または比率で入力します。ページ・テンプレートのダイアログ初期化コード内の置換文字列#DIALOG_WIDTH#は、このアイテムに入力した値で置換されます。デスクトップ・ユーザー・インタフェースを使用しているページの場合、値は500などのピクセル単位で設定します。ただし、jQueryモバイル・スマートフォン・ユーザー・インタフェースを使用しているページの場合、値は80%などのパーセント単位で設定します。
    2. 高さ - ダイアログの高さをピクセル単位で入力します(たとえば、500)。ページ・テンプレートのダイアログ初期化コード内の置換文字列#DIALOG_HEIGHT#は、入力した値で置換されます。
    3. 最大幅 - ダイアログの最大幅をピクセル単位で入力します。ページ・テンプレートのダイアログ初期化コード内の置換文字列#DIALOG_MAX_WIDTH#は、このアイテムに入力した値で置換されます。
    4. 属性 - ダイアログのサポートはページのユーザー・インタフェースによって異なります。高さ、幅および最大幅など、ダイアログ属性のサブセットは宣言的にサポートされます。ダイアログの追加属性を定義するには、名前/値のペアをカンマ区切りリストに入力します。ページ・テンプレート・レベルで定義されたダイアログ初期化コード内の置換文字列#DIALOG_ATTRIBUTES#は、このアイテムに入力された任意の値で置換されます。
    5. CSSクラス - このコンポーネントに追加するクラスを入力します。複数のクラスは空白で区切って追加できます。
    6. チェーン - このダイアログが別のダイアログによって開かれ、同じダイアログ・ウィンドウを再利用する場合、「はい」を選択します。たとえば、このダイアログが複数ページ・ダイアログ・ウィザードの一部で、ウィザードの各ステップにダイアログ・ウィンドウを再利用する場合です。このダイアログが別のダイアログによって開かれ、新規ダイアログ・ウィンドウで開かれる必要がある場合、「いいえ」を選択します。たとえば、このダイアログがモーダルで、親モーダル・ダイアログ・ウィンドウ内で開く場合です。
  6. 変更内容を保存するには、保存をクリックします。

7.4.4 ダイアログ・ページでの「ダイアログを取り消す」動的アクションの生成

ダイアログ・ページに「取消」ボタンが含まれる場合は、そのボタンのクリックに基づいた動的アクションを生成し、そのTrueアクション・イベントを「ダイアログを取り消す」に設定する必要があります。この動的アクションは、ページ・テンプレート(apex.navigation.dialog.cancel)に含まれる取消のJavaScriptコールを使用して、ダイアログの取消を処理します。

7.4.5 ダイアログ・ページでの「ダイアログを閉じる」ページ・プロセスの生成

「ダイアログを閉じる」ページ・プロセスを作成することによって、Oracle Application Expressでダイアログ・ページを閉じます。以前のリリースでは、このページ・プロセスは「ポップアップ・ウィンドウを閉じる」と呼ばれていました。このダイアログは、ページ・テンプレート(apex.navigation.dialog.close)に含まれるクローズのJavaScriptコールを使用して、ダイアログのクローズを処理します。ページ・プロセスは、親ページで参照することがあるダイアログ・ページ・アイテムの戻りもサポートしています。例を表示するには、サンプル・データベース・アプリケーションの任意のダイアログ・ページを編集します。

ヒント:

「ダイアログを閉じる」動的アクションでダイアログ・ページを閉じることもできます。動的アクションとプロセスの両方が、ダイアログ・ページ・アイテムの戻りをサポートしています。ページを送信する必要がある場合はページ・プロセスを使用し、ページを送信する必要がない場合は動的アクションを使用します。両方とも、最終的にはクローズのJavaScriptコールをコールします。または、ダイアログ・ページを閉じて、ブランチで指定したページにリダイレクトするページ・ブランチを作成できます。

7.4.6 ダイアログ・ページでのブランチングについて

ダイアログ・ページを開くには、ボタンまたはリンクを使用します。ダイアログ・ページでは、次のブランチング・オプションがサポートされています。

  • ダイアログ・ページからダイアログ・ページへの場合。

    1つのダイアログ・ページから別のダイアログ・ページに、ブランチできます。

    • 両方のページは、「モーダル・ダイアログ」のような同じページ・モードで、ダイアログのChained属性は「はい」に設定されています。Chained属性を「はい」に設定すると、多くの内部Application Expressウィザードで表示されるチェーンまたはネスト・ダイアログがサポートされます。チェーンまたはネスト・ダイアログを使用すると、ダイアログ・ウィンドウを再度利用して各ページを表示できます。

  • ダイアログ・ページから標準・ページの場合。

    • ダイアログ・ページから標準・ページにブランチすると、ダイアログが閉じられ、ユーザーはブラウザ内の新しいページに移動します。新しいページは、親(または起動)ページ、もしくはアプリケーション内の別の標準ページです。

7.4.7 親ページでのリフレッシュ・アクションの処理

ダイアログ・ページで「ダイアログを閉じる」ページ・プロセスを生成した場合、新しい「ダイアログのクローズ」動的アクション・イベント・タイプを使用して、親ページにリフレッシュ・アクションを実装する必要があります。「値の設定」のTrueアクションを作成するとき、タイプ設定「ダイアログ戻りアイテム」を使用し、ダイアログの戻りアイテムに基づいて単一の値が設定されるようにできます。

例を表示するには、サンプル・データベース・アプリケーションの製品のページに移動します。製品のページで、「Create Product」ボタンにはダイアログを起動する動的アクションが関連付けられています。ダイアログを閉じると、「ダイアログのクローズ」動的アクションをトリガーします。定義するすべてのTrueアクションにこのタイプの動的アクションを使用できます。この例では、親ページのレポートをリフレッシュしてページを送信します。

ヒント:

親ページの部分ページ・リフレッシュを行う場合は、ダイアログを閉じるときの動的アクションを実装します(たとえば、レポート・ページおよびフォーム・ページのデータをモーダル・ダイアログ・フォームで編集し、閉じるときにのみレポートがリフレッシュされるようにする場合)。対照的に、マルチ・ステップのモーダル・ウィザードがある場合や、ダイアログを閉じるときに可能なターゲットページが複数ある場合は、ブランチ処理が最適な方法となります。