2024年8月27日火曜日

Oracle APEX 24.1の新しい入力イベントについて

Oracle APEX 24.1より動的アクションのタイミングのイベントに入力が追加されました。テキスト・フィールドまたはテキスト領域に文字が入力されたタイミングで、イベントが発行されます。

以下のGIF動画では、上のテキスト・フィールドに文字が入力されたときに、動的アクションにより下のテキスト・フィールドに入力された文字をコピーしています。デバッグ・モードを有効にしているため、動的アクションが呼び出される度にJavaScriptコンソールに実行履歴が表示されています。概ね１文字入力（または削除）ごとに動的アクションが呼び出されています。


上に配置されているテキスト・フィールドP1_SOURCEに動的アクションを作成しています。タイミングのイベントに入力を指定しています。


TRUEアクションで、入力したテキストを、下に配置されているページ・アイテムP1_TARGETにコピーします。

識別のアクションは値の設定、設定のタイプの設定にJavaScript式を選択し、JavaScript式としてthis.triggeringElement.valueを記述します。

影響を受ける要素にコピー先となるテキスト・フィールドを設定します。選択タイプはアイテム、アイテムはP1_TARGETとします。

設定の変更イベントの禁止はオフ、実行の初期化時に実行はオフにします。


以上で、GIF動画で確認できるうように、文字を入力する度に、文字のコピーが実施されます。

ブラウザ上でJavaScriptのコーディング経験があれば、この入力イベントがHTML要素に対するinputイベントであることに気が付くでしょう。

以下のコードをページ・プロパティのJavaScriptのページ・ロード時に実行に記述しても、同じ動作をします。作成済みの動的アクションはコメント・アウトします。
document.getElementById("P1_SOURCE").addEventListener('input', (event) => {
    apex.items.P1_TARGET.setValue(
        event.target.value
    );
});

動的アクションで実装していないため、デバッグ・モードでもコンソールに呼び出し履歴は表示されません。


入力イベントを受けて、JavaScriptのコードによりページ・アイテムに値を設定したときは、そのページ・アイテムでは入力イベントは発生しません。

ページ・アイテムP1_TARGETに動的アクションを作成し、入力イベントを拾ってページ・アイテムP1_TARGETに設定された値をP1_TAREGT_TO_TARGETにコピーします。


入力された値をページ・アイテムP1_TARGET_TO_TARGETにコピーします。


JavaScriptにより入力された文字列では入力イベントは発行されないため、ページ・アイテムP1_TARGET_TO_TARGETに文字はコピーされません。大元のページ・アイテムP1_SOURCEに設定した動的アクションの値の設定の変更イベントの禁止はオフなので、イベントの発生は禁止されていません。


ページ・アイテムP1_TARGETに設定した動的アクションのタイミングのイベントを変更にすると、ページ・アイテムP1_TARGET_TO_TARGETに文字がコピーされます。


JavaScriptによる文字の入力でも変更イベントは発生するため、ページ・アイテムP1_TARGET_TO_TARGETにP1_SOURCEに入力した文字列が設定されます。


ただし、ページ・アイテムP1_SOURCEに設定した動的アクションのTRUEアクションで、変更イベントの禁止をオンにすると、P1_TARGETに文字列がコピーされても変更イベントは発生しません。


結果としてP1_TARGET_TO_TARGETへの文字列のコピーは行われません。


ページ・アイテムP1_SOURCEに設定した動的アクションのタイミングのイベントを変更にします。


イベントが変更の場合、文字列が確定したときにイベントが発生します。そのため、まとまった文字列がコピーされます。以下ではP1_SOURCEでの変更イベントの禁止をオンにしているため、P1_TARGET_TO_TARGETへの文字列のコピーは行われていません。


動的アクションの変更イベントと同等なJavaScriptのコーディングは以下になります。変更イベントの禁止はitemインターフェースのsetValueの第３引数に対応します。
document.getElementById("P1_SOURCE").addEventListener('change', (event) => {
    apex.items.P1_TARGET.setValue(
        event.target.value, null, true
    );
});
Oracle APEX 24.1で追加された入力イベントの説明は以上です。

簡単なアプリケーションですが、説明に使用したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/new-input-event-for-dynamic-action.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完
投稿者 時刻:
ラベル: ,