Sencha + PhoneGap 2.0 시 수정해야할 사항
PhoneGap 2.0.0 이 2012년 7월 20일부로 www.phonegap.com 에서 정식 배포되었다.
폰갭 1.x → 2.0 으로 업그레이드 되면서 Native 및 Javascript 소스 및 사용법이 조금 변경되었으며,
이에 따라 현재 구현되어 있는 프로젝트도 수정이 불가피하게 되었다.
현재 프로젝트에서 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 를 부여하고 있다.