<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:w2="http://www.inswave.com/websquare"
	xmlns:xf="http://www.w3.org/2002/xforms">
	<head>
		<w2:type>COMPONENT</w2:type>
		<w2:buildDate />
		<xf:model>
			<xf:instance>
				<data xmlns="">
				</data>
			</xf:instance>
		</xf:model>
		<w2:layoutInfo></w2:layoutInfo>
		<w2:publicInfo method=""></w2:publicInfo>

		<meta name="viewport" content="width=device-width, user-scalable=no"></meta>
		<script src="../../cm/js/main.js" />
		<script type="text/javascript" lazy="false"><![CDATA[
scwin.onpageload = function () {

	// Mobile일때 메뉴 동작
	if (WebSquare.util.isMobile()) {
		grp_wrap.removeClass("show_menu");

		$(".btn_toggle_menu").click(function () {
			grp_wrap.toggleClass("show_menu");
			$(".btn_toggle_menu").toggleClass("on");
			$(".dim").toggleClass("on");
		});
	} else {
		$(".btn_toggle_menu").click(function () {
			grp_wrap.toggleClass("show_menu");
			$(".btn_toggle_menu").toggleClass("on");
		});
	}

	// 검색영역 show/hide
	$(".btn_all_search").click(function () {
		$(".search_field").toggleClass("active");
	});

	// 탭 타이틀 on/off
	$(".tab_tit a").click(function () {
		$(this).parent().addClass("on").siblings().removeClass("on");
	});

	// 트리뷰 접기
	$(".btn_fold").click(function () {
		$(this).addClass("on");
		$(".btn_fold_list").removeClass("on");
	});

	// 트리뷰 펼치기
	$(".btn_fold_list").click(function () {
		$(this).addClass("on");
		$(".btn_fold").removeClass("on");
	});

	// USER NAME CLICK
	$(".btn_mypage").click(function () {
		$(".mypage .items").toggleClass("on");
	});

	scwin.initMainLoad();
};

scwin.btn_tab_allclose_onclick = function () {
	scwin.pushStateMain();
	scwin.tabCount = tac_layout.getTabCount();
	scwin.tabIdx = scwin.tabCount;

	var promise = Promise.resolve();
	for (var i = 1; i < scwin.tabCount; i++) {
 		promise = promise.then(function() {
			scwin.tabIdx--;
			return tac_layout.deleteTab(scwin.tabIdx);
		});
	}
};

scwin.tac_layout_onbeforetabclose = function (tabID, idx) {
	var tabFrame = this.getFrame(idx);
	return scwin.closeBeforePage(tabFrame);
};
]]></script>
	</head>
	<body ev:onpageload="scwin.onpageload">
		<xf:group style="" id="grp_dimLayer" class="dim"></xf:group>
		<xf:group class="wrap show_menu" id="grp_wrap" style="">
			<w2:wframe style="" id="wfm_header" class="header" scope="true" src="../../cm/xml/header.xml"></w2:wframe>
			<xf:group class="container" id="" style="">
				<xf:group style="" id="" class="contents">
					<w2:tabControl useTabKeyOnly="true" id="tac_layout" useMoveNextTabFocus="false" useConfirmMessage="false"
						confirmTrueAction="exist" confirmFalseAction="new" alwaysDraw="false" style="" class="tabc_layout" hiddenTab="" tabPosition=""
						closable="true" useAccessibilityMenu="false" tableRender="" tabScroll="true" adaptive="layout" adaptiveThreshold="900"
						focusOnStart="" preventTabClickEvent="" selectedIndex="" spaAuto="" confirmMessage=""
						ev:onbeforetabclose="scwin.tac_layout_onbeforetabclose" changeActiveTab="true">
					</w2:tabControl>
<!--					23.03.02 모바일 시작시점 adaptiveThreshold 800->890-->
					<w2:anchor outerDiv="false" style="" id="btn_tab_allclose" class="tab_allclose" ev:onclick="scwin.btn_tab_allclose_onclick">
						<xf:label><![CDATA[탭전체닫기]]></xf:label>
					</w2:anchor>
					<xf:group id="grpMsg" style="position: absolute;bottom:40px;left:10px;min-width:calc( 98% - 20px );z-index: 9980;">
						<xf:group style="display:none;" id="msg_success" class="msg_box success">
							<w2:textbox tagname="" style="min-height:20px" id="txt_success" label="정상 처리 되었습니다." class="txt_msg"></w2:textbox>
						</xf:group>
						<xf:group style="display:none;" id="msg_info" class="msg_box info">
							<w2:textbox tagname="" style="" id="txt_info" label="정상 처리 되었습니다." class="txt_msg"></w2:textbox>
						</xf:group>
						<xf:group style="display:none;" id="msg_warning" class="msg_box warning">
							<xf:group style="" id="">
								<w2:textbox tagname="" style="" id="txt_warning" label="처리 도중 오류가 발생하였습니다." class="txt_msg"></w2:textbox>
								<xf:trigger ev:onclick="scwin.removeWarnMsg" disabled="" style="" id="btn_warnig" type="button" class="btn_close">
									<xf:label><![CDATA[테이블버튼]]></xf:label>
								</xf:trigger>
							</xf:group>
							<xf:textarea style="min-height: 100px;" id="textarea_warning" placeholder=""></xf:textarea>
						</xf:group>
						<xf:group style="display:none;" id="msg_error" class="msg_box error">
							<xf:group style="" id="">
								<w2:textbox tagname="" style="" id="txt_error" label="처리 도중 오류가 발생하였습니다." class="txt_msg"></w2:textbox>
								<xf:trigger ev:onclick="scwin.removeErrorMsg" disabled="" style="" id="btn_error" type="button" class="btn_close">
									<xf:label><![CDATA[테이블버튼]]></xf:label>
								</xf:trigger>
							</xf:group>
							<xf:textarea style="min-height: 100px;" id="textarea_error" placeholder=""></xf:textarea>
						</xf:group>
					</xf:group>
				</xf:group>
			</xf:group>
			<w2:wframe style="" id="wfm_side" class="side" scope="true" src="../../cm/xml/side.xml"></w2:wframe>
			<w2:wframe style="" id="wfm_footer" scope="true" src="../../cm/xml/footer.xml"></w2:wframe>
			<xf:group style="" id="" class="dim"></xf:group>
		</xf:group>
	</body>
</html>


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<WebSquare>

    <components>

        <component category="/cm/udc" company="" componentType="pageComponent" description="" developer="ucanon" disableIcon="" display="udc_fileMultiUpload" displaySrc="/cm/udc/fileMultiUpload.xml" height="191px" htmlRender="" icon="" id="udc_fileMultiUpload" namespaceURI="http://www.inswave.com/websquare" notSupportBrowser="" project="WRM" realType="udc_fileMultiUpload" ternId="_cm_udc_fileMultiUpload" udc2Component="true" variableClone="true" version="1.0" visible="true" width="100%">
            <properties>
                <property bindparent="" default="width:100%; height:191px" description="desc" maincategory="Basic & ETC" maincategoryorder="01" name="style" necessary="no" type="string"/>
                <property bindparent="" default="" description="desc" maincategory="Basic & ETC" maincategoryorder="01" name="class" necessary="no" type="string"/>
                <property bindparent="" default="" description="desc" maincategory="Basic & ETC" maincategoryorder="01" name="id" necessary="no" type="string"/>
                <property bindparent="" default="10" description="최대 업로드 파일 개수" maincategory="Basic & ETC" maincategoryorder="01" name="maxFileCount" necessary="no" type="number"/>
                <property bindparent="" default="536870912" description="업로드할 개별 파일 사이즈 (websquare.xml 환경설정 파일의 maxUploadSize 값보다 커서는 안됨)" maincategory="Basic & ETC" maincategoryorder="01" name="maxFileSize" necessary="no" type="number"/>
                <property bindparent="" default="2009715200" description="업로드할 전체 파일 사이즈" maincategory="Basic & ETC" maincategoryorder="01" name="totalFileSize" necessary="no" type="number"/>
                <property bindparent="" default="" description="파일의 저장할 subDir 디렉터리 경로 설정(설정하지 않은 경우 websquare.xml 환경설정 파일의 baseDir 경로에 파일이 저장됨)" maincategory="Basic & ETC" maincategoryorder="01" name="subDir" necessary="no" type="string"/>
                <property bindparent="" default="gif, jpg, bmp, png, zip, txt, ppt, pptx, xls, xlsx, doc, docx, xml, csv, pdf" description="공백("")으로 설정하면 모든 파일(*.*)로 설정됨" maincategory="Basic & ETC" maincategoryorder="01" name="filter" necessary="no" type="string"/>
                <property bindparent="" default="" description="파일 그룹 관리에서 등록한 파일 그룹 순번" maincategory="Basic & ETC" maincategoryorder="01" name="fileGrpSeq" necessary="yes" type="number"/>
            </properties>
            <events>
                <property description="파일 업로드 완료 시 발생하는 이벤트 함수" name="onFileUploadDone(isSuccess)" type=""/>
            </events>
        </component>
    </components>
</WebSquare>


<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="/css/color.css" type="text/css"?>

        <w2:type>COMPONENT</w2:type>
        <w2:buildDate/>
        <w2:MSA/>
        <xf:model>
        	<w2:dataCollection baseNode="map">
        		<w2:dataMap baseNode="map" id="dc_reqUserInfo">
        			<w2:keyInfo>
        				<w2:key id="EMP_CD" name="사용자 코드" dataType="text"></w2:key>
        			</w2:keyInfo>
        		</w2:dataMap>
        		<w2:dataMap baseNode="map" id="dc_userInfo">
        			<w2:keyInfo>
        				<w2:key id="EMP_CD" name="사번" dataType="text"></w2:key>
        				<w2:key id="EMP_NM" name="성명" dataType="text"></w2:key>
        				<w2:key id="GENDER_CD" name="성별" dataType="text"></w2:key>
        				<w2:key id="JOIN_DATE" name="입사일" dataType="text"></w2:key>
        				<w2:key id="POSITION_CD" name="직급" dataType="text"></w2:key>
        				<w2:key id="DUTY_CD" name="직책" dataType="text"></w2:key>
        				<w2:key id="ROLE_CD" name="역할" dataType="text"></w2:key>
        				<w2:key id="ASSIGNED_TASK" name="담당 업무" dataType="text"></w2:key>
        				<w2:key id="EMAIL" name="이메일" dataType="text"></w2:key>
        				<w2:key id="ZIP_CD" name="우편번호" dataType="text"></w2:key>
        				<w2:key id="ADDRESS1" name="주소1" dataType="text"></w2:key>
        				<w2:key id="ADDRESS2" name="주소2" dataType="text"></w2:key>
        				<w2:key id="CREATED_DATE" name="입력일" dataType="text"></w2:key>
        				<w2:key id="UPDATED_DATE" name="수정일" dataType="text"></w2:key>
        			</w2:keyInfo>
        		</w2:dataMap>
        		<w2:dataList baseNode="list" repeatNode="map" id="dc_code" saveRemovedData="true">
        			<w2:columnInfo>
        				<w2:column id="CODE_CD" name="코드값" dataType="text"></w2:column>
        				<w2:column id="CODE_NM" name="코드명" dataType="text"></w2:column>
        			</w2:columnInfo>
        			<w2:data use="true">
        				<w2:row>
        					<CODE_CD><![CDATA[01]]></CODE_CD>
        					<CODE_NM><![CDATA[개발자]]></CODE_NM>
        				</w2:row>
        				<w2:row>
        					<CODE_CD><![CDATA[02]]></CODE_CD>
        					<CODE_NM><![CDATA[설계자]]></CODE_NM>
        				</w2:row>
        				<w2:row>
        					<CODE_CD><![CDATA[03]]></CODE_CD>
        					<CODE_NM><![CDATA[DBA]]></CODE_NM>
        				</w2:row>
        				<w2:row>
        					<CODE_CD><![CDATA[04]]></CODE_CD>
        					<CODE_NM><![CDATA[PL]]></CODE_NM>
        				</w2:row>
        				<w2:row>
        					<CODE_CD><![CDATA[05]]></CODE_CD>
        					<CODE_NM><![CDATA[PM]]></CODE_NM>
        				</w2:row>
        			</w2:data>
        		</w2:dataList>
        	</w2:dataCollection>
        	<w2:workflowCollection />
        	<xf:submission id="sub_select" ref="data:json,dc_reqUserInfo" target="data:json,dc_userInfo" action="/edu/data/userInfo.json" method="post" mediatype="application/json" encoding="UTF-8"
        		instance="" replace="" errorHandler="" customHandler="" mode="asynchronous" processMsg="조회중입니다.." ev:submit="" ev:submitdone=""
        		ev:submiterror="" abortTrigger="">
        	</xf:submission>
        </xf:model>
        <w2:layoutInfo/>
        <w2:publicInfo method=""/>

    	<xf:group class="sub_contents" id="" style="">
    		<xf:group class="ws_example_grp_desc" id="" style="">
    			<w2:textbox id="" label="[완성] 목록성 컴포넌트 적용 & DataCollection 과 Submission 처리" style="margin-bottom: 10px;" tagname="h2">
    			</w2:textbox>
    			<w2:textbox class="ws_example_txt_desc_info" escape="false" id="" label="해당화면은 코딩된 완성 화면" style=""></w2:textbox>
    			<xf:group class="" id="" style="" tagname="details">
    				<w2:textbox escape="false" id="" label="디버깅하기" style="" tagname="summary"></w2:textbox>
    				<w2:textbox class="" escape="false" id=""
    					label="1. 브라우저에서 [Ctrl+마우스 오른쪽 버튼을 클릭]하면 컨텍스트 메뉴 팝업 제공
