본문 바로가기

프로그래밍 세상/폰갭 이야기

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 를 부여하고 있다.