PhoneGap 코드구성 살펴보기

Posted in 모바일 // Posted at 2010. 7. 13. 15:36
728x90

PhoneGap 개발환경을 구축하고 샘플 프로젝트를 생성하여 시뮬레이터에서 띄워 보았다
또한 이클립스를 이용해 안드로이드 프로젝트로 불러와서 실행해 보았다

자동으로 생성된 샘플 프로젝트이 코드 구조를 대략 살펴 보았다

phonegap.jar 라이브러리
폰갭 프로젝트는 phonegap.jar 라는 압축 형태의 클래스 모음인 라이브러리가 포함된다
안드로이드 프로젝트가 각 버전에 맞는 android.jar 가 필요하듯이 미리 정의된 폰갭 클래스들을
위한 라이브러리가 필요하다



phonegap.jar 에는 com.phonegap 패키지로 묶여 있는 많은 클래스가 정의되어 있다
여기에 폰갭 프로그램 구성을 위한 각종 클래스와 Device 고유 기능을 이용하기 위한
일종의 랩퍼 클래스들이 정의되어 있는 듯 하다

메인 클래스 구성
일반적인 안드로이드 어플리케이션의 경우 메인 클래스는 Activity 로부터 상속받는다
그리고 setContentView 메서드를 통해 View를 Activity 에 바인딩하는 구조이다

하지만 폰갭 어플의 경우 phonegap.jar 에 있는 DroidGap 클래스로부터 상속을 받도록 되어있다
그리고 이 DroidGap 클래스에 정의된 loadUri 메서드를 통해 html과 같은 웹 리소스를 바인딩 하는
구조이다. 다음 코드는 자동으로 생성된 폰갭 프로그램의 메인 클래스 전체 코드이다
라이브러리로 추가된 com.phonegap 패키지를 import 하고 DroidGap를 상속받으며
loadUrl 을 통해 html 파일을 화면에 바인딩하고 있다

package my.phonegap.demo;

import android.app.Activity;
import android.os.Bundle;
import com.phonegap.*;

public class Demo extends DroidGap
{
 @Override
 public void onCreate(Bundle savedInstanceState)
 {
 super.onCreate(savedInstanceState);
 super.loadUrl("file:///android_asset/www/index.html");
 }
}


웹 리소스
폰갭 프로젝트를 만들면 index.html 파일과 css, js 파일 등의 웹 리소스가 자동 생성 되는데,
이 파일들은 프로젝트의 assets 폴더에 위치하게 된다

보통 안드로이드 프로젝트의 경우 assets 폴더의 역할은 컴파일 되지 않는 큰 리소스를 담는 용도이다
프로그램은 코드와 리소스로 구분되는데 리소스는 또 컴파일 되는 경량의 리소스와 원본 그대로 저장하는 큰 리소스로 구분된다

안드로이드 프로젝트이 res 폴더는 경량의 리소스를 위한 폴더이며 assets 는 큰 리소스를 위한 폴더이다. HTML 파일이나 동영상과 같은 큰 데이터를 위한 공간이 assets 인 셈이다

폰갭 프로그램의 사용자 화면에 해당하는 html 파일과 Device 기능 호출을 위한 js 파일 등 웹 리소스가assets 폴더에 위치하고 있다



이후부터는 일반적인 웹 개발을 진행 하듯 웹 리소스들을 추가, 수정 하면 될 듯 하다
물론 폰갭이 제공하는 각종 디바이스 접근 기능을 사용하려면 폰갭 스크립트에 대한 학습이 있어야 할 것 같고...