13.2 動的アクションの管理

動的アクションにより、開発者は、JavaScriptを必要としないで複雑なクライアント側の動作を宣言的に定義できます。

13.2.1 動的アクションについて

動的アクションは、JavaScriptを必要としないで複雑なクライアント側の動作を宣言的に定義する方法を提供します。動的アクションの作成ウィザードを使用して、定義された条件セットが発生したときに実行されるアクションを指定します。また、アクションの影響を受ける要素や、影響を受ける時期と影響も指定できます。

動的アクションを使用するとき、ページに追加する動的アクションが多くなるほど全体のページ・サイズが大きくなることに注意する必要があります。これは、動的アクション・フレームワークでは、定義された各動的アクションについてクライアントへの追加コードを生成し、そのコードはクライアント内のフレームワークによってダウンロードおよび実行される必要があるためです。

動的アクションを実装するプロセスには、次のステップがあります。

  1. アイテム、ボタン、リージョンなどのページ・コンポーネントを作成(または既存のページ・コンポーネントを使用)します。このコンポーネントは、起動される時期を定義する際、動的アクション内で参照されます。
  2. アクションを起動するアプリケーション・ページから動的アクションを作成します。
  3. 動的アクションをテストするためにアプリケーションを実行します。

ヒント:

問題をデバッグする方法の詳細は、「動的アクションのデバッグ」を参照してください。

ヒント:

動的アクションの例を表示するには、サンプル・アプリケーション「サンプル動的アクション」をインストールします。詳細は、「ギャラリからのアプリケーションのインストール」を参照してください。

13.2.2 動的アクション・イベントについて

ページで発生するイベントに基づいて起動する動的アクションを定義できます。Oracle APEXには、ブラウザ・イベント、フレームワーク・イベント、コンポーネント・イベントおよびカスタム・イベントの4種類のイベント・カテゴリが含まれています。この項では、サポートされるすべてのイベントについて説明します(JavaScriptの内部イベント名をカッコで示します)。

ブラウザ・イベント

ノート:

ページの現在のユーザー・インタフェース・タイプに応じて、表示されるイベントは異なります。別のタイプに対応するイベントを選択する場合、現在のタイプに対応しないものも含むすべてのイベントを表示する「非サポートの表示」を選択できます。

  • 変更(change): コントロールが入力フォーカスを失い、フォーカスの取得後に値が変更された場合に起動します。
  • クリック(click): ポインティング・デバイスのボタンがトリガー要素上でクリックされたときに起動します。
  • ダブルクリック(dblclick): ポインティング・デバイスのボタンがトリガー要素上でダブルクリックされたときに起動します。
  • ダブルタップ(apexdoubletap): ポインタでダブルタップまたはダブルクリックを実行したときに起動します。
  • フォーカスを取得(focusing): ポインティング・デバイスまたは要素へのタブによる移動によってトリガー要素がフォーカスを受け取ったときに起動します。
  • キー・ダウン(keydown): キーボード上のキーが押されたときに起動します。矢印キーなどの特殊なキーストロークを(キーが押された後に)取得するときにこのイベントを使用します。
  • キー・プレス(keypress): キーボード上のキーが押され、結果としてテキストが入力されたときに起動します。実際のテキスト入力を取得するときにこのイベントを使用します。
  • キー・リリース(keyup): キーボード上のキーが解放されたときに起動します。矢印キーなどの特殊なキーストロークを(キーが解放された後に)取得するときにこのイベントを使用します。
  • フォーカスを失う(focusout): ポインティング・デバイスまたは要素からのタブによる移動によってトリガー要素がフォーカスを失ったときに起動します。
  • マウス・ボタン・プレス(mousedown): ポインティング・デバイスのボタンがトリガー要素上で押されたときに起動します。
  • マウス・ボタン・リリース(mouseup): ポインティング・デバイスのボタンがトリガー要素上で解放されたときに起動します。
  • マウス・エンター(mouseenter): ポインティング・デバイスがトリガー要素内に移動すると起動します。
  • マウス・リーブ(mouseleave): ポインティング・デバイスがトリガー要素外に移動すると起動します。
  • マウス・ムーブ(mousemove): ポインティング・デバイスがトリガー要素上にあるとき、移動すると起動します。
  • パン(apexpan): ポインタを押しながら水平方向に移動したときに起動します。
  • ページのロード(ready): ページがロードされるときに起動します。
  • ページのアンロード(unload): ページがアンロードされるときに起動します。
  • 押す(apexpress): ポインタを押したまま250ミリ秒経過したときに起動します。
  • サイズ変更(resize): ブラウザ・ウィンドウがサイズ変更されるときに起動します。
  • リソースのロード(load): トリガー要素がウィンドウ要素の場合(「時期」属性の「JavaScript式」値にwindowを使用)、ブラウザでドキュメント内のすべてのコンテンツ(ウィンドウ、フレーム、オブジェクトおよびイメージを含む)のロードが完了したときにイベントが起動します。その他の要素では、このイベントはURLに関連付けられた要素(イメージ、スクリプト、フレーム、iframe)にのみ使用できます。
  • スクロール(scroll): スクロール可能なトリガー要素がスクロールされるときに起動します。これは、ブラウザ・ウィンドウ(「時期」属性の「JavaScript式」値にwindowを使用)、スクロール可能なフレーム、またはCSSプロパティのoverflowscroll (要素の明示的な高さがコンテンツの高さよりも低いときはauto)に設定されている要素が考えられます。
  • 選択(select): ユーザーがテキスト・フィールドの一部のテキストを選択するときに起動します。
  • スワイプ(apexswipe): ポインタを水平方向に高速に移動したときに起動します。

  • タップ(apextap): ポインタで細かいタップまたはクリックを実行したときに起動します。

