JQM + PhoneGap 작업시 두 라이브러리의 초기화 처리

jQuery Mobile은 어플리케이션이 모바일 환경에 최적화되도록 자동으로 HTML의 상당 부분을 변경하거나 개선합니다. 이러한 jQuery Mobile의 자동 최적화는 대부분의 모바일 어플리케이션에서 유용한 것이지만 어떤 특별한 경우에는 필요치 않거나 오히려 없는 편이 더 나을 수도 있습니다.  jQuery Mobile은 이런 상황을 감안해 기본 설정의 주요 부분을 재정의할 수 있게 지원합니다.

PhoneGap은 HTML파일을 읽어들이면서 HTML문서에서 참조하도록 정의된 phonegap-1.1.0.js 라는 파일을 찾습니다. 그리고 해당 파일이 정상적으로 포함된 경우 deviceready 라는 이벤트를 발생시킵니다.

이 두 라이브러리가 서로 각자 초기화가 완료된 후에야 각 라이브러리에서 제공하는 모든 기능을 충분히 활용할 수 있게 됩니다. 하지만 이 두 라이브러리의 초기화 과정에서 서로 충돌이 발생해서 둘중 한가지는 충분히 초기화 되기 이전에 페이지가 사용자에게 노출되어 에러를 발생하게 하는 원인이 됩니다.

PhoneGap의 초기화 이벤트 처리하기

앞에서 이야기 했듯이 PhoneGap은 deviceready라는 이벤트를 HTML문서가 초기화 되면 발생시킵니다.

HTML파일에서는 다음과 같이 PhoneGap의 초기화 이벤트를 처리할 수 있습니다.

view plaincopy to clipboardprint?

1. <script src="phonegap-1.1.0.js"></script>  
2. <script type="text/javascript">  
3. document.addEventListener("deviceready", function(){  
4.     // 초기화에 필요한 수행  
5. }, false);  
6. </script>  

jQuery Mobile의 초기화 수행

jQuery Mobile에서는 jQuery Mobile이 초기화 되기 이전에 필요한 기본 처리들을 충분히 수행한 후에 초기화 할 수 있도록, 자동 초기화를 중지시키고 수동으로 초기화하는 기능을 제공하기 위해서 jQuery Mobile이 초기화 되기 이전에 mobileinit라는 이벤트를 발생시킵니다.

이 mobileinit라는 이벤트를 구현해서 jQuery Mobile이 초기화를 하지 못하도록 막을 수 있습니다.

$.mobile.autoInitializePage 라는 속성에 false라는 값을 대입하면 됩니다.

view plaincopy to clipboardprint?

1. <script type="text/javascript">  
2. $(document).bind("mobileinit", function() {  
3.     $.mobile.autoInitializePage = false;  
4. });  
5. </script>  

이 mobileinit라는 이벤트는 jQuery 라이브러리가 로드되고, jQuery Mobile 라이브러리가 로드되기 전에 발생합니다. 따라서 위의 소스는 위치가 매우 중요해 지는데요, 다음과 같이 작성되어야 합니다.

view plaincopy to clipboardprint?

1. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />  
2. <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  
3. <script type="text/javascript">  
4. $(document).bind("mobileinit", function() {  
5.     $.mobile.autoInitializePage = false;  
6. });  
7. </script>  
8. <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>  

이렇게 $.mobile.autoInitializePage = false; 속성을 지정해 주면 jQuery Mobile은 명시적으로 $.mobile.initializePage(); 라는 메소드를 호출하기 전까지 초기화를 수행하지 않습니다.

PhoneGap과 연관 없이 단순히 필요한 사전 처리만을 수행한 후에, jQuery Mobile을 수행하기 위해서는 다음과 같이 처리하도록 jQuery Mobile API에서 소개하고 있습니다.

view plaincopy to clipboardprint?

1. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />  
2. <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  
3. <script type="text/javascript">  
4. $(document).bind("mobileinit", function() {  
5.     $.mobile.autoInitializePage = false;  
6.     // 초기화에 필요한 처리 (1)  
7. });  
8. </script>  
9. <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>  
10. <script src="phonegap-1.1.0.js"></script>  
11. <script type="text/javascript">  
12. $(document).ready(function() {  
13.     // 초기화에 필요한 처리 (2)  
14.      $.mobile.initializePage();  
15. });  
16. </script>  

