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

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

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

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

https://www.oracle.com/webfolder/technetwork/jet-1000/jetCookbook.html?component=binding&demo=if

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要素を抜き出したものです。

	<div id="demo-container">
	<oj-buttonset-one class="oj-buttonset-width-auto" value="{{buttonValue}}">
	<oj-option id="onOption" value="on">On</oj-option>
	<oj-option id="offOption" value="off">Off</oj-option>
	</oj-buttonset-one>
	<br><br>
	<div>Image will be rendered if the button is on:</div>
	<oj-bind-if test="[[buttonValue() === 'on']]">
	<oj-avatar role="img" aria-label="Avatar of Amy Bartlet" size="md" initials="AB" shape="square"
	src="https://www.oracle.com/webfolder/technetwork/jet-1000/content/images/composites/avatar-image.jpg">
	</oj-avatar>
	</oj-bind-if>
	</div>

view raw demo-jet-bind-if.html hosted with ❤ by GitHub

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

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

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

[require jet]

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

var view;

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

	require(["require", "exports", "ojs/ojbootstrap", "knockout", "ojs/ojknockout", "ojs/ojbutton", "ojs/ojavatar"], function (require, exports, ojbootstrap_1, ko) {
	"use strict";
	class ViewModel {
	constructor() {
	this.buttonValue = ko.observable("off");
	}
	}
	ojbootstrap_1.whenDocumentReady().then(() => {
	view = new ViewModel();
	ko.applyBindings(view, document.getElementById("demo-container"));
	});
	});

view raw demo-bind-if.js hosted with ❤ by GitHub

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

完