2024年7月22日月曜日

WinBoxを使ってみる

すこし前にPhilipp Hartenfellerさんが、Window Managerなる実装をXにポストされていました。


最初はなんだ！？という印象でしたが、WinBox.jsというJavaScriptのライブラリがあり、それを使っているとのことです。

実用性はさておき面白そうなので、サンプル・データセットのEMP/DEPTのAPEXアプリケーションに実装してみました。

以下のようなアプリケーションを作りました。


以下、実装を紹介します。

ページ・デザイナでダッシュボードのページ（ページ番号２）を開きます。

ページには４つのチャート、つまりチャート・リージョンが作成されています。それぞれのリージョンに静的IDを割り当てます。

リージョンEmployees per Departmentには静的IDとしてEMPLOYEES_PER_DEPARTMENTを割り当てます。


同様にリージョンEmployees per Jobには静的IDとしてEMPLOYEES_PER_JOB、Total Salary per DepartmentにはTOTAL_SALARY_PER_DEPARTMENT、Total Salary per JobにはTOTAL_SALARY_PER_JOBを割り当てます。

WinBox.jsのリファレンスという意味では、GitHubの方が参考になります。

WinBoxではバンドルされたリソースを読み込むことを推奨しているので、以下のURLをページ・プロパティのJavaScriptのファイルURLに記述します。

https://rawcdn.githack.com/nextapps-de/winbox/0.2.82/dist/winbox.bundle.min.js

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

var w1, w2, w3, w4;

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



以上で実装は完了です。

上手に使うと効果のあるユーザー・インターフェースを作成できるかもしれません。

簡単なアプリケーションですが、今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/sample-emp-dept-with-winbox.zip

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

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