Sencha + PhoneGap 2.0 시 수정해야할 사항

 

PhoneGap 2.0.0 이 2012년 7월 20일부로 www.phonegap.com 에서 정식 배포되었다.

폰갭 1.x → 2.0 으로 업그레이드 되면서 NativeJavascript 소스 및 사용법이 조금 변경되었으며,

이에 따라 현재 구현되어 있는 프로젝트도 수정이 불가피하게 되었다.

현재 프로젝트에서 Server 를 제외한 Client 에서 사용되고 있는 프레임워크로는 폰갭 1.8.1 과 Sencha 이다.

Sencha 는 웹에서 개발을 하더라도 출력물은 앱처럼 보이게 하는 Javascript 프레임워크이며,

Phonegap 은 Device 기능을 사용하지 못하는 Web 의 한계를 허물고 App의 기능을 Web 에서

사용할 수 있게 하는 프레임워크이다.

간단한 설명은 마치고 PhoneGap 2.0으로 업그레이드시 수정하는 방법에 대해서 살펴보자.

 

▶ Native 영역

http://docs.phonegap.com/en/2.0.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android

위 사이트를 보면 맥에서 설치한 Eclipse 이용한 방법에 대해서 상세히 그림과 같이 설명되어 있다.

하지만, 간단히 설명하자면

1. http://www.phonegap.com/download 해당 파일을 다운로드 받는다.

2. Referenced Libraries 폴더 안의 cordova-1.8.1.jar 오른쪽 클릭 - Build Path - Remove from Build Path 선택

3. libs 폴더의 cordova-1.8.1.jar 삭제

4. libs 폴더로 cordova-2.0.0 jar 드래그 앤 드롭 방식으로 복사 ( copy files 선택 )

5. libs 폴더의 cordova-2.0.0.jar 오른쪽 클릭 - Build Path - Add Build Path

6. res/xml 에 있는 기존 파일 삭제 ( cordova.xml, plugins.xml )

- 사용자 플러그인 및 추가된 사항은 확인하여 백업할 것

7. res/xml 에 config.xml 추가 ( 2.0.0 부터 cordova.xml, plugins.xml 이 config.xml 로 통합되었다. )

8. 실행 - 정상적으로 실행되면 OK!!!!!

 

▶ Javascript 영역

cordova-2.0.0.js 는 1.x 버전에 비해 예고된 삭제가 많이 일어났다.

그 중에 가장 크게 변한 것은 window.PhoneGap 및 window.Cordova 객체를 생성하지 않고, 삭제 하는 것이다.

// cordova-1.8.1.js 에서 삭제된 부분 
// Adds deprecation warnings to functions of an object (but only logs a message once) 
function deprecateFunctions(obj, objLabel) { 
	var newObj = {}; 
	var logHash = {};

	for (var i in obj) { 
		if (obj.hasOwnProperty(i)) { 
			if (typeof obj[i] == 'function') { 
				newObj[i] = (function(prop){ 

					var oldFunk = obj[prop]; 
					var funkId = objLabel + '_' + prop; 
					return function() { 

						if (!logHash[funkId]) { 
							console.log('[DEPRECATION NOTICE] The "' + objLabel+ 
'" global will be removed in version 2.0, please use lowercase "cordova".'); 
							logHash[funkId] = true; 
						}
						oldFunk.apply(obj, arguments); 
					}; 

				})(i); 

			} else { 
				newObj[i] = (function(prop) { return obj[prop]; })(i); 
			} 
		} 
	} 
	return newObj; 
} 

/** 
* Legacy variable for plugin support 
* TODO: remove in 2.0. 
*/ 

if (!window.PhoneGap) { 
	window.PhoneGap = deprecateFunctions(cordova, 'PhoneGap'); 
} 

if (!window.Cordova) { 
	window.Cordova = deprecateFunctions(cordova, 'Cordova'); 
} 

/** 
* Plugins object 
* TODO: remove in 2.0. 
*/ 

