PhoneGap + jQuery Mobile 모바일앱 개발하기 (7) – mobileinit or deviceready ?

PhoneGap과 jQuery Mobile을 이용해서 모바일앱을 만들때 각 플랫폼이 지원하는 API 기능들을 제대로 활용하기 위해서는 각 플랫폼에 필요한 초기화 과정이 완료되길 기다려야 한다.

플랫폼 초기화가 완료되었을때  PhoneGap은 deviceready 이벤트를 발생시키고 jQuery Mobile은 mobileinit을 발생시킨다. 모든 플랫폼이 초기화된 것을 체크하고 정상적인 다음 처리 단계로 넘어가야하는데 구글링을 아무리해도 PhoneGap+jQuery Mobile에 대한 뾰족한 해답은 찾질 않았다.

UI Development using jQueryMobile 의 Boot Events 섹션을 보면

$(document).ready(function() {
  $(document).bind("deviceready", function(){
  });
});

와 같이 하라고 되어있다. 하지만 $(document).ready(function() {..}); 은 jQuery에 해당하는 내용이고 실제 적용해보면 정상적으로 동작하질 않는다.

jQuery Mobile의 http://jquerymobile.com/demos/1.0b3/docs/api/globalconfig.html 문서에서는 jQuery Mobile 이 실행되면 mobileinit 이벤트를 triggering 한다고 기술하고 있다.

실제 두 개의 플랫폼을 적용해보면 동일하게 phonegap.js 와 jQuery Mobile의 js 파일을 포함시키고 적용시켰음에도 불구하고 가끔 phonegap이 정상 동작하지 않는 경우가 있는데 이유를 살펴보면 phonegap이 초기화되기 이전에, 즉 deviceready event가 발생하기 이전에 phonegap의 기능을 사용하는 경우가 생기기 때문이다. 반대로 jQuery Mobile이 초기화되기 이전(mobileinit event) 에 html 파일들이 로딩되면 jQuery Mobile이 동작하지 않는 경우도 발생한다.

PhoneGap + jQuery Mobile initialization

두개의 플랫폼이 모두 초기화된 이후에 다음 단계를 진행하도록 하기 위해 다음과 같이 구성해보았다.

아래의 코드는 Phonegap의 deviceready와 jQuery Mobile의 mobileinit 이벤트에 binding하고  jQuery Mobile이 초기화된 후 Phonegap이 초기화될때까지 계속 index.html (id = page_index)에 머물도록 한다.

아래 javascript code가 index.html의 pageshow 이벤트에 대해 처리하도록 하기위해서 index.html은 jQuery Mobile을 위한

<div data-role="page" id="page_index">

 ...
</div> <!-- page -->

로 구성되어야 한다.

var PhoneGapReady=false;

$(document).bind("deviceready", function() {
  PhoneGapReady=true;
});

$(document).bind("mobileinit", function() {
  $('#page_index').live('pageshow',function(event){
    if(PhoneGapReady==true) {
      // PhoneGap이 초기화되었을때만 index.html에 대한 처리를 시작한다.
      // TO-DO  -- 정상 처리

    } else {
      // PhoneGap이 초기화되지 않았다면 index.html에서 무한 반복...
      $.mobile.changePage("index.html");
    }
  });

});

이게 정확한 방법인지 잘 모르겠다. 다른 초기화 방법을 아시는 분은 좀 알려주길 바란다.

태그: hybrid app, 하이브리드앱, 웹앱, jQuery Mobile, PhoneGap, web app