宣言的な動的アクションと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を作成します。

参照をコピーします。

ページ・プロパティの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のアプリケーション作成の参考になれば幸いです。

完

カスタム属性data-parent-elementを使ったインライン・ポップアップの実装

 Philipp Hartenfellerさんが、彼のブログに以下の記事を載せています。

Oracle APEX anchored inline popups for data input

カスタム属性のdata-parent-elementを指定することにより、開いたボタンにインライン・ポップアップをくっつけることができます。

自分でも実装のサンプルを作ってみました。

data-parent-elementを指定してない場合、インライン・ポップアップは以下のように画面の真ん中に表示されます。

インライン・ポップアップの設定が出来ていれば、ボタンに静的IDを付加した後、インライン・ポップアップのリージョンのカスタム属性を設定するだけです。

data-parent-element="#ボタンの静的ID"

似たような設定を扱ったことがあったなと思ったのですが、ありました。カスタム属性data-menuを使った実装です。

Menu Popupの紹介

data-parent-elementはユニバーサル・テーマのリファレンスに説明がありませんが、Philipp Hartnenfellerさんの記事によるとAPEX 19.2でも動作した、とのことです。

以下よりサンプル・アプリケーションの実装について紹介します。

サンプル・データセットのEMP/DEPTがインストール済み、空のAPEXアプリケーションを作成したところから作業を始めます。デフォルトで作成されるホーム・ページにインライン・ポップアップを実装します。

役職一覧となるLOVを作成します。共有コンポーネントを開きます。

LOVを開きます。

作成済みのLOVが一覧されます。作成をクリックします。

LOVの作成は最初からを選択します。

次へ進みます。

作成するLOVの名前をLIST_OF_JOBSとします。タイプはDynamicです。

次へ進みます。

データ・ソースはローカル・データベース、ソース・タイプとしてSQL Queryを選択します。SQL SELECT文を入力として、以下を記述します。表EMPの列JOBの個別の値を求めます。

select distinct job from emp

戻り列、表示列ともにJOBを選択します。

作成をクリックします。

共有コンポーネントのLOVとしてLIST_OF_JOBSが作成されました。

続けて、通常のインライン・ポップアップを実装します。

ページ・デザイナにてホーム・ページを開きます。

役職の値を保持するページ・アイテムP1_JOBを作成します。タイプに選択リストを選びます。ラベルは役職とします。

LOVのタイプは共有コンポーネント、LOVとして先ほど作成したLIST_OF_LOBSを選択します。追加値の表示はOFFにします。

このページ・アイテムP1_JOBの値は、インライン・ポップアップを開いて設定します。そのため、読取り専用は常時にします。

このページ・アイテムはタイプが選択リストなので、わざわざインライン・ポップアップを実装する必要はありません。あくまで実装のサンプルです。

インライン・ポップアップを開くボタンSELECT_JOBを作成します。ラベルは役職の選択とします。

動作のアクションとして動的アクションで定義を選択します。

役職を選択するインライン・ポップアップを作成します。

リージョンを作成します。

識別のタイトルを役職の選択、タイプは静的コンテンツとします。レイアウトの位置としてDialogs, Drawers and Popupsを選択します。外観のテンプレートとしてInline Popupを選択し、その後、テンプレート・オプションを開きます。

テンプレート・オプションの共通の一般のAuto Height、Remove Page Overlay、Display Popup Calloutにチェックを入れ、SizeをNoneに変更します。

インライン・ポップアップのリージョンに、役職の選択を行なうページ・アイテムを作成します。

識別の名前はP1_JOB_SELECT、タイプとしてラジオ・グループを選択します。ラベルは役職一覧とします。

LOVのタイプは共有コンポーネント、LOVとしてLIST_OF_JOBSを選択します。追加値の表示はOFF、NULL値の表示はONで、NULL表示値は未選択とします。

以上で画面として表示されるコンポーネントは作成できました。

続いてインライン・ポップアップを開く動的アクションと、それを閉じる動的アクションを作成します。

開く方の動的アクションは、ボタンSELECT_JOBに作成します。

作成した動的アクションの識別の名前はonClick SELECT_JOBとします。タイミングはデフォルトでイベントがクリック、選択タイプがボタン、ボタンがSELECT_JOBとなります。

２つのTRUEアクションを作成します。

最初にページ・アイテムP1_JOBの値を、インライン・ポップアップのページ・アイテムP1_JOB_SELECTに初期値として設定します。

識別の名前はP1_JOB -> P1_JOB_SELECT、アクションとして値の設定を選択します。

設定のタイプの設定にJavaScript Expressionを選択し、JavaScript式として以下を記述します。

apex.items.P1_JOB.getValue()

影響を受ける要素の選択タイプにアイテムを選び、アイテムとしてP1_JOB_SELECTを指定します。以上で、設定で取得した値が影響を受ける要素のアイテムに設定されます。

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

インライン・ポップアップを開くTRUEアクションを作成します。

識別の名前はポップアップを開く、アクションとしてリージョンを開くを選択します。

影響を受ける要素の選択タイプとしてリージョンを選択し、リージョンに役職の選択を選びます。このリージョンが開かれる対象になります。

実行の初期化時に実行はOFFです。

ポップアップを閉じる動的アクションは、ページ・アイテムP1_JOB_SELECTに作成します。

識別の名前はonChange P1_JOB_SELECTとします。タイミングはデフォルトで、イベントが変更、選択タイプがアイテム、アイテムがP1_JOB_SELECTになります。

TRUEアクションはポップアップを開いたときとは反対に、ページ・アイテムP1_JOB_SELECTの値をP1_JOBに設定します。

識別の名前はP1_JOB_SELECT -> P1_JOBとします。設定のJavaScript式は以下に代わり、影響を受ける要素のアイテムはP1_JOBになります。

apex.items.P1_JOB_SELECT.getValue()

次のTRUEアクションで、インライン・ポップアップを閉じます。

識別の名前をポップアップを閉じる、アクションとしてリージョンを閉じるを選択します。

以上で、通常のインライン・ポップアップが実装できました。

動作は以下のようになります。

これからカスタム属性data-parent-elementを設定します。

ボタンSELECT_JOBに静的IDを設定します。

静的IDはSELECT_JOBとします。

インライン・ポップアップのリージョンの詳細のカスタム属性として、以下を設定します。

data-parent-element="#SELECT_JOB"

以上でアプリケーションの実装は完了です。アプリケーションを実行すると、記事の先頭のGIF動画のように動作します。

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/data-parent-element-sample.zip

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

完