フレームワーク・イベント

  • リフレッシュ後(apexafterrefresh): トリガー要素がリフレッシュされた後に起動します。このイベントは、部分ページ・リフレッシュを実行し、このイベントを起動するトリガー要素にのみ有効です。これをサポートするネイティブ・コンポーネントは、「対話モード・レポート」、「クラシック・レポート」、「チャート」、「リスト・ビュー」およびカスケードLOVサポートが存在するすべてのアイテム・タイプです。プラグインでもこのイベントがサポートされる場合があります。refreshObjectオプションを指定したときは、apex.server.pluginおよびapex.server.process APIでも、このイベントを送信できます。『Oracle APEX APIリファレンス』apex.serverを参照してください

  • ページの送信前(apexbeforepagesubmit): ページが送信される前に起動します。

  • リフレッシュ前(apexbeforerefresh): トリガー要素がリフレッシュされる前に起動します。このイベントは、部分ページ・リフレッシュを実行し、このイベントを起動するトリガー要素にのみ有効です。これをサポートするネイティブ・コンポーネントは、「対話モード・レポート」、「クラシック・レポート」、「チャート」、「リスト・ビュー」およびカスケードLOVサポートが存在するすべてのアイテム・タイプです。プラグインでもこのイベントがサポートされる場合があります。refreshObjectオプションを指定したときは、apex.server.pluginおよびapex.server.process APIでも、このイベントを送信できます。Oracle APEX JavaScript APIリファレンスapex.serverを参照してください。

  • ダイアログのクローズ(apexafterclosedialog): APEXのダイアログを閉じたときに起動します。このイベントは、「ダイアログを閉じる」ページ・プロセスまたは「ダイアログを閉じる」動的アクションを使用してダイアログを閉じたときにのみ起動します。

コンポーネント・イベント

