動的アクションの管理

14.2 動的アクションの管理

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

動的アクションについて
動的アクションは、JavaScriptを必要としないで複雑なクライアント側の動作を宣言的に定義する方法を提供します。動的アクションの作成ウィザードを使用して、定義された条件セットが発生したときに実行されるアクションを指定します。また、アクションの影響を受ける要素や、影響を受ける時期と影響も指定できます。
動的アクション・イベントについて
ページで発生するイベントに基づいて起動する動的アクションを定義できます。Oracle Application Expressには、ブラウザ・イベント、フレームワーク・イベント、コンポーネント・イベントおよびカスタム・イベントの4種類のカテゴリが含まれています。この項では、サポートされるすべてのイベントについて説明します(JavaScriptの内部イベント名をカッコで示します)。
動的アクションの作成
動的アクションの作成には、アクションが発生する時期(オプション条件を指定する)、実行されるアクションおよびアクションの影響を受ける要素を指定する手順が含まれます。プロパティ・エディタ属性の詳細は、属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。
動的アクションの編集
動的アクションを作成した後、作成プロセス中に定義した属性を変更したり、プロセス中に指定できなかった属性を指定したり(「認可スキーム」の指定など)、追加のtrueアクションを追加できます。
動的アクションのイベント有効範囲の定義
動的アクションを作成した後、アクションの有効範囲を1回のみのトリガーとするか、現在のページの存続期間中とするか、トリガー要素が部分ページ・リフレッシュ(PPR)によって更新されるまでとするかを変更できます。
動的アクションの削除
動的アクションを削除するには、その動的アクションをページ・デザイナで選択して、コンテキスト・メニューから「削除」を選択します。
動的アクションを使用したJavaScriptのコールについて
動的アクションを作成することによって、JavaScriptコードを実行できます。
動的アクションのデバッグ
Oracle Application Expressで動的アクションをデバッグする方法について学習します。

関連項目:

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

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

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

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

ページ上で、対話グリッド列、アイテム、ボタン、リージョン、JavaScript式またはjQueryセレクタを編集または作成します。このコンポーネントは、起動される時期を定義する際、動的アクション内で参照されます。
アクションを起動するアプリケーション・ページから動的アクションを作成します。
動的アクションをテストするためにアプリケーションを実行します。

ヒント:

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

動的アクションの例の表示

