위치 가이드

컴포넌트 위치 기능에 대한 예시 화면이다.

관련 속성으로 x, y, right, bottom, anchor가 있다.

관련 API는 getrect, setrect, getleft, setleft, gettop, settop, getright, setright, getbottom, setbottom, setlefttop가 있다.

템플릿 위치: /HTML5/COMPONENT/COMMON/pos_basic

템플릿 파일

• pos_basic.xml
• pos_basic.js
• 새창으로 실행

function btn_size_on_click(objInst)
{
	// 컴포넌트 위치 정보 표시
	screen.alert("NAME = " + objInst.getname() +
		"\nLEFT(부모 기준) = " +  objInst.getleft() +
		"\nTOP(부모 기준) = " + objInst.gettop() +
		"\nRIGHT(부모 기준) = " + objInst.getright(true) +
	    "\nRIGHT(컴포넌트 좌측 기준) = " + objInst.getright() +
		"\nBOTTOM(부모 기준) = " + objInst.getbottom(true) +
		"\nBOTTOM(컴포넌트 상단 기준) = " + objInst.getbottom());
}

// "getrect" 버튼 이벤트
function btn_getrect_on_click(objInst)
{
	var rect_arr;

	// 부모 기준 좌측/상단 좌표 및 컴포넌트 좌측 기준 우측/하단 좌표를 배열로 구함
	rect_arr = btn_pos.getrect();

	// 부모 기준 좌측/상단 좌표 및 컴포넌트 좌측 기준 우측/하단 좌표 표시
	fld_getrectL.settext(rect_arr[0]);
	fld_getrectT.settext(rect_arr[1]);
	fld_getrectR.settext(rect_arr[2]);
	fld_getrectB.settext(rect_arr[3]);
}

// "setrect" 버튼 이벤트
function btn_setrect_on_click(objInst)
{
	// 버튼 컴포넌트 위치/크기 설정
	btn_pos.setrect(
		fld_setrectL.gettext(), // 부모 기준 좌측 좌표
		fld_setrectT.gettext(), // 부무 기준 상단 좌표
		fld_setrectR.gettext(), // 컴포넌트 좌측 기준 우측 좌표
		fld_setrectB.gettext()  // 컴포넌트 상단 기준 하단 좌표
	);
}

// "setleft" 버튼 이벤트
function btn_setleft_on_click(objInst)
{
	// 부모 기준 좌측 위치 설정
	btn_left.setleft(fld_setleft.gettext());
}

// "settop" 버튼 이벤트
function btn_settop_on_click(objInst)
{
	// 부모 기준 상단 위치 설정
	btn_top.settop(fld_settop.gettext());
}

// "setright" 버튼 이벤트
function btn_setright_on_click(objInst)
{
	// 부모 기준 우측 위치 설정
	btn_right.setright(fld_setright.gettext());
}

// "setbottom" 버튼 이벤트
function btn_setbottom_on_click(objInst)
{
	// 부모 기준 하단 위치 설정
	btn_bottom.setbottom(fld_setbottom.gettext());
}

// "setlefttop" 버튼 이벤트
function btn_setlefttop_on_click(objInst)
{
	// 버튼 컨트롤 우측/상단위치 지정
	btn_topleft.setlefttop(
		fld_lefttop_left.gettext(), // 보모 기준 좌측 좌표
		fld_lefttop_top.gettext()   // 부모 기준 상단 좌표
	);
}