2. 주요 디버깅 메뉴
2-1.로그보기 : Script 오류 확인 및 Script에서 출력 로그 확인
2-2.dataCollection보기 : 데이터 객체의 현재 값 확인
2-3.소스보기 WebSquare화면 소스 &nbsp;확인
2-4. 현재 화면 디버그 실행 : &nbsp;Submission을 이용한 통신의 Input, Output, Header정보 확인
3. 브라우저 실행 후 [F12] &nbsp;개발자 도구 실행 기존 디버깅 수행 가능

"
    					style="">
    				</w2:textbox>
    			</xf:group>
    			<xf:group class="" id="" style="" tagname="details">
    				<w2:textbox escape="false" id="" label="컴포넌트 3가지 적용 확인" style="" tagname="summary"></w2:textbox>
    				<w2:textbox class="" escape="false" id=""
    					label="1. 속성 : 정적 제어 처리
 &nbsp;1-1. Property View 속성 Tab
 &nbsp;1-2. 성명 InputBox 에 placeholder 속성 적용
2. 이벤트 : 컴포넌트의 동작 적용후 스크립트로 제어
 &nbsp;2-1. Property View 이벤트 Tab
 &nbsp;2-2. 조회 Trigger 컴포넌트에 onClick 이벤트 적용
3. API &nbsp;: Script로 동적 제어처리
 &nbsp;3-1. Script Tab 영역에서 객체에 API로 제어
 &nbsp;3-2. 가입일 InputBox 컴포넌트에 API적용
 &nbsp; &nbsp; &nbsp; &nbsp; ui_join.setValue(strCurDate);
"
    					style="">
    				</w2:textbox>
    			</xf:group>
    			<xf:group class="" id="" style="" tagname="details">
    				<w2:textbox escape="false" id="" label="목록성 컴포넌트 적용 확인" style="" tagname="summary"></w2:textbox>
    				<w2:textbox class="" escape="false" id=""
    					label="1. Hard Coding : 직급항목 적용 &nbsp;
2. Script 처리 : 성별항목 적용
3. DataCollection 처리 : 역할항목 적용
" style="">
    				</w2:textbox>
    			</xf:group>
    			<xf:group class="" id="" style="" tagname="details">
    				<w2:textbox escape="false" id="" label="DataCollection 과 Submission 처리 확인" style="" tagname="summary"></w2:textbox>
    				<w2:textbox class="" escape="false" id=""
    					label='1. Request용 & Response 용 &nbsp;DataCollection 생성
 &nbsp; 참조 문서 : edu/training1_info.txt
 &nbsp; &nbsp;1-1. Outline View에서 dc_reqUserInfo ID로 DataMap type으로 생성
 &nbsp; &nbsp;1-1. Outline View에서 dc_userInfo ID로 DataMap type으로 생성
2. Submission 을 만든다.
 &nbsp; &nbsp;2-1. Submission 의 ID를 생성
 &nbsp; &nbsp;2-2. 생성한 Request용 & Response 용 &nbsp;DataCollection을 각각 연결
 &nbsp; &nbsp;2-3. URL Action : /edu/data/userInfo.json
3. 생성한 Submission을 조회 버튼에 이벤트 추가
 &nbsp; &nbsp; $p.executeSubmission("sub_select");//생성한 Submission ID 기재
4. 통신완료 후 dc_userInfo 의 데이터를 컴포넌트에 표현
 &nbsp; 4-1. Outline View 의 Head Tab에서 각 KeyID를 드래그 하여 해당 컴포넌트에 드랍
 &nbsp; &nbsp; &nbsp;'
    					style="">
    				</w2:textbox>
    			</xf:group>
    		</xf:group>
    		<xf:group class="ofh" id="" style="">
    			<xf:group class="fr mb_def_box nobottom" id="" style="">
    				<xf:trigger class="com_example_btn_blue" id="btn_select" style=""
    					tooltip="데이터를 조회합니다." type="button" ev:onclick="scwin.btn_select_onclick">
    					<xf:label><![CDATA[조회]]></xf:label>
    				</xf:trigger>
    			</xf:group>
    			<xf:group class="fl mb_def_box nobottom" id="" style="">
    			</xf:group>
    		</xf:group>
    		<xf:group adaptive="layout" adaptiveThreshold="700" class="w2tb" id="" style="width:100%;" tagname="table">
    			<w2:attributes>
    				<w2:summary></w2:summary>
    			</w2:attributes>
    			<xf:group tagname="caption"></xf:group>
    			<xf:group tagname="colgroup">
    				<xf:group style="width:100px;" tagname="col"></xf:group>
    				<xf:group style="" tagname="col"></xf:group>
    				<xf:group style="width:100px;" tagname="col"></xf:group>
    				<xf:group style="" tagname="col"></xf:group>
    			</xf:group>
    			<xf:group style="" tagname="tr">
    				<xf:group class="w2tb_th" style="" tagname="th">
    					이름
    					<w2:attributes>
    						<w2:scope>row</w2:scope>
    					</w2:attributes>
    				</xf:group>
    				<xf:group class="w2tb_td" style="" tagname="td">
    					<xf:input id="" initValue="" ref="data:dc_userInfo.EMP_NM" style="width: 144px;" class="" placeholder="성명을 넣어주세요"></xf:input>
    				</xf:group>
    				<xf:group class="w2tb_th" style="" tagname="th">
    					직급
    					<w2:attributes>
    						<w2:scope>row</w2:scope>
    					</w2:attributes>
    				</xf:group>
    				<xf:group class="w2tb_td" style="" tagname="td">
    					<xf:select1 allOption="true" appearance="minimal" chooseOption="" direction="auto" disabled="false"
    						disabledClass="w2selectbox_disabled" displayMode="label" id="" optionOrder="false" ref="data:dc_userInfo.POSITION_CD" selectedData="true"
    						style="width: 148px;height: 21px;" submenuSize="auto" renderType="component">
    						<xf:choices>
    							<xf:item>
    								<xf:label><![CDATA[이사]]></xf:label>
    								<xf:value><![CDATA[01]]></xf:value>
    							</xf:item>
    							<xf:item>
    								<xf:label><![CDATA[부장]]></xf:label>
    								<xf:value><![CDATA[02]]></xf:value>
    							</xf:item>
    							<xf:item>
    								<xf:label><![CDATA[차장]]></xf:label>
    								<xf:value><![CDATA[03]]></xf:value>
    							</xf:item>
    							<xf:item>
    								<xf:label><![CDATA[과장]]></xf:label>
    								<xf:value><![CDATA[04]]></xf:value>
    							</xf:item>
    							<xf:item>
    								<xf:label><![CDATA[대리]]></xf:label>
    								<xf:value><![CDATA[05]]></xf:value>
    							</xf:item>
    						</xf:choices>
    					</xf:select1>
    				</xf:group>
    			</xf:group>
    			<xf:group style="" tagname="tr">
    				<xf:group class="w2tb_th" style="" tagname="th">
    					가입일
    					<w2:attributes>
    						<w2:scope>row</w2:scope>
    					</w2:attributes>
    				</xf:group>
    				<xf:group class="w2tb_td" style="" tagname="td">
    					<w2:inputCalendar calendarValueType="yearMonthDate" focusOnDateSelect="false" footerDiv="false" id="ui_join" ref="data:dc_userInfo.JOIN_DATE"
    						renderDiv="true" renderType="component" rightAlign="false" style="width: 150px;height: 24px;" weekStartsOn="0">
    					</w2:inputCalendar>
    				</xf:group>
    				<xf:group class="w2tb_th" style="" tagname="th">
    					성별
    					<w2:attributes>
    						<w2:scope>row</w2:scope>
    					</w2:attributes>
    				</xf:group>
    				<xf:group class="w2tb_td" style="" tagname="td">
    					<xf:select1 appearance="full" cols="" id="ui_gender" ref="data:dc_userInfo.GENDER_CD" renderType="radiogroup" rows="" selectedIndex="-1"
    						style="min-width: 150px;min-height: 12px;">
    						<xf:choices></xf:choices>
    					</xf:select1>
    				</xf:group>
    			</xf:group>
    			<xf:group style="" tagname="tr">
    				<xf:group class="w2tb_th" style="" tagname="th">
    					이메일
    					<w2:attributes>
    						<w2:scope>row</w2:scope>
    					</w2:attributes>
    				</xf:group>
    				<xf:group class="w2tb_td" style="" tagname="td">
    					<xf:input id="" ref="data:dc_userInfo.EMAIL" style="width: 100%;" class=""></xf:input>
    				</xf:group>
    				<xf:group class="w2tb_th" style="" tagname="th">
    					역할
    					<w2:attributes>
    						<w2:scope>row</w2:scope>
    					</w2:attributes>
    				</xf:group>
    				<xf:group class="w2tb_td" style="" tagname="td">
    					<xf:select appearance="full" cols="" id="" ref="data:dc_userInfo.ROLE_CD" renderType="checkboxgroup" rows=""
    						selectedindex="-1" style="min-width: 150px;min-height: 12px;">
    						<xf:choices>
    							<xf:itemset nodeset="data:dc_code">
    								<xf:label ref="CODE_NM"></xf:label>
    								<xf:value ref="CODE_CD"></xf:value>
    							</xf:itemset>
    						</xf:choices>
    					</xf:select>
    				</xf:group>
    			</xf:group>
    		</xf:group>
    		<xf:group class="example_div_tb_style_wrap" id="">
    			<xf:group class="example_div_tr_style" id="" style="">
    			</xf:group>
    		</xf:group>
    	</xf:group>


<?xml version="1.0" encoding="UTF-8"?>

    	<w2:type>COMPONENT</w2:type>
    	<w2:buildDate />
    	<xf:model>
    		<xf:instance>
    			<data xmlns="" />
    		</xf:instance>
    		<w2:dataCollection baseNode="map">
    		</w2:dataCollection>
    		<w2:workflowCollection></w2:workflowCollection>
    	</xf:model>

    	<xf:group style="padding: 10px;" id="" class="">
    	</xf:group>
    	<xf:group class="intro" id="" style="">
    		<xf:group class="int_top" id="" style="">
    			<xf:group class="bg_wrap" id="">
    				<w2:textbox class="txt_big" escape="false" id="" label="WebSquare5 개발자 교육" style=""></w2:textbox>
    				<w2:textbox class="txt_small server" escape="false" id="" label="HTML, CSS, JavaScript 등 기본적인 웹 지식을 가지고 있으며
다만 WebSquare5 제품을 처음 접하는 개발자 대상의 커리큘럼" style=""></w2:textbox>
    				<xf:group class="ban_box" id="" style="">
    					<xf:group class="anc_banner ico3" id="anc_icon1" style="" tagname="a" ev:onclick="scwin.anc_icon1_onclick">
    						<w2:textbox escape="false" id="" label="개발자 교육
 &nbsp; 커리큘럼" style="" tagname="p"></w2:textbox>
    						<w2:textbox escape="false" id="" label="바로열기" style="" tagname="span"
    							userData1="">
    						</w2:textbox>
    					</xf:group>
    					<xf:group class="anc_banner ico2" id="anc_icon2" style="" tagname="a" ev:onclick="scwin.anc_icon2_onclick">
    						<w2:textbox escape="false" id="" label="개발자 교육
 &nbsp;이론문서" style="" tagname="p"></w2:textbox>
    						<w2:textbox escape="false" id="" label="바로열기" style="" tagname="span"
    							userData1="">
    						</w2:textbox>
    					</xf:group>
    					<xf:group class="anc_banner ico2" id="anc_icon3" style="" tagname="a" ev:onclick="scwin.anc_icon3_onclick">
    						<w2:textbox escape="false" id="" label="개발자 교육