動的アクションの例を表示するには、サンプル・アプリケーションのサンプル動的アクションをインストールします。または、Oracle Learning Library (http://www.oracle.com/oll/apex)に移動します。表示されるフィールドに検索基準(dynamic actionsなど)を入力して「検索」をクリックします。

関連項目:

生産性およびサンプル・アプリケーションのインストール

親トピック: 動的アクションの管理

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

ページで発生するイベントに基づいて起動する動的アクションを定義できます。Oracle Application Expressには、ブラウザ・イベント、フレームワーク・イベント、コンポーネント・イベントおよびカスタム・イベントの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プロパティのoverflowがscroll (要素の明示的な高さがコンテンツの高さよりも低いときはauto)に設定されている要素が考えられます。
選択(select): ユーザーがテキスト・フィールドの一部のテキストを選択するときに起動します。
スワイプ(apexswipe): ポインタを水平方向に高速に移動したときに起動します。
タップ(apextap): ポインタで細かいタップまたはクリックを実行したときに起動します。

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

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

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

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

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

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

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

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

親トピック: 動的アクションの管理

14.2.3 動的アクションの作成

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

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

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

ヒント:

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

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

「メッセージ」タブに、対処が必要なメッセージを示す赤または黄色の印が表示されます。メッセージを選択すると、プロパティ・エディタに関連する属性が表示されます。赤いエラー・メッセージは、保存する前に対処する必要があります。
プロパティ・エディタで、次の動的アクション属性を編集します。
ヒント:

属性の詳細は、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。
1. 指定、名前 - 動的アクションの名前を入力します。
2. 実行オプション、順序 - この計算の順序を入力します。これによって実行の順序が決まります。
3. 時期、イベント - 動的アクションを起動するイベントを指定します。
4. 時期、選択タイプ - イベントのトリガーに使用するページ要素または構成体のタイプを選択します。
  
  注意:
  
  選択されたイベントでページ要素の定義がサポートされている場合にのみ、使用できます。「ページのロード」、「ページのアンロード」、「サイズ変更」、「ページの送信前」、「方向の変更」のイベントを選択すると、この属性は非表示になります。他のすべてのイベント・タイプでは、このフィールドが表示されます。
5. クライアント側の条件、タイプ - オプションで、動的アクションのtrueおよびfalseアクション処理を制御する条件のタイプを選択します。クライアント側の条件が定義されていない場合、trueアクションのみが起動します。クライアント側の条件が定義されている場合、条件を満たすと、trueアクションが起動され、条件を満たさない場合は、falseアクションが起動されます。
  
  注意:
  
  宣言的に条件を定義できるように、他のプロパティはタイプに基づいて条件付きで表示されます。条件タイプItem = Valueの例では、ItemおよびValueプロパティが表示され、条件の評価でチェックされます。
次に、イベントがTrueまたはFalseに評価された場合に実行するアクションを定義します。
既存のアクションを編集するには、次のステップを実行します。
1. 動的アクション・ツリーを展開し、既存のアクションを選択します(TrueまたはFalseを選択します)。
2. プロパティ・エディタで、次のアクション属性を編集します。
  - アクション - 実行するアクションを指定します。
  - 影響を受ける要素 - このアクションが実行されると影響を受けるページ・コンポーネントの定義方法を選択します。選択した要素のタイプに応じて、追加のオプションが表示されます。
  - 実行オプション、イベント結果時に実行 - トリガー要素条件が満たされたときにアクションを起動する(Trueアクション)か、満たされないときに起動する(Falseアクション)かをTrueまたはFalseを選択して指定します。条件が指定されていない場合、Trueアクションのみが起動されます。
  - 選択タイプ - このアクションが実行されると影響を受けるページ・コンポーネントの定義方法を選択します。
  - 初期化時に実行 - 初期化時にアクションを起動するかどうかを指定します。
    
    初期化の意味は、動的アクションがどのように定義されているかによって多少異なります。動的アクションが対話グリッド列で起動するように定義されている場合、これは、対話グリッド行が編集のためにアクティブ化されたときにアクションを起動するかどうかを指定します。他のすべての動的アクションでは、これは、ページがロードされたときにアクションを起動するかどうかを指定します。
新規アクションを追加するには、次のようにします。
1. 「動的アクション」ツリーを展開します。
2. 動的アクションを右クリックし、「TRUEアクションの作成」または「FALSEアクションの作成」を選択します。
3. 前のステップで説明したように、プロパティ・エディタでアクションを編集します。
「保存」をクリックします。

関連項目:

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

親トピック: 動的アクションの管理

14.2.4 動的アクションの編集

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

動的アクションを編集するには、次のステップを実行します。

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

ヒント:

属性の詳細は、プロパティ・エディタで属性を選択し、中央ペインで「ヘルプ」タブをクリックして、参照してください。
既存のアクションを編集するには、次のステップを実行します。
1. 「動的アクション」ツリーを展開し、「True」または「False」ノードを表示します。
2. 「True」または「False」で、アクションを選択します。
3. プロパティ・エディタでアクションを編集します。
新規アクションを追加するには、次のようにします。
1. 「動的アクション」ツリーを展開します。
2. 動的アクションを右クリックし、「TRUEアクションの作成」または「FALSEアクションの作成」を選択します。
3. プロパティ・エディタでアクションを編集します。
「保存」をクリックします。

親トピック: 動的アクションの管理

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

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

有効範囲を指定するには、次のステップを実行します。

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

プロパティ・エディタに、動的アクションの属性が表示されます。属性は、グループに編成されます。
グループまたは属性を検索するには、次のステップを実行します。
- グループまたは属性の検索: 「フィルタ・プロパティ」フィールドにキーワードを入力します。プロパティ・エディタにグループまたは属性が表示されます。デフォルトの表示に戻すには、キーワードを削除します。
- 「グループに移動」の使用: 「グループに移動」をクリックして、グループを選択します。デフォルトの表示に戻すには、「グループに移動」を再度クリックして、「すべて開く」を選択します。
「詳細」で、「イベント有効範囲」を選択します。イベントの有効範囲によって、イベントが2回目または連続して評価されるタイミングが決まります。オプションは次のとおりです。
- 静的: カレント・ページの存続期間中、イベント・ハンドラをトリガー要素にバインドします。ただし、トリガー要素が部分ページ・リフレッシュ(PPR)で更新された場合はバインドされなくなります。
- 動的: 部分ページ・リフレッシュ(PPR)で再作成されるトリガー要素に関係なく、カレント・ページの存続期間中、イベント・ハンドラをトリガー要素にバインドします。
- 1回: イベント・ハンドラをトリガー要素に1回のみバインドします。ページが完全にリフレッシュされるまで、動的アクションが再度トリガーされることはありません。
「保存」をクリックします。

親トピック: 動的アクションの管理

14.2.6 動的アクションの削除

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

動的アクションを削除するには、次のステップを実行します。

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

親トピック: 動的アクションの管理

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

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

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

関連項目:

動的アクションの管理

親トピック: 動的アクションの管理

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

Oracle Application Expressで動的アクションをデバッグする方法について学習します。

親トピック: 動的アクションの管理

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

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

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

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

親トピック: 動的アクションのデバッグ

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

動的アクションをデバッグするには、次のステップを実行します。

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

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

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

親トピック: 動的アクションのデバッグ