2023年1月26日木曜日

宣言的な動的アクションとJavaScriptによるコーディングの比較

 以前に書いた記事data-parent-elementを実装したサンプルを使って、宣言的な動的アクションとJavaScriptによるコーディングを比べてみます。

サンプル・アプリケーションでは、以下の２つの動的アクションを作成しています。

動的アクションonClick SELECT_JOBのTRUEアクションは以下です。

ボタンSELECT_JOBをクリックしたときに、ページ・アイテムP1_JOBの値をP1_JOB_SELECTに設定する。その後、インライン・ポップアップのリージョンを開く。

動的アクションonChange P1_JOB_SELECTのTRUEアクションは以下です。

ページ・アイテムP1_JOB_SELECTの値を変更したときに、ページ・アイテムP1_JOB_SELECTの値をP1JOBに設定する。その後、インライン・ポップアップのリージョンを閉じる。


上記の処理は、JavaScriptのコードで置き換えることができます。

最初にリージョン役職の選択に、静的IDとしてPOPUP_SELECT_JOBを設定します。


インライン・ポップアップを開く処理をJavaScriptで記述します。

TRUEアクションの識別の名前はインライン・ポップアップを開くとします。アクションとしてJavaScriptコードの実行を選択します。設定のコードとして以下を記述します。
apex.items.P1_JOB_SELECT.setValue(
    apex.items.P1_JOB.getValue()
);
apex.theme.openRegion("POPUP_SELECT_JOB");
宣言的に作成した２つのTRUEアクションと同じ動きになります。


インライン・ポップアップを閉じるJavaScriptのコードは以下になります。
apex.items.P1_JOB.setValue(
    apex.items.P1_JOB_SELECT.getValue()
);
apex.theme.closeRegion("POPUP_SELECT_JOB");

さらに、apex.actionsとして呼び出すように変更してみます。

静的アプリケーション・ファイルとしてpage-actions.jsを作成します。

/*
* インライン・ポップアップを開く。
*/
const OPEN_INLINE_POPUP = {
name: "open-inline-popup",
action: (event, element, args) => {
apex.item(args.target).setValue(
apex.item(args.source).getValue()
);
apex.theme.openRegion(args.region);
}
};
/*
* インライン・ポップアップを閉じる。
*/
const CLOSE_INLINE_POPUP = {
name: "close-inline-popup",
action: (event, element, args) => {
apex.item(args.target).setValue(
apex.item(args.source).getValue()
);
apex.theme.closeRegion(args.region);
}
};
/*
* アクションの初期化。
*/
apex.jQuery(window).on('theme42ready', () => {
apex.actions.add([OPEN_INLINE_POPUP,CLOSE_INLINE_POPUP]);
});
view raw page-actions.js hosted with ❤ by GitHub

参照をコピーします。


ページ・プロパティのJavaScriptのファイルURLに、作成した静的アプリケーション・ファイルの参照を記述します。

JavaScriptのコードを記述したファイルは、静的アプリケーション・ファイルとしてAPEXのアプリケーションに含めていますが、作成したファイルpage-actions.jsとMinifyされたファイルpage-actions.min.jsはブラウザからアクセスできれば、別の場所に配置することも可能です。


インライン・ポップアップを開く処理は、以下のカスタム属性の設定に置き換えられます。

data-action="#action$open-inline-popup?source=P1_JOB&target=P1_JOB_SELECT&region=POPUP_SELECT_JOB"


インライン・ポップアップを閉じる処理はJavaScriptのコードを以下に書き換えて、apex.actionsとして実装した処理を呼び出すようにします。

apex.actions.invokeを使用します。
apex.actions.invoke("close-inline-popup", this.browserEvent, this.triggeringElement, {
    source: "P1_JOB_SELECT",
    target: "P1_JOB",
    region: "POPUP_SELECT_JOB"
} );


開発するアプリケーションの規模が大きくなると、宣言的な設定ではアプリケーションの見通しが悪くなります。

サーバー・サイドではプロセス・タイプにコードの実行を選んでPL/SQLコードを記述する代わりに、APIの呼出しを選んでPL/SQLのパッケージ、プロシージャ、ファンクションを指定できるようになりました。

クライアント・サイドではactionとして定義されたコードを呼び出せるようして、JavaScriptのコードをひとつのファイルにまとめることができるようになっています。

アプリケーション開発の容易さとメンテナンスの容易さのトレードオフの結果として、コーディングによる実装を行なうという選択肢もあり得るでしょう。

今回、改変したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/data-parent-element-sample-actions.zip

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

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