위키백과

사용자:Teammoca/연습장

다른 뜻에 대해서는 모카 문서를 참고하십시오.

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"
  1. 그리드 컴포넌트 위에 조회영역의 단수에 맞춰서 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단-->
  2. toolbar
    <div type="grid" class="moca_grid sc_row1 toolbar"></div><!-- toolbar 영역 추가-->
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":""}]'
  1. 테이블 toolbar영역에 다양한 컴포넌트를 추가해야 할 경우 사용하는 프로퍼티
  2. 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 편집
  1. mdi로 화면열기
    moca.openMdi(moca._contextRoot+_url,_srcId,_label,_clickedMenuId);
인자 설명 예시
url 소스URL "/to/html/TO/TO_003.html"
srcId 소스아이디 "TO_003"
label mdi 타이틀텍스트 "회원관리"
menuId 클릭한메뉴아이디 "li3010000"
  1. 자체이벤트로 all_tab_close 를 가지고있으며, 전체MDI들을 한번에 닫을수있다.
    <div class="moca_tab_control">
    <button type="button" class="moca_tab_allclose" onclick="moca.all_tab_close();" title="전체닫기">전체닫기</button>
</div>
  2. 자체이벤트로 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영역에 주는 스타일지정
    innerClass="tal"
    tal 은 text-align-left의 약자로 좌측정렬, tac 는 text-align-center의 약자로 중앙정렬, tar은 text-align-right의 약자로 우측정렬
  • 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


result.fileLength : long type byte값

예).319729


result.originalFilename : 원본파일명

예). KMHFT41CP4A313096_basic_1_complete.pdf


result.physicalFilename : 서버에 저장된 물리파일명

예).1619964371832


result.physicalFilepath : 서버에 저장된 물리파일의 FULL경로

예).C:\\TO\\fileUpload\\EFC_PROP\\1619964371832


result.subDir : 서브경로


result.uploadDir : 업로드기본경로

업로드시전달할파라미터 data:{ }
서버의업로드경로지정(Server Side 설정 !!!) Globals.fileUploadDir=C:/TO/fileUpload 전자전부프레임웍에서 설정합니다.

/egovframework/egovProps/globals.properties

파일선택시수행될함수지정 data:{

onFileSelected:"moca.EFC_PROP.onFileSelected"

}

data내 onFileSelected 항목에 함수명을 String으로지정함.


true를 리턴하면 업로드수행,

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
	};
원본 주소 "https://ko.wikipedia.org/w/index.php?title=사용자:Teammoca/연습장&oldid=29277260"