심화문서" style="" tagname="p"></w2:textbox>
    						<w2:textbox escape="false" id="" label="바로열기" style="" tagname="span"
    							userData1="">
    						</w2:textbox>
    					</xf:group>
    				</xf:group>
    			</xf:group>
    		</xf:group>
    		<xf:group class="int_mid" id="" style="">
    			<xf:group class="ins_box" id="" style="">
    				<w2:textbox class="txt_ins_big tac" id="" label="커리큘럼" style=""></w2:textbox>
    			</xf:group>
    			<xf:group class="prj_list edu_video" id="" style="" tagname="ol">
    				<xf:group id="" style="" tagname="li">
    					<xf:group id="" class="txt_content">
    						<w2:textbox ev:onclick="scwin.txt_desc_onclick" style="" id="txt_desc1" label="교육자료 소개, WebSquare5 소개"
    							class="txt_prj_big" userData1="5" userData2="WebSquare5 소개">
    						</w2:textbox>
    						<w2:textbox ev:onclick="scwin.txt_desc_onclick" style="" id="txt_desc2" label="WebSquare5 Studio 설명"
    							class="txt_prj_big" userData1="38" userData2="WebSquare5 Studio 설명">
    						</w2:textbox>
    					</xf:group>
    				</xf:group>
    				<xf:group id="" style="" tagname="li">
    					<xf:group id="" class="txt_content">
    						<w2:textbox ev:onclick="scwin.txt_desc_onclick" style="" id="txt_desc3" label="컴포넌트 기본 사용방법 ( 속성, 이벤트, API )"
    							class="txt_prj_big" userData2="컴포넌트 기본 사용방법" userData1="42">
    						</w2:textbox>
    						<w2:textbox ev:onclick="scwin.txt_desc_onclick" style="" id="txt_desc4" label="CSS 적용 방법"
    							class="txt_prj_big" userData2="CSS 적용 방법" userData1="46">
    						</w2:textbox>
    					</xf:group>
    				</xf:group>
    				<xf:group id="" style="" tagname="li">
    					<xf:group id="" class="txt_content">
    						<w2:textbox ev:onclick="scwin.txt_link_onclick" style="" id="txt_desc5" label="[실습] 목록성 컴포넌트 사용 방법 "
    							class="txt_prj_big" userData1="/edu/training1_dataMap.xml">
    						</w2:textbox>
    						<w2:textbox ev:onclick="scwin.txt_desc_onclick" style="" id="txt_desc6"
    							label="(하드코딩, script 처리, DataCollection 처리)" class="txt_prj_big" userData2="목록성 컴포넌트 사용 방법" userData1="54">
    						</w2:textbox>
    					</xf:group>
    				</xf:group>
    				<xf:group id="" style="" tagname="li">
    					<xf:group id="" class="txt_content">
    						<w2:textbox ev:onclick="scwin.txt_desc_onclick" style="" id="txt_desc7"
    							label="[실습] DataCollection 과 Submission 처리 방법" class="txt_prj_big" userData1="100" userData2="DataCollection 과 Submission 처리 방법">
    						</w2:textbox>
    						<w2:textbox ev:onclick="scwin.txt_desc_onclick" style="" id="txt_desc8" label="디버깅 방법" class="txt_prj_big" userData1="107" userData2="디버깅 방법"></w2:textbox>
    					</xf:group>
    				</xf:group>
    				<xf:group id="" style="" tagname="li">
    					<xf:group id="" class="txt_content">
    						<w2:textbox ev:onclick="scwin.txt_link_onclick" style="" id="txt_desc9"
    							label="[시연] DataCollection 과 gridView 연동" class="txt_prj_big" userData1="/edu/training1_gridView.xml">
    						</w2:textbox>
    						<w2:textbox ev:onclick="scwin.txt_desc_onclick" style="" id="txt_desc10" label="(gridView편집,속성,이벤트,API)"
    							class="txt_prj_big" userData1="93" userData2="DataCollection 과 gridView 연동">
    						</w2:textbox>
    					</xf:group>
    				</xf:group>
    				<xf:group id="" style="" tagname="li">
    					<xf:group id="" class="txt_content">
    						<xf:group class="" id="" style="" tagname="details">
    							<w2:textbox escape="false" id="" label="자주 묻는 질문" style="" tagname="summary" class="txt_prj_big"></w2:textbox>
    							<w2:textbox class="" escape="false" id="textbox_link1" label="1. JSON 관련 기본 API" style=""
    								userData1="/page/P00036.xml" ev:onclick="scwin.textbox_link_onclick">
    							</w2:textbox>
    							<w2:textbox class="" escape="false" id="textbox_link2" label="2. [GridView] 관련" style=""></w2:textbox>
    							<w2:textbox class="" escape="false" ev:onclick="scwin.textbox_link_onclick" id="textbox3"
    								label="2-1. 컨텍스트 메뉴 사용 설정하기" style="" userData1="/page/P00169.xml">
    							</w2:textbox>
    							<w2:textbox class="" escape="false" ev:onclick="scwin.textbox_link_onclick" id="textbox7"
    								label="2-2. Groupby 기능 적용하기" style="" userData1="/page/P00194.xml">
    							</w2:textbox>
    							<w2:textbox class="" escape="false" ev:onclick="scwin.textbox_link_onclick" id="textbox8"
    								label="2-3. scrollEnd 기능을 사용한 데이터 추가하기" style="" userData1="/page/P00054.xml">
    							</w2:textbox>
    							<w2:textbox class="" escape="false" ev:onclick="scwin.textbox_link_onclick" id="textbox12"
    								label="2-4.GridView Style 개인화 하기" style="" userData1="/page/P00198.xml">
    							</w2:textbox>
    							<w2:textbox class="" escape="false" ev:onclick="scwin.textbox_link_onclick" id="textbox6"
    								label="2-5.컬럼 동적 변경" style="" userData1="/page/P00014.xml">
    							</w2:textbox>
    							<w2:textbox class="" escape="false" ev:onclick="scwin.textbox_link_onclick" id="textbox4" label="3.특이기능"
    								style="">
    							</w2:textbox>
    							<w2:textbox class="" escape="false" ev:onclick="scwin.textbox_link_onclick" id="textbox5" label="3-1.Pivot"
    								style="" userData1="/page/P00139.xml">
    							</w2:textbox>

    							<w2:textbox class="" escape="false" ev:onclick="scwin.textbox_link_onclick" id="textbox10" label="3-2.Fusion 차트"
    								style="" userData1="/page/P00017.xml">
    							</w2:textbox>
    							<w2:textbox class="" escape="false" ev:onclick="scwin.textbox_link_onclick" id="textbox11" label="3-3.위젯 컨테이너"
    								style="" userData1="/page/P00007.xml">
    							</w2:textbox>

    						</xf:group>
    						<w2:textbox style="" id="txt_desc12" label="Q&A" class="txt_prj_big"></w2:textbox>
    					</xf:group>
    				</xf:group>
    			</xf:group>
    		</xf:group>
    	</xf:group>


<?xml version="1.0" encoding="UTF-8"?>

        <w2:type>COMPONENT</w2:type>
        <w2:buildDate/>
        <w2:MSA/>
        <xf:model>
        	<w2:dataCollection baseNode="map">
        		<w2:dataList id="dc_code02" style="">
        			<w2:columnInfo>
        				<w2:column dataType="text" id="GRP_CD" name="GRP_CD"></w2:column>
        				<w2:column dataType="text" id="CODE_CD" name="CODE_CD"></w2:column>
        				<w2:column dataType="text" id="CODE_NM" name="CODE_NM"></w2:column>
        			</w2:columnInfo>
        			<w2:data xmlns=""></w2:data>
        		</w2:dataList>
        		<w2:dataList id="dc_code101" style="">
        			<w2:columnInfo>
        				<w2:column dataType="text" id="GRP_CD" name="GRP_CD"></w2:column>
        				<w2:column dataType="text" id="CODE_CD" name="CODE_CD"></w2:column>
        				<w2:column dataType="text" id="CODE_NM" name="CODE_NM"></w2:column>
        			</w2:columnInfo>
        			<w2:data xmlns=""></w2:data>
        		</w2:dataList>
        		<w2:dataList baseNode="list" ev:onbeforecelldatachange="scwin.dc_userInfoList_onbeforecelldatachange"
        			ev:ondataload="scwin.dc_userInfoList_ondataload" ev:oninsertrow="scwin.dc_userInfoList_oninsertrow"
        			ev:onremoverow="scwin.dc_userInfoList_onremoverow" id="dc_userInfoList" repeatNode="map" saveRemovedData="true" style="">
        			<w2:columnInfo>
        				<w2:column dataType="text" id="EMP_CD" name="사번"></w2:column>
        				<w2:column dataType="text" id="EMP_NM" name="이름"></w2:column>
        				<w2:column dataType="text" id="GENDER_CD" name="성별"></w2:column>
        				<w2:column dataType="text" id="JOIN_DATE" name="입사일"></w2:column>
        				<w2:column dataType="text" id="POSITION_CD" name="직급"></w2:column>
        				<w2:column dataType="text" id="ROLE_CD" name="역할"></w2:column>
        				<w2:column dataType="text" id="EMAIL" name="이메일"></w2:column>
        				<w2:column dataType="text" id="ZIP_CD" name="우편번호"></w2:column>
        				<w2:column dataType="text" id="ADDRESS1" name="주소1"></w2:column>
        				<w2:column dataType="text" id="ADDRESS2" name="주소2"></w2:column>
        				<w2:column dataType="text" id="CREATED_DATE" name="생성일"></w2:column>
        				<w2:column dataType="text" id="UPDATED_DATE" name="수정일"></w2:column>
        			</w2:columnInfo>
        		</w2:dataList>
        		<w2:dataMap baseNode="map" id="dc_searchParam" style="">
        			<w2:keyInfo>
        				<w2:key dataType="text" id="key5" name="성별"></w2:key>
        				<w2:key dataType="text" id="POSITION_CD" name="직급"></w2:key>
        			</w2:keyInfo>
        			<w2:data use="false"></w2:data>
        		</w2:dataMap>
        		<w2:dataMap baseNode="map" id="dc_reqCode" style="">
        			<w2:keyInfo>
        				<w2:key dataType="text" id="GRP_CD" name="name1"></w2:key>
        			</w2:keyInfo>
        		</w2:dataMap>
        	</w2:dataCollection>
        	<w2:workflowCollection />
        	<xf:submission id="sbm_code" ref="data:json,dc_reqCode" target='data:json,["dc_code02","dc_code101"]'
        		action="/edu/data/codeList.json" method="post" mediatype="application/json" encoding="UTF-8" instance="" replace=""
        		errorHandler="" customHandler="" mode="asynchronous" processMsg="" ev:submit="" ev:submitdone="" ev:submiterror=""
        		abortTrigger="">
        	</xf:submission>
        	<xf:submission id="sbm_search" ref="data:json,dc_searchParam" target="data:json,dc_userInfoList"
        		action="/edu/data/userInfoList.json" method="post" mediatype="application/json" encoding="UTF-8" instance="" replace=""
        		errorHandler="" customHandler="" mode="asynchronous" processMsg="조회중입니다." ev:submit="" ev:submitdone="" ev:submiterror=""
        		abortTrigger="">
        	</xf:submission>
        	<xf:submission id="sbm_save" ref='data:json,{"action":"modified","id":"dc_userInfoList"}' target="" action="" method="post"
        		mediatype="application/json" encoding="UTF-8" instance="" replace="" errorHandler="" customHandler="" mode="asynchronous"
        		processMsg="" ev:submit="" ev:submitdone="" ev:submiterror="" abortTrigger="">
        	</xf:submission>
        </xf:model>
        <w2:layoutInfo/>
        <w2:publicInfo method=""/>

    	<xf:group class="sub_contents" id="" style="">
    		<xf:group class="ws_example_grp_desc" id="" style="">
    			<w2:textbox id="" label="[시연] DataCollection 과 GridView 연동 & GridView의 다양한 기능" style="margin-bottom: 10px;"
    				tagname="h2">
    			</w2:textbox>
    			<w2:textbox class="ws_example_txt_desc_info" escape="false" id="" label="해당화면은 GridView 구현은 안된 시연용 화면" style=""></w2:textbox>
    			<xf:group class="" id="" style="" tagname="details">
    				<w2:textbox escape="false" id="" label="디버깅하기" style="" tagname="summary"></w2:textbox>
    				<w2:textbox class="" escape="false" id=""
    					label="1. 브라우저에서 [Ctrl+마우스 오른쪽 버튼을 클릭]하면 컨텍스트 메뉴 팝업 제공
2. 주요 디버깅 메뉴
2-1.로그보기 : Script 오류 확인 및 Script에서 출력 로그 확인
2-2.dataCollection보기 : 데이터 객체의 현재 값 확인
2-3.소스보기 WebSquare화면 소스 &nbsp;확인
2-4. 현재 화면 디버그 실행 : &nbsp;Submission을 이용한 통신의 Input, Output, Header정보 확인
3. 브라우저 실행 후 [F12] &nbsp;개발자 도구 실행 기존 디버깅 수행 가능

"
    					style="">
    				</w2:textbox>
    			</xf:group>
    			<xf:group class="" id="" style="" tagname="details">
    				<w2:textbox escape="false" id="" label="GridView의 다양한 속성" style="" tagname="summary"></w2:textbox>
    				<w2:textbox class="" escape="false" id=""
    					label="1. GridView 에서 많이 쓰는 속성
 1-1. rowNumVisible : 연동된 DataList의 데이터를 기준으로 행 번호 표시 여부. [default:false, true]
 1-2. rowStatusVisible : 각 행의 상태(추가/수정/삭제)를 별도의 컬럼에 아이콘으로 표시. [default: false, true]
 1-3. autoFit : GridView의 모든 컬럼 폭을 균등하게 배분하여 전체 화면 폭을 채우는 기능
 1-4. sortable : gridView의 헤더 클릭을 통한 데이터 정렬 지원 여부
 1-5. useFilterList : 필터링 대상 값을 목록으로 표시.
2.GridView의 컬럼에서 많이 쓰는 속성
 2-1. inputType : GridView 의 컬럼에 여러가지 타입을 지정해서 쓸수 있다.
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;( 성별 : select , 가입일: calendar , 직급 : select 적용 )
 2-2. useFilter : 필터 사용 여부. [default:false, true] &nbsp; 필터링을 수행할 각 컬럼 별로 설정
 2-3. displayFormatter : 셀의 데이터 값을 포맷할 사용자 정의 함수. &nbsp;함수를 직접 정의해야 함
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;(scwin.fnDis :우편번호에 적용)
 2-4. customFormatte : data, formattedData, rowIndex, colIndex 인자를 받는 조건부 서식 formatter 함수명.
 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (scwin.fnCus을 생성하고 성별값에 적용 : 성별 따라 이름색변경)
