4. Phone Gap – JqueryMobile FrameWork 연동
(1) 구성
– Jquery Mobile 로 웹 서버를 개발하였다면 Phonegap 과 연동하여 Hybrid App 으로
만들기 위해서는 몇 가지 과정이 필요하다.
-> 클라이언트는 : Index 파일과 Framework 소스를 Packge 에 포함한다.
Index 파일의 설정을 통해 외부 호스트 접속을 허용한다.
-> 서버는 : 그대로 두면 된다.
가) Client : 로딜 속도를 빠르게 하기위해 무거운 Framework 을 App 에 포함시킨다.
○시작 HTML 세팅
참조 : http://jquerymobile.com/demos/1.2.0/#/demos/1.2.0/docs/pages/phonegap.html
참조 : http://jquerymobile.com/demos/1.2.0/docs/api/globalconfig.html
[예제] JQuery-Mobile 이 외부 동신을 할 수 있도록 세팅을 해주어야 한다.
<script type=”text/javascript”>
$(document).bind(“mobileinit”, function() {
$(“#home”).live(“pagebeforeshow”, function(event, ui) {
btnShowAndHide();
});
//jquery 크로스 도메인 접속 허용
$.support.cors = true;
//Jquery-mobile 크로스 도메인 접속 허용
$.mobile.allowCrossDomainPages = true;
$.mobile.pushStateEnabled = false;
});
</script>
[예제] JQuery-Mobile Index 페이지에서 사용하는 상대 경로는 모두 절대 경로로 바꿔 주어야 한다.
<div data-role=”content”>
<div class=”ui-grid-a”>
<div class=”ui-block-a”>
<a id=”btnLogin”
href=”http://192.168.101.56:8080/jquery-mobile-1.3.0/demo/loginform.html”
data-role=”button”
data-icon=”gear”>로그인</a>
<a id=”btnLogout”
href=”javascript:logout();”
data-role=”button”
data-icon=”gear”>로그아웃</a>
</div>
<div class=”ui-block-b”>
<a id=”btnPhoneList”
href=”#”
data-icon=”grid”
data-role=”button”>상품목록</a>
</div>
</div>
</div>
○ Framework 파일
– 서버에서 내려받을 경우 무거운 Frame work 파일을 로컬에 저장하는 것에 큰 목적이 있다.
jquery.mobile-1.3.0.min.css
jquery.mobile-1.3.0.min.js
jquery-1.8.2.min.js
image 폴더
나) 웹서버 :
– 나머지 웹 파일들 처리한다. (Index 파일을 제외하고는 기존과 완전 동일)