if (!window.plugins) { 
	window.plugins = {}; 
} 


위 소스는 cordova-1.8.1.js 에 있는 소스의 일부분이다. 주석에도 보면 알수 있듯이 2.0 부터 삭제된다고 되어있다.

문제가 되는 부분이 이 부분이다.

Sencha 2.0은 window.PhoneGap 객체가 존재할 경우 PhoneGap용 WebView 라고 인식하여,

여러 설정을 브라우저 설정이 아닌 WebView 설정으로 변경한다.

( Sencha 1.1 버전은 이러한 부분이 없다. )

그래서 window.PhoneGap 객체를 생성하지 않는 폰갭 2.0으로 실행할 경우

viewport height 부분이 정상적으로 나오지 않는 문제가 발생하였다.

그래서 아래와 같이 수정하였다.

// sencha-touch.js 중 일부 소스 
if (typeof window.cordova != 'undefined') { 
	isWebView = true; 
	this.setFlag('PhoneGap'); 
}
else if (!!window.isNK) { 
	isWebView = true; 
	this.setFlag('Sencha'); 
} 

// Flag to check if it we are in the WebView 
this.setFlag('WebView', isWebView); 

위와 같이 sencha-touch.js 에서 window.PhoneGap → window.cordova 로 수정하였다.

cordova-2.0.0.js 에는 window.PhoneGap 객체가 없기 때문에 이렇게 수정하게 되면

정상적인 viewport 의 height 를 볼 수 있을 것이다.

< 추가사항 >

sencha는 각 element 에 대해 id 를 부여한다.

id: function(el, prefix) { 
	if (el && el.id) { 
		return el.id; 
	} 
	el = Ext.getDom(el) || {}; 
	if (el === document || el === document.documentElement) { 
		el.id = 'ext-application'; 
	} 
	else if (el === document.body) { 
		el.id = 'ext-viewport'; 
	} 
	else if (el === window) { 
		el.id = 'ext-window'; 
	} 
	el.id = el.id || ((prefix || 'ext-element-') + (++Ext.idSeed)); 
	return el.id; 
}, 

위와 같이 element 의 경우 ext-element- 와 Ext.idSeed 시퀀스로서 id 를 부여하고 있다.

Posted by 초매

댓글을 달아 주세요

  1. 초매 2012.11.13 15:10 신고  댓글주소  수정/삭제  댓글쓰기

    벌써 폰갭은 2.2.0 버전이 나왔네요...
    계속적으로 관심을 가지고 봐야할 Framework 인 듯 합니다...
    이게 아니면 돈 주고 사던지,,, 에스프레소 사용해야 하니까...ㅎㅎㅎ

  2. 미스레드 2012.12.17 22:00  댓글주소  수정/삭제  댓글쓰기

    관리자의 승인을 기다리고 있는 댓글입니다

    • 초매 2012.12.17 23:45 신고  댓글주소  수정/삭제

      웹앱을 개발할 수 있게 하는 프레임웍은 대표적으로 센차와 제이쿼리 모바일이 있습니다. 폰갭은 하이브리드 앱을 만들 수 있는 기술이죠.

      센차는 초기 개발 비용이 많이 들지만, 유지보수 비용이 적은 대신,
      제이쿼리 모바일은 초기 개발 비용이 적게 들지만, 추후 유지보수 비용이 많게 되는 단점이 있죠.

      모두 장단점이 있지만, 하이브리드 앱을 하기 위해서는 폰갭이라는 것을 이용해야 합니다. 하이브리드 앱은 에스프레소, 모피어스, 폰갭 등이 있구요. 자신의 프로젝트에 맞게 사용하면 될듯 하네요..^^

  3. 미스레드 2012.12.22 01:44 신고  댓글주소  수정/삭제  댓글쓰기

    와. 자세한 설명 감사합니다. ㅎㅎ
    비용상의 차이는 몰랐던 부분이네요.