만약 초기화 과정에서 jQuery Mobile에서 제공하는 $.mobile 이라는 객체의 기능을 사용해야 한다면, 초기화 처리는 (2)번 부분에 기술되어야 하며, 그렇지 않은 경우는 (1)과 (2) 원하는 곳에 넣으면 됩니다. 처음에는 $.mobile.initializePage(); 를 mobileinit 이벤트 함수 안에서 호출했더니 메소드를 찾지 못한다면에 에러가 났었습니다.

moibleinit 이벤트에서 deviceready 이벤트 처리

jQuery Mobile과 phonegap을 함께 초기화 하기 위해서는 jQuery Mobile의 mobileinit 이벤트에서 $.mobile.autoInitializePage = false; 를 지정하여 초기화를 중지시킨 다음에 이 부분에 phonegap의 deviceready 이벤트를 정의해 줍니다.

아래와 같이 처리해 주면, jQuery Mobile은 스스로의 초기화를 중지시킨 후에, phonegap의 deviceready 이벤트가 발생할 때 까지 기다릴 겁니다.

view plaincopy to clipboardprint?

1. $(document).bind("mobileinit", function() {  
2.     $.mobile.autoInitializePage = false;  
3.     document.addEventListener("deviceready", function(){  
4.         // phonegap의 초기화가 완료된 후의 처리  
5.     }, false);  
6. });  

deviceready 이벤트가 발생하여 phonegap의 초기화가 완료되면, 그 안에서 아직 수행되지 않은 jQuery Mobile의 초기화를 명시적으로 호출합니다.

view plaincopy to clipboardprint?

1. <script src="phonegap-1.1.0.js"></script>  
2. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />  
3. <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  
4. <script type="text/javascript">  
5. $(document).bind("mobileinit", function() {  
6.     $.mobile.autoInitializePage = false;  
7.      document.addEventListener("deviceready", function(){  
8.         $.mobile.initializePage();  
9.     }, false);  
10. });  
11. </script>  
12. <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>  

샘플코드

아래 샘플은 위와 같은 초기화 방식을 적용하여, jQuery Mobile에서 phoneGap의 deviceready 이벤트를 받아, 단말기의 기본 사양을 출력하도록 한 샘플입니다.

출력 값의 속성 이름을 알기 위해서 phonegap의 샘플 코드를 참조했으며, 출력값을 inset-listview에 넣었습니다.

view plaincopy to clipboardprint?

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.     <title>Hello PhoneGap</title>  
5.     <meta charset="utf-8"/>  
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />  
7.     <script src="phonegap-1.1.0.js"></script>  
8.     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />  
9.     <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  
10.     <script type="text/javascript">  
11.         $(document).bind("mobileinit", function() {  
12.             $.mobile.autoInitializePage = false;  
13.             document.addEventListener("deviceready", function(){  
14.                 $.mobile.initializePage();  
15.                 document.getElementById("platform").innerHTML = device.platform;  
16.                 document.getElementById("version").innerHTML = device.version;  
17.                 document.getElementById("uuid").innerHTML = device.uuid;  
18.                 document.getElementById("name").innerHTML = device.name;  
19.                 document.getElementById("width").innerHTML = screen.width;  
20.                 document.getElementById("height").innerHTML = screen.height;  
21.                 document.getElementById("colorDepth").innerHTML = screen.colorDepth;  
22.             }, false);  
23.         });  
24.     </script>  
25.     <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>  
26. </head>  
27. <body>  
28. <div data-role="page">  
29.     <div data-role="header">  
30.         <h1>PhoneGap Init</h1>  
31.     </div>  
32.     <div data-role="content">  
33.         <ol data-role="listview" data-inset="true" data-theme="d">  
34.             <li>Platform: <span id="platform"> &nbsp;</span></li>  
35.             <li>Version: <span id="version"> &nbsp;</span></li>  
36.             <li>UUID: <span id="uuid"> &nbsp;</span></li>  
37.             <li>Name: <span id="name"> &nbsp;</span></li>  
38.             <li>Width: <span id="width"> &nbsp;</span></li>  
39.             <li>Height: <span id="height"> &nbsp;</span></li>  
40.             <li>Color Depth: <span id="colorDepth"> &nbsp;</span></li>  
41.         </ol>  
42.     </div>  
43. </div>  
44. </body>  
45. </html>  

실행하면 아래와 같이 결과가 나옵니다. 안드로이드 (삼성 갤럭시S2)에서만 테스트 해 봤습니다.

혹시 iOS나 다른 폰에서 결과가 동일하지 않다면 피드백 주시면 감사하겠습니다.