"
    					style="">
    				</w2:textbox>
    			</xf:group>
    			<xf:group class="" id="" style="" tagname="details">
    				<w2:textbox escape="false" id="" label="GridView에 관련된 주요 API" style="" tagname="summary"></w2:textbox>
    				<w2:textbox class="" escape="false" id=""
    					label="1. 추가 : dc_userInfoList.insertRow(rowidx);
2. 삭제 : dc_userInfoList.deleteRow(rowidx); (상태값 :D 처리)
3. 삭제 : dc_userInfoList.removeRow(rowidx);
4. 다중삭제 : dc_userInfoList.deleteRows( chkArr ); &nbsp;(상태값 :D 처리)
5. 다중삭제 : dc_userInfoList.removeRows( chkArr );
6. 초기화 : dc_userInfoList.removeAll();
7. 엑셀다운로드 : ui_memberList.advancedExcelDownload( options );
8. 엑셀업로드 : ui_memberList.advancedExcelUpload( options );
"
    					style="">
    				</w2:textbox>
    			</xf:group>
    		</xf:group>
    		<xf:group class="ofh" id="" style="">
    			<xf:group class="fr mb_def_box nobottom" id="" style="">
    				<xf:trigger class="com_example_btn_blue" id="btn_select" style="" tooltip="데이터를 조회합니다." type="button"
    					ev:onclick="scwin.btn_select_onclick">
    					<xf:label><![CDATA[조회]]></xf:label>
    				</xf:trigger>
    				<xf:trigger class="com_example_btn_blue" id="btnSave" style=""
    					tooltip="데이터를 추가,수정,삭제합니다." type="button" ev:onclick="scwin.btnSave_onclick">
    					<xf:label><![CDATA[저장]]></xf:label>
    				</xf:trigger>
    			</xf:group>
    			<xf:group class="fl mb_def_box nobottom" id="" style=""></xf:group>
    			<xf:group class="" id="" style="width:220px;float: left;margin: 0px 10px 10px 0px;">
    				<w2:span id="" label="성별 : " style=""></w2:span>
    				<xf:select1 allOption="true" appearance="minimal" chooseOption="" direction="auto" disabled="false"
    					disabledClass="w2selectbox_disabled" displayMode="label" id="ui_search_gender" optionOrder="false"
    					ref="data:dc_searchParam.GENDER_CD" selectedData="true" style="width: 148px;height: 23px;" submenuSize="auto">
    					<xf:choices>
    						<xf:itemset nodeset="data:dc_code101">
    							<xf:label ref="CODE_NM"></xf:label>
    							<xf:value ref="CODE_CD"></xf:value>
    						</xf:itemset>
    					</xf:choices>
    				</xf:select1>
    			</xf:group>
    			<xf:group class="" id="" style="width:220px;float: left;margin: 0px 10px 10px 0px;">
    				<w2:span id="" label="직급 :" style=""></w2:span>
    				<xf:select1 allOption="true" appearance="minimal" chooseOption="" direction="auto" disabled="false"
    					disabledClass="w2selectbox_disabled" displayMode="label" id="GENDER_CD" optionOrder="false" ref="data:dc_searchParam.GENDER_CD"
    					selectedData="true" style="width: 148px;height: 23px;" submenuSize="auto">
    					<xf:choices>
    						<xf:itemset nodeset="data:dc_code02">
    							<xf:label ref="CODE_NM"></xf:label>
    							<xf:value ref="CODE_CD"></xf:value>
    						</xf:itemset>
    					</xf:choices>
    				</xf:select1>
    			</xf:group>
    		</xf:group>
    		<xf:group class="btnbox" id="" style="margin-bottom: 10px;">
    			<w2:span dataType="number" displayFormat="#,##0건" displayFormatter="" id="ui_totRowCount" label="0" style="float: right;"></w2:span>
    			<xf:trigger class="btn_cm" ev:onclick="" id="btnInsert" style="float: left;margin-right: 10px;" type="button">
    				<xf:label><![CDATA[추가-insertRow]]></xf:label>
    			</xf:trigger>
    			<xf:trigger class="btn_cm" ev:onclick="" id="btnDelete" style="float: left;margin-right: 10px;" type="button">
    				<xf:label><![CDATA[삭제-deleteRow]]></xf:label>
    			</xf:trigger>
    			<xf:trigger class="btn_cm" ev:onclick="" id="btnRemove" style="float: left;margin-right: 10px;" type="button">
    				<xf:label><![CDATA[삭제-removeRow]]></xf:label>
    			</xf:trigger>
    			<xf:trigger class="btn_cm" ev:onclick="" id="btnDeleteRows" style="float: left;margin-right: 10px;" type="button">
    				<xf:label><![CDATA[다중삭제 - deleteRows]]></xf:label>
    			</xf:trigger>
    			<xf:trigger class="btn_cm" ev:onclick="" id="btnRemoveRows" style="float: left;margin-right: 10px;" type="button">
    				<xf:label><![CDATA[다중삭제 - removeRows]]></xf:label>
    			</xf:trigger>
    			<xf:trigger class="btn_cm" ev:onclick="" id="btnInit" style="float: left;margin-right: 10px;" type="button">
    				<xf:label><![CDATA[초기화 - removeAll]]></xf:label>
    			</xf:trigger>
    			<xf:trigger class="btn_cm" ev:onclick="" id="btnExcelDown" style="float: left;margin-right: 10px;" type="button">
    				<xf:label><![CDATA[ExcelDown]]></xf:label>
    			</xf:trigger>
    			<xf:trigger class="btn_cm" ev:onclick="" id="btnExcelUp" style="float: left;margin-right: 10px;" type="button">
    				<xf:label><![CDATA[ExcelUp]]></xf:label>
    			</xf:trigger>
    		</xf:group>
    		<w2:gridView checkAllType="false" scrollByColumn="false" defaultCellHeight="20" scrollByColumnAdaptive="false" id="ui_memberList"
    			style="height: 150px;" dataList="">
    			<w2:caption style="" id="caption1" value="this is a grid caption."></w2:caption>
    			<w2:header style="" id="header1">
    				<w2:row style="" id="row1">
    					<w2:column width="70" inputType="text" style="" id="column1" value="" displayMode="label"></w2:column>
    				</w2:row>
    			</w2:header>
    			<w2:gBody style="" id="gBody1">
    				<w2:row style="" id="row2">
    					<w2:column width="70" inputType="text" style="" id="column2" value="" displayMode="label"></w2:column>
    				</w2:row>
    			</w2:gBody>
    		</w2:gridView>
    		<xf:group adaptive="layout" adaptiveThreshold="700" class="w2tb" id="" style="width:100%;" tagname="table">
    			<w2:attributes>
    				<w2:summary></w2:summary>
    			</w2:attributes>
    			<xf:group tagname="caption"></xf:group>
    			<xf:group tagname="colgroup">
    				<xf:group style="width:100px;" tagname="col"></xf:group>
    				<xf:group style="" tagname="col"></xf:group>
    				<xf:group style="width:100px;" tagname="col"></xf:group>
    				<xf:group style="" tagname="col"></xf:group>
    			</xf:group>
    			<xf:group style="" tagname="tr">
    				<xf:group class="w2tb_th" style="" tagname="th">
    					이름
    					<w2:attributes>
    						<w2:scope>row</w2:scope>
    					</w2:attributes>
    				</xf:group>
    				<xf:group class="w2tb_td" style="" tagname="td">
    					<xf:input id="" initValue="" ref="" style="width: 144px;"></xf:input>
    				</xf:group>
    				<xf:group class="w2tb_th" style="" tagname="th">성별<w2:attributes>
    						<w2:scope>row</w2:scope>
    					</w2:attributes></xf:group>
    				<xf:group class="w2tb_td" style="" tagname="td">
    					<xf:select1 id="" selectedIndex="-1" appearance="full" style="width: 150px;height: 21px;" cols="" rows="1" ref="">
    						<xf:choices>
    							<xf:itemset nodeset="data:dc_code101">
    								<xf:label ref="CODE_NM"></xf:label>
    								<xf:value ref="CODE_CD"></xf:value>
    							</xf:itemset>
    						</xf:choices>
    					</xf:select1>
    				</xf:group>
    			</xf:group>
    			<xf:group style="" tagname="tr">
    				<xf:group class="w2tb_th" style="" tagname="th">
    					가입일
    					<w2:attributes>
    						<w2:scope>row</w2:scope>
    					</w2:attributes>
    				</xf:group>
    				<xf:group class="w2tb_td" style="" tagname="td">
    					<w2:inputCalendar calendarValueType="yearMonthDate" focusOnDateSelect="false" footerDiv="false" id="" ref=""
    						renderDiv="true" renderType="component" rightAlign="false" style="width: 150px;height: 24px;" weekStartsOn="0">
    					</w2:inputCalendar>
    				</xf:group>
    				<xf:group class="w2tb_th" style="" tagname="th">직급<w2:attributes>
    						<w2:scope>row</w2:scope>
    					</w2:attributes></xf:group>
    				<xf:group class="w2tb_td" style="" tagname="td">
    					<xf:select1 id="" chooseOption="" style="width: 148px;height: 21px;" submenuSize="auto" allOption="true"
    						disabled="false" direction="auto" appearance="minimal" disabledClass="w2selectbox_disabled" ref="">
    						<xf:choices>
    							<xf:itemset nodeset="data:dc_code02">
    								<xf:label ref="CODE_NM"></xf:label>
    								<xf:value ref="CODE_CD"></xf:value>
    							</xf:itemset>
    						</xf:choices>
    					</xf:select1>
    				</xf:group>
    			</xf:group>
    		</xf:group>
    		<xf:group class="example_div_tb_style_wrap" id="">
    			<xf:group class="example_div_tr_style" id="" style=""></xf:group>
    		</xf:group>
    	</xf:group>


<?xml version="1.0" encoding="UTF-8"?>

        <w2:type>COMPONENT</w2:type>
        <w2:buildDate/>
        <w2:MSA/>
        <xf:model>
        	<w2:dataCollection baseNode="map">
        	</w2:dataCollection>
        	<w2:workflowCollection />
        </xf:model>
        <w2:layoutInfo/>
        <w2:publicInfo method=""/>

    	<xf:group class="sub_contents" id="" style="">
    		<xf:group class="ws_example_grp_desc" id="" style="">
    			<w2:textbox id="" label="[실습] 목록성 컴포넌트 적용 & DataCollection 과 Submission 처리" style="margin-bottom: 10px;" tagname="h2">
    			</w2:textbox>
    			<w2:textbox class="ws_example_txt_desc_info" escape="false" id="" label="해당화면은 코딩이 없는 실습용 화면 " style=""></w2:textbox>
    			<xf:group class="" id="" style="" tagname="details">
    				<w2:textbox escape="false" id="" label="디버깅하기" style="" tagname="summary"></w2:textbox>
    				<w2:textbox class="" escape="false" id=""
    					label='1. 브라우저에서 [Ctrl+마우스 오른쪽 버튼을 클릭]하면 컨텍스트 메뉴 팝업 제공
2. 주요 디버깅 메뉴
2-1.로그보기 : Script 오류 확인 및 Script에서 출력 로그 확인
2-2.dataCollection보기 : 데이터 객체의 현재 값 확인
2-3.소스보기 WebSquare화면 소스 &nbsp;확인
2-4. 현재 화면 디버그 실행 : &nbsp;Submission을 이용한 통신의 Input, Output, Header정보 확인
3. 브라우저 실행 후 [F12] &nbsp;개발자 도구 실행 기존 디버깅 수행 가능

'
    					style="">
    				</w2:textbox>
    			</xf:group>
    			<xf:group class="" id="" style="" tagname="details">
    				<w2:textbox escape="false" id="" label="목록성 컴포넌트 적용 하기" style="" tagname="summary"></w2:textbox>
    				<w2:textbox class="" escape="false" id=""
    					label='1. Hard Coding : 직급항목 적용
 &nbsp;1-1. 직급 selectbox 컴포넌트를 더블클릭
 &nbsp;1-2. 제공되는 팝업에 itemSet 항목을 선택
 &nbsp;1-3. 그리드의 행추가
 &nbsp;1-4. Label : 이사, 부장, 차장, 과장 기재
 &nbsp; &nbsp; &nbsp; &nbsp;Value : 01, 02, 03, 04, 05 기재
 &nbsp;1-5. 전체 : All Option &nbsp;체크
 &nbsp; &nbsp; &nbsp; &nbsp; 선택 : Choose Option 체크
2. script 처리 : 성별항목 적용
 &nbsp;2-1. Script Tab에 항목을 API로 추가하기
 &nbsp; &nbsp;ui_gender.addItem( "M", "남성" );
 &nbsp; &nbsp;ui_gender.addItem( "F", "여성" );
3.DataCollection 처리 : 역할항목 적용
3-1. Outline View에서 dataList Type으로 DataCollection을 만든다
3-2. keyID, name을 작성
 &nbsp; &nbsp; &nbsp;(CODE_CD : 코드값, CODE_NM : 코드명)
