作成されたアプリケーションは以下のように動作します。
実装の元にしたoj-bind-for-eachのサンプルは、Oracle JET Cookbookの以下のページです。
JETのform-containerからユーザーを取り出すボタンLIST_USERSと、取り出したユーザーを表示するページ・アイテムP1_USERSを作成しています。
以下より実装手順を説明します。
アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。名前はJET Bind For Eachとします。今回の実装ではデータベースのデータは参照せず、HTMLとJavaScriptだけの実装です。そのためOracle JET Cookbookのサンプルを、あまり変更せずに利用できます。
アプリケーションが作成されたら、ページ・デザイナでホーム・ページを開きます。
最初にBreadcrumb BarにあるリージョンJET Bind For Eachを削除します。
Body以下にリージョンを新規作成します。
識別のタイトルはFor Each、タイプとして静的コンテンツを選択します。ソースのHTMLコードとして以下を記述します。これはOracle JET Cookbookのdemo.htmlのform-container要素を抜き出したもので、変更はありません。
外観のテンプレートとしてBlank with Attributes (No Grid)を選択します。
ページ・プロパティのJavaScriptのファイルURLとして以下を記述します。
[require jet]
ファンクションおよびグローバル変数の宣言として以下を記述します。
var simple;
ページ・ロード時に実行として以下を記述します。
Oracle JETのボタンoj-buttonにon-oj-actionが指定されている場合、このボタンをクリックするとページの送信が実行されます。これはAPEXで定義されている処理が行われるためです。Oracle JETではイベントに対してpreventDefaultを呼び出すことができないため、Oracle JETが生成するボタン要素に属性type="button"を設定することにより、APEX側でページの送信を実行しないようにしています。
CSSのファイルURLとして以下を記述します。
#JET_CSS_DIRECTORY#redwood/oj-redwood-notag-min.css
https://static.oracle.com/cdn/fnd/gallery/2310.0.1/images/iconfont/ojuxIconFont.min.css
ユーザー名の右隣に表示されている X をクリックすると、そのユーザーが削除されます。この X はCSSクラスoj-ux-ico-closeを指定することにより表示されています。
このアイコンを表示するため、ojuxIconFont.min.cssを読み込んでいます。このファイルに定義されているフォントの一覧は、以下より参照できます。2023年9月現在でのバージョンで、随時更新されるようです。
UPTAKE INSTRUCTIONSをクリックしてもエラーになります。Oracle APEXについては、上記のojuxIconFont.min.cssをCSSのファイルURLに指定することで、これらのフォントを利用できるようになります。
この状態でアプリケーションを実行すると、Oracle JET Cookbookの状態まで実装できていることが確認できます。
画面に表示されているユーザーの一覧は、Oracle JETのコンポーネントで操作されます。操作の結果（ユーザーの削除や追加）をOracle APEXで取得するために、ボタンとページ・アイテムを追加します。
ボタンLIST_USERSを作成します。ラベルはList Users、動作のアクションとして動的アクションで定義を選択します。
画面に表示されているユーザー名を設定するページ・アイテムP1_USERSを作成します。タイプはテキスト・フィールド、ラベルはUsersとします。
ボタンLIST_USERSに動的アクションを作成します。
識別の名前はonClick LIST_USERS、タイミングのイベントはデフォルトのクリックです。
TRUEアクションとしてJavaScriptコードの実行を選択し、設定のコードとして以下を記述します。
画面上に表示されているユーザーを取得し、そのユーザー名を:区切りで連結したのち、ページ・アイテムP1_USERSに設定します。
以上でアプリケーションは完成です。アプリケーションを実行すると、記事の先頭のGIF動画のように動作します。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/jet-bind-for-each.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
