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;

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

document.onfullscreenchange = (event) => {
if (! document.fullscreenElement) {
document.getElementById("t_Header").hidden = false;
}
};
const G_WIDTH = 380;
const G_HEIGHT = 400;
const G_TOP = 100;
const G_LEFT = 100;
const G_TOP2 = G_TOP + G_HEIGHT + 10;
const G_LEFT2 = G_LEFT + G_WIDTH + 10;
w1 = new WinBox("Employees Per Department",
{
id: "winbox-EMPLOYEES_PER_DEPARTMENT",
title: "Employees per Department",
width: G_WIDTH,
height: G_HEIGHT,
onfullscreen: () => {
document.getElementById("t_Header").hidden = true;
},
onmaximize: () => {
document.getElementById("t_Header").hidden = true;
},
onrestore: () => {
document.getElementById("t_Header").hidden = false;
}
}
);
w1.body.appendChild(
document.getElementById("EMPLOYEES_PER_DEPARTMENT")
);
w2 = new WinBox("Employees Per Job",
{
id: "winbox-EMPLOYEES_PER_JOB",
title: "Employees per Department",
width: G_WIDTH,
height: G_HEIGHT,
onfullscreen: () => {
document.getElementById("t_Header").hidden = true;
},
onmaximize: () => {
document.getElementById("t_Header").hidden = true;
},
onrestore: () => {
document.getElementById("t_Header").hidden = false;
}
}
);
w2.body.appendChild(
document.getElementById("EMPLOYEES_PER_JOB")
);
w3 =new WinBox("Total Salary Per Department",
{
id: "winbox-TOTAL_SALARY_PER_DEPARTMENT",
title: "Employees per Department",
width: G_WIDTH,
height: G_HEIGHT,
onfullscreen: () => {
document.getElementById("t_Header").hidden = true;
},
onmaximize: () => {
document.getElementById("t_Header").hidden = true;
},
onrestore: () => {
document.getElementById("t_Header").hidden = false;
}
}
);
w3.body.appendChild(
document.getElementById("TOTAL_SALARY_PER_DEPARTMENT")
);
w4 = new WinBox("Total Salary Per Job",
{
id: "winbox-TOTAL_SALARY_PER_JOB",
title: "Employees per Department",
width: G_WIDTH,
height: G_HEIGHT,
onfullscreen: () => {
document.getElementById("t_Header").hidden = true;
},
onmaximize: () => {
document.getElementById("t_Header").hidden = true;
},
onrestore: () => {
document.getElementById("t_Header").hidden = false;
}
}
);
w4.body.appendChild(
document.getElementById("TOTAL_SALARY_PER_JOB")
);
w1.x = G_LEFT;
w1.y = G_TOP;
w1.move();
w2.x = G_LEFT2;
w2.y = G_TOP;
w2.move();
w3.x = G_LEFT;
w3.y = G_TOP2;
w3.move();
w4.x = G_LEFT2;
w4.y = G_TOP2;
w4.move();
view raw sample-emp-dept-winbox.js hosted with ❤ by GitHub


以上で実装は完了です。

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

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

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

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