3-3.컴포넌트와 연결
'
    					style="">
    				</w2:textbox>
    			</xf:group>
    			<xf:group class="" id="" style="" tagname="details">
    				<w2:textbox escape="false" id="" label="DataCollection 과 Submission 처리 방법" style="" tagname="summary"></w2:textbox>
    				<w2:textbox class="" escape="false" id=""
    					label='참조 문서(edu/training1_info.txt)를 활용하여 DataCollection 을 만든다
1. Request용 & Response 용 &nbsp;DataCollection 생성
 &nbsp; &nbsp;1-1. Outline View에서 dc_reqUserInfo ID로 DataMap type으로 생성
 &nbsp; &nbsp;1-1. Outline View에서 dc_userInfo ID로 DataMap type으로 생성
2. Submission 을 만든다.
 &nbsp; &nbsp;2-1. Submission 의 ID를 생성
 &nbsp; &nbsp;2-2. 생성한 Request용 & Response 용 &nbsp;DataCollection을 각각 연결
 &nbsp; &nbsp;2-3. URL Action : /edu/data/userInfoList.json
3. 생성한 Submission을 조회 버튼에 onclick 이벤트 추가
 &nbsp; &nbsp;3-1. &nbsp;$p.executeSubmission("sub_select");//생성한 Submission ID 기재
4. 통신완료 후 dc_userInfo 의 데이터를 컴포넌트에 표현
 &nbsp; 4-1. Outline View 의 Head Tab에서 각 KeyID를 드래그 하여 해당 컴포넌트에 드랍해서 표현
 &nbsp; &nbsp;'
    					style="">
    				</w2:textbox>
    			</xf:group>
    		</xf:group>
    		<xf:group class="ofh" id="" style="">
    			<xf:group class="fr mb_def_box nobottom" id="" style="">
    				<xf:trigger class="com_example_btn_blue" id="btn_select" style=""
    					tooltip="데이터를 조회합니다." type="button">
    					<xf:label><![CDATA[조회]]></xf:label>
    				</xf:trigger>
    			</xf:group>
    			<xf:group class="fl mb_def_box nobottom" id="" style="">
    			</xf:group>
    		</xf:group>
    		<xf:group adaptive="layout" adaptiveThreshold="700" class="w2tb" id="" style="width:100%;" tagname="table">
    			<w2:attributes>
    				<w2:summary></w2:summary>
    			</w2:attributes>
    			<xf:group tagname="caption"></xf:group>
    			<xf:group tagname="colgroup">
    				<xf:group style="width:100px;" tagname="col"></xf:group>
    				<xf:group style="" tagname="col"></xf:group>
    				<xf:group style="width:100px;" tagname="col"></xf:group>
    				<xf:group style="" tagname="col"></xf:group>
    			</xf:group>
    			<xf:group style="" tagname="tr">
    				<xf:group class="w2tb_th" style="" tagname="th">
    					이름
    					<w2:attributes>
    						<w2:scope>row</w2:scope>
    					</w2:attributes>
    				</xf:group>
    				<xf:group class="w2tb_td" style="" tagname="td">
    					<xf:input id="" initValue="" ref="" style="width: 144px;"></xf:input>
    				</xf:group>
    				<xf:group class="w2tb_th" style="" tagname="th">
    					직급
    					<w2:attributes>
    						<w2:scope>row</w2:scope>
    					</w2:attributes>
    				</xf:group>
    				<xf:group class="w2tb_td" style="" tagname="td">
    					<xf:select1 allOption="" appearance="minimal" chooseOption="" direction="auto" disabled="false"
    						disabledClass="w2selectbox_disabled" displayMode="label" id="" optionOrder="false" ref="" selectedData="true"
    						style="width: 148px;height: 21px;" submenuSize="auto">
    						<xf:choices></xf:choices>
    					</xf:select1>
    				</xf:group>
    			</xf:group>
    			<xf:group style="" tagname="tr">
    				<xf:group class="w2tb_th" style="" tagname="th">
    					가입일
    					<w2:attributes>
    						<w2:scope>row</w2:scope>
    					</w2:attributes>
    				</xf:group>
    				<xf:group class="w2tb_td" style="" tagname="td">
    					<w2:inputCalendar calendarValueType="yearMonthDate" focusOnDateSelect="false" footerDiv="false" id="" ref=""
    						renderDiv="true" renderType="component" rightAlign="false" style="width: 150px;height: 24px;" weekStartsOn="0">
    					</w2:inputCalendar>
    				</xf:group>
    				<xf:group class="w2tb_th" style="" tagname="th">
    					성별
    					<w2:attributes>
    						<w2:scope>row</w2:scope>
    					</w2:attributes>
    				</xf:group>
    				<xf:group class="w2tb_td" style="" tagname="td">
    					<xf:select1 appearance="full" cols="" id="ui_gender" ref="" renderType="radiogroup" rows="" selectedIndex="-1"
    						style="min-width: 150px;min-height: 12px;">
    						<xf:choices></xf:choices>
    					</xf:select1>
    				</xf:group>
    			</xf:group>
    			<xf:group style="" tagname="tr">
    				<xf:group class="w2tb_th" style="" tagname="th">
    					이메일
    					<w2:attributes>
    						<w2:scope>row</w2:scope>
    					</w2:attributes>
    				</xf:group>
    				<xf:group class="w2tb_td" style="" tagname="td">
    					<xf:input id="" ref="" style="width: 100%;"></xf:input>
    				</xf:group>
    				<xf:group class="w2tb_th" style="" tagname="th">
    					역할
    					<w2:attributes>
    						<w2:scope>row</w2:scope>
    					</w2:attributes>
    				</xf:group>
    				<xf:group class="w2tb_td" style="" tagname="td">
    					<xf:select appearance="full" cols="" id="" ref="" renderType="checkboxgroup" rows="" selectedindex="-1"
    						style="min-width: 150px;min-height: 12px;">
    						<xf:choices>
    							<xf:itemset nodeset="">
    								<xf:label ref=""></xf:label>
    								<xf:value ref=""></xf:value>
    							</xf:itemset>
    						</xf:choices>
    					</xf:select>
    				</xf:group>
    			</xf:group>
    		</xf:group>
    		<xf:group class="example_div_tb_style_wrap" id="">
    			<xf:group class="example_div_tr_style" id="" style="">
    			</xf:group>
    		</xf:group>
    	</xf:group>


<?xml version="1.0" encoding="UTF-8"?>

        <w2:type>COMPONENT</w2:type>
        <w2:buildDate/>
        <w2:MSA/>
        <xf:model>
            <w2:dataCollection baseNode="map">
				<w2:dataList baseNode="list" id="dataList1" style="" saveRemovedData="true" repeatNode="map">
					<w2:columnInfo>
						<w2:column id="target" name="target" dataType="text"></w2:column>
						<w2:column id="value" name="value" dataType="text"></w2:column>
					</w2:columnInfo>
					<w2:data use="true">
						<w2:row>
							<target><![CDATA[80]]></target>
							<value><![CDATA[40]]></value>
						</w2:row>
						<w2:row>
							<target><![CDATA[90]]></target>
							<value><![CDATA[60]]></value>
						</w2:row>
						<w2:row>
							<target><![CDATA[100]]></target>
							<value><![CDATA[70]]></value>
						</w2:row>
						<w2:row>
							<target><![CDATA[110]]></target>
							<value><![CDATA[80]]></value>
						</w2:row>
						<w2:row>
							<target><![CDATA[115]]></target>
							<value><![CDATA[90]]></value>
						</w2:row>
					</w2:data>
				</w2:dataList>
				<w2:dataList baseNode="list" id="dataList2" style="" saveRemovedData="true" repeatNode="map">
					<w2:columnInfo>
						<w2:column id="target" name="target" dataType="text"></w2:column>
						<w2:column id="value" name="value" dataType="text"></w2:column>
					</w2:columnInfo>
				</w2:dataList>
			</w2:dataCollection>
            <w2:workflowCollection/>
        </xf:model>
        <w2:layoutInfo/>
        <w2:publicInfo method=""/>

    	<xf:group class="sub_contents" id="" style="">
			<xf:group class="pgtbox" id="" style="">
				<w2:textbox class="pgt_tit" id="" label="Publishing Template - FwBulletChart" style=""></w2:textbox>
			</xf:group>

			<xf:group id="" class="titbox"><w2:textbox style="" id="" label="FwBulletChart는 FusionWidget Wrapper 컴포넌트입니다.
FusionWidgets의 데이터는 실제 차트에 보여줄 값과 스타일 옵션들이 하나로 결합되어 있는 형태입니다.
WebSquare5에서는 이를 분리하여 차트를 쉽게 Customizing 할 수 있도록 API를 지원합니다." class="" escape="false">
			</w2:textbox></xf:group><xf:group style="border:1px dashed #ccc;" id="" class="msgbox">
				<xf:group id="" class="tblbox"><xf:group tagname="table" style="" id="" class="w2tb tbl">
					<w2:attributes>
						<w2:summary></w2:summary>
					</w2:attributes>
					<xf:group tagname="colgroup">
						<xf:group tagname="col" style="width:30.00%"></xf:group>
						<xf:group tagname="col" style="width:70.00%"></xf:group>
					</xf:group>
					<xf:group tagname="tr" style="">
						<xf:group tagname="th" style="" class="w2tb_th">
							FwBulletChart Sample1
							<w2:attributes>
								<w2:colspan>2</w2:colspan>
								<w2:rowspan>1</w2:rowspan>
							</w2:attributes>
						</xf:group>
					</xf:group>
					<xf:group tagname="tr">
						<xf:group tagname="td" style="" class="w2tb_td">
							<w2:attributes>
								<w2:colspan></w2:colspan>
								<w2:rowspan></w2:rowspan>
							</w2:attributes>
							<w2:textbox tagname="label" for="basicip" style="" id="" label="dataList 확인" class="formguide"></w2:textbox>
							<w2:gridView fixedColumnWithHidden="true" dataList="dataList1" useShiftKey="true" ignoreCellClick="false" scrollByColumn="false" style="width:100%; height:153px;" autoFit="allColumn" id="" ignoreToggleOnDisabled="false" class="gvw">
								<w2:header style="" id="header1">
									<w2:row style="" id="row2">
										<w2:column width="70" style="height:20px" inputType="text" id="column7" value="target" blockSelect="false" displayMode="label">
										</w2:column>
										<w2:column width="70" style="height:20px" inputType="text" id="column3" value="value" blockSelect="false" displayMode="label">
										</w2:column>
									</w2:row>
								</w2:header>
								<w2:gBody style="" id="gBody4">
									<w2:row style="" id="row5">
										<w2:column width="70" style="height:20px" inputType="text" id="target" blockSelect="false" displayMode="label">
										</w2:column>
										<w2:column width="70" style="height:20px" inputType="text" id="value" blockSelect="false" displayMode="label">
										</w2:column>
									</w2:row>
								</w2:gBody>
							</w2:gridView>
						</xf:group>
						<xf:group tagname="td" style="" class="w2tb_td">
							<w2:attributes>
								<w2:colspan></w2:colspan>
								<w2:rowspan></w2:rowspan>
							</w2:attributes>
							<w2:textbox tagname="label" for="basicip" style="" id="" label="FusionChart 확인" class="formguide"></w2:textbox>
							<w2:fwBulletChart ref="data:dataList1" chartType="hbullet" style="position:relative; width:80%; height:125px;" valueNode="value" id="fwBulletChart1" targetNode="target">
							</w2:fwBulletChart>
						</xf:group>
					</xf:group>
				</xf:group></xf:group>
			<xf:group id="" class="tblbox"><xf:group tagname="table" style="" id="" class="w2tb tbl">
					<w2:attributes>
						<w2:summary></w2:summary>
					</w2:attributes>
					<xf:group tagname="colgroup">
						<xf:group tagname="col" style="width:30.00%"></xf:group>
						<xf:group tagname="col" style="width:70.00%"></xf:group>
					</xf:group>
					<xf:group tagname="tr" style="">
						<xf:group tagname="th" style="" class="w2tb_th">
							FwBulletChart Sample1
							<w2:attributes>
								<w2:colspan>2</w2:colspan>
								<w2:rowspan>1</w2:rowspan>
							</w2:attributes>
						</xf:group>
					</xf:group>
					<xf:group tagname="tr">
						<xf:group tagname="td" style="" class="w2tb_td">
							<w2:attributes>
								<w2:colspan></w2:colspan>
								<w2:rowspan></w2:rowspan>
							</w2:attributes>
							<w2:textbox tagname="label" for="basicip" style="" id="" label="dataList 확인" class="formguide"></w2:textbox>
							<w2:gridView fixedColumnWithHidden="true" dataList="dataList2" useShiftKey="true" scrollByColumn="false" style="width:100%;height:230px;" id="gridView2" autoFit="allColumn" class="gvw">
								<w2:header style="" id="header1">
									<w2:row style="" id="row2">
										<w2:column width="70" style="height:20px" inputType="text" id="column7" value="target" blockSelect="false">
										</w2:column>
										<w2:column width="70" style="height:20px" inputType="text" id="column3" value="value" blockSelect="false">
										</w2:column>
									</w2:row>
								</w2:header>
								<w2:gBody style="" id="gBody4">
									<w2:row style="" id="row5">
										<w2:column width="70" style="height:20px" inputType="text" id="target" blockSelect="false"></w2:column>
										<w2:column width="70" style="height:20px" inputType="text" id="value" blockSelect="false"></w2:column>
									</w2:row>
								</w2:gBody>
							</w2:gridView>
						</xf:group>
						<xf:group tagname="td" style="" class="w2tb_td">
							<w2:attributes>
								<w2:colspan></w2:colspan>
								<w2:rowspan></w2:rowspan>
							</w2:attributes>
							<w2:textbox tagname="label" for="basicip" style="" id="" label="FusionChart 확인" class="formguide"></w2:textbox>
							<w2:fwBulletChart ref="data:dataList2" chartType="vbullet" style="width: 80px;height: 250px;" valueNode="value" id="fwBulletChart2" targetNode="target">
							</w2:fwBulletChart>
						</xf:group>
					</xf:group>
				</xf:group></xf:group></xf:group>
			<xf:group adaptiveThreshold="" class="msgbox" id="" style="">
				<xf:group id="" class="titbox"><w2:textbox style="" id="" label="Tip" class="" tagname="h3"></w2:textbox></xf:group><w2:textbox class="txt_info" id="" label="DataCollection 만들고 디자인뷰에서 해당컴포넌트를 더블클릭하여 ref, labelNode, valueNode 등 연결해야 됩니다."
					style="">
				</w2:textbox>
			</xf:group>
		</xf:group>


