日日是Oracle APEX: 動的アクションのイベント有効範囲を確認する

2023年4月25日火曜日

動的アクションのイベント有効範囲を確認する

Oracle APEXの動的アクションにイベント有効範囲という設定があります。このイベント有効範囲として、静的、動的、１回のどれかを選ぶことができます。

簡単なアプリケーションを作成し、このプロパティイベント有効範囲の使い方を確認します。

確認アプリケーションの作成

以下のページを作成し、それぞれイベント有効範囲が異なる動的アクションを作成します。

ボタン、ページ・アイテム、動的コンテンツのリージョンを作成します。

ボタンREFRESHをクリックすると、リージョンTESTをリフレッシュします。ボタンの動作のアクションとして動的アクションで定義を指定します。

動的アクションのタイミングのイベントはクリック、選択タイプはボタン、ボタンはREFRESHになります。

実行するTRUEアクションとしてリフレッシュを選択します。影響を受ける要素の選択タイプにリージョン、リージョンにTESTを指定します。

ページ・アイテムP1_STATUSを作成します。タイプはテキスト・フィールドです。このページ・アイテムは、動的アクションのイベント有効範囲の違いを確認するために使用します。

ページ番号１にイベント有効範囲が静的のケース、ページ番号２に動的のケース、ページ番号３に１回のケースを実装します。そのため、作成するページ・アイテムは、ページ番号に従ってP1_STATUS、P2_STATUS、P3_STATUSとなります。

タイプが動的コンテンツのリージョンを作成します。

ソースのCLOBを返すPL/SQLファンクション本体として、以下を記述します。

	return q'~
	<div class="dummyclass">最初の文章</div>
	<br>
	<div class="dummyclass">次の文章</div>
	<br>
	<div class="dummyclass">最後の文章</div>
	~';

view raw dynamic-actions-event-scope-test.sql hosted with ❤ by GitHub

クラスdummyclassが設定されたDIV要素に対して動的アクションを作成します。この要素にマウスが乗った時にテキスト・コンテンツをページ・アイテムPn_STATUSにコピーします。

詳細の静的IDとしてtestを設定します。

イベント有効範囲が静的のケース

動的コンテンツに含まれるDIV要素に動的アクションを作成するため、動的アクション・ビューより動的アクションを作成します。

実行のイベント有効範囲として静的を選択します。

タイミングのイベントはマウス・エンター、選択タイプはjQueryセレクタ、jQueryセレクタとして#test .dummyclassを指定します。

リージョンTESTに含まれるDIV要素（classにdummyclassを含む）にマウスが乗ると、TRUEアクションが実行されます。

実行するTRUEアクションとしてJavaScriptコードの実行を選択し、設定のコードとして以下を記述します。

console.log(this.triggeringElement.textContent);

apex.items.P1_STATUS.setValue(this.triggeringElement.textContent);

初期化時に実行はオフにします。

マウスが離れたときに、ページ・アイテムをクリアする動的アクションも作成します。

タイミングのイベントにマウス・リーブを選択します。選択タイプ、jQueryセレクタは、マウス・エンターと同じ設定にします。

TRUEアクションとしてクリアを選択します。影響を受ける要素の選択タイプはアイテム、アイテムとしてP1_STATUSを選択します。

実行の初期化時に実行はオフにします。

リージョンTESTの属性にあるパフォーマンスの遅延ロードは、オフであることが必須です。

イベント有効範囲が静的の場合、動的アクションが設定されたHTML要素が更新されるとイベントが処理されなくなります。ページ全体の再ロードを伴わない更新は、一般にリージョンのリフレッシュとして実装されています。遅延ロードがオンの場合は、ページのロード後にリージョンのリフレッシュを実行するといった動作になるため、イベントが処理されなくなります。

イベント有効範囲が静的の場合は、以下のような動作になります。

ページ・ロード直後はDIV要素にマウスを乗せると動的アクションが呼び出され、ページ・アイテムP1_STATUSに文字列がコピーされます。その後、ボタンRefreshをクリックし、リージョンTESTをリフレッシュすると、動的アクションは（ページを再ロードするまで）呼び出されなくなります。

イベント有効範囲が動的のケース

実行のイベント有効範囲を動的にします。静的コンテナ(jQueryセレクタ)として#testを設定します。#testで指定されるリージョンTESTの内容は、リフレッシュを実行することにより書き換えられます。しかし、リージョンTESTの枠は変わらないため、静的コンテナとして指定できます。

タイミングのイベントはマウス・エンター、選択タイプとしてjQueryセレクタ、jQueryセレクタとして.dummyclassを指定します。