====== 반응형 뷰 가이드 ======
xFrame5 화면에 대한 반응형 뷰 동작을 확인하고 테스트하기 위한 화면이다.
===== 예시 =====
템플릿 위치: /HTML5/UTIL/RWD/rwdview_basic
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/UTIL/RWD/rwdview_basic.xml|rwdview_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/UTIL/RWD/rwdview_basic.js|rwdview_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/UTIL/RWD/rwdview_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
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;
}