<?xml version="1.0" encoding="UTF-8"?>

        <w2:type>COMPONENT</w2:type>
        <w2:buildDate/>
        <w2:MSA/>
        <xf:model>
            <w2:dataCollection baseNode="map"/>
            <w2:workflowCollection/>
        </xf:model>
        <w2:layoutInfo/>
        <w2:publicInfo method=""/>

    	<xf:group class="sub_contents" id="" style="">
    		<xf:group class="pgtbox" id="" style="">
    			<w2:textbox class="pgt_tit" id="" label="Publishing Template - Slider" style=""></w2:textbox>
    		</xf:group>
    		<xf:group id="" class="titbox">
    			<w2:textbox style="" id="" label="상하, 좌우로 슬라이드 되는 형태의 바로 표현되며, 버튼을 드래그해서 값을 선택하는 ui를 만드는 컴포넌트입니다." class="txt_guide">
    			</w2:textbox>
    		</xf:group>
    		<xf:group class="titbox" id="" style="">
    			<w2:textbox class="" id="" label="01. Sample" style="" tagname="h3"></w2:textbox>
    			<xf:group id="" class="rt">
    				<w2:anchor outerDiv="false" name="" style="" href="/ws/download/slider.zip" id="" class="btn_cm">
    					<xf:label><![CDATA[Download]]></xf:label>
    				</w2:anchor>
    			</xf:group>
    		</xf:group>
    		<xf:group class="msgbox" id="" style="">
    			<w2:slider class="wq_sld mr30" id="" increment="5" maxValue="100" minValue="0" setBackground="true" showScale="false"
    				style="position:relative; width: 200px;height: 30px;" title="" tooltipDisplay="true" value="0" vertical="false">
    			</w2:slider>
    			<w2:slider class="wq_sld" id="" increment="5" maxValue="100" minValue="0" setBackground="true" showScale="false"
    				style="position:relative; width: 30px;height: 200px;" title="" tooltipDisplay="true" value="0" vertical="true">
    			</w2:slider>
    		</xf:group>
    		<xf:group id="" class="titbox">
    			<w2:textbox style="" id="" label="02. Property" class="" tagname="h3"></w2:textbox>
    		</xf:group>
    		<xf:group id="" class="tblbox">
    			<xf:group tagname="table" style="" id="" class="wq_tb w2tb tbl">
    				<w2:attributes>
    					<w2:summary></w2:summary>
    				</w2:attributes>
    				<xf:group tagname="colgroup">
    					<xf:group tagname="col" style="width:20%;"></xf:group>
    					<xf:group tagname="col" style=""></xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">Property</xf:group>
    					<xf:group tagname="th" style="" class="w2tb_th">Description</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">class</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">사용자가 임의의 class를 정의할때 사용합니다.</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">id</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">사용자가 임의의 id를 정의할때 사용합니다.</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">increment</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">슬라이더의 증가값의 단위를 지정합니다.</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">maxValue</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">slider의 최대값을 지정합니다.</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">minValue</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">slider의 최소값을 지정합니다.</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">ref</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">model instance의 바인딩 정보를 입력합니다.</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">setBackground</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						드래그한&nbsp;범위만큼&nbsp;바를&nbsp;배경색으로&nbsp;채웁니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">showScale</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">slider의 상하에 눈금을 표시할지 여부를 지정합니다.</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">title</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">웹접근성을 위한 속성으로서 컴포넌트의 설명글을 입력합니다.</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">tooltipDisplay</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">slider의 값을 slider버튼위에 보여줍니다.</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" class="w2tb_th">
    						tabIndex
    						<w2:attributes>
    							<w2:scope>row</w2:scope>
    						</w2:attributes>
    						<w2:span style="" id="" label="SP2" class="txt_info"></w2:span>
    					</xf:group>
    					<xf:group tagname="td" class="w2tb_td">
    						Tab&nbsp;Key를&nbsp;이용&nbsp;한&nbsp;컴포넌트의&nbsp;포커스&nbsp;순서로&nbsp;HTML의&nbsp;tabindex속성과&nbsp;동일한&nbsp;기능을&nbsp;제공한다.
    						<w2:attributes></w2:attributes>
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">value</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">초기 값을 설정합니다.</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">vertical</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">세로 슬라이더를 사용할지 지정합니다.</xf:group>
    				</xf:group>
    			</xf:group>
    		</xf:group>
    		<xf:group id="" class="titbox">
    			<w2:textbox tagname="h3" style="" id="" label="03. CSS Overriding" class=""></w2:textbox>
    		</xf:group>
    		<xf:group id="" class="tblbox">
    			<xf:group tagname="table" style="" id="" class="wq_tb w2tb tbl">
    				<w2:attributes>
    					<w2:summary></w2:summary>
    				</w2:attributes>
    				<xf:group tagname="colgroup">
    					<xf:group tagname="col" style="width:20%;"></xf:group>
    					<xf:group tagname="col" style=""></xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">Class</xf:group>
    					<xf:group tagname="th" style="" class="w2tb_th">Description</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">w2slider, w2slider_horizon</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						w2slider, w2slider_horizon 는 웹스퀘어 엔진에서 정의된 클래스입니다, 기본적으로 html 로 떨구는 시점에서 자동으로 부여됩니다.

    						Slider의 전체를 감싸는 태그 입니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">w2slider_startLayer</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						w2slider_startLayer는 웹스퀘어 엔진에서 정의된 클래스입니다, 기본적으로 html 로 떨구는 시점에서 자동으로 부여됩니다.

    						Slider의 왼쪽 배경 영역입니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">w2slider_centerLayer</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						w2slider_centerLayer는 웹스퀘어 엔진에서 정의된 클래스입니다, 기본적으로 html 로 떨구는 시점에서 자동으로 부여됩니다.

    						Slider의 가운데 영역으로서 실제 drag되는 영역입니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">w2slider_endLayer</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						w2slider_endLayer는 웹스퀘어 엔진에서 정의된 클래스입니다, 기본적으로 html 로 떨구는 시점에서 자동으로 부여됩니다.

    						Slider의 오른쪽 배경 영역입니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">w2thumb</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						w2thumb는 웹스퀘어 엔진에서 정의된 클래스입니다, 기본적으로 html 로 떨구는 시점에서 자동으로 부여됩니다.

    						Slider의 bar부분 입니다.
    					</xf:group>
    				</xf:group>
    			</xf:group>
    		</xf:group>
    		<xf:group adaptiveThreshold="" class="msgbox" id="" style="">
    			<xf:group id="" class="titbox"><w2:textbox tagname="h4" style="" id="" label="Tip" class=""></w2:textbox></xf:group><w2:textbox class="txt_info" id="" label='onthumbmove 이벤트는 슬라이더 컴포넌트의 핸들을 이동하며 동시에 발생되는 이벤트입니다.<br/>' style="">
    			</w2:textbox>
    			<w2:textbox class="txt_info" id="" label="onmovedone 이벤트는 슬라이더 컴포넌트의 핸들을 이동하고 난 후 발생되는 이벤트입니다." style=""></w2:textbox>
    		</xf:group>
    	</xf:group>


<?xml version="1.0" encoding="UTF-8"?>

        <w2:type>COMPONENT</w2:type>
        <w2:buildDate/>
        <w2:MSA/>
        <xf:model>
            <w2:dataCollection baseNode="map"/>
            <w2:workflowCollection/>
        </xf:model>
        <w2:layoutInfo/>
        <w2:publicInfo method=""/>

    	<xf:group class="sub_contents" id="" style="">
    		<xf:group class="pgtbox" id="" style="">
    			<w2:textbox class="pgt_tit" id="" label="Publishing Template - Textbox" style=""></w2:textbox>
    		</xf:group>
    		<xf:group id="" class="titbox">
    			<w2:textbox style="" id=""
    				label="Text를 출력하는 컴포넌트로 HTML div Tag로 표현됩니다. 속도 개선을 위해 Output을 경량화 한 컴포넌트입니다. <br/>웹스퀘어 컴포넌트로 제공되지 않는 HTML Tag(li, dt, dd, h1,p 등)들을 tagname 속성을 이용하여 표현할 수 있으며 Textbox가 child를 가질 수 없는 컴포넌트이므로 컨테이너성 Tag의 경우 Group 컴포넌트와 함께 사용합니다."
    				class="txt_guide">
    			</w2:textbox>
    		</xf:group>
    		<xf:group class="titbox" id="" style="">
    			<w2:textbox class="" id="" label="01. Sample" style="" tagname="h3"></w2:textbox>
    			<xf:group id="" class="rt">
    				<w2:anchor outerDiv="false" name="" style="" href="/ws/download/textbox.zip" id="" class="btn_cm">
    					<xf:label><![CDATA[Download]]></xf:label>
    				</w2:anchor>
    			</xf:group>
    		</xf:group>
    		<xf:group class="msgbox" id="" style="">
    			<w2:textbox label="UI ELEMENTS" id="" style="" ref="" localeRef="" class="wq_txb" tagname="h1" toolTip=""></w2:textbox>
    		</xf:group>
    		<xf:group id="" class="titbox">
    			<w2:textbox tagname="h3" style="" id="" label="02. Property" class=""></w2:textbox>
    		</xf:group>
    		<xf:group id="" class="tblbox">
    			<xf:group tagname="table" style="" id="" class="wq_tb w2tb tbl">
    				<w2:attributes>
    					<w2:summary></w2:summary>
    				</w2:attributes>
    				<xf:group tagname="colgroup">
    					<xf:group tagname="col" style="width:20%;"></xf:group>
    					<xf:group tagname="col" style=""></xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">Property</xf:group>
    					<xf:group tagname="th" style="" class="w2tb_th">Description</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">class</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						HTML의 class속성과 동일한 기능을 제공하며 css파일 또는 style블럭에 정의 한 class를 1개 또는 공백(space)를 이용하여 다중 적용이 가능합니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">dataType</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						[default:text, number, date, time, link]컴포넌트 value의 data type을 명시하며 해당 값은 엔진에서 제공하는 displayFormat등의 속성에서 참조합니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">displayFormat</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						엔진 내부에서 dataType 속성에 정의한 type에 따라 동작되며 excel의 서식을 적용하는 방식처럼 value의 format을 적용 할 수 있습니다.

    						displayFormatter와 동시적용이 안됩니다. 예시)dateType이 number일 경우 #,###.#0 으로 적용하면 3자리수 마다 ,가 찍히며 소수점 2자리까지 표현됩니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">for</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						컴포넌트(label)가 click 됐을 때 focus를 주고자하는 컴포넌트의 id를 정의합니다.본 속성이 정의 된 경우 HTML label Tag로 출력되며 tagname 속성은 무시됩니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">id</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">컴포넌트의 ID로 전역객체로 할당되며 script에서 본 id로 컴포넌트에 접근이 가능합니다.</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">label</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						컴포넌트의&nbsp;value로&nbsp;화면에&nbsp;출력하고자&nbsp;하는&nbsp;text를&nbsp;정의합니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">style</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">InputBox의 style 속성</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">tagname</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						기본적으로 Textbox컴포넌트는 div Tag로 표현며 div가 아닌 다른 Tag로 표현하고자 할 때 사용합니다. 일반적으로 value값을 표현해야하는 Tag에 사용되며 자식 Tag(Element)를
    						가질 수 없습니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" class="w2tb_th">
    						tabIndex
    						<w2:attributes>
    							<w2:scope>row</w2:scope>
    						</w2:attributes>
    						<w2:span style="" id="" label="SP2" class="txt_info"></w2:span>
    					</xf:group>
    					<xf:group tagname="td" class="w2tb_td">
    						Tab&nbsp;Key를&nbsp;이용&nbsp;한&nbsp;컴포넌트의&nbsp;포커스&nbsp;순서로&nbsp;HTML의&nbsp;tabindex속성과&nbsp;동일한&nbsp;기능을&nbsp;제공합니다.
    						<w2:attributes></w2:attributes>
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" class="w2tb_th">
    						toolTip
    						<w2:attributes>
    							<w2:scope>row</w2:scope>
    						</w2:attributes>
    						<w2:span style="" id="" label="SP2" class="txt_info"></w2:span>
    					</xf:group>
    					<xf:group tagname="td" class="w2tb_td">
    						웹스퀘어에서&nbsp;만든&nbsp;toolTip으로&nbsp;컴포넌트의&nbsp;추가정보를&nbsp;명시한다.&nbsp;마우스&nbsp;over시&nbsp;표현됩니다.
    						<w2:attributes></w2:attributes>
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" class="w2tb_th">
    						tooltipFormatter
    						<w2:attributes>
    							<w2:scope>row</w2:scope>
    						</w2:attributes>
    						<w2:span style="" id="" label="SP2" class="txt_info"></w2:span>
    					</xf:group>
    					<xf:group tagname="td" class="w2tb_td">
    						tooltipDisplay속성이&nbsp;true일&nbsp;때&nbsp;데이터를&nbsp;표현&nbsp;할&nbsp;tooltip의&nbsp;내용을&nbsp;변경&nbsp;할&nbsp;사용자&nbsp;함수명.&nbsp;&nbsp;&nbsp;사용자&nbsp;함수에서는&nbsp;component&nbsp;Id,&nbsp;label을&nbsp;인자로&nbsp;받아&nbsp;tooltip에&nbsp;표현&nbsp;할&nbsp;string을&nbsp;return합니다.
    						<w2:attributes></w2:attributes>
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">html attributes</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">해당 태그에 대응하는 속성을 추가합니다.</xf:group>
    				</xf:group>
    			</xf:group>
    		</xf:group>
    		<xf:group adaptiveThreshold="" class="msgbox" id="" style="">
    			<xf:group id="" class="titbox"><w2:textbox tagname="h4" style="" id="" label="Tip" class=""></w2:textbox></xf:group><w2:textbox class="txt_info" id=""
    				label="Property > for 속성은 컴포넌트(Label)가 클릭 됐을 때 Focus를 주고 자 하는 컴포넌트 ID를 정의합니다.<br/>해당 속성을 활성화 할 경우 textbox 컴포넌트는 tagname을 무시하고 html 렌더링 시 div 혹은 사용자 정의 태그가 아닌 label 태그로 고정됩니다. "
    				style="">
    			</w2:textbox>
    		</xf:group>
    	</xf:group>


<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ev="http://www.w3.org/2001/xml-events"
    xmlns:w2="http://www.inswave.com/websquare" xmlns:xf="http://www.w3.org/2002/xforms">
    <head>
        <w2:type>COMPONENT</w2:type>
        <w2:buildDate/>
        <w2:MSA/>
        <xf:model>
            <w2:dataCollection baseNode="map"/>
            <w2:workflowCollection/>
        </xf:model>
        <w2:layoutInfo/>
        <w2:publicInfo method=""/>
        <script lazy="false" type="text/javascript"><![CDATA[
scwin.onpageload = function() {

};
]]></script>
    </head>
    <body ev:onpageload="scwin.onpageload">
    	<xf:group class="sub_contents" id="" style="">
    		<xf:group class="pgtbox" id="" style="">
    			<w2:textbox class="pgt_tit" id="" label="Publishing Template - TabControl" style=""></w2:textbox>
    		</xf:group>
    		<xf:group id="" class="titbox">
    			<w2:textbox style="" id="" label="다건의 탭과 콘텐츠를 생성할 수 있는 레이 아웃용 컴포넌트로 동적으로 탭을 생성하거나 삭제할 수 있습니다.<br/>"
    				class="txt_guide">
    			</w2:textbox>
    		</xf:group>
    		<xf:group class="titbox" id="" style="">
    			<w2:textbox class="" id="" label="01. Sample" style="" tagname="h3"></w2:textbox>
    			<xf:group id="" class="rt">
    				<w2:anchor outerDiv="false" name="" style="" href="/ws/download/tabControl.zip" id="" class="btn_cm">
    					<xf:label><![CDATA[Download]]></xf:label>
    				</w2:anchor>
    			</xf:group>
    		</xf:group>
    		<xf:group style="" id="" class="msgbox">
    			<xf:group class="wq_tbc_box" id="" style="position: relative ;width:100%;height: 200px;">
    				<w2:tabControl confirmTrueAction="exist" useTabKeyOnly="true" useMoveNextTabFocus="false" id=""
    					style="position: relative ;width:100%;height: 200px;" useConfirmMessage="false" confirmFalseAction="new" alwaysDraw="false"
    					class="wq_tbc" tabScroll="true" userData1="" closable="">
    					<w2:tabs label="TAB1" id="tabs1" style="width:100px;height:28px;" disabled=""></w2:tabs>
    					<w2:tabs id="tabs2" style="height:28px;width:100px;" label="TAB2" disabled="false"></w2:tabs>
    					<w2:tabs id="tabs3" style="height:28px;width:100px;" label="TAB3" disabled="false"></w2:tabs>
    					<w2:content id="content1" style="height:172px;" alwaysDraw="false"></w2:content>
    					<w2:content id="content2" style="height:172px;" alwaysDraw="false"></w2:content>
    					<w2:content id="content3" style="height:172px;" alwaysDraw="false"></w2:content>
    				</w2:tabControl>
    				<w2:anchor class="btn_closeall" ev:onclick="scwin.closeall_onclick" id="btn_closeall" outerDiv="false" style="">
    					<xf:label><![CDATA[closeAll]]></xf:label>
    				</w2:anchor>
    			</xf:group>
    		</xf:group>
    		<xf:group id="" class="titbox">
    			<w2:textbox tagname="h3" style="" id="" label="02. Property" class=""></w2:textbox>
    		</xf:group>
    		<xf:group id="" class="tblbox">
    			<xf:group tagname="table" style="" id="" class="wq_tb w2tb  tbl">
    				<w2:attributes>
    					<w2:summary></w2:summary>
    				</w2:attributes>
    				<xf:group tagname="colgroup">
    					<xf:group tagname="col" style="width:20%;"></xf:group>
    					<xf:group tagname="col" style=""></xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">Property</xf:group>
    					<xf:group tagname="th" style="" class="w2tb_th">Description</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">adaptive</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						[layout]browser의 width에 따른 적응형 웹 모드로 adaptiveThreshold속성값(width값)을 참조하여 동작합니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">adaptiveThreshold</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						[default:480]adaptive속성이 정의되어있는 경우 browser의 width에 따른 레이아웃 변경을 위한 전환 width값. px단위로 계산됩니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">alwaysDraw</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">content 영역 내용을 미리 그려줄지 여부</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">closable</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">tab의 닫기 버튼을 활성화 할지의 여부로, 개별 closable 속성은 개별 tab에서 설정 합니다.</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">focusOnStart</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						[default:true, false]화면 로딩 시 활성화된 탭에 포커스를 이동시킬지에 대한 여부. 기본값은 true입니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">hiddenTab</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						사용자 정의 데이터 속성. getUserData("userData3") API를 통해 설정한 값을 얻어올 수 있습니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">selectedIndex</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">선택되어 있는 tab의 인덱스</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">spaInitCount</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						컴포넌트 초기 로딩 시 미리 SPA모드용 iframe을 생성할 개수. SPA는 iframe을 미리 생성하여 웹스퀘어 엔진 자원을 로딩해 놓는 기능으로 addTab시에 화면 로딩 속도를 향상 시킬수
    						있습니다. 0보다 큰 값일 경우 SPA모드로 동작하며 일반적으로 windowMaxNum속성과 같은 값을 설정합니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">tabScroll</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						[default:false, true]상단 탭들의 이동과 선택의 편의성을 제공하는 기능의 사용 여부로 하위버전의 호환성을 위해 기본 false로 설정되어있습니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" class="w2tb_th">
    						tabPosition
    						<w2:attributes>
    							<w2:scope>row</w2:scope>
    						</w2:attributes>
    						<w2:span style="" id="" label="SP2" class="txt_info"></w2:span>
    					</xf:group>
    					<xf:group tagname="td" class="w2tb_td">
    						tab의&nbsp;위치를&nbsp;지정하는&nbsp;속성.&nbsp;&nbsp;&nbsp;기본적으로는&nbsp;tab이&nbsp;위에&nbsp;위치하지만,&nbsp;이&nbsp;속성을&nbsp;공백으로&nbsp;둔&nbsp;것과&nbsp;top으로&nbsp;직접&nbsp;지정한것과는&nbsp;css등의&nbsp;차이가&nbsp;있다.&nbsp;(하위&nbsp;호환을&nbsp;위함.)
    						<w2:attributes></w2:attributes>
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">useTabKeyOnly</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						[default:false, true]탭 키로만 내비게이션(tab이동)을 하는 모드로 false일 경우 방향키로도 tab간 이동이 가능합니다. 해당 속성은 웹 접근성 지원을 위한 모드입니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">windowMaxNum</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						[default:-1]최대 tab 개수로 -1로 설정할 경우 최대 tab개수에 제한을 두지 않는다. spaInitCount속성값을 설정 한 경우 일반적으로 해당 속성의 값과 동일하게 설정합니다.
    					</xf:group>
    				</xf:group>
    			</xf:group>
    		</xf:group>
    		<xf:group id="" class="titbox">
    			<w2:textbox tagname="h3" style="" id="" label="03. CSS Overriding" class=""></w2:textbox>
    		</xf:group>
    		<xf:group id="" class="tblbox">
    			<xf:group tagname="table" style="" id="" class="wq_tb w2tb  tbl">
    				<w2:attributes>
    					<w2:summary></w2:summary>
    				</w2:attributes>
    				<xf:group tagname="colgroup">
    					<xf:group tagname="col" style="width:20%;"></xf:group>
    					<xf:group tagname="col" style=""></xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">Class</xf:group>
    					<xf:group tagname="th" style="" class="w2tb_th">Description</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">w2tabcontrol</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						w2tabcontrol는 웹스퀘어 엔진에서 정의된 클래스입니다, 기본적으로 html 로 떨구는 시점에서 자동으로 부여됩니다. 각각의 스위치를 감싼 요소 입니다.
    					</xf:group>
    				</xf:group>
    			</xf:group>
    		</xf:group>
    	</xf:group>
    </body>
</html>


