====== 스플리터 기본 가이드 ======
이 화면은 스플리터 컴포넌트에 대한 샘플 화면이다.
스플리터 컴포넌트는 다른 컴포넌트들의 크기를 조절하여 화면의 영역을 분할하는데 사용되는 컴포넌트이다.
관련 속성으로 move_dir, limit_min, limit_max, primary_control, secondary_control가 있다.
관련 API로 getprimarycontrol, getsecondarycontrol가 있다.
관련 이벤트로 on_move, on_movestart, on_moveend, on_dblclick가 있다.
===== 예시 =====
템플릿 위치: /HTML5/COMPONENT/SPLITTER/splitter_basic
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/SPLITTER/splitter_basic.xml|splitter_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/SPLITTER/splitter_basic.js|splitter_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/SPLITTER/splitter_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
/**
* 스플리터 이동 시작 이벤트
* @param {Object} objInst 이벤트가 발생한 컴포넌트 인스턴스
* @param {number} nStartPos 이벤트가 발생한 오브젝트의 위치값
*/
function splitter_horz_on_movestart(objInst, nStartPos)
{
factory.consoleprint("on_movestart> Start");
factory.consoleprint("on_movestart> Splitter Object Name = " + objInst.getname());
factory.consoleprint("on_movestart> nStartPos = " + nStartPos);
}
/**
* 스플리터 이동 진행중 이벤트
* @param {Object} objInst 이벤트가 발생한 컴포넌트 인스턴스
* @param {number} nStartPos 이벤트가 발생한 오브젝트의 처음 위치값
* @param {number} nPos 이벤트가 발생한 오브젝트의 움직인 새로운 위치값
* @param {number} nMoveGap nStartPos와 nPos의 차이값
* @param {number} nArriveLimit 이벤트가 발생한 오브젝트의 위치가 limit 값에 도달했는지에 대한 값
*/
function splitter_horz_on_move(objInst, nStartPos, nPos, nMoveGap, nArriveLimit)
{
factory.consoleprint("on_move> Start");
factory.consoleprint("on_move> Splitter Object Name = " + objInst.getname());
factory.consoleprint("on_move> nStartPos = " + nStartPos);
factory.consoleprint("on_move> nPos = " + nPos);
factory.consoleprint("on_move> nMoveGap = " + nMoveGap);
factory.consoleprint("on_move> nArriveLimit = " + nArriveLimit);
}
/**
* 스플리터 이동 종료 이벤트
* @param {Object} objInst 이벤트가 발생한 컴포넌트 인스턴스
* @param {number} nStartPos 이벤트가 발생한 오브젝트의 처음 위치값
* @param {number} nPos 이벤트가 발생한 오브젝트의 움직인 새로운 위치값
* @param {number} nMoveGap nStartPos와 nPos의 차이값
*/
function splitter_horz_on_moveend(objInst, nStartPos, nPos, nMoveGap)
{
factory.consoleprint("on_moveend> Start");
factory.consoleprint("on_moveend> Splitter Object Name = " + objInst.getname());
factory.consoleprint("on_moveend> nStartPos = " + nStartPos);
factory.consoleprint("on_moveend> nPos = " + nPos);
factory.consoleprint("on_moveend> nMoveGap = " + nMoveGap);
}
/**
* 스플리터 마우스 더블클릭 이벤트
* @param {Object} objInst 스플리터 컴포넌트 인스턴스
* @param {number} nStartPos 이벤트가 발생한 오브젝트의 위치
* @param {number} nLimitMin 키코드 이벤트가 발생한 오브젝트의 limit_min 값
* @param {number} nLimitMax 키코드 이벤트가 발생한 오브젝트의 limit_max 값
*/
function splitter_horz_on_dblclick(objInst, nStartPos, nLimitMin, nLimitMax )
{
var splitter_event_pos_info;
factory.consoleprint("dblclick> Start");
factory.consoleprint("dblclick> Splitter Object Name = " + objInst.getname());
factory.consoleprint("dblclick> nStartPos = " + nStartPos);
factory.consoleprint("dblclick> nLimitMin = " + nLimitMin);
factory.consoleprint("dblclick> nLimitMax = " + nLimitMax);
// mouse_event_pos_info 정보에 대한 자세한 내용은 getmouseeventpos API 도움말 참조
mouse_event_pos_info = factory.getmouseeventpos();
}
//"getprimarycontrol" 버튼 이벤트
function btn_getprimarycontrol_on_click(objInst)
{
screen.alert("primary_control : " + splitter_horz.getprimarycontrol());
}
//"getsecondarycontrol" 버튼 이벤트
function btn_getsecondarycontrol_on_click(objInst)
{
screen.alert("secondary_control : " + splitter_horz.getsecondarycontrol());
}