2023年9月4日月曜日

Oracle JETのoj-bind-if要素をOracle APEXで扱う

Oracle JET Cookbookに記載されているoj-bind-ifのサンプルをOracle APEXで実装してみます。

作成されたアプリケーションは以下のように動作します。


実装の元にしたoj-bind-ifのサンプルは、Oracle JET Cookbookの以下のページです。


Oracle APEXのアプリケーションでは、Oracle JETでのアバターの状態をOracle APEXに取り込む実装と、アバターの表示のオン/オフをAPEX側から切り替える実装を追加しています。

JETのdemo-containerに含まれているアバターの状態を取り出すボタンBUTTON_VALUEと、アバターの状態を表示するページ・アイテムP1_BUTTON_VALUEを作成しています。また、APEX側から切り替えを行なうページ・アイテムP1_SWITCHを作成しています。

以下より実装手順を紹介します。

アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。名前はJET Bind Ifとします。今回の実装ではデータベースのデータは参照せず、HTMLとJavaScriptだけの実装です。そのためOracle JET Cookbookのサンプルを、あまり変更せずに利用できます。


アプリケーションが作成されたら、ページ・デザイナでホーム・ページを開きます。

最初にBreadcrumb BarにあるリージョンJET Bind Ifを削除します。


Body以下にリージョンを新規作成します。

識別のタイトルはFor Each、タイプとして静的コンテンツを選択します。ソースのHTMLコードとして以下を記述します。これはOracle JET Cookbookのdemo.htmlのdemo-container要素を抜き出したものです。

oj-avatarのsrcとなるURLをAPEXから参照できるよう絶対パスにしているのと、shape="square"を追加しています。（oj-avatarのshapeのデフォルトはsquareですが、なぜかcircleで表示されます。）

外観のテンプレートとしてBlank with Attributes (No Grid)を選択します。


ページ・プロパティのJavaScriptのファイルURLに以下を記述します。

[require jet]

ファンクションおよびグローバル変数の宣言に以下を記述します。

var view;

ページ・ロード時に実行に以下を記述します。

CSSのファイルURLに以下を記述します。

#JET_CSS_DIRECTORY#redwood/oj-redwood-notag-min.css


この状態でアプリケーションを実行すると、Oracle JET Cookbookの状態まで実装できていることが確認できます。


アバターの表示はOn/Offのボタンの値buttonValueより確認できます。この値を取り出しページ・アイテムに設定するボタンを作成します。

ボタンBUTTON_VALUEを作成します。ラベルはButton Value、動作のアクションとして動的アクションで定義を選択します。


ボタンの状態を設定するページ・アイテムP1_BUTTON_VALUEを作成します。タイプはテキスト・フィールド、ラベルはButton Valueとします。


ボタンBUTTON_VALUEに動的アクションを作成します。

識別の名前はonClick BUTTON_VALUE、タイミングのイベントはデフォルトのクリックです。


TRUEアクションとして値の設定を選択します。設定のタイプの設定としてJavaScript Expressionを選択し、JavaScript式として以下を記述します。

view.buttonValue()

影響を受ける要素の選択タイプとしてアイテムを選び、アイテムとしてP1_BUTTON_VALUEを設定します。

APEXのボタンやアイテムの初期化時にはまだOracle JETの初期化は終わっていないことから、実行の初期化時に実行はオフにします。


アバターの表示を切り替えるページ・アイテムを作成します。

識別の名前はP1_SWITCH、タイプとして切替えを選択します。ラベルはSwitch、設定のデフォルトの使用をオフにし、オン値にon、オン・ラベルにオン、オフ値にoff、オフ・ラベルにオフを指定します。


ページ・アイテムP1_SWITCHに動的アクションを作成します。

識別の名前はonChange SWTCH、タイミングのイベントはページ・アイテムのデフォルトである変更です。


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

view.buttonValue($v(this.triggeringElement));


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

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/jet-bind-if.zip

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

完
投稿者 時刻:
ラベル: