| 사항 | 설명 | 비고 |
|---|---|---|
| HTML 태그 형태 | <sbux-datastore></sbux-datastore> |
|
| 필수 속성 | id, name, uitype | |
| uitype 속성 값 | ajax | |
| 자식 Dom 구조 | children dom 에 대한 구조 없음 | |
| 이벤트 | callback 속성으로 callback 함수 사용 가능 |
| 사항 | 설명 | 비고 |
|---|---|---|
| 다른 컴포넌트 에 값을 binding 하는 방식 |
1. 다른 컴포넌트의 속성에 datastore-id = "datastore 의 id" 를 추가 2. datastore 가 호출될때 서버로 부터 전달된 데이터의 json key 명을 분석 3. 전달된 데이터의 객체의 key 와 datastore-id 의 속성을 입력한 컴포넌트의 name 명이 동일할 때 자동으로 전달된 객체의 값을 컴포넌트의 값으로 입력 |
|
| datastore 의 데이터 확인 방식 |
callback 속성을 통해 , callback 함수를 등록하여 값을 확인 가능 |
|
| datastore 의 exception 확인 방식 |
error-callback 속성을 통해, callback 함수를 등록하여 값을 확인 가능 (첫번째 전달값 : data, 두번째 전달값 : status) |
|
| 서버의 ajax 통신 모듈이 없을 때의 사용 | jsondata-ref 의 속성을 통해 json data 를 ajax 통신을 통해 가져온 데이터 처럼 사용가능 | |
| send-data 의 변경 | binding 방식을 사용하여 변경 | |
| 이벤트 발생 시 데이터 변경 |
SBUxMethod.refresh('datastore의 name값'); 을 통해 서버 재 호출 (cache='true' 일 땐 서버 전송한 send-data 와 동일하다면 cache 에 저장된 데이터를 리턴함) |
| 예시) datastore 컴포넌트 |
|---|
|
<head> <script> // datastore 를 통한 각 컴포넌트 바인딩시의 임시 사용객체 등록 var setJsonData = {}; var tempData={}; var sendData={}; var instanceJsonData = { req_no:"1", emp_nm:"홍길동", useYn : [ {text : "사용", value : "사용"}, {text : "미사용", value : "미사용" , selected:"selected"}, {text : "접속제한", value : "접속제한"} ] }; // 로딩 메시지 var alertLoadingOption = { title:'로딩중', text : '<h3>로딩중입니다...</h3>', placement: 'middle-center' };
// 에러 메시지 var alertErrorOption = { title:'에러발생', text : '<h3>네트워크에러가 발생하였습니다.</h3>', placement: 'middle-center' }; // 데이터의 확인이나 조작을 위해 callback="fnCallback" 속성에서 호출 function fnCallback(data){ console.log("Callback"); console.log(data); } // 서버로 전송을 하며, 리턴값이 있을 시 바인딩 한다. function submitData(){ SBUxMethod.refresh('ajaxData'); }
// setJsonData 의 객체값을 만들어 주고 valuedata-ref 의 참조값이 undefined 나 // size 가 0 보다 이상인 상태로 변경되어 // SBUxMethod.refresh('ajaxData') 시 // <sbux-datastore 에서는 서버로 값을 호출하지 않고 , valuedata-ref의 참조값을 // 사용하여 바인딩 한다. function changeData(){ // 데이터를 특정선택값으로 변경 setJsonData = { req_no:"2" ,emp_nm:"소프트보울" ,req_no:1, useYn : "사용" }; SBUxMethod.refresh('ajaxData'); }
// before-send-callback="fnSessoinCheck" 에 대한 사항으로 // return false; Server 로 전송을 하지 않으며, // return 이 없을 시에는 true 로 간주하여 Server 로 값을 전송한다. function fnSessionCheck(){ var isOpenSession = false;
// 세션이 끊겼다는 검증후, 세션이 끊어졌다면.. isOpenSession = false; if (isOpenSession == false){ SBUxMethod.alert( { title :'세션끊김', text:'<h3>자리비움으로 세션이 끊어졌습니다.<br>재접속 바랍니다.</h3>', placement: 'middle-center' } ); } return isOpenSession; // return false; 통신 중단 }
// 통신상의 에러가 발생했을 시의 처리입니다. function fnErrorCallback(data, status, statusText){ console.log(data + " / " + status);
// error 메시지 창과 연계 switch(status){ // 빈번된 사항에 대한 특정 안내문구 case 404: alertErrorOption.title = "죄송합니다."; alertErrorOption.text = "예의치 않은 문제로 인해 서버가 잠시 중단되었습니다.<br> 잠시 후에 재접속 부탁드립니다."; break; default : alertErrorOption.title = status; alertErrorOption.text = statusText; break; } }
function fnReqChange(arg){ sendData['req_no'] = arg; } </script> </head>
<body style="padding;10px;">
<sbux-input id="idx_req_no" name="req_no" uitype="text" style="width:40%;" onchange="fnReqChange(req_no)" datastore-id="idxData"></sbux-input> <sbux-button id="idxBtnSubmit" name="btnSub" uitype="normal" text="데이터 바인딩" onclick="submitData()"></sbux-button> <sbux-button id="idxBtnSelect" name="btnSelect" uitype="normal" text="선택값 일괄 변경" onclick="changeData()"></sbux-button> <sbux-input id="ipt_no2_8" name="emp_nm" uitype="text" style="width:40%;" datastore-id="idxData"></sbux-input> <sbux-select id="idxuserYn" name="useYn" uitype="single" jsondata-ref="tempData.userYn" auto-unselected-text="true" style="width: 40%; height:27px;" datastore-id="idxData"></sbux-select> <!-- 데이터를 받는 컴포넌트의 속성 --> <!-- datastore-key="aaa" 데이터가 jonData = { "aaa" : [{ ... }] } 의 형태시 --> <!-- datastore-where="{ 'emp_no' : '1' } " 조건이 맞는 것만 가져오도록 하는 필터 --> <!-- datastore-callback="fnCallback" datastore 로 부터 받은 데이터를 확인 --> <sbux-datastore id="idxData" name="ajaxData" uitype="ajax" is-onload-bind="false"
jsondata-ref="setJsonData" send-type="post" send-url="/getDemoRequestRegiAjax" send-data="sendData" send-content-type="application/json; charset=utf-8" receive-data-type="json" cache="true"
before-send-callback="fnSessionCheck"
is-loading-alert="true" loading-alert-option="alertLoadingOption" error-callback="fnErrorCallback" is-error-alert="true" error-alert-option="alertErrorOption"></sbux-datastore> <!-- 임시로 json Data 를 사용하는 경우는 jsondata-ref 를 넣습니다. ( jsondata-ref="instanceJsonData" 속성 추가 ) req_no 가 위의 sbux-input 에서 입력시 동시에 반영 is-onload-bind = "true" 설정시 페이지 로딩시 부터 적용 --> <!-- callback = "fnCallback" 의 형태를 통해 datastore 에 저장된 데이터를 확인 또는 조작을 할 수 있습니다. callback 함수 호출 이후에는 각 컴포넌트로 자동 바인딩 되지 않으니 주의 하시기 바랍니다. error-callback="fnErrorCallback" 의 형태를 통해 exception 발생을 확인할 수 있습니다. --> </body> |
| 예시) datastore 컴포넌트의 callback 부분 추가 내용 |
|---|
|
<script > var temp_data = {}; var ct_data= { "grid_data": [ {"Check":"Y","name":"김","age":"10","gender":"Male","addr":"서울특별시 금천구 독산동"}, {"Check":"N","name":"안","age":"1","gender":"Male","addr":"서울특별시 금천구 독산동"}, {"Check":"N","name":"가","age":"20","gender":"Male","addr":"서울특별시 금천구 독산동"}, {"Check":"Y","name":"나","age":"30","gender":"Male","addr":"서울특별시 금천구 독산동"}, {"Check":"N","name":"마","age":"100","gender":"Male","addr":"서울특별시 금천구 독산동"}, {"Check":"N","name":"다","age":"21","gender":"Male","addr":"서울특별시 금천구 독산동"}, {"Check":"N","name":"라","age":"43","gender":"Male","addr":"서울특별시 금천구 독산동"} ] };
function fnCallback(args){ args.grid_data.push({"Check":"N","name":"신규","age":"11","gender":"Male","addr":"서울특별시 금천구 독산동"});
var testObj= [ {"Check":"Y","name":"김","age":"10","gender":"Male","addr":"서울특별시 금천구 독산동"} ];
// 자동 바인딩 수행 return true;
// return false; 이거나 return 이 없을 시 수동바인딩 필요 // temp_data.grid_data = args.grid_data; // datagrid.refresh();
// return testObj; 형태의 object 가 입력된 경우 , testObj 의 내용으로 자동바인딩 됨 } </script> <!-- datastore-sort 기능 추가 datastore-sort="desc(참조 키명)" 또는 datastore-sort="asc(참조 키명)" 으로 대입 --> <sbux-sbgrid id="datagrid" name="datagrid" uitype="2.1" strJsonRef="temp_data.grid_data" strStyle="width:100%; height:250px; font-family:Verdana, arial;font-size: 9pt;"
bIsShowLoadingImage="true" strExtendLastCol="scroll" strExplorerbar="sortshowmove" strCellFocusColor="#F9B499" strFocusColor="#FFCF80" datastore-id="idxData" datastore-key="grid_data" datastore-sort="desc(name)"> <columns> <column id="col0" text="" width="40px" type="checkbox" ref="Check" strCheckValue="Y,N"></column> <column id="col1" text="Name" width="100px" type="output" ref="name" style="text-align:center;" > </column> <column id="col2" text="Age" width="50px" type="output" ref="age" style="text-align:center;"> </column> <column id="col3" text="Gender" width="70px" type="input" ref="gender" style="text-align:center;"> </column> <column id="col4" text="Address" width="250px" type="output" ref="addr"></column> </columns> </sbux-sbgrid> <sbux-datastore id="idxData" name="ajaxData" uitype="ajax" is-onload-bind="true" jsondata-ref="ct_data" send-type="post" send-url="/ajaxServerUrl" send-data="" callback="fnCallback"></sbux-datastore> |