<?xml version="1.0" encoding="UTF-8"?>

        <w2:type>COMPONENT</w2:type>
        <w2:buildDate/>
        <w2:MSA/>
        <xf:model>
            <w2:dataCollection baseNode="map"/>
            <w2:workflowCollection/>
        </xf:model>
        <w2:layoutInfo/>
        <w2:publicInfo method=""/>

    	<xf:group class="sub_contents" id="" style="">
    		<xf:group class="pgtbox" id="" style="">
    			<w2:textbox class="pgt_tit" id="" label="Publishing Template - TableLayout" style=""></w2:textbox>
    		</xf:group>
    		<xf:group id="" class="titbox">
    			<w2:textbox style="" id="" label="표를 만들때 사용하는 컴포넌트입니다." class="txt_guide"></w2:textbox>
    		</xf:group>
    		<xf:group class="titbox" id="" style="">
    			<w2:textbox class="" id="" label="01. Sample" style="" tagname="h3"></w2:textbox>
    			<xf:group id="" class="rt">
    				<w2:anchor outerDiv="false" name="" style="" href="/ws/download/tableLayout.zip" id="" class="btn_cm">
    					<xf:label><![CDATA[Download]]></xf:label>
    				</w2:anchor>
    			</xf:group>
    		</xf:group>
    		<xf:group style="" id="" class="msgbox">
    			<xf:group class="wq_tb w2tb" id="" style="position: relative ;width:100%;" tagname="table" adaptive="layout">
    				<w2:attributes>
    					<w2:summary></w2:summary>
    				</w2:attributes>
    				<xf:group tagname="colgroup">
    					<xf:group style="width:15%;" tagname="col"></xf:group>
    					<xf:group style="" tagname="col"></xf:group>
    					<xf:group style="width:15%;" tagname="col"></xf:group>
    					<xf:group style="" tagname="col"></xf:group>
    				</xf:group>
    				<xf:group style="" tagname="tr">
    					<xf:group class="w2tb_th" style="" tagname="th">TABLE TH</xf:group>
    					<xf:group class="w2tb_td" style="" tagname="td"></xf:group>
    					<xf:group class="w2tb_th" style="" tagname="th">TABLE TH</xf:group>
    					<xf:group class="w2tb_td" style="" tagname="td"></xf:group>
    				</xf:group>
    				<xf:group style="" tagname="tr">
    					<xf:group class="w2tb_th" style="" tagname="th">TABLE TH</xf:group>
    					<xf:group class="w2tb_td" style="" tagname="td"></xf:group>
    					<xf:group class="w2tb_th" style="" tagname="th">TABLE TH</xf:group>
    					<xf:group class="w2tb_td" style="" tagname="td"></xf:group>
    				</xf:group>
    				<xf:group style="" tagname="tr">
    					<xf:group class="w2tb_th" style="" tagname="th">TABLE TH</xf:group>
    					<xf:group class="w2tb_td" style="" tagname="td"></xf:group>
    					<xf:group class="w2tb_th" style="" tagname="th">TABLE TH</xf:group>
    					<xf:group class="w2tb_td" style="" tagname="td"></xf:group>
    				</xf:group>
    				<xf:group style="" tagname="tr">
    					<xf:group class="w2tb_th" style="" tagname="th">TABLE TH</xf:group>
    					<xf:group class="w2tb_td" style="" tagname="td"></xf:group>
    					<xf:group class="w2tb_th" style="" tagname="th">TABLE TH</xf:group>
    					<xf:group class="w2tb_td" style="" tagname="td"></xf:group>
    				</xf:group>
    			</xf:group>
    		</xf:group>
    		<xf:group id="" class="titbox">
    			<w2:textbox style="" id="" label="02. Property" class="" tagname="h3"></w2:textbox>
    		</xf:group>
    		<xf:group id="" class="tblbox">
    			<xf:group tagname="table" style="" id="" class="wq_tb w2tb tbl">
    				<w2:attributes>
    					<w2:summary></w2:summary>
    				</w2:attributes>
    				<xf:group tagname="colgroup">
    					<xf:group tagname="col" style="width:20%;"></xf:group>
    					<xf:group tagname="col" style=""></xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">Property</xf:group>
    					<xf:group tagname="th" style="" class="w2tb_th">Description</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">adaptive</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						tagname이 table일 경우 적응형 웹(다양한 화면크기와 디바이스에 맞게 레이아웃을 변경) 모드. 속성값이 crosstab인 경우, thead와 tbody가 각각 하나씩 있어야 합니다.
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">adaptiveThreshold</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						tagname이 table일 경우 adaptive가 설정되어 있을 경우 레이아웃 변경을 하기 위한 breakpoint(기본값 : 48)
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" class="w2tb_th">
    						tooltipFormatter
    						<w2:attributes>
    							<w2:scope>row</w2:scope>
    						</w2:attributes>
    						<w2:span style="" id="" label="SP2" class="txt_info"></w2:span>
    					</xf:group>
    					<xf:group tagname="td" class="w2tb_td">
    						tooltipDisplay속성이&nbsp;true일&nbsp;때&nbsp;데이터를&nbsp;표현&nbsp;할&nbsp;tooltip의&nbsp;내용을&nbsp;변경&nbsp;할&nbsp;사용자&nbsp;함수명.&nbsp;&nbsp;&nbsp;사용자&nbsp;함수에서는&nbsp;componentId,&nbsp;label을&nbsp;인자로&nbsp;받아&nbsp;tooltip에&nbsp;표현&nbsp;할&nbsp;string을&nbsp;return한다.
    						<w2:attributes></w2:attributes>
    					</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" class="w2tb_th">
    						tabIndex
    						<w2:attributes>
    							<w2:scope>row</w2:scope>
    						</w2:attributes>
    						<w2:span style="" id="" label="SP2" class="txt_info"></w2:span>
    					</xf:group>
    					<xf:group tagname="td" class="w2tb_td">
    						Tab&nbsp;Key를&nbsp;이용&nbsp;한&nbsp;컴포넌트의&nbsp;포커스&nbsp;순서로&nbsp;HTML의&nbsp;tabindex속성과&nbsp;동일한&nbsp;기능을&nbsp;제공한다.
    						<w2:attributes></w2:attributes>
    					</xf:group>
    				</xf:group>
    			</xf:group>
    		</xf:group>
    		<xf:group id="" class="titbox">
    			<w2:textbox style="" id="" label="03. CSS Overriding" class="" tagname="h3"></w2:textbox>
    		</xf:group>
    		<xf:group id="" class="tblbox">
    			<xf:group tagname="table" style="" id="" class="wq_tb w2tb tbl">
    				<w2:attributes>
    					<w2:summary></w2:summary>
    				</w2:attributes>
    				<xf:group tagname="colgroup">
    					<xf:group tagname="col" style="width:20%;"></xf:group>
    					<xf:group tagname="col" style=""></xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">Class</xf:group>
    					<xf:group tagname="th" style="" class="w2tb_th">Description</xf:group>
    				</xf:group>
    				<xf:group tagname="tr" style="">
    					<xf:group tagname="th" style="" class="w2tb_th">
    						w2group

    						w2tb
    					</xf:group>
    					<xf:group tagname="td" style="" class="w2tb_td">
    						w2group과 w2tb는 웹스퀘어 엔진에서 정의된 클래스입니다, 기본적으로 html 로 렌더링되는 시점에서 자동으로 부여됩니다. 여기에 사용자 정의 클래스를 추가해서 overriding(덮어쓰기)
    						하여 디자인을 바꿀 수 있습니다.
    					</xf:group>
    				</xf:group>
    			</xf:group>
    		</xf:group>
    		<xf:group adaptiveThreshold="" class="msgbox" id="" style="">
    			<xf:group id="" class="titbox"><w2:textbox tagname="h4" style="" id="" label="Tip" class=""></w2:textbox></xf:group><w2:textbox class="txt_info" id=""
    				label='Table 컬럼의 가로 값은 colgroup안 col의 style에 width="가로값" 을 수정해서 맞춰주시면 됩니다.<br/>col의 갯수와 컬럼의 갯수는 같아야 됩니다.' style="">
    			</w2:textbox>
    		</xf:group>

    	</xf:group>


<?xml version="1.0" encoding="UTF-8"?>

        <w2:type>COMPONENT</w2:type>
        <w2:buildDate/>
        <w2:MSA/>
        <xf:model>
            <w2:dataCollection baseNode="map"/>
            <w2:workflowCollection/>
        </xf:model>
        <w2:layoutInfo/>
        <w2:publicInfo method=""/>

    	<xf:group class="sub_contents" id="" style="">
			<xf:group class="pgtbox" id="" style="">
				<w2:textbox class="pgt_tit" id="" label="Publishing Template - SlideHide" style=""></w2:textbox>
			</xf:group>
			<xf:group id="" class="titbox"><w2:textbox style="" id="" label="특정 영역을 사용자가 지정한 이벤트(click, mouseOver)가 발생하면 좌, 우 또는 상,하 중 사용자가 지정한 방향으로 영역이 슬라이드 되면서 보이거나 숨김처리가  가능한 기능입니다." class="txt_guide">
			</w2:textbox></xf:group><xf:group class="titbox" id="" style="">
				<w2:textbox class="" id="" label="01. Sample" style="" tagname="h3"></w2:textbox>
			<xf:group id="" class="rt"><w2:anchor outerDiv="false" name="" style="" href="/ws/download/slideHide.zip" id="" class="btn_cm">
					<xf:label><![CDATA[Download]]></xf:label>
				</w2:anchor></xf:group></xf:group>
			<xf:group class="msgbox" id="" style="">
				<w2:slideHide class="box_sdh" firstStatus="slide" hideEvent="onclick" id="" moveSize="7" showSize="20"
					slideDirection="right" slideEvent="onclick" style="">
					<xf:group id="" style="" class="btn_sdh">
						<xf:image id="" style="width:22px;height:100px;" src="/ws/images/style/component/btn_sdh.png"></xf:image>
					</xf:group>
					<w2:textbox id="" label="" ref="" style="" tagname="" class="bg_sdh"></w2:textbox>
				</w2:slideHide>
			</xf:group>
			<xf:group id="" class="titbox"><w2:textbox tagname="h3" style="" id="" label="02. Property" class=""></w2:textbox></xf:group>
			<xf:group id="" class="tblbox"><xf:group tagname="table" style="" id="" class="wq_tb w2tb tbl">
				<w2:attributes>
					<w2:summary></w2:summary>
				</w2:attributes>
				<xf:group tagname="colgroup">
					<xf:group tagname="col" style="width:20%;"></xf:group>
					<xf:group tagname="col" style=""></xf:group>
				</xf:group>
				<xf:group tagname="tr" style="">
					<xf:group tagname="th" style="" class="w2tb_th">Property</xf:group>
					<xf:group tagname="th" style="" class="w2tb_th">Description</xf:group>
				</xf:group>
				<xf:group tagname="tr" style="">
					<xf:group tagname="th" style="" class="w2tb_th">class</xf:group>
					<xf:group tagname="td" style="" class="w2tb_td">사용자가 임의의 class를 정의할때 사용합니다</xf:group>
				</xf:group>
				<xf:group tagname="tr" style="">
					<xf:group tagname="th" style="" class="w2tb_th">firstStatus</xf:group>
					<xf:group tagname="td" style="" class="w2tb_td">처음에 보여질지 숨겨져 있을지 여부를 설정합니다.</xf:group>
				</xf:group>
				<xf:group tagname="tr" style="">
					<xf:group tagname="th" style="" class="w2tb_th">hideEvent</xf:group>
					<xf:group tagname="td" style="" class="w2tb_td">hide가 발생할 이벤트의 종류를 지정합니다.</xf:group>
				</xf:group>
				<xf:group tagname="tr" style="">
					<xf:group tagname="th" style="" class="w2tb_th">id</xf:group>
					<xf:group tagname="td" style="" class="w2tb_td">사용자가 임의의 id를 정의할때 사용합니다.</xf:group>
				</xf:group>
				<xf:group tagname="tr" style="">
					<xf:group tagname="th" style="" class="w2tb_th">moveSize</xf:group>
					<xf:group tagname="td" style="" class="w2tb_td">
						애니메이션시 한번에 움직일 단위입니다. 높을수록 애니메이션 프레임이 저하되며 속도는 빨라집니다. 반대로 단위가 낮으면 애니메이션 프레임은 높아지며 속도는 느려집니다.
					</xf:group>
				</xf:group>
				<xf:group tagname="tr" style="">
					<xf:group tagname="th" style="" class="w2tb_th">showSize</xf:group>
					<xf:group tagname="td" style="" class="w2tb_td">hide 되고난 후 보여지는 크기를 지정합니다.</xf:group>
				</xf:group>
				<xf:group tagname="tr" style="">
					<xf:group tagname="th" style="" class="w2tb_th">slideDirection</xf:group>
					<xf:group tagname="td" style="" class="w2tb_td">slide방향을 지정합니다.</xf:group>
				</xf:group>
				<xf:group tagname="tr" style="">
					<xf:group tagname="th" style="" class="w2tb_th">slideEvent</xf:group>
					<xf:group tagname="td" style="" class="w2tb_td">slide가 발생할 이벤트의 종류를 지정합니다.</xf:group>
				</xf:group>
				<xf:group tagname="tr" style="">
					<xf:group tagname="th" class="w2tb_th">
						tabIndex
						<w2:attributes>
							<w2:scope>row</w2:scope>
						</w2:attributes>
						<w2:span style="" id="" label="SP2" class="txt_info"></w2:span>
					</xf:group>
					<xf:group tagname="td" class="w2tb_td">
						Tab&nbsp;Key를&nbsp;이용&nbsp;한&nbsp;컴포넌트의&nbsp;포커스&nbsp;순서로&nbsp;HTML의&nbsp;tabindex속성과&nbsp;동일한&nbsp;기능을&nbsp;제공한다.
						<w2:attributes></w2:attributes>
					</xf:group>
				</xf:group>
			</xf:group></xf:group>
			<xf:group id="" class="titbox"><w2:textbox tagname="h3" style="" id="" label="03. CSS Overriding" class=""></w2:textbox></xf:group>
		<xf:group id="" class="tblbox"><xf:group tagname="table" style="" id="" class="wq_tb w2tb tbl">
				<w2:attributes>
					<w2:summary></w2:summary>
				</w2:attributes>
				<xf:group tagname="colgroup">
					<xf:group tagname="col" style="width:20%;"></xf:group>
					<xf:group tagname="col" style=""></xf:group>
				</xf:group>
				<xf:group tagname="tr" style="">
					<xf:group tagname="th" style="" class="w2tb_th">Class</xf:group>
					<xf:group tagname="th" style="" class="w2tb_th">Description</xf:group>
				</xf:group>
				<xf:group tagname="tr" style="">
					<xf:group tagname="th" style="" class="w2tb_th">w2slideHide, slide_hide</xf:group>
					<xf:group tagname="td" style="" class="w2tb_td">
						w2slideHide는웹스퀘어 엔진에서 정의된 클래스입니다, 기본적으로 html 로 떨구는 시점에서 자동으로 부여됩니다.

						SlideHide컴포넌트를 숨김처리 하기 위하여 추가된 부모 객체입니다. 슬라이드 동작시 해당 객체의 너비, 높이값이 변하면서 슬라이드 동작이 이루어집니다.

						slide_hide는 사용자 정의 클래스로 Stylesheet_ext.css 다음에 적용됩니다. 동일한 스타일 시트를 정의함으로서 overriding(덮어쓰기) 됩니다.
					</xf:group>
				</xf:group>
				<xf:group tagname="tr" style="">
					<xf:group tagname="th" style="" class="w2tb_th">w2slideHide_slideHideMain</xf:group>
					<xf:group tagname="td" style="" class="w2tb_td">
						w2slideHide_slideHideMain는 웹스퀘어 엔진에서 정의된 클래스입니다, 기본적으로 html 로 떨구는 시점에서 자동으로 부여됩니다. SlideHide컴포넌트의 실제 영역입니다. 사용자 클래스로
						접근할 경우에는 .slide_hide .w2slideHide_slideHideMain{}이런식으로 접근하여 overriding(덮어쓰기) 합니다.
					</xf:group>
				</xf:group>
			</xf:group></xf:group></xf:group>