2024年6月24日月曜日

Oracle APEXでUnpolyを使用する

Oracle APEXでhtmxを使う方法とTurbo Framesを使う方法を紹介してきたので、Unpolyについても紹介します。

htmx向けのアプリケーションからの変更点を紹介します。

今回作成したアプリケーションも今までと同じく、見かけはTurbo Framsを使ったものと同じです。


以下にアプリケーションの変更点を紹介します。

アプリケーションを実装しているホーム・ページのページ・プロパティの変更から始めます。

JavaScriptのファイルURLの指定は以下になります。UnpolyのJavaScriptのコードをロードします。

https://cdn.jsdelivr.net/npm/unpoly@3.8.0/unpoly#MIN#.js

CSSのファイルURLとして以下を指定します。

https://cdn.jsdelivr.net/npm/unpoly@3.8.0/unpoly#MIN#.css

データ・ロード時に実行に以下のコードを記述します。UnpolyがAjaxコールを発行する際に、Apex-Sessionヘッダーを追加します。
document.addEventListener("up:request:load", (event) => {
    event.request.headers["Apex-Session"] = apex.env.APP_ID + "," + apex.env.APP_SESSION;
    // console.log(event);
});

画像を表示する静的コンテンツのソースのHTMLコードとして、以下を記述します。DIV要素にIDとしてimage_1を与えています。この要素を、REST APIを呼び出して取得した画像で置き換えます。

<div id="image_1"></div>


画像を返すRESTサービスでは、更新対象を示すDIV要素（Turbo Framesのときはturbo-frame要素でした）にIMG要素を含めて、HTMLを返すようにコードを変更します。

モジュール・パスは/unpoly/、テンプレートはimage/:title/:idとし、更新対象とするDIV要素のidを引数に含めました。



UnpolyでのHTML要素の入れ替えをA要素で行います。画像を更新する領域はup-target属性で指定します。
<div id="action_1">
<a class="t-Button" href="apexdev/unpoly/image/たぬき/image_1" up-target="#image_1">たぬき</a>
<a class="t-Button" href="apexdev/unpoly/image/シマウマ/image_1" up-target="#image_1">シマウマ</a>
<a class="t-Button" href="apexdev/unpoly/image/レッサーパンダ/image_1" up-target="#image_1">レッサーパンダ</a>
</div>

Unpolyを使うために実施した変更は以上になります。

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

サンプル・アプリケーションには、以前にAjaxリクエストに認証ヘッダーを追加する方法がわからなかった時に作成した、up.renderを呼び出す動的アクションの実装も含んでいます。

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

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