- 백엔드(Spring):
Controller → Service → ServiceImpl → DAO → DAOImpl → xml(DB 조회) - 프론트(Nexacro):
testfilter.xfdl,testview.xfdl - 목표:
filter에서 조건 선택 →view에서 rMate 차트로 시각화
여기서 rMate Chart for HTML5를 Nexacro에 넣으려면, 보통 Nexacro의 HTML5 컴포넌트를 활용해서 별도의 HTML 파일을 로드하는 방식이 필요합니다.
즉, HTML 파일이 추가로 필요하며, Nexacro에서 차트를 보여줄 브리지 역할을 합니다.
1. 추가로 필요한 파일
- rMateChart.html
- rMate Chart 스크립트와 차트 설정이 포함된 HTML 파일
- Nexacro의
WebBrowser컴포넌트에서 이 HTML을 불러와 차트를 표시 - HTML 내부에서
rMateChartH5.create()로 차트 객체 생성 - Nexacro에서 전달받은 데이터(JSON 등)를
setData()로 반영
- (선택) 차트 데이터 가공용 JavaScript 파일
- rMateChart.html 내부에 직접 써도 되지만, 유지보수를 위해 외부
.js로 분리 가능
- rMateChart.html 내부에 직접 써도 되지만, 유지보수를 위해 외부
2. 파일 구성 예시
/src/main/java/com/example/controller/TestChartController.java
/src/main/java/com/example/service/TestChartService.java
/src/main/java/com/example/service/impl/TestChartServiceImpl.java
/src/main/java/com/example/dao/TestChartDAO.java
/src/main/java/com/example/dao/impl/TestChartDAOImpl.java
/src/main/resources/mapper/TestChartMapper.xml
/nexacro_ui/testfilter.xfdl
/nexacro_ui/testview.xfdl
/nexacro_ui/html/rMateChart.html ← 신규 추가
/nexacro_ui/js/rMateChartHelper.js (선택)
3. 동작 흐름
① Filter 화면 (testfilter.xfdl)
- 사용자가 조건(날짜, 제품코드 등) 선택 → 버튼 클릭 시
- 해당 조건을 Transaction으로 Controller에 전달
- Controller에서 조건에 맞는 데이터 조회
- 결과를 View화면의 Dataset에 반영
// testfilter.xfdl
function btn_search_onclick(obj,e) {
var sDate = this.cal_from.value;
var eDate = this.cal_to.value;
var args = "fromDate=" + sDate + " toDate=" + eDate;
this.transaction(
"searchChart", // ID
"svc::getChartData.do", // URL
"", // inDataset
"ds_chart=out_chart", // outDataset
args, // arguments
"fn_callback"
);
}
function fn_callback(svcID, errCD, errMsg) {
if(svcID == "searchChart" && errCD == 0) {
// View 화면 Dataset에 복사
var objView = this.parent.form_testview;
objView.ds_chart.copyData(this.ds_chart, true);
}
}
② View 화면 (testview.xfdl)
- WebBrowser 컴포넌트에
rMateChart.html로드 - Dataset 변경 시 HTML에 데이터 전달
// testview.xfdl
function form_onload(obj,e) {
this.webChart.set_url("http://localhost:8080/nexacro_ui/html/rMateChart.html");
}
function ds_chart_onrowposchanged(obj,e) {
if (this.webChart.getProperty("document") != null) {
var jsonData = this.ds_chart.saveXML();
this.webChart.callMethod("setChartData", jsonData);
}
}
③ rMateChart.html
- Nexacro에서 호출할 수 있는
setChartData()함수 구현 - rMate Chart 스크립트 로드 후, 데이터 세팅
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./rMateChartH5.js"></script>
<script>
var chart;
window.onload = function() {
rMateChartH5.create("chart1", "chartHolder", "", "100%", "100%");
};
function setChartData(xmlData) {
var jsonData = parseNexacroXML(xmlData); // XML → Array 변환
chart.setData(jsonData);
}
</script>
</head>
<body>
<div id="chartHolder"></div>
</body>
</html>
4. 핵심 포인트
- HTML 파일이 반드시 필요 (Nexacro WebBrowser에서 로드)
- Nexacro Dataset → HTML로 전달 → rMateChart에 적용
Filter와View는 Dataset으로 연동 (copyData 등)- Controller ~ DAO는 기존 데이터 조회 구조 그대로 사용 가능
- rMate는 JSON이나 Array 데이터를 선호하니 XML은 변환 필요
원하시면 제가 Spring + Nexacro + rMateChart HTML 연동 전체 샘플 구조를 바로 만들어서 드릴 수 있습니다.
그러면 파일별 실제 코드가 전부 연결된 상태로 보여줄 수 있어요.
지금처럼 설명만 하는 것보다 훨씬 이해가 빠를 겁니다.
이대로 전체 예제 구성까지 해드릴까요?
포토폴리오 https://wikidocs.net/book/10969 유튜브 링크 https://www.youtube.com/@%EC%B5%9C%EC%9B%90%EC%9D%BC-n5r