반응형 뷰 가이드

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

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

템플릿 파일

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;
}

  • guide/util/rwd/rwdview_basic.txt
  • 마지막으로 수정됨: 2024/03/13 09:37
  • 저자 127.0.0.1