これらのイベントは、カスタム・イベントをトリガーする、アプリケーションで使用可能なコンポーネント(アイテム、リージョンまたは動的アクションのいずれか)が存在する場合にのみ使用できます。これらのイベントは、イベント名[コンポーネント名]の書式で表示され、たとえばShuttleネイティブ・アイテム・タイプによってトリガーされるChange Orderイベントは、Change Order [Shuttle]と表示されます。コンポーネント・イベントは、APEXに付属のネイティブ・コンポーネントまたはアプリケーションにインストールしたプラグイン・コンポーネントのいずれかからトリガーされます。

  • ネイティブ・コンポーネントによってトリガーされるイベント

    これらは、イベント名[コンポーネント名]の書式になります。ネイティブ・コンポーネントで発生するイベントに関連したヘルプについては、interactiveGridおよびtreeViewを参照してください。Oracle APEX JavaScript APIリファレンスinteractiveGridおよびtreeViewを参照してください。

  • プラグイン・コンポーネントによってトリガーされるイベント

    これらは現在のアプリケーションに追加されると使用可能になり、イベント名[コンポーネント名]の書式になります。プラグインが発生させるイベントに関連したヘルプについては、「共有コンポーネント」、「プラグイン」、「プラグイン名」、「ヘルプ・テキスト」にナビゲートして、プラグイン構成ページのヘルプ・テキストを参照してください(プラグイン作成者がここにドキュメントを格納している場合があります)。

カスタム・イベント

  • カスタム・イベント:

    「カスタム」を選択すると、カスタム・イベントを定義できる追加のフィールドが表示されます。これは、ネイティブまたはプラグインによって提供されるイベントが十分でない場合に役立ちます。

13.2.3 動的アクションの作成

動的アクションの作成には、アクションが発生する時期(オプション条件を指定する)、実行されるアクションおよびアクションの影響を受ける要素を指定する手順が含まれます。プロパティ・エディタ属性についてさらに学習するには、属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。

ページ・デザイナで動的アクションを作成するには:

  1. ページ・デザイナでページを表示します。
    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
    2. アプリケーションを選択します。
    3. ページを選択します。
    ページ・デザイナが表示されます。
  2. 左ペインで「動的アクション」タブをクリックします。
  3. 「動的アクション」で、「イベント」を右クリックし、「動的アクションの作成」を選択します。

    ヒント:

    イベント・タイプを選択してから右クリックして、「動的アクションの作成」を選択することもできます。

    プロパティ・エディタに動的アクション属性が表示されます。

    ページ・デザイナは、次に必要なアクションを示します。エラーが発生した場合は、「保存」ボタンの横に「メッセージ」が表示されます。「メッセージ」アイコンをクリックすると、すべてのエラーを示すダイアログが表示されます。エラーを選択すると、プロパティ・エディタの関連する属性がハイライトされます。

  4. プロパティ・エディタで、次の動的アクション属性を編集します。

    ヒント:

    属性についてさらに学習するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。

    1. 指定名前 - 動的アクションの名前を入力します。
    2. 実行オプション順序 - この計算の順序を入力します。これによって実行の順序が決まります。
    3. 時期イベント - 動的アクションを起動するイベントを指定します。
    4. 時期選択タイプ - イベントのトリガーに使用するページ要素または構成体のタイプを選択します。

      ノート:

      選択されたイベントでページ要素の定義がサポートされている場合にのみ、使用できます。「ページのロード」、「ページのアンロード」、「サイズ変更」、「ページの送信前」、「方向の変更」のイベントを選択すると、この属性は非表示になります。他のすべてのイベント・タイプでは、このフィールドが表示されます。

    5. クライアント側の条件タイプ - オプションで、動的アクションのtrueおよびfalseアクション処理を制御する条件のタイプを選択します。クライアント側の条件が定義されていない場合、trueアクションのみが起動します。クライアント側の条件が定義されている場合、条件を満たすと、trueアクションが起動され、条件を満たさない場合は、falseアクションが起動されます。

      ノート:

      宣言的に条件を定義できるように、他のプロパティはタイプに基づいて条件付きで表示されます。条件タイプItem = Valueの例では、ItemおよびValueプロパティが表示され、条件の評価でチェックされます。

    次に、イベントがTrueまたはFalseに評価された場合に実行するアクションを定義します。
  5. 既存のアクションを編集するには:
    1. 動的アクション・ツリーを展開し、既存のアクションを選択します(TrueまたはFalseを選択します)。
    2. プロパティ・エディタで、次のアクション属性を編集します。
      • アクション - 実行するアクションを指定します。
      • 影響を受ける要素 - このアクションが実行されると影響を受けるページ・コンポーネントを選択します。選択した要素のタイプに応じて、追加のオプションが表示されます。
      • 実行オプションイベント結果時に実行 - トリガー要素条件が満たされたときにアクションを起動する(Trueアクション)か、満たされないときに起動する(Falseアクション)かをTrueまたはFalseを選択して指定します。条件が指定されていない場合、Trueアクションのみが起動されます。
      • 初期化時に実行 - 初期化時にアクションを起動するかどうかを指定します。

        初期化の意味は、動的アクションがどのように定義されているかによって多少異なります。動的アクションが対話グリッド列で起動するように定義されている場合、これは、対話グリッド行が編集のためにアクティブ化されたときにアクションを起動するかどうかを指定します。他のすべての動的アクションでは、これは、ページがロードされたときにアクションを起動するかどうかを指定します。

  6. 新規アクションを追加するには:
    1. 「動的アクション」ツリーを展開します。
    2. 動的アクションを右クリックし、「TRUEアクションの作成」または「FALSEアクションの作成」を選択します。
    3. 前のステップで説明したように、プロパティ・エディタでアクションを編集します。
  7. 「保存」をクリックします。

