반응형 뷰 가이드

xFrame5 화면에 대한 반응형 뷰 동작을 확인하고 테스트하기 위한 화면이다.

템플릿 위치: /HTML5/UTIL/RWD/rwdview_basic

템플릿 파일

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

function screen_on_load()
{
	this.cbo_device_on_itemchange();
}

// "주소" 키 이벤트
function fld_url_on_keydown(objInst, keycode, bctrldown, bshiftdown, baltdown, bnumpadkey)
{
	// ENTER키 입력시 btn_go_on_click 함수 호출
	if (keycode == 13) { this.btn_go_on_click(); }
	return 0;
}

// "이동" 버튼 이벤트
function btn_go_on_click(objInst)
{
	var url = this.fld_url.gettext();

	// 주소에 xFrame5 화면을 메인 화면으로 로딩하기 위해서 추가 쿼리스트링 추가
	if (url.indexOf("?") < 0) { url += "?xframe_screen_mainframe=1"; }
	else { url += "&xframe_screen_mainframe=1"; }

	this.web.seturl(url);
}

// "회전" 버튼 이벤트
function btn_rotate_on_click(objInst)
{
	this.web.setsize(this.web.getheight(), this.web.getwidth());

	// 수평/수직 스플릿터 크기/위치 조정
	this.SetSplitterSizePos();
}

// 수평/수직 스필리터 크기/위치 조정
function SetSplitterSizePos()
{
	// 반응형 뷰 크기값 표시
	this.DisplayWebSize();

	// 수직 스필리터 크기/위치 조정
	this.spl_vert.setwidth(this.web.getwidth());
	this.spl_vert.settop(this.web.gettop() + this.web.getheight() + 6);

	// 수평 스필리터 크기/위치 조정
	this.spl_horz.setheight(this.web.getheight());
	this.spl_horz.setleft(this.web.getleft() + this.web.getwidth() + 6);
}

// 반응형 뷰 크기 표시
function DisplayWebSize()
{
	var border_size_sum = 2;

	// 웹 브라우저 컴포넌트의 경계선 크기를 보정하여 크기값 표시
	this.fld_width.settext(this.web.getwidth() - border_size_sum);
	this.fld_height.settext(this.web.getheight() - border_size_sum);
}

// "크기 변경" 버튼 이벤트
function btn_setsize_on_click(objInst)
{
	var border_size_sum = 2;

	// 웹 브라우저 컴포넌트의 경계선 크기를 보정하여 크기 설정
	this.web.setsize(parseInt(this.fld_width.gettext(), 10) + border_size_sum,
					 parseInt(this.fld_height.gettext(), 10) + border_size_sum);

	// 수평/수직 스플릿터 크기/위치 조정
	this.SetSplitterSizePos();
}

// "디바이스" 선택 변경 이벤트
function cbo_device_on_itemchange(objInst, nprev_item, ncur_item, event_type)
{
	var code;

	// 선택된 코드 값을 구함
	code = this.cbo_device.val();

	// 코드값을 너비/높이 배열로 변경
	size_arr = code.split("X");

	// 너비 높이 표시
	this.fld_width.settext(size_arr[0]);
	this.fld_height.settext(size_arr[1]);

	// 웹 브라우저 컴포넌트 크기 설정
	this.btn_setsize_on_click();
}

// 수평 스플리터 이동 완료 이벤트
function spl_horz_on_moveend(objInst, nStartPos, nPos, nMoveGap)
{
	// 반응형 뷰 크기 표시
	this.DisplayWebSize();
}

// 수직 스플리터 이동 완료 이벤트
function spl_vert_on_moveend(objInst, nStartPos, nPos, nMoveGap)
{
	// 반응형 뷰 크기 표시
	this.DisplayWebSize();
}

// "확대" 버튼 이벤트
function btn_zoom_on_click(objInst)
{
	var browser_window;

	// 웹브라우저 컴포넌트의 윈도우 오브젝트를 통해 화면 확대/축소
	browser_window = this.web.getbrowserwindow();
	if (browser_window && browser_window.screen && browser_window.screen.setzoom) {
		browser_window.screen.setzoom(this.fld_zoom.gettext());
	}
}

// "확대 비율" 키 이벤트
function fld_zoom_on_keydown(objInst, keycode, bctrldown, bshiftdown, baltdown, bnumpadkey)
{
	// ENTER키 입력시 btn_zoom_on_click 함수 호출
	if (keycode == 13) { this.btn_zoom_on_click(); }
	return 0;
}