목차

웹 리소스

개요

PhoneGap 프로젝트는 일반적인 웹 리소스 (HTML5, CSS, JavaScript) 등을 활용하여 모바일 하이브리드 APP을 구현하며 해당 웹 리소스는 디바이스의 종류에 상관없이 재활용이 가능하다. 결국 각 환경에 맞는 컨테이너만 (아이폰, 안드로이드 등) 따로 만들고 내부 웹 리소스는 HTML5, JavaScript, CSS 등을 이용하여 동일하게 개발이 가능하다.

주요개념

명칭버전위치(괄호 안 안드로이드 전용)설명
PhoneGap4.3.0(assets/)www/js/egovframework/mbl/cmm/cordova.jsJavascript 객체를 이용하여, Device에 접근이 가능도록 다양한 API를 제공한다. 따라서 Web App을 구성하여, Device 자원에 직접 접근이 가능하다.
EgovHybrid1.0(assets/www/js/egovframework/mbl/cmm/EgovHybrid.js)모바일 전자정부 하이브리드 앱 실행환경 공통 JavaScript 객체 및 함수들이다.
EGovComModuleAPI1.0www/js/egovframework/mbl/cmm/EGovComModule.js모바일 전자정부 하이브리드 앱 실행환경 공통 JavaScript 객체 및 함수들이다.
EgovMobile1.4.5(assets/)www/js/egovframework/mbl/cmm/EgovMobile-1.4.5.js모바일 전자정부 실행환경 공통 JavaScript 함수들이며, actionsheet, alert, overlay, prompt, comfirm dialog 등에도 사용된다.
jQuery1.11.2(assets/)www/js/egovframework/mbl/cmm/jquery-1.11.2.js
(asset/)www/js/egovframework/mbl/cmm/jquery-1.11.2.min.js
웹페이지를 개발 하다보면 동적으로 화면을 컨트롤 하거나 css로 디자인을 변경하고 또는 애니매이션등의 효과를 줘야 할 경우가 많다. 이러한 효과를 저 수준의 자바스크립트로 작성하게 되면 엄청난 코딩 수의 압박으로 만들기도 전부터 걱정이 앞설 것이다. 이러한 모든 작업을 쉽고 빠르게 작업해 줄수 있도록 해주는 것이 jQuery 이다.
jQuery Mobile1.4.5(assets/)www/js/egovframework/mbl/cmm/jquery.mobile-1.4.5.js
(asset/)www/js/egovframework/mbl/cmm/jquery.mobile-1.4.5.min.js
jQuery 모바일은 jQuery상에만든 사용자 인터페이스 프레임워크로, 모바일 디바이스 대상의 어플리케이션을 만드는 과정을 간단하게 하기위한 것이다.
json21.0(assets/)www/js/egovframework/mbl/cmm/json2.jsText형식의 json을 object로, 또는 object 형식의 json을 Text 형식으로 변환하기 위한 javascript이다.
Modernizr2.0.4(assets/)www/js/egovframework/mbl/cmm/modernizr-2.0.4.jsHTML5와 CSS3의 다양한 기능을 지원하는지 확인하는 자바스크립트 라이브러리 이다.

설명

PhoneGap

폰갭은 cordova.js 내의 Javascript 객체를 이용하여, Device에 접근이 가능도록 다양한 API를 제공한다. 따라서 Web App을 구성하여, Device 자원에 직접 접근이 가능하다.

구성설명
Accelerometer장치의 모션 센서를 활용
Camera사진 촬영
Capture미디어 파일을 캡처
Compass나침반 정보
Connection네트워크 상태를 확인, 셀룰러 네트워크 정보를 제공
Contacts주소록 작업
Device장치에 특정 정보 제공
Events자바 스크립트를 통해 기본 이벤트에 후크
File파일 작업
Geolocation위치 정보 제공
Media녹음 및 오디오 재생
Notification알림
Storage저장 공간 정보 제공

