20200105(일)_ 웹스퀘어 시작

 

 

현재 진행 중인 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') 속성 부여하면 합계진행됨