항상 어떻게 써볼수 있을까 고민만 하다가 드디어 APEX에 첫 JET 컴포넌트를 연결
1. JET 메인 페이지에서 활용하고자하는 컴포넌트 확인 및 데모 예제 확인 html, js, css
2. JET 사용할 수 있도록 페이지에 참조하기
Page - Javascript - File URLs
#JET_BASE_DIRECTORY#js/libs/require/require.js
#IMAGE_PREFIX#libraries/apex/requirejs.jetConfig.js
Page - Javascript - Execute when Page Loads
데모 코드의 demo.js 에 있는 것을 그대로 옮겼고 일부 수치만 수정했음
여기서 중요한 것은 Initial Code의 제일 아래 코드
document.getElementById("gauge-container")); >> 해당 리전의 static ID 지정 필요
require(["require", "exports", "knockout", "ojs/ojbootstrap",
"ojs/ojconverter-number", "ojs/ojknockout", "ojs/ojgauge", "ojs/ojlabel",
"ojs/ojformlayout"], function (require, exports, ko, ojbootstrap_1,
ojconverter_number_1) {
"use strict";
class StatusMeterGaugeData {
constructor() {
this.value = ko.observable(20);
this.value1 = ko.observable(20);
this.value2 = ko.observable(40);
this.value3 = ko.observable(40);
this.value4 = ko.observable(60);
this.value5 = ko.observable(80);
this.value6 = ko.observable(80);
this.value8 = ko.observable(80);
this.value10 = ko.observable(80);
this.value11 = ko.observable(80);
this.value12 = ko.observable(80);
this.transientValue = ko.observable();
this.thresholdValues = [{ max: 3 }, { max: 7 }, {}];
this.referenceLines = [
{ value: 33, color: "red" },
{ value: 67, color: "green" },
];
this.customSvgStyle = { fill: `url(${document.URL}#pattern)` };
this.customConverter = {
rendered: "on",
converter: new ojconverter_number_1.IntlNumberConverter({ style: "currency", currency: "USD" }),
};
this.customConverter1 = {
rendered: "on",
converter: new ojconverter_number_1.IntlNumberConverter({ decimalFormat:"short" }),
};
this.getReferenceTooltip = (data) => {
return {
insert: `Value: ${data.label}<br>Reference Lines: Low 33, Medium 67, High 100`,
};
};
}
}
ojbootstrap_1.whenDocumentReady().then(() => {
ko.applyBindings(new StatusMeterGaugeData(),
document.getElementById("gauge-container"));
});
});
Page - CSS - File URLs
#JET_CSS_DIRECTORY#redwood/oj-redwood-notag-min.css
#JET_CSS_DIRECTORY#alta/oj-alta-notag-min.css
Page - CSS - Inline : 데모 코드에 이미 있고 참조하여 조정
.demo-circular-status-meter-large-custom {
height:7.00rem;
}
.demo-circular-status-meter-large {
height:6.25rem;
}
.demo-circular-status-meter-small {
height: 3.75rem;
}
.demo-status-meter-svg-g {
stroke:#336791;
stroke-width:1.25
}
.demo-status-meter-svg-rect {
fill: #ADD8E6;
}
.custom-font-size {
font-size: 1.4rem;
text-align: center;
font-weight: bold;
}
3. 리전 설정
Identification - Type : Static Content
Advanced - Static ID : gauge-container
Source - Text :
<div style="display: flex; justify-content: center; align-items: center;">
<oj-form-layout max-columns="2">
<div class="oj-sm-margin-4x-bottom">
<oj-status-meter-gauge
class="demo-circular-status-meter-large-custom"
min="0" max="10" value="3" step="1"
labelled-by="indicatorThreshold"
thresholds="[[thresholdValues]]"
orientation="circular"
metric-label="[[customConverter1]]" readonly>
</oj-status-meter-gauge>
<oj-label id="readOnly1" class="custom-font-size">
<br>발주기준재고
</oj-label>
</div>
<div class="oj-sm-margin-4x-bottom">
<oj-status-meter-gauge
class="demo-circular-status-meter-large-custom"
min="0" max="10" value="7" step="1"
labelled-by="indicatorThreshold"
thresholds="[[thresholdValues]]"
orientation="circular"
metric-label="[[customConverter1]]" readonly>
</oj-status-meter-gauge>
<oj-label id="readOnly2" class="custom-font-size">
<br>실재고
</oj-label>
</div>
</oj-form-layout>
</div>
4. 이렇게 활용하게 됩니다.
참고
1) https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=statusMeterGauge&demo=statusMeterGaugeCircular
2) https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojStatusMeterGauge.html
3) https://hardlikesoftware.com/weblog/2018/12/20/jet-spark-charts-in-apex-interactive-grid/
4) https://hardlikesoftware.com/weblog/2016/04/09/using-oracle-jet-from-apex/
5) https://www.doag.org/formes/pubfiles/10833102/2018-Dev-Hilary_Farrell-Extend_your_APEX_Application_with_Oracle_JET-Praesentation.pdf
6) https://community.oracle.com/tech/developers/discussion/4127557/any-idea-how-to-integrate-oracle-jet-in-oracle-apex-apart-from-built-in-jet-features
7) https://likeahouseafire.com/2018/01/05/dynamic-gauge-colors/
