2024年6月24日月曜日

Oracle APEXでTurbo Framesを使用する

先日、Oracle APEXでhtmxを使用するサンプル・アプリケーションを作成しました。同じアプリケーションをHotwireのTurbo Framesで置き換えてみます。

htmxを使用するアプリケーションの作り方は、こちらの記事で紹介しています。本記事ではTurbo Framesを使用するための変更点を紹介します。

今回作成したアプリケーションは以下のように動作します。見かけはhtmxを使ったものと、ほぼ同じです。


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

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

JavaScriptのファイルURLの指定は以下になります。TurboのESモジュールをロードするため、<script type="module"となるように[module]を先頭に付与します。

[module]https://unpkg.com/@hotwired/turbo@8.0.4/dist/turbo.es2017-esm.js

本番環境などでは、このファイルをアプリケーションまたはワークスペースに静的ファイルとして保存し、ミニファイされたファイルをロードする方が良いでしょう。

ページ・ロード時に実行に以下を記述します。画像を取得するRESTサービスのリクエストに、Apex-Sessionヘッダーを含めます。Turboの場合はturbo:before-fetch-requestのイベントを受けて、ヘッダーの追加を行います。
document.addEventListener("turbo:before-fetch-request", (event) => {
    event.detail.fetchOptions.headers["Apex-Session"] = apex.env.APP_ID + "," + apex.env.APP_SESSION;
    // console.log(event);
});


ボタンはすべて、turbo-frame要素の中のA要素として作成します。data-turbo-frameとしてimage_1を指定することにより、idがimage_1のturbo-frame要素を、hrefの呼び出しで受け取ったHTML（今回は画像）で更新します。
<turbo-frame id="action_1">
    <a class="t-Button" href="apexdev/turbo/image/たぬき/image_1" data-turbo-frame="image_1">たぬき</a>
    <a class="t-Button" href="apexdev/turbo/image/シマウマ/image_1" data-turbo-frame="image_1">シマウマ</a>
    <a class="t-Button" href="apexdev/turbo/image/レッサーパンダ/image_1" data-turbo-frame="image_1">レッサーパンダ</a>
</turbo-frame>

画像を描画する領域のHTMLソースとして、turbo-frame要素を記述します。idはimage_1です。
<turbo-frame id="image_1"></turbo-frame>

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

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



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

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

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

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