====== 체크박스 기본 가이드 ======
체크박스 컴포넌트 기본 기능에 대한 예시화면이다.
체크박스 컴포넌트는 체크(선택)/해제(미선택) 2가지 상태 및 상태별 값을 제공한다.
관련 속성으로는 default_check, true_value, false_value가 있다.
관련 이벤트로는 on_itemchange, on_click이 있다.
관련 API로는 getcheck, setcheck가 있다.
===== 예시 =====
템플릿 위치: /HTML5/COMPONENT/CHECKBOX/checkbox_basic
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/COMPONENT/CHECKBOX/checkbox_basic.xml|checkbox_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/COMPONENT/CHECKBOX/checkbox_basic.js|checkbox_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/COMPONENT/CHECKBOX/checkbox_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
/**
* 체크박스 체크 상태 변경 이벤트
*
* @param {Object} objInst 체크박스 컴포넌트 인스턴스
* @param {number} prev_value 변경전 아이템 인덱스
* @param {number} curr_value 변경후 아이템 인덱스
* @param {number} event_type 체크박스 이벤트 타입
*/
function chk_basic_on_itemchange(objInst, prev_value, curr_value, event_type)
{
factory.consoleprint("on_itemchange> CheckBox Name = " + objInst.getname());
factory.consoleprint("on_itemchange> prev_value = " + prev_value);
factory.consoleprint("on_itemchange> curr_value = " + curr_value);
factory.consoleprint("on_itemchange> event_type = " + event_type);
}
/**
* 체크박스 마우스 클릭 이벤트
*
* @param {Object} objInst 체크박스 컴포넌트 인스턴스
*/
function chk_basic_on_click(objInst)
{
factory.consoleprint("on_click> Start");
factory.consoleprint("on_click> CheckBox Object Name = " + objInst.getname());
}
function screen_on_load()
{
this.cbo_settext.addstring(this.chk_basic.getfalsevalue() + ":" + "false_value 속성값");
this.cbo_settext.addstring(this.chk_basic.gettruevalue() + ":" + "true_value 속성값");
this.cbo_settext.setselectedindex(0);
}
// "getcheck" 버튼 이벤트
function btn_getcheck_on_click(objInst)
{
// 체크박스 체크 상태 표시
screen.alert("check = " + this.chk_basic.getcheck());
}
// "setcheck" 버튼 이벤트
function btn_setcheck_on_click(objInst)
{
// 체크박스 체크 상태 토글처리
this.chk_basic.setcheck(!this.chk_basic.getcheck());
}
// "gettext" 버튼 이벤트
function btn_gettext_on_click(objInst)
{
var checkbox_value;
// 체크박스 체크 상태 기준 내부 데이터 값(true_value/false_value 속성값)을 표시
checkbox_value = this.chk_basic.gettext();
this.fld_gettext.settext(checkbox_value);
}
// "settext" 버튼 이벤트
function btn_settext_on_click(objInst)
{
var checkbox_value;
// 체크박스 데이터 값(true_value/false_value 속성값) 설정
checkbox_value = this.cbo_settext.getselectedcode();
this.chk_basic.settext(checkbox_value);
}
// "getcaption" 버튼 이벤트
function btn_getcaption_on_click(objInst)
{
// 체크박스 캡션(text 속성)을 가져와 필드에 설정
this.fld_getcaption.settext(this.chk_basic.getcaption());
}
// "setcaption" 버튼 이벤트
function btn_setcaption_on_click(objInst)
{
// 체크박스 캡션(text 속성) 설정
this.chk_basic.setcaption(this.fld_setcaption.gettext());
}