Oracle JET CookbookのThematic Mapに含まれている例のうち、以下の４つをAPEXアプリケーションに組み込みます。
作成したAPEXアプリケーションは以下のように動作します。
APEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/sample-oj-thematic-map-on-apex.zip
概ねOracle JET Cookbookに記載されているdemo.htmlおよびdemo.jsを少々改変しただけで、そのままAPEXのページに組み込んでいます。
いくつかのデモをAPEXアプリケーションに組み込んでいますが、手順はほとんど同じです。以下よりGenerating Mapsを例にとって、Thematic MapのAPEXアプリケーションへの組み込み手順を紹介します。
Oracle JET Cookbookより、APEXに組み込むコンポーネントのページを開きます。本記事の対象はThematic MapのGenerating Mapsです。
実装はJS - JavaScriptまたはTS - TypeScriptを選択できます。APEXのページに組み込むために、JS - JavaScriptを選択します。
実装例としてdemo.html、demo.js、demo.cssを参照できます。これらのコードを、APEXのページに転記します。
ページ・プロパティのJavaScriptのファイルURLに以下を記述します。APEXにバンドルされているJETライブラリが、ページに読み込まれます。
[require jet]
APEXにバンドルされているOracle JETライブラリは、必ずしも最新ではないことに注意が必要です。Oracle APEXにバンドルされているJavaScriptのライブラリのバージョンは、リリース・ノートの新機能（New Features）に記載されています。APEX 24.2にバンドルされているOracle JETのバージョンは、17.0.2です。
ページ・ロード時に実行に、demo.jsの内容を転記します。修正箇所については後ほど説明します。
CSSのファイルURLに以下を記載します。
#JET_CSS_DIRECTORY#redwood/oj-redwood-notag-min.css
インラインにdemo.cssの内容を記載します。
ページに静的コンテンツのリージョン（以下ではMap）を作成し、ソースのHTMLコードにdemo.htmlの内容を記載します。
Thematic Mapであるoj-thematic-map要素の部分をdemo.htmlから切り出し、静的コンテンツのリージョンのHTMLソースに記述します。
カスタム・イベントmapListenerを受けて表示するマップが切り替わるように、on-map-listener属性を追加しています。変更イベントを受けると、oj-thematic-map要素にバインドされたオブジェクトのmapListenerファンクションが呼び出されます。
JET Cookbookでは選択リストをJETのコンポーネントで実装していますが、これをAPEXの選択リストに置き換えています。ページ・アイテムの名前はP5_MAP、タイプは選択リストです。
LOVのタイプに静的値を選択し、静的値としてAfrica、Asia、Australia、Europe、North America、South America、Worldを設定しています。
選択リストの変更イベントを受けて実行される動的アクションを作成し、以下のJavaScriptを実行しています。Thematic Mapの要素にカスタム・イベントmapListenerを発行しています。
// Thematic MapにmapListenerイベントを発行する。
document.getElementById("map1").dispatchEvent(
new CustomEvent("mapListener", {
detail: { value: $v(this.triggeringElement) }
})
);
ページ・プロパティのJavaScriptのページ・ロード時に実行に、以下のJavaScriptを記述しています。
地図の背景となるJSONを静的アプリケーション・ファイルとして保存しているため、require句の引数ではなく、fetchファンクションでファイルを取得するように変更しています。
fetchの代わりにapex.server.processでAjaxコールバックを呼び出すことで、データベースに保存されたデータを取り出すことができます。
今回の記事は以上になります。
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
