반응형 뷰 가이드
xFrame5 화면에 대한 반응형 뷰 동작을 확인하고 테스트하기 위한 화면이다.
예시
화면 스크립트
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
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; } |