자세한 내용은 http://docs.phonegap.com/en/4.0.0/index.html 확인할 수 있다.

EgovHybrid

모바일 전자정부 하이브리드 앱 실행환경 공통 JavaScript 객체 및 함수들이다.

EgovHybrid.js
함수명함수설명
backKeyDownBack key 를 통해 APP 이 종료될 수 있도록 세팅
sleep스크립트 진행을 잠시 멈추기 위한 function
fn_Confirm3GAPP 동작 시 3G 망 일경우 과금 부과 확인 호출
fn_egov_network_check네트웍 이용시 wifi 체크
loadediScroll setting
EgovInterface.prototype.getHttp GET Method function.
EgovInterface.prototype.postHttp POST Method function.
EgovInterface.prototype.geturlGET URL function.
StorageInfoStorgae 정보 조회 플러그인 자바스크립트 객체
DeviceNumberDevice Number 정보 조회 플러그인 자바스크립트 객체

EGovComModuleAPI

모바일 전자정부 하이브리드 앱 실행환경 공통 JavaScript 객체 및 함수들이다.

EGovComMobuleAPI.js
함수명함수설명
EgovInterfaceHttp POST Method function.
StorageInfoStorgae 정보 조회 플러그인 자바스크립트 객체
fn_egov_network_notification디바이스의 네트워크 정보 알림 함수
fn_egov_network_check네트웍 이용시 wifi 체크 함수

EgovMobile-1.4.5

모바일 전자정부 실행환경 공통 JavaScript 함수들이며, actionsheet, alert, overlay, prompt, comfirm dialog 사용된다.
자세한 설명은 https://www.egovframe.go.kr/wiki/doku.php?id=egovframework:mrte:ux_ui:ux_ui_controller_component에서 확인할 수 있다.

jQuery

웹페이지를 개발 하다보면 동적으로 화면을 컨트롤 하거나 css로 디자인을 변경하고 또는 애니매이션등의 효과를 줘야 할 경우가 많다. 이러한 효과를 저 수준의 자바스크립트로 작성하게 되면 엄청난 코딩 수의 압박으로 만들기도 전부터 걱정이 앞설 것이다. 이러한 모든 작업을 쉽고 빠르게 작업해 줄수 있도록 해주는 것이 jQuery 이다.
자세한 설명은 http://docs.jquery.com/Main_Page에서 확인할 수 있다.

jQuery Mobile

jQuery 모바일은 jQuery상에만든 사용자 인터페이스 프레임워크로, 모바일 디바이스 대상의 어플리케이션을 만드는 과정을 간단하게 하기위한 것이다.
자세한 설명은 http://jquerymobile.com/demos/1.4.5/에서 확인할 수 있다.

json2

Text형식의 json을 object로, 또는 object 형식의 json을 Text 형식으로 변환하기 위한 javascript이다.
자세한 설명은 http://www.json.org/js.html에서 확인할 수 있다.

Modernizr

HTML5와 CSS3의 다양한 기능을 지원하는지 확인하는 자바스크립트 라이브러리 이다.
자세한 설명은 http://modernizr.com/docs/에서 확인할 수 있다.

참고자료

명칭링크
모바일 실행환경https://www.egovframe.go.kr/wiki/doku.php?id=egovframework:mrte:ux_ui:ux_ui_controller_component
PhoneGap 4.3.0 Downloadhttp://phonegap.com/download
PhoneGap Developing a Plugin on iOShttp://docs.phonegap.com/en/3.3.0/guide_plugin-development_ios_index.md.html#Developing%20a%20Plugin%20on%20iOS
PhoneGap 4.3.0 Documentshttp://docs.phonegap.com/en/4.0.0/index.html
jQueryhttp://jquery.com
jQuery Mobilehttp://jquerymobile.com
json2http://www.JSON.org
Modernizrhttp://www.modernizr.com