사용자:Teammoca/연습장
이 문서는 초안 문서입니다. 누구나 과감하게 편집할 수 있습니다. 위키백과 문서로 게시하기 전에 정책과 지침을 준수하였는지 확인해주세요.
이 사용자 문서의 최신 판은 Teammoca (기여 • 기록)님이 3년 전에 편집한 것입니다. (새로 고침) |
Moca는 표준웹기반의 UI/UX 솔루션이다.
0. SPA(single page application)화면작성법[편집]
0.1 spa main[편집]
시스템의 맨처음시작페이지(또는 메인페이지)이며 , jsp 또는 html 작업가능하다
- meta tag로 charset,no-cache 적용등을 설정함
- link tag로 파비콘이미지를 지정함
- link tag로 moca.css, moca_layout.css를 지정함
- link tag로 해당시스템에 사용할 css를 지정함
- script tag로 jquery-3.3.1.min.js, sha512.min.js, config.js , moca.js를 지정함
script | 경로 | 내용 |
---|---|---|
jquery-3.3.1.min.js | {contextRoot}/moca/js/jquery-3.3.1.min.js | moca.js버전에서 사용하는 jquery |
sha512.min.js | {contextRoot}/moca/js/sha512.min.js | moca.js버전에서 사용하는 암호화 library |
config.js | {contextRoot}/moca/js/config.js | moca.js버전에서 사용하는 설정모듈 |
moca.js | {contextRoot}/moca/js/moca.js | moca 메인엔진 js |
- 샘플구성
<!DOCTYPE html> <html lang="ko"> <head> <title>시스템명</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="shortcut icon" href="/moca/images/favis.png"> <META http-equiv="Expires" content="-1"> <META http-equiv="Pragma" content="no-cache"> <META http-equiv="Cache-Control" content="No-Cache"> <link rel="stylesheet" type="text/css" href="/moca/css/moca.css"> <link rel="stylesheet" type="text/css" href="/moca/css/fontawesome.css"> <link rel="stylesheet" type="text/css" href="/moca/css/moca_layout.css"> <link rel="stylesheet" type="text/css" href="/css/업무용.css"> <script language="JavaScript" src="/moca/js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="/moca/js/sha512.min.js"></script> <script language="JavaScript" src="/moca/js/config.js"></script> <script language="JavaScript" src="/moca/js/moca.js"></script> <script> //script작성부 </script> </head>
0.2 scripting[편집]
spa의 main script영역은 moca기본object를 생성하고, 메뉴,권한 등 공통으로 사용되는 object들을 선언해놓습니다.
spa이기때문에 앞으로 작성되는 일반화면페이지에서는 더이상 new Moca()를 하지않습니다.
- 샘플구성
<script> var moca = new Moca(); </script>
0.3 body[편집]
spa body에서는 각영역에 맞게 아래 샘플과 같이 layout를 구성합니다.
특히 mdi영역이 tag="moca:mdi" 형식으로 지정되는것을 확인합니다.
<body>
<div class="moca_wrap">
<div type="wframe" id="header" tag="moca:header" src="/to/moca/comm/header.html"></div>
<div type="wframe" id="aside" tag="moca:aside" src="/to/moca/comm/aside.html"></div>
<div class="moca_container on">
<div type="wframe" id="lnb" tag="moca:lnb" src="/to/moca/comm/lnb.html"></div>
<div type="wframe" id="mdi" tag="moca:mdi" src="/to/moca/comm/mdi.html"></div>
</div>
<div type="wframe" id="footer" tag="moca:footer" src="/to/moca/comm/footer.html"></div>
</div>
</body>
0.4 mdi에 사용되는 일반페이지작성[편집]
0.4.1 templet[편집]
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
</style>
<script>
moca.{화면아이디}.___ready = function(args){
//<------------------------------화면초기수행script작성
};
</script>
<body>
//<------------------------------화면tag작성
</body>
</html>
0.4.2 scripting[편집]
스크립트작성의 기본규칙
- 모든함수, 변수는 moca.{화면아이디}로 시작한다.
- 화면open시자동수행함수명은 ___ready 이다.
- 페이지내의 object를 참조할때는 반드시 moca.getObj("{object id}"); 형식으로 찾아야한다, 그래야 spa특성상 같은 아이디가 존재하더라도 정확히 페이지내에서 찾을수있다.
- transaction(통신)함수명은 exe이다.
- sample구성
<script> moca.TO_002.___ready = function(args){ moca.TO_002.exe({ url : config._domain+config._contextRoot+"/TO_002/carAnalysis.do", loadingbar:true, data : { "header" : moca.header, "body" : { "inqType":"2", } }, callback : function(response){ moca.TO_002.drawGrid('grd_02',moca.getResList(response,"carAnalysisList")); var g = moca.TO_002.getObj("grd_02"); g.setAttribute("selectedRealRowIndex","0"); moca._setRowSelection(g); moca.setFocus(moca.TO_002.getObj("CAR_NUM")); } }); }; </script>
0.4.3 body[편집]
body작성의 기본규칙으로 spa특성상 일반페이지는 mdi태그로 시작합니다 "class="moca_tab_panel"
<body>
<div id="moca_tab_bridge1" class="moca_tab_panel" role="mdipanel" style="display:block;visibility:visible;">
<div class="moca_tab_cont" style="height:100%">
<div class="moca_cont_wrap">
<div type="wframe" class="moca_titbox cm" id="titbox" tag="moca:titbox"
src="/html/titlebox.html"
data = '{"sreenCd":"TO_002","sreenNm":"등록원부조회","sreenPath":"등록원부조회"}'
></div>
<div class="moca_shbox">
<div class="shbox_inner">
//조회조건영역
</div>
<div class="btn_shbox">
//조회버튼영역
</div>
</div>
//그리드영역
<div type="grid" class="moca_grid toolbar sc_row1" ...>
</div>
</div>
</div>
</div>
</body>
1. component[편집]
1.1 grid[편집]
publishing[편집]
- type = "grid"
- class = "moca_grid"
- 그리드 컴포넌트 위에 조회영역의 단수에 맞춰서 class 'sc_row'를 입력한다.
<div type="grid" class="moca_grid sc_row"></div><!-- 조회영역 없음 --> <div type="grid" class="moca_grid sc_row1"></div><!-- 조회영역 1단--> <div type="grid" class="moca_grid sc_row2"></div><!-- 조회영역 2단--> <div type="grid" class="moca_grid sc_row3"></div><!-- 조회영역 3단--> <div type="grid" class="moca_grid sc_row4"></div><!-- 조회영역 4단-->
- toolbar
<div type="grid" class="moca_grid sc_row1 toolbar"></div><!-- toolbar 영역 추가-->
속성 | 값 | 설명 |
---|---|---|
toolbar_search_size | "false" 또는 "true" | 조회 검색 건수 설정이며 true로 할 경우 grid toolbar영역에 건수 콤보박스가 표시된다.
예)20건, 50건, 100건, 400건, 800건 |
toolbar_col_showhide | "false" 또는 "true" | 그리드 column을 그룹핑하는 옵션을 설정하는 버튼 |
toolbar_exup | "false" 또는 "true" | 엑셀 업로드 버튼 |
toolbar_addrow | "false" 또는 "true" | 행추가 버튼 |
toolbar_delrow | "false" 또는 "true" | 행삭제 버튼 |
toolbar_nextbtn | "false" 또는 "true" | 다음 버튼 |
toolbar_full | "false" 또는 "true" | 그리드 full view 버튼 |
- default_cell_height = "26px"
- label = "그리드 타이틀"
- 샘플구성
<div type="grid" class="moca_grid toolbar sc_row1" default_cell_height="26px" id="grd_01" toolbar_search_size="false" toolbar_col_showhide="false" toolbar_detail="false" toolbar_exup="false" toolbar_exdn="false" toolbar_addrow="false" toolbar_delrow="false" toolbar_nextbtn="false" toolbar_full="true" toolbar_grid_button1='{"position":"right","id":"button1","label":"버튼","onclick":"moca.m01.fn_btn","addClass":""}' label="총건수"> <table> <colgroup> <col style="width:80px"><!-- 순번 --> <col style="width:120px"><!-- 조회일자 --> <col style="width:120px"><!-- 내용 --> </colgroup> <thead> <tr> <th id="H_rowNum" rowspan="2">순번</th> <th id="H_date" rowspan="2">조회일자</th> <th id="H_a1" rowspan="2">내용</th> </tr> </thead> <tbody> <tr> <td id="rowNum" name="순번" celltype="input" readonly="true" displayFunction="moca.fn_display_rownum"></td> <td id="date" name="조회일자" celltype="input" tooltip="true" readonly="true" required="false"></td> <td id="a1" name="내용" celltype="input" tooltip="true" readonly="true" required="false"></td> </tr> </tbody> </table> </div>
attribute | value | desc |
---|---|---|
type | grid | grid component |
default_cell_height | 26px(default) | cell의 height |
label | 일반텍스트 | grid의 좌측 상단에 표시될 제목 |
scripting[편집]
가. onDblClick[편집]
그리드의 특정 행을 더블클릭했을때 발생합니다.
- value이벤트함수지정시 "(인자...)"영역을 붙이지않고 함수명만 지정합니다.
onDblClick = "moca.TO_002.grd_02__onDblClick"
- arguments
item | value | desc |
---|---|---|
그리드 오브젝트 | _grd | grid object |
열번호 | rowIndex | dblclicked row index |
행번호 | colIndex | dblclicked colIndex |
행ID | colId | dblclicked colId |
더블클릭발생시 해당 그리드, 열번호, 행번호, 행ID를 인자로 제공한다.
- sample
moca.TO_002.grd_02__onDblClick = function(_grd,rowIndex,colIndex,colId){
var o = {};
o.id = moca.TO_002.popId1;
o.url = '/html/TO/TO_000P03.html';
o.type = "POPUP";
o.modal = "false";
o.title = '팝업타이틀';
o.callback = moca.TO_002.fn_pop_callback;
o.scopeId = moca.TO_002.pageId;
o.data = {"RegistrationIndex":_grd.list[rowIndex].idx};
moca.popup(o,_grd);
};
나. onSelectChanged[편집]
grid 내 type이 "select"인 cell들에서 값변경시 발생함
- value이벤트함수지정시 "(인자...)"영역을 붙이지않고 함수명만 지정합니다.
onSelectChanged="moca.EFC_USER.selectChanged"
- arguments
item | value | desc |
---|---|---|
열번호 | row | changed cell row index |
행ID | col | changed cell ID |
이전값 | beforeCode | 변경이전의 코드값 |
이전텍스트 | beforeText | 변경이전의 라벨(텍스트)값 |
변경후값 | afterCode | 변경한코드값 |
변경후텍스트 | afterText | 변경한 라벨(텍스트)값 |
더블클릭발생시 해당 그리드, 열번호, 행번호, 행ID를 인자로 제공한다.
- sample
moca.EFC_USER.selectChanged = function(row,col,beforeCode,beforeText,afterCode,afterText){
var grd = moca.EFC_USER.getObj('grd_1');
moca.setCellData(grd,row,'etc',beforeText+' to '+afterText);
};
다. onScrollEnd[편집]
grid의 scrollbar가 맨아래에 도달했을때 발생함, 주로 이시점에 데이터를 추가로 가져와서 append할때 많이 사용된다.
- value
onScrollEnd="moca.NP_REPORT.onScrollEnd"
- arguments _callback : 조회후 다시그리기 함수를 콜백으로 던져줌, 조회후 실행
- sample
moca.NP_REPORT.endFlag = false; moca.NP_REPORT.endFlagLong = false; moca.NP_REPORT.onScrollEnd = function(_callback){ var _grdId = "grd_1"; if(!moca.NP_REPORT.endFlagLong && !moca.NP_REPORT.endFlag){ var _page = (Number(moca.NP_REPORT.getObj(_grdId).getAttribute("page"))+1); moca.NP_REPORT.getObj(_grdId).setAttribute("page",_page); moca.NP_REPORT.exe({ url : moca._domain+"/adc/NPREPORT/list_json.do", loadingbar:false, data : { "header" : moca.header, "body" : { page : _page, limitFrom : ((_page-1)*moca.NP_REPORT.pageQty)+'', limitTo : (moca.NP_REPORT.pageQty)+'', From:moca.NP_REPORT.getFrom("CREATE_DTTM"), To:moca.NP_REPORT.getTo("CREATE_DTTM"), Level1CD:moca.NP_REPORT.getCombo("LEVEL1"), Level2CD:moca.NP_REPORT.getCombo("LEVEL2"), File:moca.NP_REPORT.getCombo("REPORT"), arrIssuer:moca.NP_REPORT.getInput("issuer"), arrAuthor:moca.NP_REPORT.getInput("author"), chkIncludeTitle:moca.NP_REPORT.getCheckbox("CheckBox3").checked, chkIncludeSummery:moca.NP_REPORT.getCheckbox("CheckBox4").checked, arrKeyWord:moca.NP_REPORT.getInput("arrKeyWord"), sort:moca.NP_REPORT.getRadio("radio1").value } }, callback : function(response){ var grd = moca.NP_REPORT.getObj(_grdId); var _l = response.list1; if(_l != null && _l.length < moca.NP_REPORT.pageQty){ moca.NP_REPORT.endFlag = true; } grd.list = grd.list.concat(_l); if(_callback != null){ _callback(); } } }); }else{ var grd = moca.NP_REPORT.getObj(_grdId); if(grd.list.length != grd.list_long.length){ grd.list = grd.list_long; if(_callback != null){ _callback(); } } } };
분할 data append를 위해 파라미터로 page(현제데이터를 가져온 마지막페이지번호)를 사용한다.
가져온데이터는 append한다.
var grd = moca.NP_REPORT.getObj(_grdId);
var _l = response.list1;
if(_l != null && _l.length < moca.NP_REPORT.pageQty){
moca.NP_REPORT.endFlag = true;
}
grd.list = grd.list.concat(_l);
if(_callback != null){
_callback();
}
1.2 form[편집]
publishing[편집]
- type = "form"
- class = "moca_table"
- showRowSelection="true 또는 false"
테이블 row 클릭 시 색깔 표시
- label = "테이블 타이틀"
- addition='[{"type":"button","position":"right","id":"btn_01","label":"버튼","onclick":"moca.화면아이디.함수명","addClass":""}]'
- 테이블 toolbar영역에 다양한 컴포넌트를 추가해야 할 경우 사용하는 프로퍼티
- addition 속성
속성 | 값 |
---|---|
type | button, label, input, combo |
position | left, right |
id | 컴포넌트 아이디 |
label | 컴포넌트 라벨 |
onclick | 컴포넌트 onclick 이벤트 |
addClass | 별도의 class 추가 |
- 샘플 구성 (3*2 테이블)
<div type="form" id="form_1" class="moca_table toolbar" style="" label="테이블타이틀" showRowSelection="false" addition='[ ]' > <table class="moca_table_cont"> <colgroup> <col style="width:160px"> <col> <col style="width:160px"> <col> <col style="width:160px"> <col> </colgroup> <tbody> <tr> <th>컬럼1</th> <td> <div type="input" id="column1" class="mocaInput" onclick="" style="" value="" readonly="true"></div> </td> <th>컬럼2</th> <td> <div type="input" id="column2" class="mocaInput" onclick="" style="" value="" readonly="true"></div> </td> <th>컬럼3</th> <td> <div type="input" id="column3" class="mocaInput" onclick="" style="" value="" readonly="true"></div> </td> </tr> <tr> <th>컬럼4</th> <td> <div type="input" id="column4" class="mocaInput" onclick="" style="" value="" readonly="true"></div> </td> <th>컬럼5</th> <td> <div type="input" id="column5" class="mocaInput" onclick="" style="" value="" readonly="true"></div> </td> <th>컬럼6</th> <td> <div type="input" id="column6" class="mocaInput" onclick="" style="" value="" readonly="true"></div> </td> </tr> </tbody> </table> </div>
- showRowSelection : form요소의 선택시 선택색상을 적용한다.
- label : form영역왼쪽상단에 라벨텍스트를 표시함
- addition : form상단에 버튼을 넣는다.
- keyMask : cell에 입력되는 char를 한정한다.
<div type="form" id="form_2" class="moca_table toolbar mt12 mb12 absoluteTb" style="" label="취득세율 및 감면금액" keyMask="onlyMoney" ... />
- sample
<div type="form" id="form_3" class="moca_table tb1 toolbar mt10 mb12" style="" label="차량시세적용율" addition='[ {"type":"label","position":"right","id":"lab_middleRate","value":"하한가적용율","addClass":"grid_label_span","style":"margin-right:5px"}, {"type":"combo","position":"right","id":"cmb_middleRate","displayFormat":"[label]","cdField":"code","nmField":"codeNm","style":"margin-right:10px","width":"100px"}, {"type":"label","position":"right","id":"lab_topRate","value":"상한가적용율","addClass":"grid_label_span","style":"margin-left:10px;margin-right:5px"}, {"type":"combo","position":"right","id":"cmb_topRate","displayFormat":"[label]","cdField":"code","nmField":"codeNm","width":"100px"}, {"type":"button","position":"right","id":"btn_save","label":"시세적용율저장","onclick":"moca.TO_005.fn_save3","addClass":""} ]' >
scripting[편집]
- oncellclick : td의 edit cell을 클릭했을때 발생함
oncellclick="moca.TO_004.onRowClick"
- setFormValue : 폼 특정요소에 값세팅하기( moca.{화면아이디}.setFormValue('{폼아이디}','{요소아이디}',{value});
moca.TO_000P01.setFormValue('div1','PurchasePrice',moca.comma(data.VehicleBasisPrice));
- getValue : 특정요소에 값을 가져오기 ( moca.getValue(해당오브젝트); )
moca.getValue(moca.TO_000P01.getObj("form_buyerName"));
1.3 mdi[편집]
업무시스템 화면에서 탭으로 구성되어 동시에 여러 화면의 작업이 가능한 다중 문서 인터페이스를 mdi라고 일컫는다.
mdi는 SPA(single page application)속에서 wframe으로 구성되어 mdi영역이 tag="moca:mdi" 형식으로 지정되어 있다.
mdi는 별도의소스(/moca/comm/mdi.html) 로 작성되어있어 컴포넌트자체를 customize할 수도 있다.
<body>
<div class="moca_wrap">
<div type="wframe" id="header" tag="moca:header" src="/to/moca/comm/header.html"></div>
<div type="wframe" id="aside" tag="moca:aside" src="/to/moca/comm/aside.html"></div>
<div class="moca_container on">
<div type="wframe" id="lnb" tag="moca:lnb" src="/to/moca/comm/lnb.html"></div>
<div type="wframe" id="mdi" tag="moca:mdi" src="/to/moca/comm/mdi.html"></div> <!-- mdi영역 -->
</div>
<div type="wframe" id="footer" tag="moca:footer" src="/to/moca/comm/footer.html"></div>
</div>
</body>
publishing[편집]
- MDI화면 속 구성은 크게 .moca_tab_panel > .moca_tab_cont > .moca_cont_wrap 구성으로 되어있다.
- mdi에 사용되는 일반페이지작성 (업무화면들은 moca_cont_wrap 하위에 구성하면 된다)
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
</style>
<script>
moca.{화면아이디}.___ready = function(args){
//<------------------------------화면초기수행script작성
};
</script>
<body>
<div id="moca_tab_bridge1" class="moca_tab_panel" role="mdipanel">
<div class="moca_tab_cont">
<div class="moca_cont_wrap">
<!-- 업무영역 -->
</div>
</div>
</div>
</body>
</html>
scripting[편집]
- mdi로 화면열기
moca.openMdi(moca._contextRoot+_url,_srcId,_label,_clickedMenuId);
인자 | 설명 | 예시 |
---|---|---|
url | 소스URL | "/to/html/TO/TO_003.html" |
srcId | 소스아이디 | "TO_003" |
label | mdi 타이틀텍스트 | "회원관리" |
menuId | 클릭한메뉴아이디 | "li3010000" |
- 자체이벤트로 all_tab_close 를 가지고있으며, 전체MDI들을 한번에 닫을수있다.
<div class="moca_tab_control"> <button type="button" class="moca_tab_allclose" onclick="moca.all_tab_close();" title="전체닫기">전체닫기</button> </div>
- 자체이벤트로 toast_msg(상태바)를 가지고있으며 , 모든 트렌젝션을 모니터링할수있다. .exe api사용시 showStatus옵션을 "false"로 주면 해당트렌젝션은 안나오게 할수있다.
<div class="toast_msg"> <div class="toast_area"></div> </div>
1.4 tab[편집]
publishing[편집]
- type = "tab"
- class= "moca_layer_tab"
- 서브 탭을 추가할 경우 list에 json형식으로 추가한다.
- 샘플구성
<div type="tab" id="tab_00" class="moca_layer_tab" style="" onTabHeaderclick="moca.tab00.sendParam"
list='[
{"position":"left","id":"t0","label":"탭1","src":"/html/tab1.html","active":"true"},
{"position":"left","id":"t1","label":"탭2","src":"/html/tab2.html"},
{"position":"left","id":"t2","label":"탭3","src":"/html/tab3.html"},
{"position":"left","id":"t3","label":"탭4","src":"/html/tab4.html"},
{"position":"left","id":"t4","label":"탭5","src":"/html/tab5.html"},
]'
>
</div>
attribute | value | desc |
---|---|---|
type | tab | tab component |
onTabHeaderclick | function | 탭 타이틀 라벨을 클릭했을 때 발생하는 이벤트 |
list | 탭 리스트 및 화면 구성 (tab list 참고) |
- tab list
item | value | desc |
---|---|---|
position | "left" 또는 "right" | tab 정렬 |
label | 일반텍스트 | 탭 헤더에 표시될 제목 |
src | 파일경로 | 실제 서브탭 html파일 경로 |
active | "true" | 탭 화면이 처음 로딩되었을 시 active 되어있을 서브탭에 지정 |
scripting[편집]
- onTabHeaderclick : 해당탭클릭시 이벤트발생
onTabHeaderclick="moca.TO_001.sendParam"
- 선택된tab ID구하기 ( moca.getSelectedTabId )
selectedId = moca.getSelectedTabId(moca.TO_001.getObj("tab_TO001"));
1.5. multiCalendar[편집]
특정 기간의 값을 입력해야 할 때 사용하는 컴포넌트이다. 주로 조회조건에서 조회기간을 설정할 때 사용한다.
publishing[편집]
<div type="inputMultiCalendar"
class="moca_ica "
style="width:auto"
id="CREATE_DTTM"
displayFormat="####-##-##"
defaultValue="6일전"
selecterItem="오늘,3일전,6일전"
showRadioOption="false"
></div>
attribute | value | desc |
---|---|---|
type | inputMultiCalendar | inputMultiCalendar Component |
class | moca_ica | inputMultiCalendar Class |
displayFormat | ####-##-## | 날짜 형식 포맷 |
defaultValue | 오늘,전일, 3일전, 6일전, 금주, 전주, 당월, 전월, 당분기, 전분기, 당년, 전년 | default로 지정할 From ~ To 날짜지정 기준은 현재일 기준으로 계산한다. 빈 값일경우 현재날짜로 세팅된다. |
selecterItem | 오늘,전일, 3일전, 6일전, 금주, 전주, 당월, 전월, 당분기, 전분기, 당년, 전년 | MultiCalendar 달력 아이콘을 클릭했을 때 좌측에 나올 기간
(최대 10개까지 지정할 수 있다) |
showRadioOption | true 또는 false | MultiCalendar 옆에 seleterItem list를 라디오 형식으로 보여주는 옵션 |
1.6. calendar[편집]
single calendar component
publishing[편집]
<div type="inputCalendar"
class="moca_ica"
style="width:100%"
id="Today"
displayFormat="####-##-##"
defaultValue=""
ondateSelected="moca.TO_008.fn_ondateSelected"
></div>
attribute | value | desc |
---|---|---|
type | inputCalendar | inputCalendar Component |
class | moca_ica | inputCalendar Class |
displayFormat | ####-##-## | 날짜 형식 포맷 |
defaultValue | 오늘,전일, 3일전, 6일전, 금주, 전주, 당월, 전월, 당분기, 전분기, 당년, 전년 | 화면 로드시 세팅 될 날짜
빈 값일경우 현재날짜로 세팅된다. |
ondateSelected | moca.__화면id.함수명 | 캘린더에서 날짜를 클릭했을 때 발생하는 이벤트 |
1.7. combo[편집]
publishing
<div type="combo"
id="cmb_[row]_[col]"
class="moca_combo"
innerOnchange="moca.TO_004.selectSetter(this)"
style="width:100%"
displayFormat="[label]"
cdField="cd"
nmField="nm"
itemset='[{"cd":"0","nm":"해당없음 "},{"cd":"1","nm":"(%) 비율"},{"cd":"2","nm":"(원) 금액"}]'>
</div>
- displayFormat : "[value]" 와 "[label]"을 사용하여 표현형식을 지정함. 예). "[label]" or "[value] [label]" or "[value] - [label]" or "[value]" 등
- cdField : 코드컬럼명
- nmField : 라벨컬럼명
- itemset : 데이터리스트를 하드코딩으로 세팅할때사용
scripting
- 데이터바인딩하기
moca.TO_004S01.bindCombo("cmb_01_01", { metaInfo : { codeCd : "cd", codeNm : "nm" } }, [ { cd : '01', nm : '배기량' }, { cd : '02', nm : '대중소형' } ]);
1.8. radio[편집]
publishing[편집]
주어진 데이터리스트를 radio 그룹으로 구성해준다.
<div type="radio" class="mocaRadio" style="width:100%" id="radio_01"
itemset='[{"label":"승용차","value":"승용","checked":"true"},{"label":"전기수소(승용+승합)","value":"전기"},{"label":"승합차","value":"승합"}]'
innerOnclick='moca.TO_004.radio_01_click'
></div>
- type : radio
- class : mocaRadio
- itemset : 하드코딩으로 데이터구성
scripting
- innerOnclick : radio click시발생
- 선택된 값 읽기 : moca.{화면아이디}.getRadio('{라디오아이디}').value
moca.TO_004.getRadio('radio_01').value
1.9. checkbox[편집]
publishing[편집]
<div type="checkboxGroup" class="fl mr15" direction="vertical" id="chkg_1"
itemset='[{"id":"chk1","label":"진행중","value":"1","checked":"true"}]'>
</div>
<div type="checkboxGroup" class="fl mr5" direction="vertical" id="chkg_2"
itemset='[{"id":"chk2","label":"완료","value":"0","checked":"false"}]'>
</div>
- type : checkboxGroup지정
- itemset : 하드코딩으로 해당리스트를 checkbox로 구성함
scripting[편집]
- value가져오기 (moca.{화면아이디}.getCheckbox("{체크박스아이디}") 를 호출하면 해당checkbox의 정보객체를 리턴함)
var chkg_1_val = moca.TO_001.getCheckbox("chkg_1").value;
1.10. input[편집]
publishing[편집]
<div type="input"
keyMask="onlyNumber"
maxlength="6"
id="sellerSocialNumber_First"
class="mocaInput req"
onclick=""
style="width:52px"
innerClass=""
value=""
readonly="false"></div>
- type : input으로 지정
- style : div영역에 주는 스타일지정
- innerClass : input영역에 주는 스타일지정tal 은 text-align-left의 약자로 좌측정렬, tac 는 text-align-center의 약자로 중앙정렬, tar은 text-align-right의 약자로 우측정렬
innerClass="tal"
- readonly : 읽기전용모드지정
- class : mocaInput 으로 지정해야함
- keyMask : 일력되는 텍스트의 형태를 제한함. "|"로 구분하여 복수적용가능 예).
keyMask="enterSearchEvt|onlyPhoneEvt"
keyMask종류 | 허용문자 | 제한문자 | 비고 |
---|---|---|---|
onlyNumber(Evt) | 숫자허용 | 한글,영문,특수문자,쉼표,마이너스기호 차단 | 자연수(+숫자만)
예). 주민번호,우편번호 |
onlyFloat(Evt) | 숫자허용,쩜(.)허용 | 한글,영문차단 | 소수점있는 숫자 |
onlyPercent(Evt) | 숫자허용,쩜(.),퍼센트(%)허용 | 한글,영문차단 | 예). 세율,비율 |
onlyMoney(Evt) | 숫자,마이너스기호,쉼표허용 | 한글,영문차단 | |
enterSearch(Evt) | Enter키눌렀을때만발생 | 조회버튼클릭을발생시킬때사용 | |
onlyPhone(Evt) | 숫자,마이너스기호(데시로)허용 | 한글,영문,특수문자,쉼표 차단 |
- maxlength : 최대입력자리수
1.11. wframe[편집]
type을 "wframe"으로 지정함.
data를 이용해 파라미터를 전달함.
addition을 이용해 해당BOX영역의 상단에 버튼,라벨 등을 추가할수있다.
<div type="wframe" class="moca_titbox cm" id="titbox" tag="moca:titbox"
src="/html/titlebox.html"
data = '{"sreenCd":"TO_001","sreenNm":"운영관리","sreenPath":"운영관리"}'
addition='[
{"type":"button","position":"right","id":"btn_charge","label":"수입인지충전","onclick":"moca.TO_001.fn_toolkit_purcharse","addClass":""},
{"type":"label","position":"right","id":"lbl_charge_money","value":"300,000","addClass":"stampcost_charge"},
{"type":"label","position":"right","id":"lbl_charge_unit","value":"원","addClass":"","style":""}
]'
></div>
wframe으로 지정된 소스에서는 var p = $(args.parent);후 p.attr("data") , p.attr("addition") 식으로 속성에 접근한다.
moca.titlebox.___ready = function(args){
var p = $(args.parent);
var is = moca.getIncludeScope(p,this);
var data = JSON.parse(p.attr("data"));
is.find('#sreenCd').html(data.sreenCd);
is.find('#sreenNm').html(data.sreenNm);
if(moca.trim(data.sreenPath) != ''){
var arr = moca.trim(data.sreenPath).split(',');
if(arr != null && arr.length > 0){
var str = '<em class="mr7"><i class="fas fa-grip-lines-vertical"></i></em><img src="'+moca._contextRoot+'/images/ico_home.png" class="mr7">';
for(var i=0; i < arr.length; i++){
str += '<em class="mr7"><i class="fas fa-angle-right"></i></em><span class="mr7">'+arr[i]+'</span>';
}
is.find('#sreenPath').html(str);
}
}
try{
var addition = JSON.parse(p.attr("addition"));
var additionObj = moca.getAdditionTag(addition);
var basis = p.closest('[tab_id]');
basis.find('.moca_addtion_area>.lta').html(additionObj.left);
basis.find('.moca_addtion_area>.rta').html(additionObj.right);
}catch(e){
};
}
1.12. layerPopup[편집]
파라미터는 "data" 속성으로 담아서 전달한다.
moca.TO_001.grd_0__onDblClick = function(_grd,rowIndex,colIndex,colId){
var o = {};
o.id = moca.TO_001.popId;
o.url = '/html/TO/TO_000P01.html';
o.type = "POPUP";
o.modal = "false";
o.title = '운영관리 상세';
o.callback = moca.TO_001.fn_pop_callback;
o.scopeId = moca.TO_001.pageId;
o.data = {"idx":_grd.list[rowIndex].Idx,"RegistrationIndex":_grd.list[rowIndex].RegistrationIndex};
moca.popup(o,_grd);
};
받을때는 ___ready 함수의 args.data.파라미터명 로 받는다.
moca.TO_000P01.___ready = function(args){
if(args != null){
moca.TO_000P01.args = args;
}
//"idx":moca.TO_000P01.args.parent.data.idx+'',
//"RegistrationIndex":moca.TO_000P01.args.parent.data.RegistrationIndex};
};
1.13. windowPopup[편집]
return값으로 주어지는 window ID를 사용하면 오픈된 window에 post로 submit할수 도있다.
fullscreen 값을 yes로 주면 전체화면크기로 창이 열린다.
var _id = moca.openWindowPopup({
id: 'winpop_ctom1_result',
title: '비용확정재시도결과',
width:"1024px",
height:"400px",
url : "/to/empty.html",
fullscreen : 'no',
param : {
}
});
param속성으로 전달할 파라미터를 보낸다.
moca.TO_001.fn_toolkit_purcharse = function(_json){
moca.openWindowPopup({
id: 'NP_FIRMSFILTERING_PopResult',
title: '매수주체별 지수 가/감산 가중치 설정',
width:"500px",
height:"400px",
url : "http://dev-mycar.carbang365.co.kr:9090/ets-hub-connect-window/ToolkitIssuePurcharseUrlExample.jsp",
fullscreen : 'no',
param : {
contractNo : "1"
}
});
};
1.14. messagebox[편집]
가. alert[편집]
moca.alert('성공적으로 저장되었습니다!',function(){
//"확인" 버큰클릭후 수행할 로직!!!
return;
});
나. confirm[편집]
예,아니오 2개의 버튼이 표시되며 ,콜백은 result인자로 예는 'Y' , 아니오는 'N'이 전달된다.
moca.confirm('저장하시겠습니까?',function(result){
if(result == 'Y'){
//'예'를 클릭시 수행할 로직!!!
}
});
1.15. fileUpload[편집]
파일업로드는 파일업로드전용팝업을 오픈하여 업로드 합니다.형식은 아래와 같습니다.
업로드버튼을 만들고 이벤트를 적용합니다
<button type="button" class="button btn_sc" onclick="moca.EFC_PROP._openFileUpload(this)"><i class="fas fa-search"></i><span>파일첨부</span></button>
항목 | 형식 | 설명 |
---|---|---|
파업URL | /moca/comp/COMP_UPLD.html | 기본 업로드컴포넌트URL |
업로드된정보를받는콜백 | callback:function(result){ } | 업로드후 업로드된파일에 관한 정보를 받는다.
result.fileSize : 파일단위를붙여서표현한값 예). 134.22 MB
예).319729
예). KMHFT41CP4A313096_basic_1_complete.pdf
예).1619964371832
예).C:\\TO\\fileUpload\\EFC_PROP\\1619964371832
|
업로드시전달할파라미터 | data:{ } | |
서버의업로드경로지정(Server Side 설정 !!!) | Globals.fileUploadDir=C:/TO/fileUpload | 전자전부프레임웍에서 설정합니다.
/egovframework/egovProps/globals.properties |
파일선택시수행될함수지정 | data:{
onFileSelected:"moca.EFC_PROP.onFileSelected" } |
data내 onFileSelected 항목에 함수명을 String으로지정함.
false를 리턴하면 업로드불가 |
서버의업로드경로다음 하우경로가 필요할때 경로명전달 | data:{
subDir:"EFC_PROP" } |
data내 subDir 항목에 경로명을 String으로지정함 |
moca.EFC_PROP._openFileUpload = function() {
moca.popup({
type:"POPUP",
modal:"false",
url:'/moca/comp/COMP_UPLD.html',
title:"파일업로드",
callback:function(result){
//업로드완료후 리턴업로드된파일정보를 받아서
//이후 파일관련테이블에 insert하는 로직을 추가한다.
var fileSize = result.fileSize
var fileLength = result.fileLength
var originalFilename = result.originalFilename
var physicalFilename = result.physicalFilename
var physicalFilepath = result.physicalFilepath
var subDir = result.subDir
var uploadDir = result.uploadDir
},
data:{
subDir:"EFC_PROP",
onFileSelected:"moca.EFC_PROP.onFileSelected"
}
});
};
moca.EFC_PROP.onFileSelected = function(filename,filesize,_e,_this) {
//filename이나 filesize를 활용하여 업로드여부를 체크할수있다.
return true;//or false
};