현재 진행 중인 IFRS17 프로젝트를 위해서.
--공통업무 화면 개발.
--대비해야 할 것(웹스퀘어 -> 넥사크로) 개발 진행할 수 있음.
--유튜브 웹스퀘어 강좌 11강 실습목표(11/11)
https://www.youtube.com/watch?v=iAhnyrrhj4I&list=PL7a9HhkvOVb09T_2Xdxs4sPgyDjkGlT9G&index=2
--2강 진행 중
web.xml 에서
websquare 엔진(wq 확장자)을 처리할 수 있도록
servlet 등록해서 설치를 완료할 수 있습니다.
--websquare01.xml에서... [script]
script에서는 javascript로직을 작성합니다..
웹스퀘어 5에서는 기본 namespace 기반의 코딩을 하며,
default로 사용하는 객체명은 scwin입니다.
웹스퀘어 5에서 제공하는 namespace를 사용하면, 페이지를 닫을 때
해당 자원을 자동으로 delete 시켜주는 기능을 이용할 수 있으며,
scwin이라는 namespace 명은 설정을 통해 변경이 가능합니다.
--websquare01.xml에서... [datacollection]
datacollection에서는 data 객체를 생성하고 관리합니다.
DataMap - 단건 data 관리
DataList - 다건 data 관리..
LinkedDataList - 생성된 dataList에서 별도의 조건을 주어 filter 된 data 확인
AlliasDataMap - page coding에서 자식에서 부모의 dataMap 객체 참조할 때 사용
AlliasDataList - page coding 에서 자식에서 부모의 dataList 객체를 참조할 때 사용
--websquare01.xml에서... [Submission]
Submission에서는 웹스퀘어의 통신 객체를 생성 및 관리를 합니다.
웹스퀘어에서는 <form>을 이용한 전송, 이동 방식으로 통신하지 않고,
Submission이라는 객체를 생성하여 통신합니다.
--websquare의 객체에 대한 상세 기능은
F1 버튼을 통해 도움말 기능을 확인할 수 있습니다.
--3강 component 소개
--4강 websquare5 그리기 모드
--5강 데이터 바인딩
--6강 단건 data 조회하기(5시 37분)
Add submission
id- 지정
Reference는 request 정보를 setting 합니다.
request 정보를 담아 줄 data 객체를 생성 후 지정합니다.
Target 은 repose 정보를 setting 합니다.
request 정보를 담아 줄 data 객체를 생성 후 지정합니다.
URL Action 은 URL Action 은 실제 서버와 통신할
action url을 지정하는 곳입니다.
Mode에서는 'asynchronous' 혹은 'synchronous'
등을 지정할 수 있으며, 보통 'asynchronous'를 사용합니다.
*비동기 호출을 권장하므로 'synchronous'는 잘 사용하지 않습니다.
-- 7장 다건 data 조회하기 코드 리스트 가져오기
-- 8장 gridView 속성 설명! (그리드 속성들 중요함)
-- 9장 gridview Event 및 formatter 설명(오후 7시 30분)
gridView의 event 관련하여 주의할 사항은 gridView 에는 다양한 event 가 있지만,
gridView를 구성하는 각 column 별로는 event가 없다는 점입니다.
--10장 websquare5 dataList 및 gridView API(오후 8시 30분)
row 삽입(버튼 눌렀을 때)
script를 통해 신규 Row 가 생성되도록 API를 적용해봅니다.
data의 CRUD와 관련한 API는 gridView에서 사용하는 것이 아니라
dataList의 API를 이용하셔야 합니다.
*insertRow -신규 row생성
*insertJSON - 신규 row를 생성하면서 json 형태의 초기 data를 함께 적용
*insertXML - 신규 row를 생성하면서 xml 형태의 초기 data를 함께 적용
*insertData - 신규row를 생성하면서 1차원 Array 형태의 초기 data를 함께적용
4가지의 insert 가 존재함.
....
* 행 remove 삭제 후 data 반환해주는 api
만약 removeRow를 통해 실제 삭제된 data를 다시 활용하려면,
removeRow의 특징을 이해하셔야 합니다.
remove처리를 해 주는 API들은 삭제된 DATA 자체를 반환해주는 기능이 있습니다.
따라서 특정 변수에 담아 두고 removeRow를 처리하시면 삭제된 data를 다시
활용할 수 있습니다.
*입력- rowStatus ==> 'C'
*수정 - rowStatus ==> 'U'
*삭제(Delete) - rowStatus ==> 'D'
*삭제(Remove) - rowStatus ==> 'E'
scwin.setTotalNum = function() { //전체 건수를 나타낸다.
ui_totRowcount.setValue(dc_userInfoList.getRowCount());
}
edu.dc_userInfoList_ondataload = function() {
scwin.setTotalNum();
};
edu.dc_userInfoList_onremoverow = function(info) {
scwin.setTotalNum();
};
edu.dc_userInfoList_oninsertrow = function(info) {
scwin.setTotalNum();
};
/*
// gridView의 rowIndex가 변경될때마다 발생 //선택된 row에 Detail 상세내용
edu.ui_memberList_onrowindexchange = function(row,oldRow) {
var rowJson = dc_userInfoList.getRowJSON( row );
form_name.setValue( rowJson.EMP_NM );
};
*/
//위의 onrowindexchange 개선버전(일일이 다 detail을 작성하기 힘들다면)
//우편번호 format 변경, 3자리 - 3자리
scwin.fnDisFormat = function(data){
return data.substring(0,3) + "-" + data.substring(3,6);
};
//여성, 남성 별 성별에 따라 배경색 효과주기
scwin.fnCusFormat = function(data, formattedData, rowIndex, colIndex){
//성별이 여자인 경우에만 적용
if(data == "F") {
// 이름 항목의 색상 변경
ui_memberList.setCellColor( rowIndex , "EMP_NM" , "orange" );
}
return formattedData;
};
scwin.fnImpFormat = function(rowJson, rowIdx, colIdx){
return rowJson.ADDRESS1 + rowJson.ADDRESS2;
};
// input 입력 버튼 눌렀을시 행추가
edu.btnInsert_onclick = function(e) {
//focusIdx --신규 row가 gridView의 focus가 위치한 row에서 생성
var focusIdx = ui_memberList.getFocusedRowIndex();
dc_userInfoList.insertRow( focusIdx );
};
// delete 삭제 버튼 눌렀을시 상태값만 변경(data 삭제x)
// 상태값 D로 변경됨
edu.btnDelete_onclick = function(e) {
//focusIdx
var focusIdx = ui_memberList.getFocusedRowIndex();
dc_userInfoList.deleteRow( focusIdx )
};
// remove - 실제 행삭제
edu.btnRemove_onclick = function(e) {
//focusIdx
var focusIdx = ui_memberList.getFocusedRowIndex();
var obj = dc_userInfoList.removeRow( focusIdx ); //삭제data반환
//dc_userInfoList.removeRow( focusIdx );
console.log(obj);
};
//다건 delete
edu.btnDeleterows_onclick = function(e) {
var chkArr = ui_memberList( "CHK" );
dc_userInfoList.deleteRows( chkArr );
};
//다건 remove
edu.trigger2_onclick = function(e) {
var chkArr = ui_memberList( "CHK" );
var obj = dc_userInfoList.removeRows( chkArr );
//dc_userInfoList.removeRows( chkArr );
console.log();
};
//초기화
edu.btnInit_onclick = function(e) {
//var objAll = dc_userInfoList.removeAll();
//삭제 data 반환 하지 않고 지우려면,
dc_userInfoList.setData([]); //메모리 효율이좋음
//setData를 통해 빈 배열 입력으로 초기화하면, removeAll 처럼 삭제된
data를 갖고 있찌 않기 때문에 Memory를 훨씬 더 적게 사용할 수 있는
장점이 있습니다.
};
// excel down
edu.btnExcelDown_onclick = function(e) {
ui_memberList.advancedExcelDownload( [] );
};
// excel upload
edu.btnExcelUp_onclick = function(e) {
//옵션 사용하여 헤더를 보정합니다.
ui_memberList.advancedExcelUpload( {"headerExist":"1"} );
};
--컬럼들의 합계 보여주기(하단)
합계하는 컬럼에 expression 대입 값으로 SUM('ROLE_CD') 속성 부여하면 합계진행됨