13.2.4 動的アクションの編集

動的アクションを作成した後、作成プロセス中に定義した属性を変更したり、プロセス中に指定できなかった属性を指定したり(「認可スキーム」の指定など)、追加のtrueアクションを追加できます。

動的アクションを編集するには:

  1. ページ・デザイナでページを表示します。
    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
    2. アプリケーションを選択します。
    3. ページを選択します。
    ページ・デザイナが表示されます。
  2. 左ペインで「動的アクション」タブをクリックします。動的アクションがイベント別に編成されます。
  3. 該当するイベントを展開し、動的アクションを選択します。
    動的アクションの属性がプロパティ・エディタに表示されます。
  4. プロパティ・エディタで、該当する動的アクション属性を編集します。

    ヒント:

    属性についてさらに学習するには、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。

  5. 既存のアクションを編集するには:
    1. 「動的アクション」ツリーを展開し、「True」または「False」ノードを表示します。
    2. 「True」または「False」で、アクションを選択します。
    3. プロパティ・エディタでアクションを編集します。
  6. 新規アクションを追加するには:
    1. 「動的アクション」ツリーを展開します。
    2. 動的アクションを右クリックし、「TRUEアクションの作成」または「FALSEアクションの作成」を選択します。
    3. プロパティ・エディタでアクションを編集します。
  7. 「保存」をクリックします。

13.2.5 動的アクションのイベント有効範囲の定義

動的アクションを作成した後、アクションの有効範囲を1回のみのトリガーとするか、現在のページの存続期間中とするか、トリガー要素が部分ページ・リフレッシュ(PPR)によって更新されるまでとするかを変更できます。

有効範囲を指定するには:

  1. ページ・デザイナでページを表示します。
    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
    2. アプリケーションを選択します。
    3. ページを選択します。
    ページ・デザイナが表示されます。
  2. 左ペインで「動的アクション」タブをクリックします。
  3. 「動的アクション」で、動的アクションを選択します。

    プロパティ・エディタに、動的アクションの属性が表示されます。属性は、グループに編成されます。

  4. グループまたは属性を検索するには:
    • グループまたは属性の検索: 「フィルタ・プロパティ」フィールドにキーワードを入力します。プロパティ・エディタにグループまたは属性が表示されます。デフォルトの表示に戻すには、キーワードを削除します。

    • 「グループに移動」の使用: 「グループに移動」をクリックして、グループを選択します。デフォルトの表示に戻すには、「グループに移動」を再度クリックして、「すべて開く」を選択します。

  5. 「詳細」で、「イベント有効範囲」を選択します。イベントの有効範囲によって、イベントが2回目または連続して評価されるタイミングが決まります。オプションは次のとおりです。
    • 静的: カレント・ページの存続期間中、イベント・ハンドラをトリガー要素にバインドします。ただし、トリガー要素が部分ページ・リフレッシュ(PPR)で更新された場合はバインドされなくなります。

    • 動的: 部分ページ・リフレッシュ(PPR)で再作成されるトリガー要素に関係なく、カレント・ページの存続期間中、イベント・ハンドラをトリガー要素にバインドします。

    • 1回: イベント・ハンドラをトリガー要素に1回のみバインドします。ページが完全にリフレッシュされるまで、動的アクションが再度トリガーされることはありません。

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

