1. アプリケーション・ビルダー・ユーザーズ・ガイド
  2. アプリケーション内のページの管理
  3. ダイアログ・ページの作成

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

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

親トピック: アプリケーション内のページの管理

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

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

Oracle APEXでは、次の2つのタイプのダイアログ・ページをサポートしています。

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

Oracle APEXでは、ユニバーサル・テーマ - 42にダイアログ・ページ・テンプレートが含まれています。「ページ・モード」を「モーダル」または「非モーダル」に設定すると、APEXは自動的にデフォルトのダイアログ・ページ・テンプレートを使用します。

ダイアログ・テンプレートを指定することで、ダイアログの外観とレイアウトをさらに定義できます。

親トピック: ダイアログ・ページの作成

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

テーマにダイアログ・テンプレートが含まれていない場合にそれを作成します。また、ダイアログ・テンプレート属性を編集して表示を変更します。

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

関連項目:

必須のダイアログ・ページ・テンプレート属性

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

ダイアログ・ページ・テンプレートを作成するには:

  1. 「共有コンポーネント」、「テンプレート」ページにナビゲートします。
    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
    2. アプリケーションを選択します。
    3. 「共有コンポーネント」をクリックします。
    4. 「ユーザー・インタフェース」で、「テンプレート」を選択します。
  2. 「作成」をクリックします。
  3. テンプレートの作成ウィザードで、次の手順を実行します。
    1. テンプレート・タイプ - 「ページ」を選択して、「次へ」をクリックします。
    2. 作成方法 - 「既存のテンプレートのコピーとして」を選択して、「次へ」をクリックします。
    3. コピー元 - コピー元のアプリケーションを選択し、「次」をクリックします。
    4. テーマの指定 - コピー元のテーマおよびコピー先のテーマを選択して、「次へ」をクリックします。
    5. 新規テンプレート - コピーするモーダル・ダイアログ・テンプレート(「ドロワー」、「モーダル・ダイアログ」、ウィザード・モーダル・ダイアログなど)を探し、「はい」を選択します。
    6. 「ページ・テンプレートのコピー」を選択します。
  4. ダイアログ・ページ・テンプレートがカレント・テーマでアクティブになっていることを確認します

関連項目:

デフォルトのページ・テンプレートの選択

親トピック: ダイアログ・ページの作成

6.4.3 ページ・デザイナでのダイアログ・ページの編集

ページ・デザイナで属性を編集することにより、ダイアログ・ページの表示を変更します。

ページ・デザイナでダイアログ・ページを編集するには:

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

    「モーダル・ダイアログ」および「非モーダル・ダイアログ」オプションは、現在のアプリケーション・テーマにデフォルトのダイアログ・ページ・テンプレートが含まれている場合にのみ選択できるようになります。

  4. 外観、ダイアログ・テンプレート - ダイアログ・テンプレートを選択して、このページの外観とレイアウトを定義します。ここで行った選択は、デフォルトのダイアログ・テンプレートより優先されます。

    オプションは次のとおりです。

    • テーマのデフォルト値
    • ドロワー
    • モーダル・ダイアログ
    • ウィザード・モーダル・ダイアログ

    ダイアログ・テンプレートはアプリケーション・テーマで定義されます。ダイアログ・ページが作成されると、テンプレートは自動的に「テーマのデフォルト値」に設定され、現在のテーマで定義されているデフォルトのページ・テンプレートを使用してページがレンダリングされます。

  5. 必要に応じて、「外観」グループの残りの属性を編集します。

    属性についてさらに学習するには、フィールドレベル・ヘルプを参照してください。

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

親トピック: ダイアログ・ページの作成

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

「取消」ボタンを含むダイアログ・ページについて、ボタンがクリックされたときの動作を制御する動的アクションを作成します。

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

関連項目:

動的アクションの管理

親トピック: ダイアログ・ページの作成

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

「ダイアログを閉じる」ページ・プロセスを作成することにより、ダイアログ・ページを閉じます。

以前のリリースでは、この「ダイアログを閉じる」ページ・プロセスは「ポップアップ・ウィンドウを閉じる」と呼ばれていました。このダイアログは、ページ・テンプレート(apex.navigation.dialog.close)に含まれるクローズのJavaScriptコールを使用して、ダイアログのクローズを処理します。ページ・プロセスは、親ページで参照することがあるダイアログ・ページ・アイテムの戻りもサポートしています。

ヒント:

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

関連項目:

親トピック: ダイアログ・ページの作成

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

ボタンまたはリンクを使用してダイアログ・ページを開きます。

ダイアログ・ページでは、次のブランチング・オプションがサポートされています。

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

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

    • どちらのページもページ・モードは同じです。たとえば、「モーダル・ダイアログ」ページと、ダイアログの「チェーン」属性が「オン」に設定されているページです。「チェーン」属性を「オン」に設定すると、多くの内部APEXウィザードで表示されるダイアログなど、チェーン・ダイアログまたはネスト・ダイアログがサポートされます。チェーンまたはネスト・ダイアログを使用すると、ダイアログ・ウィンドウを再度利用して各ページを表示できます。
  • ダイアログ・ページから標準・ページの場合。
    • ダイアログ・ページから標準・ページにブランチすると、ダイアログが閉じられ、ユーザーはブラウザ内の新しいページに移動します。新しいページは、親(または起動)ページ、もしくはアプリケーション内の別の標準ページです。

親トピック: ダイアログ・ページの作成

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

親ページでのリフレッシュ・アクションの処理について学習します。

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

ヒント:

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

関連項目:

動的アクションの管理

親トピック: ダイアログ・ページの作成