13.2.6 動的アクションの削除

動的アクションを削除するには、その動的アクションをページ・デザイナで選択して、コンテキスト・メニューから「削除」を選択します。

動的アクションを削除するには:

  1. ページ・デザイナでページを表示します。
    1. ワークスペースのホームページで、「アプリケーション・ビルダー」アイコンをクリックします。
    2. アプリケーションを選択します。
    3. ページを選択します。
    ページ・デザイナが表示されます。
  2. 左ペインで「動的アクション」タブをクリックします。
  3. 該当するイベントを展開し、削除する動的アクションを見つけます。
  4. 動的アクションを右クリックして、「削除」を選択します。
  5. 「保存」をクリックします。

13.2.7 動的アクションを使用したJavaScriptのコールについて

動的アクションを作成することによって、JavaScriptコードを実行できます。

ActionExecute「値の設定」を使用して動的アクションを作成することによって、JavaScriptコードを実行することもできます。クライアント側の条件タイプを「JavaScript式」に設定することにより、動的アクションの条件に対してJavaScriptコードを使用することもできます。

13.2.8 動的アクションのデバッグ

APEXで動的アクションをデバッグする方法について説明します。

13.2.8.1 動的アクションのデバッグについて

APEX内での動的アクションのデバッグは、他のデバッグと少し異なります。これは、動的アクション・フレームワークで実行される処理の多くが、サーバー側でなくクライアント側で実行されるためです。動的アクションをデバッグするには、ブラウザでJavaScriptコンソールがサポートされている場合、APEXがデバッグ情報をブラウザのJavaScriptコンソールに出力します(たとえば、FirebugがインストールされたFirefoxは、デバッグ情報をコンソール・ペインに表示します)。デバッグ情報により、動的アクションが起動した時期、および動的アクションについての追加情報が次の形式で表示されます。

Dynamic Action Fired: [Dynamic Action name] ([Action name]) {JavaScript object containing all Dynamic Action information}

この形式によって、動的アクション名、トリガーされたアクションを示すアクション名、動的アクションに関する多くの情報(WHEN要素、影響を受ける要素、イベント・オブジェクト、動的アクションに関連付けられているデータなど)が含まれるJavaScriptオブジェクトを識別できます。

13.2.8.2 動的アクションのデバッグ

動的アクションをデバッグするには:

  1. 動的アクションが含まれているアプリケーションのデバッグが有効化されていることを確認します。「デバッグ・モードの使用」を参照してください。
  2. 動的アクションが含まれているページを実行します。
  3. ブラウザのJavaScriptコンソールを開きます。
  4. 開発者ツールバーで、「デバッグ」をクリックします。

    ページがリフレッシュされます。ページのロード時に起動するように設定されている動的アクションがある場合は、ブラウザ・コンソールにデバッグ出力が表示されます。

    デバッグ情報はデバッグ・モードで実行されている場合にのみ出力されるため、デバッグ・モードをオンのままにすることで、動的アクションが予期される時期に起動されるかどうかをさらにテストできます。たとえば、ある特定のアイテムの値が変更されるときに起動する動的アクションを定義した場合、そのアイテムの値を変更すると、動的アクションが起動したかどうかのデバッグ出力がコンソールに表示されます。