01.모바일 프레임워크 이론

1Page l 1

자 부 모바일 표 임워크

실행 환경(모바일)

2Page l 2

1. 개요

2. 일 어플리케이션

3. 전자정부 일 프 임워크 성

4. Web Resource

5. 일 웹

6. UX Component

7. 일 하이브리드 어플리케이션

8. Device API

목차

3Page l 3

1. 개요모바일 표 임워크 구성

4Page l 4

1. 개요

ü 모바 웹 오픈 스 업그레 드 (UX컴포넌트 upgrade)

ü Device API

• Device API 실행 경 축

–Device API 12 종 제공

– 준패턴 및 가 드 드 제공

• Device API 개발 경 축

–Device API 템플릿 및 프로젝트 생 도 제공

• Device API 가 드 프로그램 축

–Device API 별 가 드 프로그램 제공

ü모바 준프레 워크 축 (모바 웹)

• 모바 웹 실행 경 축

–모바 UX 컴포넌트 (사용 경험 지원 능)

–모바 웹 준패턴 및 가 드 드 제공

• 모바 웹 개발 경 축

–모바 웹 템플릿 및 프로젝트 생 도 제공

• 모바 웹 공통컴포넌트 축

– 존 30종 모바 전 개발, 신규 공통컴포넌트 10종 축

´11.06~´11.11

´12.06~´12.11

모바일 표 임워크 개요

5Page l 5

모바일 3.5 버 업그 이드

q jQueryMobile 1.4.5 환경을 으 일 UX컴포넌트 공통컴포넌트 코드 업 이드

q jQuery.js 전 업 이드 (1.9.1 è 1.11.2)

q jQuery mobile 전 업 이드 (1.3.2 è 1.4.5)

*collapsible Menu삭제 되었습니다.

*$.mobile.showPageLoadingMsgè $.mobile.loading(“show”) 경

*$.mobile.hidePageLoadingMsgè $.mobile.loading(“hide”) 경

q Device API 폰갭(Cordova)

* 폰갭 4.3 적용 (iOS device v3.8, 안드 이드 device v3.7.1)

* 안드 이드 Interface API 최신폰 원

* 아이폰 eGovComModule 64bit CPU 원

* iScroll (4 è 5)

1. 개요

6Page l 6

2. 모바일 어 리 이션

분 일 웹 일 웹앱 하이브리드 앱 네이티브 앱

개요• 일 웹 술 개• 일 브라우저에 의해실행

• 일 웹의 한 형• 앱 형태 Wrapping

• 일 웹 술 개• 네이티브 앱 능 활용

• 플랫폼에 따른 프 래언어 SDK 개

래픽 하 하 상 상

앱스토어판매

불가능 가능 가능 가능

매쉬업 가능 가능 가능 불가능

티플랫폼 용이 용이 용이 어 움

스토리 서 , 클라우드 서 , 클라우드 Local, 서 , 클라우드 Local

디 이스제어

불가능 불가능 용이 용이

모바일 어 리 이션의 종류

q 일 적인 일 어플리케이션의 종류는 일 웹, 하이브리드 앱, 네이티브 앱 등으 분이

가능하다.

7Page l 7

• 일 웹 어플리케이션 개 을 위한 자 스크립트 프 임워크

• 각종 UI 컨트 과 이 트 처리, 애니 이션 효과 자동 내비게이션, Ajax 통신 등 일에 최적화된 능 제공

• 릴리 전 : 1.4.5(2015.06) ( http://jquerymobile.com/ )

• jQuery , Markup

• HTML5, CSS3 원, 다양한 원

• 점 적 향상과 적절한 퇴 원칙 수

• 접근성 향상, 경량의 라이브러리, 다양한 테마, 일에 최적화된 능

• MIT, GPL의 듀얼 라이선스

q 개요

q 특

q 라이선스

2. 모바일 어 리 이션모바일 어 리 이션의 종류 – jQuery mobile

8Page l 8

Hybrid App

Web App Native App

2. 모바일 어 리 이션모바일 어 리 이션의 종류 – Hybrid App

9Page l 9

클로스플랫폼 앱 프레임워크

HTML5HTML5

Mobile Ui Framework

jQuery Mobile

Sencha Touch

Cross PlatformApp FrameworkCross PlatformApp Framework

PhoneGap

Titanium

Appspresso

Web App

HTML + CSS + JavaScript

Native(iOS / Android)

WebView

JavaScriptFramework

Device API

q Native App과 Web App의 각 특성을 아 Hybrid App 등장


Hybrid App

10Page l 10

모바일 어 리 이션 제 – 모바일 웹

http://www.jqmgallery.com/


11Page l 11

모바일 어 리 이션 제 – 모바일 웹앱

조선비즈http://app.chosunbiz.com/plugins/apps/www/i.html?server

_no=2&c=0


BrowserQuest모질라 재단데모게임http://browserquest.mozilla.org/

BananaBread모질라재단

테스트 로젝트https://developer.cdn.mozilla.net/media/uploads/demos/a/z/azakai/3baf4ad7e600cbda06ec46efec5ec3b8/bananabread_1424465008_demo_package/index.

html

3D샘모질라 재단https://developer.mozilla.org/ko/demos/detail/playroom/launch

12Page l 12

• 민원24-아이폰,안드 이드용 Hybrid앱

-건축물대장,토 대장,전입신고,주민등

분실신고, 적서 등 조회

• 예비-나의 훈 정 조회-인터넷 훈 신청-훈 연- 류/해소-예비 훈 장 안내-공 사항 뉴스 제공

• Wunderlist-ToDo 리스트

리 애플리케이션-아이폰, 아이패드,안드 이드, 맥os, windows 전용 앱제공

• 딩얼 인식-촬영된 인물사으 나와 닮은 연예인들을 찾아주는 어플

모바일 어 리 이션 제 – 하이 리드 어 리 이션 2. 모바일 어 리 이션

* 폰갭 샘 앱은 폰갭(코도바)사이트에서 각 OS별로 확인가능http://phonegap.com/app/

13Page l 13

3. 자 부 모바일 표 임워크 구성모바일 표 임워크 개요

q 전자정부 일 프 임워크는 일 웹 개 을 위한 실행환경, 개 환경, 공통컴포넌트

하이브리드 어플리케이션 개 을 위한 실행환경, 개 환경, 가이드 프 램을 제공한다.

자 부표 임워크 3.2

업그 이드 및 경량화

실행환경

개발환경

공통컴포넌트

자 부표 임워크 3.5의

구성개념

배치실행

배치개발

배치운

모바일 실행환경

모바일 개발환경

모바일 공통컴포넌트

모바일 웹

모바일 바이스 API

실행환경


모바일 개발환경




모바일표 임워크

자 부 표 임워크 3.5

14Page l 14

3. 자 부 모바일 표 임워크 구성모바일 표 임워크 구성

q 전자정부 일 프 임워크의 상세 성은 다음과 같다.

분 환경 설

일 웹

실행 환경• 일 웹 어플리케이션 개 을 위한 JS, CSS 등 라이브러리 제공• 일 사용자 경험 개

- 일 스마트폰 사용자들의 디 이스 터치 의 사용자 경험 능 제공

일 공통 컴포넌트

• 존 공통컴포넌트를 일 웹 환경에 적합하게 전환- 웹 공통컴포넌트 250종 게시판, 행사 리, 온라인 참여 등

• 일 신 공통컴포넌트 축- 위치 정 연계 등 HTML5 술 적용

개 환경

• 일 웹 개 을 위한 소스코드 제공 능• 웹 적합성 검 도 연계• 일 웹 템플릿 사이트 생성 도

- 유형 일 사이트 템플릿 개 코드를 생성하는 적용 도 개

디 이스 API

실행 환경

• 전자정부 일 하이브리드 어플리케이션 개 프 임워크 라이브러리 제공- Open Source(PhoneGap) 적용- 코드 하이브리드 앱 샘플 템플릿 제공

• Device API 개

일 디 이스 API가이드 프 램

• 일 하이브리드 어플리케이션 개 시 가이드 재사용을 위한 디 이스 API 가이드프 램 제공- 12종의 디 이스 API 가이드 하이브리드 앱 개- 디 이스 API 가이드 하이브리드 앱과 통신을 위한

전자정부 프 임워크 웹 서 어플리케이션 개

개 환경 • 플랫폼 하이브리드 앱 개 템플릿 프 젝트 생성 플러 인 현

15Page l 15

개요

• HTML(Hyper Text Markup Language)의 최신 전.

(현재 가장 널리 사용되고 있는 전은? HTML4.01 )

• 웹 브라우저간 호환성이 낮음

• 문서 내에 포함된 ‘의미’ 가 불 확함.

• 웹 어플리케이션 능이 제한됨.

• 웹 술의 , 시장의 요

• 일 시장의 확대

• 클 스 플랫폼 원, 웹 술의 강점

→ 웹 브라우저간 호환성을 높임!

→ Rich한 웹 어플리케이션 개 능 강화.

→ 문서 내에 포함된 ‘의미’ 를 확하게 함.

… 라고는 하 만 HTML5라고 불리는 술은 실제 HTML과 접적인계가 없는 JavaScript API를 포함하는 것이 일 적임

HTML5 = HTML + JavaScript + CSS

• ‘오픈된 을 으 한 웹 어플리케이션 축 플랫폼’

- 티미디어 어플리케이션 축을 위한 능 강화

HTML 4.01

4. HTML5

Ø HTML5 란?

Ø HTML5이 해결하 는 웹의 문제점

Ø HTML5 인가?

16Page l 16

HTML5 역사

• 1993.03 HTML 1.0 팀 너스리(CERN)가 개 화 제안

• 1995.11 HTML 2.0

• 1996.04 HTML 3.0

• 1997.01 HTML 3.2

• 1997.12 HTML 4.0

• 1999.12 HTML 4.01 현재의 HTML

• 2000.01 XHTML 1.0 HTML + XML

• 2001.05 XHTML 1.1

• 2006.07 XHTML 2.0

• 2004. WHATWG 족 (Web Hypertext Application Technology Working Group)

WHATWG

• 2007. W3C에서 HTML5 채택

• 2009. HTML5 Last Call

• 2011.05 HTML5 Last Call Finish

• 2014.10 HTML5 안 확정 ( 2014.10.28 W3C Recommendation )

4. HTML5

Ø HTML5 역사

17Page l 17

HTML5 범

웹 술을 ‘HTML5’ 위

HTML5

DOM

HTML 문

windows object

……

JavaScript API

Web Storage

Web Socket

Indexed DB

……

CSS3

Transition

Animation

Transform

……

etc…

SVG

MathML

WebGL

……

4. HTML5

18Page l 18

• 마크업 화

- <doctype> 정의, 문자 인코딩 화

• 새 운 태 추가

- <nav>, <section>, <article>, <aside> 등

• 새 운 Form 요소 추가

- input type : range, calendar 등

• 웹 브라우저 티미디어 요소 원

- <video>, <audio>, <canvas>

• 새 운 HTML5 JavaScript API 추가

- Canvas, Video, Web Storage, Geolocation API 등

변경사항 4. HTML5

Ø HTML5 경사항

19Page l 19

기본 마크업 변화

<!DOCTYPE HTML><html><head><meta charset=”utf-8”><title>foo</title></head>...

<script src=”foo.js”></script>

<link href=”foo.css”></link>

4. HTML5

Ø Less Header Code Ø No need for type attribute

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html><head>

<title>foo</title></head>...

<script type=“javascript” src=”foo.js”></script>

<link rel=“css” href=”foo.css”></link>

<이전 전>

<HTML5 전>

20Page l 20

Semantic Structure Elements

<body><h1>Apples</h1><p>Apples are fruit.</p>

<section><h2>Taste</h2><p>They taste lovely.</p><section><h3>Sweet</h3><p>Red apples are sweeter</p></section>

</section><section>

<h2>Color</h2><p>Apples come in various colors.</p>

</section></body>

4. HTML5

Ø More Semantic HTML tags Ø Example

q HTML5는 시맨틱 웹과 나은 문서 조를 향한다.

21Page l 21

HTML5 = HTML + JS + CSS3

q (https://github.com/html5rocks/slides.html5rocks.com) 접속

q 우측 하단 Download ZIP 클릭!

q 탕화 저장 압축

q HTML5 파일 실행(Chrome실행)

<다운 드 화 > <압축 후 화 > <실행 화 >

4. HTML5

22Page l 22

Form

<input type=“email” />

tel, datetime, search, date, email, range, url, color

<input type=“file” multiple />

autocomplete, autofocus, list, multiple, pattern, placeholder, required

<output name="result"></output> <progress id="p" max=100><span>0</span>%</progress>

Datalist, Keygen, Output, Progress, meta

4. HTML5

Ø Input Types

Ø Attributes

Ø Elements

23Page l 23

Media & Canvas Example

<video src=” cat.ogg” />

<video src=”cat.ogg” controls />

<video controls/><source src=”cat.mp4” /><source src=”cat.ogg” />

</video>

<audio src=”test.ogg”></audio>

<audio src=”test.ogg” autoplay controls loop><a href=”test.ogg”>download</a>

</audio>

<canvas id=”square”>fallback content

</canvas>

<script>canvas = canvas.getElementById(‘square’);context = canvas.getContext(‘2d’);context.fillStyle = “#000000”;con text.fillRect(0, 0, 100, 100);

</script>

웹그림판 : http://mudcu.be/sketchpad/

4. HTML5

Ø Media Tags Ø Canvas

q HTML5 Canvas란 자 스크립트를 이용하여 웹페이 에 동작인 2비트맵 이미 를 릴 수 있다

24Page l 24

Graphics & Multimedia

Canvas(http://www.canvasdemos.com/2010/

02/12/sketchpad/.)

Video (http://www.apple.com/html5/sh

owcase/video/,)

4. HTML5

q HTML5는 래픽 활용을 위한 Canvas와 동영상 오디오 활용을 위한 Audio & Video 가 포함

된다.

25Page l 25

• Device API (Web-based)

• Realtime Communication

- Web Workers : 비동 처리

- Web Socket : 실시간 통신

- Server-send events : Push 능

• Offline & Storage & Database

- Local Storage : cookie의 확장

- Web SQL Database & IndexedDB

- Application Cache : offline 처리

• Geolocation

• Drag & Drop API

• ……

JavaScript APIs

Server-sent events

Geolocation(http://htmlfive.appspot.com/static/wher

eami.html)

4. HTML5

Ø JavaScript APIs

26Page l 26

JavaScript API

var ws = new WebSocket("ws://hostname:80/");ws.onmessage = function (event) {

event.data};ws.onclose = function () {};ws.onopen = function () {};

new Worker("worker.js");

- terminate()- postMessage()- onMessage- onError• Chatting

• Messenger

• Server Push

Client Browser

Server

WS Port

80 Web Server

WebSocket API

WebSocket Server

①

③

②

• 현재 브라우저는 하나의 쓰 드 실행

• JavaScript를 라운드에서 실행시키는 술

• JavaScript 이미 더링 등에 사용

• 브라우저와 서 간에 양 향 Socket 통신

4. HTML5

Ø Web Sockets Ø Web Worker

27Page l 27

JavaScript API

sessionStorage.setItem(key, value);sessionStorage.getItem(key);

localStorage.setItem(key, value);localStorage.key = value;localStorage[key] = value;

localStorage.getItem(key);localStorage.key;localStorage[key];

• 클라이언트의 디스크에 데이터를 저장하는 API

• 도 인 리, 세션단위 리

• 객체 저장 가능, 유효 간 없음

• 비 적 큰 용량 저장

• DB를 사용할 수 있음

• SQL 이슈

• DB 생성 핸들링 가능

• JavaScript를 통해 사용

• Geolocation Api는 디 이스의 위치정 를 얻는

API

• Widow,navigation 객체 부터 정 를 얻음

4. HTML5

Ø Web Storage Ø Web SQL Database

Ø IndexedDB

Ø Application Cache

Ø Geolocation

28Page l 28

• Cascading Style Sheet의 최신 전.

(현재 가장 널리 사용되고 있는 전은? )

• 마크업 언어가 실제 시(디자인)되는 을 술하는 언어

• W3C

• 화 한 화 성 – 다양한 화 성 속성 추가 Animation 효과 추가

• CSS3의 이미 대체 – 화 한 폰트, 라데이션 효과, 테이블 서리의 둥근 효과

• 간결한 소스코드(CSS2.1 -> CSS3) – 디 이스 특 에 따른 화 성

• Media Query 가능 – 디 이스 특 에 따른 화 성 가능

CSS3 ?

CSS 2.1

4. HTML5

Ø CSS 란?

Ø CSS 특

29Page l 29

CSS역사

• 1996.12 CSS1 Recommendation

• 1998.05 CSS2 Recommendation

• 2005.07 CSS2.1 Proposed Recommendation

• 2005.12 ~ CSS3 행 (2011년~2013년 확장된 정의에대한 확정안 존재)

Working Drafts Last Call(최종 초안)

Candidate Recommendation( 고안)

Proposed Recommendation( 고 후 )

Recommendation( 고)

Working Drafts (초안)

4. HTML5

Ø CSS 의 역사

* 모질라 재단 자료https://developer.mozilla.org/ko/docs/Web/CSS/CSS3

30Page l 30

CSS3?

http://www.westciv.com/tools/3Dtransforms/index.html http://thewebrocks.com/demos/3D-css-tester/

4. HTML5

Ø text-shadow, border-radius, box-shadow 등 래픽 요소 추가

Ø Animation, transition, transform

Ø Web Fonts - @font-face 사용

q CSS3에서 Animation, transition, transform, Web Font 등 새 운 술이 추가되었다

31Page l 31

HTML5 지원 황

• Chrome > Safari > Android > UC Browser > … • Android > Chrome > Safari >…

• iOS3+, Android2+, RIM OS6+, palm webOS 1.4+, WM7 20113Q, IE9+, FF3+, Chrome6+, Safari4+, Opera10+

4. HTML5

Ø HTML5 주요 스팩 원 브라우저

Ø World Mobile Browser (2014 ~ 2015) Ø Korea Mobile Browser (2014 ~ 2015)

참고사이트http://gs.statcounter.com/?PHPSESSID=brji2e10i125oqi1cv4nf5jhb3

32Page l 32

HTML5 지원 황

• PC (Desktop)

- IE 10 전 이후 원

- Windows XP OS에서 IE 브라우저 원 불가(IE7~8 불가) : 크 ,파이어폭스등 다른 브라우저는 가능

- IE9이하 원 불가

- 윈10 탑재＂마이크 소프트 엣 “ : 브라우저 자체적으 플래시와pdf 내장!!

=> 액티브X 사용 불가

• Mac OSX

- Safari 브라우저 존 원

- 크 , 파이어폭스 등 두 원가능

• Linux (Ubuntu CentOS 등)

- 크 브라우저 파이어폭스 브라우저 원

• 일 OS

- iOS 안드 이드 원

- 플래시 사용불가 (한정된 자원)

• TV 타 Embeded환경에서 브라우저 : 현재 사용 !!

è 도우 XP에서 IE 7,8버 불가

4. HTML5

Ø HTML5 원현황

33Page l 33

개요

q 전자정부 일 프 임워크 실행환경의 사용자 경험(UX) 원 능은 스마트 디 이스 에서

의 사용자 터치 화 처리 능, 개 도 일 UX 컴포넌트를 제공한다.

5. 모바일 웹

34Page l 34

5. 모바일 웹

q 일 전자정부 프 임워크의 실행환경은 UX 이어를 통해 이 어 화 처리 이어

업무처리 이어와의 상호작용을 통하여 이 어 다.

성요소 설

Presentation Layer업무 프 램과 사용자 간의 Interface를 담당하는 Layer 서, 사용자 화 성, 사용자 입 정 검 등의

능을 원함

UX Layer일 웹 애플리케이션 적용 시 업무 프 램과 사용자간의 interface를 담당하는 Layer 서, UI/ UI Controller

Component , JavaScript Module App Framework 등을 원함

(Business Logic Layer 업무 프 램의 업무 을 담당하는 Layer 서, 업무흐름 제어, 트랜잭션 리, 에러 처리 등의 능을 원함

Persistence Layer 업무 프 램에서 사용하는 데이터에 대한 CRUD 능을 원함

Integration Layer 타 시스템과의 연동 능을 원함

Foundation Layer 실행 환경의 각 Layer에서 공통적으 사용하는 공통 능을 원함

모바일 웹 구성

35Page l 35

5. 모바일 웹

q 전자정부 일 프 임워크 실행환경은 존 전자정부 프 임워크의 디 터리 조

을 수하고 있으 , 일 웹 개 을 위해 하위 디 터리 조를 다음과 같이 성하고 있다.

§ 프 젝트의 하위 폴더인 ‘src’ 에 실행환경을 원하는 라이브러리 JSP 파일이 존재한다.

라이브러리는 CSS, JavaScript 이미 파일 성되어 있다.

터리 구조 (1/2)

실행환경라이브러리

36Page l 36

5. 모바일 웹

Ø CSS Ø JavaScript Ø image

Jquerymobile 에서 제공하는 CSS

프 임워크를 통해 커스터마이 된

CSS(EgovMobile)를 이용하여 UX

컴포넌트의 색상, 치,테마 등을 정의

q 전자정부 일 프 임워크는 CSS JavaScript를 이용하여 실행환경을 제공하 CSS ,

javascript, image는 각각 유 적으 연결되어있다.

q 실행환경 라이브러리 성

Jquerymobile 에서 제공하는 javascipt


javascipt(EgovMobile)를 이용하여 jsp

css와의 연동 화 전환, Ajax 통신

등의 능 제공

Jquerymobile 에서 제공하는 image


image를 이용하여 주 icon 무늬에

대한 이미 가 정의

터리 구조 (2/2)

37Page l 37

페이지 구조 (1/5)

q 일 웹 현을 위한 페이 는 HTML5 을 수하고 있으 , 화 성을 위한 JS CSS 등

을 임포트 하여 작성된다.

q 전자정부 일 프 임워크 실행환경을 성하 위해서는 파일의 <head>영역에 라이

브러리를 적용한다.

Ø Header 영역

<!DOCTYPE html><html>

<head><title>eGovFrame Mobile</title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/><link rel="stylesheet" href="/css/egovframework/mbl/cmm/jquery.mobile-1.4.5.css" /><link rel="stylesheet" href="/css/egovframework/mbl/cmm/EgovMobile-1.4.5.css" /><script type="text/javascript" src="/js/egovframework/mbl/cmm/jquery-1.11.2.min.js"></script><script type="text/javascript" src="/js/egovframework/mbl/cmm/jquery.mobile-1.4.5.min.js"></script><script type="text/javascript" src="/js/egovframework/mbl/cmm/EgovMobile-1.4.5.js"></script>

</head><body>

...</body>

</html>

5. 모바일 웹

38Page l 38

q <body> 영역은 ‘data-role’ 속성에 적용된 값에 따라 Page, Header, Content, Footer 영역으

분된다.

header 영역data-role=“header”

content 영역data-role=“content”

footer 영역data-role=“footer”

§ Header bar는 좌우에

튼 헤더제 틀 넣을 수

있다.

§ Footer bar는 브라우저

하단에 위치하 튼,

탭, 링크 등 컴포넌트 요

소 등을 넣을 수 있다.

§ Content는

UX Component를

이용하여 성 할 수 있다.

Page 영역data-role=“page”

§ Page는 Header Footer bar

Content를 포함 하고 있으

Header /Footer bar와 Content

와 달리 드시 필요한 요소 이

다.

§ Page 컴포넌트의 능을 이용

하 Page간 전환을 할 수 있

다.

페이지 구조 (2/5) 5. 모바일 웹

39Page l 39


q 각 페이 단위의 일 적인 조는 다음과 같이 분된다.

Ø Body 영역

<div data-role="page">

<div data-role="header">

<h1>Header Title</h1></div><div data-role="content">

<p>전자정부 일 프 임워크Default Page 화 입니다.</p>

</div><div data-role="footer“>

<h4>Footer Title</h4></div>

</div>

Ø 실행 화

5. 모바일 웹

40Page l 40


q 각 페이 Theme를 적용하여 해당 페이 영역에 공통색상 적용이 가능하다.

§ Theme 능을 이용하여 하위 의 색상을 경할 수 있다. 테마 경 최상위 Tag는 <data-role="page"> 이

경시 page 하위의 Header, Footer, Panel, UX Component의 색상이 한다.

§ 테마를 적용할 최상위 div Tag에 data-theme="[a~g]"를 추가한다. 테마를 적용 할 경우 하위 컴포넌트들의 색

상이 일 형된다.

5. 모바일 웹

41Page l 41


q Theme는 페이 뿐만 아니라 든 독립 컴포넌트에 적용이 가능하다

§ 상위 컴포넌트와 독립적으 하위 컴포넌트에 테마를 정할 수 있으 해당 컴포넌트에 data-

theme=“[a~g]” 속성을 추가하여 원하는 테마를 개 적으 적용할 수 있다.

5. 모바일 웹

42Page l 42

모바일 실행환경 가이드 3.5 실습

q 인터넷 가능 환경

– 프 임워크 포탈 제공 : http://m.egovframe.go.kr/mguide3.5/

q 육 재

– Eclipse 실행

– 프 젝트 lab401-mobile-guide-3.5 실행

– Run on Server

– Chrome 브라우저 실행

5. 모바일 웹

43Page l 43

페이지 이동 (1/2)

q 일 페이 이동은 적으 Ajax 를 이용하여 처리 된다. 이는 일에 최적화된 화 전환

효과를 주 위함으 옵션 설정을 통해 경 가능하다.

q 페이 내부 이동

§ 하나의 HTML 파일 안에 여러 page 가 선언 되어 있는 경우에 사용 할 수 있는 으 일 page 성의

식이다. 페이 내부 이동은 Ajax 통신을 사용하 page 선언된 div 태 의 id 값을 링크의 href 속성 값

(#pageId)으 적용하여 사용 가능하다. (한 HTML 내에 여러 page가 선언 되어 있을 경우 제일 상단의 page를 첫

화 으 인식 한다.)

§페이 내부 이동은 Ajax 식을 으 하 때문에 연속적으 여러 사용하 DOM 객체를 제대 불러 올 경우가 있으므 외부 페이 이동으

장한다.

<div id="main" data-role="page">

<a href="#view" data-role="button"> 쓰 </a><p>Main Page 입니다.</p>

</div>

<div id="view" data-role="page">

<p>상세 페이 </p></div>

<div id=“main” data-role=“page”>

<div id=“view” data-role=“page”>

<a href=“#view “>

내부링크

5. 모바일 웹

44Page l 44

페이지 이동 (2/2)

q 페이 외부 이동

§ 페이 외부 이동은 Ajax 통신을 이용하 Ajax 호출한 html 의 data-role=“page” 영역만 읽어 들여서 호출

한 html 페이 의 DOM 요소에 추가 해 다. (페이 내부 이동과 유사 한 조 DOM 리)

- Ajax 호출된 HTML의 page 영역만 가져 오 때문에 호출된 페이 에서 사용하는 JavaScript, CSS 등은 호출을 한 HTML내

에 존재 해야 한다.

- Ajax 통신을 사용하고 싶 않은 경우 Internal / External UX Component를 참조하여 경 가능하다.

main.jsp<div id="main" data-role="page">

<a href="create.html" data-role="button"> 쓰 </a><p>Main Page 입니다.</p>

</div>

create.jsp<div id="create" data-role="page">

<p> 쓰 페이 </p></div>

<script><link rel="stylesheet“ …>

<div id="main" data-role="page">

<link rel="stylesheet“ …>

<div id="create“data-role="page">

<a href=“create.jsp“>

main.jsp create.jsp

페이 외부 링크

참조 참조X

5. 모바일 웹

45Page l 45

API (1/7)

q pageinit 이 트와 환경 설정

§ 일 어플리케이션이 시작 될 때 각종 초 화 작업이 수행 될 수 있도 pageinit 이 트를 통하여 환

경 설정을 경할 수 있도 한다.

§ pageinit 이 트는 page가 시작되자마자 생하는 이 트 첫 초 화 작업 시 실행되 , 함수 내부에

여러 이 트를 적용하여 사용 할 수 있다.

$(document).on("pageinit ", function(){

//apply overrides here

});

§ pageinit 이 트는 실행 시 생 하므 jquerymoible.js가 드 되 전에 인딩 되어야 한다. 다시 말해

pageinit 이 트의 위치는 jquery 라이브러리와 jquerymobile 라이브러리 사이에 위치 해야 한다.

<script src="jquery.js"></script>

<script src="custom-scripting.js"></script>

<script src="jquery-mobile.js"></script>

5. 모바일 웹

46Page l 46

API (2/7)

q pageinit 이 트와 환경 설정

§ 환경설정을 경하는 에는 $.extend 소드를 이용하여 여러 속성을 한 에 경하거나 .mobile 객

체를 사용하여 개 적으 경하는 이 있다.

§ $.mobile 객체를 통해 재설정이 가능한 주요 환경설정:

환경설정 설

loadingMessage (string, default: "loading")페이 가 딩될 때 나타나는 텍스트를 설정한다. ‘false’ 설정하 딩

시 가 나타나 않는다.

pageLoadErrorMessage (string, default: "Error Loading Page")Ajax 식의 페이 이동에서 페이 를 드하 했을 경우 나타나는 에러 시 의 텍스트를 설정한다.

defaultDialogTransition (string, default: 'pop')다이얼 에서 Ajax 식을 통한 페이 전환에 여하는 환경설정을 경한다. defaultDialogTransition 옵션을 ‘none’으 설정하 화 전환 효과가 적용되 않는다.

defaultPageTransition (string, default: ‘fade')Ajax 식을 사용하는 페이 전환에 여하는 환경설정을 경한다. defaultPageTransition 옵션을 ‘none’으 설정하 화 전환 효과가 적용되 않는다.

ajaxEnabled (boolean, default: true)든 링크 이동이나 폼 전송은 적으 Ajax 식을 으 하고 있다.

Ajax가 아니라 일 식으 페이 이동을 처리하고 싶다 이 값을‘false’ 정한다.

5. 모바일 웹

47Page l 47

API (3/7)

q 이 트

§ 전자정부 일 프 임워크는 스마트 일 환경에 적합한 이 트를 선 하여 제공한다. Touch,

Mouse, Window 영역의 다양한 이 트를 원가능 여부에 따라 선택적으 이용하 때문에 일 환경과

데스크톱(Desktop) 환경 두에서 사용 가능하다. live() 또는 bind() 소드를 이용하여 여러 이 트를 함 사

용 할 수 있다.

§ 원 터치 이 트:

터치 이 트 설

tap Touch 가 감 되 시 생하는 이 트이다.

taphold tap을 일정 시간 이상 속했을 때 생하는 이 트이다.

swipe 30pixel 이상의 수평 향이나 20pixel 이상의 수 향으 드래 (drag)되 생하는 이 트이다.

swipeleft swipe 이 트가 왼쪽으 일어났을 때 생하는 이 트이다.

swiperight swipe 이 트가 오른쪽으 일어났을 때 생하는 이 트이다.

5. 모바일 웹

48Page l 48

API (4/7)

q 이 트

§ 원 화 향 전환 스크 이 트:

§ 원 페이 이 트:

화 향 전환 스크 이 트 설

orientationChange의 향이 수평 또는 수 으 뀌었을 때 생하는 이 트이다. orientationChange 이

트가 원되 않을 경우에는 resize 이 트가 자동으 bind 된다.

scrollstart스크 (scroll)이 시작되 생하는 이 트이다. (iOS 는 스크 에는 DOM 을 경하않고 queue 에 저장해두었다가 스크 이 끝난 후에 경한다.)

scrollstop 스크 이 끝나 생하는 이 트이다.

페이 이 트 설

pagebeforecreate페이 가 초 화되 전에 생하 페이 딩 시 가장 저 생하는 이 트이다. 페이 생성 시에만이 트가 생한다.

pagecreate 페이 초 화가 끝나 생하는 이 트이다. 페이 생성이 완 된 시점에만 이 트가 생한다.

pagebeforeshow 화 전환이 일어나 전, 페이 가 여 전에 매 생하는 이 트이다.

pageshow 화 전환이 완 되었거나 페이 가 여 후에 매 생하는 이 트이다.

pagebeforehide 화 전환이 일어나 전, 페이 가 숨겨 전에 매 생하는 이 트이다.

pagehide 화 전환이 완 되었거나 페이 가 가 후에 매 생하는 이 트이다.

5. 모바일 웹

49Page l 49

API (5/7)

q 이 트

페이 이 트 설

pagebeforeload 페이 딩이 일어나 전에 생하는 이 트이다.

pageload 페이 딩이 성공한 경우(DOM에 정상적으 통합된 경우) 에 생하는 이 트이다.

pageloadfailed 페이 딩이 실패한 경우(DOM에 정상적으 통합되 한 경우) 에 생하는 이 트이다.

pagebeforechange 대상 페이 이동하는 애니 이션이 여 전에 생하는 이 트이다.

pagechange대상 페이 가 정상적으 딩된 후에 애니 이션을 포함한 페이 이동 정상적으 완 된 경우 생하는 이 트이다.

pagechangefailed 대상 페이 를 딩하 했거나 페이 이동이 정상적으 완 되 않았을 때 생하는 이 트이다.

pageinit페이 초 화가 완 된 이후(DOM객체가 생성된 후 든 요소들의 스타일이 적용된 이후)에 생하는 이트이다.

pageremove페이 의 링크 태 에 external-page=“true” 속성을 추가함으 서, 외부페이 이동 후 다시 돌아올 때 외부페이 가 제거되 서 이 트가 생한다.

5. 모바일 웹

50Page l 50

API (6/7)

q 이 트

§ Virtual Mouse event

Virtual Mouse 이 트 설

vmouseover 터치 이 트 또는 mouseover가 생할 때 나타나는 이 트이다.

vmousedown 터치 이 트 또는 mousedown이 생할 때 나타나는 이 트이다.

vmousemove 터치 이 트 또는 mousemove가 생할 때 나타나는 이 트이다.

vmouseup 터치 이 트 또는 mouseup이 생할 때 나타나는 이 트이다.

vclick 터치 이 트 또는 click이 생할 때 나타나는 이 트이다.

vmousecancel 터치 이 트 또는 mousecancel가 생할 때 나타나는 이 트이다..

vmouseout 터치 이 트 또는 mouseout이 생할 때 나타나는 이 트이다.

5. 모바일 웹

51Page l 51

API (7/7)

q 소드 & 유틸리티

§ 전자정부 일 프 임워크는 $.mobile 객체에 대한 소드와 속성들 (properties) 을 제공한다.

§ $.mobile 객체는 페이 정 를 제공하거나, 페이 전환을 제어하는 것이 주요한 능이고, 페이 제어 또는

스크 제어 등의 을 제공한다.

§ 주요 소드:

소드 설

$.mobile.changePage (method)프 램 코드 상에서 페이 를 이동할 수 있도 원하는 소드이다. 주 화 전환, 페이딩 등의 능이 가능한 환경에서 링크 클릭이나 폼 전송을 할 때 내부적으 사용된다.

$.mobile.loadPage (method)외부 페이 를 드하고,DOM에 추가한다. 이 소드는 첫 인자 URL이 올 때 changePage() 함수를 통해 내부적으 호출된다. 이 함수는 현재 활성화된 페이 에는 영향을 주 않고, 라운드에서 페이 를 드 할 때 사용된다.

$.mobile.showPageLoadingMsg ()-> $.mobile.loading(“show”) 경

페이 딩 시 를 여 다.

$.mobile.hidePageLoadingMsg ()->$.mobile.loading(“hide”)

페이 딩 시 를 숨 다.

5. 모바일 웹

52Page l 52

q 일 신 공통컴포넌트 10종

§ 일 정 시스템 축 시 공통 활용 재사용이 가능하도 화 , DB, 등을 포함한

능위주의 10종을 현


분 공통컴포넌트

일

신 공통컴포넌트

(10종)

협업

실시간 공 서비스

동 화 서비스

오프라인 웹 서비스

일 식

위치정 연계

시스템/서비스 연계OPEN-API 연계 서비스

MMS 서비스 연계

디 털 자산 리

일 차트/ 래프

일 사 앨

티미디어 제어

5. 모바일 웹

53Page l 53

q 일 전환 공통컴포넌트 30종

§ 일 정 시스템 축 시 공통 활용 재사용이 가능하도 화 , DB, 등을 포함한

능위주의 30종을 현


분 공통컴포넌트

일

전환 컴포넌트

(30종)

사용자 디 토리/통

합인 (1종)사용자 통합인 일 인

협업(14종)

게시판 게시판, 공 사항, 유효게시판, 익 게시판, 댓 , 스크랩 능

동호회 커뮤니티, 커뮤니티 , 커뮤니티 사 첩

일정 리 부서일정 리, 일정 리, 일 리, 전체일정

주소 / 함 주소

사용자 원(15종)

약 리 약 리

온라인 참여 상담 리, 설문조사, 온라인 POLL

온라인 헬프 도움말, 용어사전, FAQ, Q&A, 행정전문용어사전, 온라인 매뉴얼

정 제공/알림 뉴스, 사이트맵, 추천사이트, 행사/이 트/캠페인

개인화 마이페이

5. 모바일 웹

54Page l 54

개요

q UX Component 개요

NO. UX Component 설

1 Button 수행, 옵션 선택, 다른 대화 상자 열 등에 사용하는 컴포넌트 제공

2 Panel Header/Footer 와 함 페이 를 성하는 요소

3 Panel Widget 뉴 또는 collapsible columns 을 쉽게 만들 수 있게 제공되는 요소

4 Internal / External Link 링크 능을 제공 하 적으 Ajax 를 사용한 링크 식 제공

5 Label / Text 꼴, 색상, 치를 정 할 수 있는 가이드 제공

6 Tabs Header와 Footer 에 사용되 탭 튼으 문서간 이동 능 제공

7 Form HTML Form 요소를 일 환경에 최적화하여 제공

8 Menu Dialog, Grid, List, Collapsible 컴포넌트를 사용하여 뉴 성 능 제공

9 Loader Widget 페이 전환간 행 상태를 확인 할 수 있는 Loader Widget 제공

10 Dialog 사용자와 상호 작용 할 수 있는 Dialog 능을 제공

11 Grid View Grid 형태 콘텐츠를 치 할 수 있는 컴포넌트 제공

12 Table / List View Table 형태 콘텐츠를 치 할 수 있는 컴포넌트 제공

13 Check / Radio Check / Radio 형태 항 을 선택할 수 있는 능을 제공

14 Icon 일 어플리케이션에 가장 많이 사용되는 아이콘을 제공

15 Selector / Switch Selector / Switch 형태 항 을 선택 할 수 있는 능을 제공

16 Collapsible Block 콘텐츠 영역을 접었다 펼 수 있는 컨트 능 제공

17 Popup Widget DIV 영역으 작성 된 팝업 컨텐츠를 팝업 형태 출 할 수 있는 능을 제공

6. UX Component

55Page l 55

Button

q 튼은 핵심적인 위젯으 서 여러 플러 인에서 위하게 사용된다.

q Anchor 링크에 data-role="button" 속성을 추가하 전자정부 일 프 임워크에서 제공하

는 튼의 스타일을 적용할 수 있다.

q 코드

<a href="#" data-role="button">Button</a>

컴포넌트 제공 기능 그래픽 레이아웃

Button

설명명령 수행, 옵션 선택, 다른 대화 상자 열기 등에사용하는 컴포넌트 제공

형태 (2종) 둥근 형(radius: 16px), 사각형(radius: 0px)

배치 (2종) vertical group, horizontal group

색상 (7종) 검정, 파랑, 회색, 흰색, 노랑, 빨강, 초록

높이 (2종) normal(39px), small (28px)

넓이 (2종) 화면에 맞게 , 텍스트에 맞게

그림자(2종) 포함, 미포함

6. UX Component

56Page l 56

Panel

q Panel은 Header/Footer bar와 함 페이 를 성하는 요소이다.

q Panel의 코드는 <div class="ui-body-[a~g]">를 사용하 a~g는 Panel 의 색상 경을 원

한다.

q 코드

<div class="ui-body-c center"><h4>Panel</h4></div>


Panel

설명Header/footer 와 함께 페이지를 구성하는 요소

무늬 격자 형태 무늬 제공


6. UX Component

57Page l 57

Panel Widget

q Panels widget은 data-role="panel“ 정의된 영역을 페이 내에서 호출하여 쉽게 뉴 또는

Collapsible 영역 등을 성할 수 있도 해주는 요소이다

q 코드

<div data-role="page">

<div role="main" class="ui-content">

<a href="#defaultpanel" data-role="button"

data-inline="true" data-icon="bars">

Default panel</a>

</div>

<div data-role="panel" id="mypanel">



<h3>Default panel example</h3>

<a href="#demo-links" data-rel="close" data-role="button"

data-theme="a" data-icon="delete" data-inline="true">Close panel</a>

</div>

</div>

6. UX Component

58Page l 58

Internal / External Link

q 전자정부 일 프 임워크는 HTML의 든 링크를 원하 적으 Ajax 식을

이용하여 페이 를 전환한다.

q HTML의 Anchor 태 를 이용하여 링크 능을 사용할 수 있다.

q 코드

<a href="#Two">페이 내부 링크</a>

<a href="/guide/guide.do">도 인 내부 링크</a>

<a href="http://www.egovframe.go.kr">외부 링크</a>


Internal/External

Link

설명표준 링크 기능을 제공 하며 기본적으로 Ajax 를

사용한 링크 방식 제공

링크 (6종)Page link internal, Domain link internal, Link external, Email links, Phone links, Error page

6. UX Component

59Page l 59

Label / Text

q Label / Text 는 HTML 의 <h1>, <p> Tag 를 사용하 CSS 정의하여 색상, 치, 크 , 폰트를 경

하여 사용 할 수 있다.

q 코드

<div class="egov-color-green">This paragraph is in green.</div>

<div class="egov-font-size25">This paragraph is in size 25px.</div>

<div class="egov-font-tahoma">This paragraph is in tahoma.</div>

<div class="egov-align-right">This paragraph is right alignment.</div>


Label / Text

설명글꼴, 색상, 배치, 폰트를 지정 할 수 있는 가이드제공

6. UX Component

60Page l 60

Tabs

q 탭은 튼이 수평으 나열된 형태 일 환경에 최적화된 내비게이션 UI를 제공한다.

q data-role="navbar" 를 이용하여 내비게이션 능을 사용하 ui-btn-active 클래스 값으 활성화

된 탭을 나타낼 수 있다.

q 코드

<div data-role="navbar">

<ul><li><a href="#" class="ui-btn-active">One</a></li> <li><a href="#">Two</a></li></ul>

</div>


Tabs

설명Header와 footer 에 사용되며 탭 버튼으로 문서간 이동 기능 제공

형태 (2종) round tab(radius: 40x), normal tab(radius: 0px)

배치 (6종) 1, 1/2, 1/3, 1/4, 1/5, ½ 다중행 tab


아이콘위치(4종)

상, 하, 좌, 우

6. UX Component

61Page l 61

Form

q HTML의 든 폼 요소를 일 환경에 최적화된 UI 제공한다. 폼을 사용할 때는 여러 페이 가

하나의 DOM 에 속할 수 있으므 id 속성을 사이트 위에서 유일한 값으 정해야 한다.

q 전자정부 일 프 임워크를 이용하여 폼을 생성하 이블 폼 성요소가 화 의 너비

에 맞게 자동으 열된다.

q 폼 요소 열의 성을 향상시키 <div data-role="fieldcontain"> Tag 내부에 이블 폼 요

소를 포함시킨다.


Form

설명Html form 요소를 모바일 환경에 최적화하여 제공

요소 (7종)Text inputs, Search inputs, Sliders, Switches, Radio buttons, Check boxes, Selectors


6. UX Component

62Page l 62

Menu

q 일 Page의 뉴 능은 Dialog, Grid, List, Collapsible 의 능을 활용하여 현할 수 있다.

q 링크에 data-rel="dialog" data-transition="slide, slidedown, slideup, fade, flip, turn, flow,

slidefade" 속성을 추가하여 다이얼 의 효과적인 출 효과를 사용 할 수 있다.


Menu

설명Dialog, Grid, List, Collapsible 컴포넌트를 사용하여 메뉴 구성 기능 제공

효과 (9종)slide, slideup, slidedown, pop, fade, flip, turn, flow, slidefade

형태 (4종) Dialog, Grid, List, Collapsible


6. UX Component

63Page l 63

Loader Widget

q Loader Widget은 일 Page 전환 시 행 상태를 시해 주는 역할을 한다.

q Loader Widget은 Ajax 통신을 이용할 경우 Default 나타난다.

q Progress Bar 는 Ajax 통신을 이용할 경우 나타나고 설정을 통해 Default 사용 가능하다.

pageinit 이 트에 $.mobile.loader.prototype.options 속성을 추가하 Loader Widget을 적용할 수 있다.


Loader Widget

설명페이지 전환간 진행 상태를 확인 할 수 있는Loader Widget 제공


6. UX Component

64Page l 64

Dialog

q 다이얼 를 새 창으 전환 할 경우 팝업 효과 등으 나타낼 수 있으 Anchor Tag에 data-

rel="dialog"를 추가 하 다이얼 효과가 나타난다.

q 타 Dialog는 자 스크립트를 이용하여 Alert, Confirm 등의 창을 띄운다.

<input id="overlay_dialog" type="button" value="Overlay" />


Dialog

설명사용자와 상호 작용 할 수 있는 Dialog 기능을 제공

형태 (6종)Dialog, Action Sheet, Overlay, Alert, Prompt, Confirm


6. UX Component

65Page l 65

Grid View

q Grid View는 UX Component를 같은 넓이, 같은 행으 나타 낼 때 사용되 Grid View 안에 컴포

넌트를 넣어 나란하게 열 할 수 있다.

q Grid 속성으 칼럼(column) 수를 정하고 Block 속성으 내부의 셀을 정한다.

q 코드

<div class="ui-grid-a">

<div class="ui-block-a">Block A</div> <div class="ui-block-b">Block B</div>

</div>


Grid View

설명Grid 형태로 콘텐츠를 배치 할 수 있는 컴포넌트제공

배치 (5종) 1/2, 1/3, 1/4, 1/5, 가변 Grid View

6. UX Component

66Page l 66

Table / List View

q 전자정부 일 프 임워크를 통해 생성된 리스트는 일 환경에 최적화된 형태 제공된다.

q 리스트 Tag(ol, ul)에 data-role=”listview” 속성을 추가하 전자정부 일 프 임워크에서

제공하는 리스트를 생성할 수 있다.

q 코드

<ul data-role="listview" data-inset="true">

<li>List Item 1</li><li>List Item 2</li>

</ul>


Table / List View

설명Table 형태로 콘텐츠를 배치 할 수 있는 컴포넌트제공

형태 (2종) Read-only list, Link list

기능(11종)

Nested List, Numbered List, Split Button,List Divider, Count Bubble, Thumbnail, List icon, Content Formatting, Search Filter Bar, Change Mode List, Checked List


6. UX Component

67Page l 67

Check / Radio

q 체크 스는 하나 이상의 항 을 선택 할 수 있는 능을 제공한다

q 체크 스를 세 정 하 위해서는 <fieldset data-role="controlgroup">으 체크 스를 감

싸 주어야 한다.

q 코드

<fieldset data-role="controlgroup">

<legend>취미 선택 :</legend>

<input type="checkbox" name="checkbox-1" id="checkbox-1 /> <label for="checkbox-1">음악감상</label>

<input type="checkbox" name="checkbox-2" id="checkbox-2" checked="checked"/> <label for="checkbox-2">영화감상</label>

</fieldset>


Check / Radio

설명Check/Radio 형태로 항목을 선택할 수 있는 기능을 제공



6. UX Component

68Page l 68

Check / Radio

q 라디오 튼은 여러 개의 항 에서 하나를 선택 할 수 있는 능을 제공한다.

q 라디오 튼을 사용 할 경우 <input type="radio">의 name 속성이 동일 해야 하 세 정 하

위해서는 <fieldset data-role="controlgroup">으 라디오 튼을 감싸 주어야 한다.

q 코드

<fieldset data-role="controlgroup">

<legend>동의 여부: </legend>

<input type="radio" name="radio-1" id="radio-1" value="choice-1" checked="checked" /><label for="radio-1">동의합니다.</label>

<input type="radio" name="radio-1" id="radio-2" value="choice-2" /><label for="radio-2">동의 하 않습니다.</label>

</fieldset>


Check / Radio

설명Check/Radio 형태로 항목을 선택할 수 있는 기능을 제공



6. UX Component

69Page l 69

Icon

q 전자정부 일 프 임워크 실행환경은 일 어플리케이션에 가장 많이 사용되는 아이콘을

선 하여 제공한다. 으 제공되는 아이콘은 흰색의 아이콘 양과 투 의 검은 원형 경으

이 어져있어 어떤 경색과도 대비를 이 수 있다.

q data-icon 속성값으 생성할 아이콘 이름을 정하여 아이콘을 추가한다.

<a href="#" data-role="button" data-icon="home">Home</a>


Icon

설명모바일 어플리케이션에 가장 많이 사용되는 아이콘을 제공

형태(26종)

arrow-l, arrow-r, arrow-u, arrow-d, delete, plus, minus, check, gear, refresh, forward, back, grid, star, alert, info, search, home, phone, mail, gps, audio, camera, file, mic, explorer


6. UX Component

70Page l 70

Selector / Switch

q Selector의 형식은 OS의 Selector 뉴 형식에 따라 다르게 나타난다. 또한 팝업 형으 펼침

식을 경 할 수 있으 <option>의 개수에 따라 자동적으 형태를 꿔 다.

q Selector를 <label>과 같은 행으 나타 내고 싶을 때는 <fieldcontain>으 <label>과 <select>를

감싸야 하 <label> for 속성과 <selector>의 id 속성의 값이 동일 해야 한다.

q 코드

<label for="select-choice-1" class="select">선택 하시오:</label>

<select name="select-choice-1" id="select-choice-1">

<option value="apple">사과</option>

<option value="banana"> 나나</option>

</select></fieldset>


Selector / Switch

설명Selector/Switch 형태로 항목을 선택 할 수 있는기능을 제공

효과 (2종) pop-up, list

기능 (2종) 다중선택, 단일 선택

모양(2종) 둥근 형(radius: 1em) 사각형(radius: 0em)

넒이(2종) 화면에 맞게 , 텍스트에 맞게

6. UX Component

71Page l 71

Selector / Switch

q Switch는 이 형식을 따르 좌우 선택 하도 되어있다.

q Switch를 <label>과 같은 행으 나타 내고 싶을 때는 <fieldcontain>으 <label>과 <slider>를 감

싸야 하 <label>의 for 속성과 <slider>의 id 속성 값이 동일 해야 한다.

q 코드

<label for="slider">선택하시오 :</label>

<select name="slider" id="slider" data-role="slider">

<option value="off">Off</option>

<option value="on">On</option>

</select>


Selector / Switch

설명Selector/Switch 형태로 항목을 선택 할 수 있는기능을 제공

효과(2종) Shadow 적용 Shadow 제거

형태(2종) 비 그룹, 그룹


6. UX Component

72Page l 72

Collapsible Block

q Collapsible Block는 콘텐츠 영역을 접었다 펼 수 있는 컨트 능을 제공한다.

q Collapsible Block 를 형태 나타내고 싶을 경우는 <div data-role="collapsible-set">으

영역을 감싼다.

q 코드

<div data-role="collapsible" data-theme="b">

<h3>data-theme="b" collapsible header</h3>

<p>data-theme="b" collapsible header content</p>

</div>


Collapsible

Block

설명콘텐츠 영역을 접었다 펼 수 있는 컨트롤 기능제공

형태(3종) Normal, Group, Nested


6. UX Component

73Page l 73

Popup Widget

q data-role="popup“ 을 추가하 div 영역으 정의 된 내용이 팝업 형태 출 된다.

q a href 링크에서 data-rel="popup“ 을 추가한 후 data-role="popup“으 정의 된 div 의 id를 호출

하 팝업 형태 해당 내용을 출 할 수 있다.

q 코드

<div data-role="page" id="page1">

<a href="#popupBasic" data-rel="popup">Popup Widget</a>

<div data-role="popup" id="popupBasic">

<p>This Popup Example.</p>

</div>

</div>

6. UX Component

component Provided functionality Graphic Layout

Collapsible Block

Explanationcontent area collapsible control Function provides

Form(5) Tooltip, Menu, Form, Dialog, Photo

color (7) Black, blue, gray, white, yellow, red, green

74Page l 74

개요

디 이스 API

Plug-in

(하드웨어 능 확장)

개 도(Eclipse)

Android SDK

WindowsMac OSX

Linux

ADT

개 도(XCode)

Mac OSX

Cocoa TouchFramework

전자정부 일 웹 실행환경

Android 개 환경 iOS 개 환경

MobileHybridAPP

일 어플리케이션 개 환경 일 하이브리드 어플리케이션

q 전자정부 디 이스 API 실행환경은 존 일 어플리케이션 개 환경에서 Plug-in 형태

현되어 있는 디 이스 API를 추가하여 일 하이브리드 어플리케이션을 현하는 식이다.

7. 모바일 하이 리드 어 리 이션

앱스토어 등

적응 개 용이함

환경 제공

75Page l 75

개요

q 일 하이브리드 어플리케이션 현을 위한 하이브리드 프 임워크 제공

– 디 이스 고유 능 호출을 위한 Native Code JavaScript Code 제공

q HTML 페이 에서 디 이스 고유 능의 호출을 위한 디 이스 API 제공

– 10종의 오픈 소스 디 이스 API 제공

– Accelorator, Compass, Camera, Media, File Read/Write, Device, Vibrator, Network, GPS, Contact 등

q 플러 인 형태의 추가 API 제공

– NPKI 네이티브 코드와 연계를 위한 JavaScript 형태의 연계 템플릿 API 제공

– 존의 전자정부 프 임워크 현 된 웹 서 어플리케이션과의 연계를 위한 연계 API 제공

q 하이브리드 어플리케이션 개 을 위한 오픈 소스 소프트웨어 선정

– 전자정부 일 하이브리드 어플리케이션은 PhoneGap 프 임워크를 으 하 ,

HTML5 의 화 성을 위하여 전자정부 일웹 실행환경을 적용


76Page l 76


q 전자정부 디 이스 API 실행환경은 하이브리드 어플리케이션의 성 이 되 , 하이브리드

어플리케이션 현 실행 시 필요한 능을 제공한다.

환경 설

실행 환경

• 전자정부 일 하이브리드 어플리케이션 개 프 임워크 라이브러리 제공

- Open Source(PhoneGap)

- 코드 하이브리드 앱 샘플 템플릿 제공• Device API 원

- 10종의 Open Source Device API

- 추가 Device API 2종 제공

일 디 이스 API가이드 프 램

• 일 하이브리드 어플리케이션 개 시 가이드 재사용을 위한 디 이스 API 가이드 프 램 제공

- 12종의 디 이스 API 가이드 하이브리드 앱 개

- 디 이스 API 가이드 하이브리드 앱과 통신을 위한전자정부 프 임워크 웹 서 어플리케이션 개

개 환경 • 플랫폼 하이브리드 앱 개 템플릿 프 젝트 생성 도 제공

자 부 바이스 API 실행환경 구성

77Page l 77

구성요소

q 디 이스 API 실행환경은 웹 리소스를 통한 디 이스 하이브리드 어플리케이션 현을 원하

플랫폼 SDK를 활용하여 현된 웹 리소스 내의 JavaScript 형태의 Device API와 각 플랫폼

Native Code가 하이브리드 프 임워크 웹 뷰 인터페이스를 통해 연동되어 실제 디 이스의

고유 능을 호출할 수 있도 원 한다.

현 환경

Android SDK iOS SDK

Natïve 연계

능 현

디 이스 API 웹 리소스 JavaScript Framework

디 이스 API 10종

하이브리드 프 임워크 Web View Interface

전자정부 특화 디 이스API 2종

HTML5

CSS3

JavaScript

전자정부 일웹 실행환경

Custom JavaScriptFramework


• 웹 능호출

* 하드웨어능호출

78Page l 78

• Linux kernel

- 하드웨어 드라이 , 프 세스와 리 리, 안, 네트

워크, 전 리 등의 핵심 서비스 담당.

• Libraries

- Android libc와 SSL 같은 다양한 C/C++ 코어 라이브러리

- 핸드폰에 사용되는 하드웨어를 원하 위해 컴파일 되

어 핸드폰 공 업체에 의해 핸드폰에 미리 설치 됨

• Android Runtime

- Core Libraries, Dalvik Virtual Machine으 성.

- 커널위에 존재하 Dalvik, VM, 코어 라이브러리 등이 포

함된다.

• Application Framework

- Android Application을 만드는데 필요한 능을 원,

App들을 리하는 역할을 한다.

- 접만든 컴포넌트를 통해 확장 시킬 수 있다.

• Application

- 안드 이드 아키텍처 다이어 램의 최상위 계층

- 안드 이드의 특 하나 든 어플리케이션이

동일한 수 으 실행됨

모바일 운 체제 7. 모바일 하이 리드 어 리 이션

q Android 운영체제의 성은 다음과 같다.

79Page l 79

모바일 운 체제 7. 모바일 하이 리드 어 리 이션

q iOS 운영체제의 성은 다음과 같다.

• iOS의 커널

- Mac OS X와 같은 Mach에 초한다.

• Core OS와 Core Services 계층

- 매우 적인 iOS의 인터페이스를 가 고 있다. 데이터

타입들, 봉주르 서비스, 네트워크 소켓 등이 있다.

• Media 계층

- 2D/3D 리고, 오디오, 비디오 등의 술을 가 고

있다. OpenGL ES, Quartz Core Audio와 Core

Animation이 있다.

• Cocoa Touch 계층

- 든 술이 Objective-C를 으 하 , 각종 프 임워

크 응용프 램을 만들 때 가장 적인 인프라를 제공

한다.

80Page l 80


Application 은 Hybrid Platform에서 제공되는 JS를통해 Native Feature를 이용한다.

Hybrid ApplicationHybrid

Platform(폰갭,코도 )

WebkitNative Apps

Hybrid Core

Interface wrapper

JS API

Client OS(iOS, Android …)

HTML + JS + CSS

Webkit 상에서동되는

Web App 형태 개 함

Hybrid Application의 조

Application 개 자는 Web 개 식으 HTML, JS, CSS 를 사용하여 개 한다.

Hybrid Platform으 최종 Build 된 Hybrid Application은 Native Application과 같은 습으Package 되고, 리된다.

HTML + JS + CSS

Client OS

Webkit

Hybrid Custom Plugin

~.apk (안드 이드)

~.ipa (아이폰)

최종 생성된 App은앱스토어에

등 될 수 있다

Client OS 상의 Hybrid Application의 Package 형태

q 일 디 이스 API 실행환경 프 임워크는 하이브리드 어플리케이션을 현하 위한

환경으 서 웹 리소스 현 된 능을 네이티브 앱 형태 래핑하는 역할을 한다.

기본 구조

Hybrid Platform

Comple& Build

개 자작업영역

81Page l 81

하이 리드 임워크(PhoneGap)

q 디 이스 API 실행환경의 주요 성요소 인 하이브리드 어플리케이션 프 임워크의 성은 다음

과 같다.


HTML CSS JS

WebViewPhoneGapPlug-ins

Android iPhoneWindowPhone

PhoneGapNative API

PhoneGap API

....

OS APIs

Ph

on

eG

ap

Ap

pM

ob

ile O

S

82Page l 82

하이 리드 임워크

q 폰갭은 Device API 제어를 위해 미리 현 한 JavaScript SDK 연계를 위한 Native Code 외에

추가 능을 위해 현 된 Plug-In을 성하고 있는 폰갭 Custom Plug-In 과 폰갭 Custom

Native Plug-In이 추가된 조이다.

분 설

Mobile Web Application • HTML, CSS, 사용자 정의 JavaScript

PhoneGap JavaScript Engine

• Device API 제어를 위해JavaScript 현되어 제공• PhoneGap.js

PhoneGap Native Engine

• 플랫폼 WebView를 상속 아 Mobile Web Application과 연계를 위한 Native Code

• PhoneGap.jar• phoneGap.framework

PhoneGap Custom Plugin

• 능 확장을 위해 추가 된 Plug-In을 위한 JavaScript 코드• 사용자 정의 JavaScript Plug-In 을 포함• 플랫폼 플러 인을 위한 Native 코드 성이 상이함에 따라 JavaScript 성

또한 다를 수 있음

PhoneGap Custom Native Plugin

• 능 확장을 위해 추가 된 Plug-In을 위한 플랫폼 Native 코드


83Page l 83

웹뷰 인터페이스

q 폰갭은 플랫폼 SDK내에 내장 되어있는 Web View를 활용하여 하이브리드 앱 실행 시

사용자가 현 한 HTML 파일을 출 하고 JavaScript 소스를 실행한다.

q 하이브리드 어플리케이션의 디 이스 API 호출을 위한 브릿 역할을 해 다.

•SDK 부터 상속 은 웹 뷰를 생성해서

웹 뷰 내에 소스를 드 한 후 네이티브API를

사용할 수 있도 연계

• Interface Module (BrowserControl <-> Device API)

－iPhone

· shouldStartLoadWithRequest

· stringByEvaluationJavaScriptFromString

à [gap://] protocol catch

－Android

· addJavascriptInterface

àClass & JavaScript Binding


84Page l 84

로젝트 구조

q 디 이스 API 실행환경을 적용한 하이브리드 앱 프 젝트를 생성하 다음과 같이 네이티브 코드,

웹 리소스, 네이티브 라이브러리, 환경 설정 파일 성된다.


웹리소스

웹리소스Android App eclipseProject

iOS App XCodeProject

85Page l 85

q Android Platform 하이브리드 앱의 인 클래스 (Activity)는 Phonegap 의 CordovaActivity 클

래스를 상속 아 웹 리소스를 loadUrl 형태 읽어오는 식이다.

메인 클래스(Android Platform) 7. 모바일 하이 리드 어 리 이션

package kr.go.egovframework.hyb.cameraapp;

import android.os.Bundle;import android.webkit.WebSettings;

import org.apache.cordova.*;

public class MainActivity extends CordovaActivity{

@Overridepublic void onCreate(Bundle savedInstanceState){

super.onCreate(savedInstanceState);super.init();

super.appView.getSettings().setAppCacheEnabled(false); super.appView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);super.appView.clearCache(true);super.appView.getSettings().setJavaScriptEnabled(true);super.appView.getSettings().setDomStorageEnabled(true);

// Set by <content src="index.html" /> in config.xmlloadUrl(launchUrl);

}

}

MainActivity.java

86Page l 86

q iOS Platform 하이브리드 앱의 인 클래스 (MainViewController)는 Phonegap의

CDVViewController를 상속 아 config.xml의 url을 호출하 주요 코드는 다음과 같다.

메인 클래스(iOS Platform) 7. 모바일 하이 리드 어 리 이션

#import <Cordova/CDVViewController.h>#import <Cordova/CDVCommandDelegateImpl.h>#import <Cordova/CDVCommandQueue.h>

@interface MainViewController : CDVViewController

@end

@interface MainCommandDelegate : CDVCommandDelegateImpl@end

@interface MainCommandQueue : CDVCommandQueue

@end;

#import "MainViewController.h"

@implementation MainViewController

- (id)initWithNibName:(NSString*)nibNameOrNil bundle:(NSBundle*)nibBundleOrNil{

self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];if (self) {

}return self;

}

- (id)init{

self = [super init];if (self) {

}return self;

}

MainViewController.h

MainViewController.m

87Page l 87

q 어플리케이션의 주요 을 담고 있는 웹 리소스(HTML5)는 HTML, JavaScript, CSS 성되

플랫폼에 비종속적으 iOS와 Android 플랫폼 간 재사용이 가능하다.

웹 리소스 (Android/iOS Platform) 7. 모바일 하이 리드 어 리 이션

<head> <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,

user-scalable=yes" /><title>Network API Guide</title>

<link rel="stylesheet" href="css/egovframework/mbl/cmm/jquery.mobile-1.4.5.css" /><link rel="stylesheet" href="css/egovframework/mbl/cmm/EgovMobile-1.4.5.css" /><script type="text/javascript" src="js/egovframework/mbl/cmm/jquery-1.11.2.min.js"></script>

<script type="text/javascript" src="js/egovframework/mbl/cmm/jquery.history.js"></script>

<script type="text/javascript" src="js/egovframework/mbl/cmm/jquery.mobile-1.4.5.min.js"></script><script type="text/javascript" src="js/egovframework/mbl/cmm/EgovMobile-1.4.5.js"></script><script type="text/javascript" src="js/egovframework/mbl/cmm/EgovHybrid.js"></script>

<link rel="stylesheet" href="css/egovframework/mbl/hyb/guide.css" />

<script type="text/javascript" src="js/iscroll/iscroll.js"></script>

<script type="text/javascript" charset="utf-8" src="js/egovframework/mbl/cmm/cordova.js"></script>

<script type="text/javascript"></script>

</head>

88Page l 88


q 각 디 이스API 특성에 따라 서 듈 연계 능을 쉽게 이해하여 활용할 수 있도

디 이스 API 가이드 프 램을 개 환경을 통해 제공한다.

…

가이드 코드

디 이스 API`

하이브리드 앱 C

…

디 이스API 서 듈 현 코드

인터페이스 API

가이드 코드

디 이스 API`

하이브리드 앱 B

가이드 코드

디 이스 API`

하이브리드 앱 A

인터페이스 API

인터페이스 API

가이드 프 램 연계전자정부 프 임워크 어플리케이션

디 이스API 하이브리드 앱가이드 프 램

바이스 API 가이드 로그램

<App> <Restful Server>

DB

…인터넷 간

Spring MVC

ControllerServiceDAO



WAS Server

DB Server

89Page l 89

q 디 이스 API 실행환경은 추가 플러 인 UX 컴포넌트 활용을 위해 폰갭 프 임워크 이외에도

다음과 같은 오픈 소스 라이브러리가 활용 되었다.

련 라이 러리

Spring For Android• 전자정부 서버 어플리케이션과 Rest 통신을 위한 안드로이드 용 네이티브 Restful 서비스

• 오픈 소스 라이브러리로 Interface Device API(Android) 개발에 사용 되었다.

ASIHTTPRequest• 전자정부 서버 어플리케이션과 Rest 통신을 위한 iOS 용 네이티브 Restful 서비스

•오픈 소스 라이브러리로 Interface Device API(iOS) 개발에 사용 되었다.

jQuery Mobile

• 전자정부 모바일 웹 표준프레임워크의 코어 프레임워크로서 하이브리드 앱의 UX 개발

시에 사용된다. 네이티브 어플리케이션의 화면 전환 효과 및 각종 버튼 리스트 등을 활용한

개발을 위해 사용된다.

jQuery

• jQuery Mobile 프레임워크의 코어 프레임워크로 jQuery Mobile을 사용하기 위해서

필수로 사용된다. Dom Control, Ajax, Restful 서비스 연계 등 다양한 기능을 제공하며

자바스크립트를 이용한 개발을 간단하게 해준다.

iScroll• 어플리케이션의 헤더와 푸터를 고정시킨 채 컨텐츠 내용만 스크롤 해주는 기능을 제공한다.

jQuery Mobile에서 제공하지 못하는 UX 효과를 보조하기 위해 사용할 수 있다.


90Page l 90

q 디 이스 API는 웹 리소스를 통해 디 이스 내의 Native 능을 호출하 위하여

디 이스 API 실행환경 내에서 JavaScript 형태 제공되는 API의 음이 각 디 이스 API

특 은 다음과 같다.

순 디 이스 API 설

1 Accelerator 단말 의 가속도계 정 를 제공하는 API(단말 의 움 임 정 를 x, y, z 축의 값으 제공)

2 GPS 단말 의 현재 위치에 대한 정 를 제공하는 API

3 Vibrator 단말 의 동 알림음 능을 호출 할 수 있는 API

4 Camera 단말 의 카 라 촬영 능을 호출 할 수 있는 API

5 Contact 단말 의 주소 (연락처) 정 를 조회 수정 할 수 있는 API

6 Compass 단말 의 향정 를 조회 할 수 있는 API

7 File Reader/File Writer 단말 의 내장 저장 장치의 파일을 읽 /쓰 할 수 있는 API

8 Network 단말 의 네트워크 연결 정 를 조회 할 수 있는 API

9 Device 단말 의 정 (UUID, 전 등)을 조회 할 수 있는 API

10 Media 단말 의 오디오 파일을 컨트 할 수 있는 API

11 Interface 전자정부 프 임워크 웹 서 어플리케이션과 연계를 원하는 API

12 NPKI 단말 에 설치 된 npki 듈을 호출 할 수 있는 API

개요 8. Device API

91Page l 91

q 디 이스의 움 임에 대하여 X, Y, Z축의 향을 감 한다.

Device API - Accelrometer

유형 분 설

Methods

accelerometer.getCurrentAcceleration• 현재 가속 센서가 감 한 좌 값 (x, y, z) 을 한다.• navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);

accelerometer.watchAcceleration

• 특정 시간 간격으 가속 센서가 감 한 좌 값 (x, y, z) 을 아온다.• var watchID = navigator.accelerometer.watchAcceleration(accelerometerSuccess,

accelerometerError,[accelerometerOptions]);

accelerometer.clearWatch• watchAccelaeration()을 통해 작동 인 가속 센서(watchID) 감 를 종 한다.• navigator.accelerometer.clearWatch(watchID);

Argument

accelerometerSuccess• 가속 센서의 method 가 성공했을 때 실행하는 함수.

(가속 센서의 정 를 가 는 Acceleration 객체를 매개 수 가 다)

accelerometerError • 가속 센서의 method 가 실패했을 때 실행하는 함수.

accelerometerOptions

• 감 할 가속 센서의 옵션을 설정한다.• Options－ frequency: 특정 시간 간격으 가속 센서를 감 한다.

(Number) (Default: 10000)

Object Acceleration

• 가속 센서가 감 한 가속도 정 를 가 는 객체 (phoneGap이 생성)• x: x 축 가속 값을 . (값 : 0 ~ 1) (Number)• y: x 축 가속 값을 . (값 : 0 ~ 1) (Number)• z: z 축 가속 값을 . (값 : 0 ~ 1) (Number)• timestamp: 측정한 milliseconds 단위의 시간 (DOMTimeStamp)

8. Device API

92Page l 92

q 제약사항


유형 분 원플랫폼 설

Methods

accelerometer.getCurrentAcceleration

Android -

iOS

- iPhone은 어떤 주어 점에서 가속 센서가 감 한 좌 값을 주 않는다. - 특정 시간 간격으 가속 센서를 감 해야 한다. - getCurrentAcceleration() 은 watchAcceletometer() 을 통해 마 막으 감 된 좌

값을 나타낸다.

accelerometer.watchAcceleration

Android -

iOS

- iPhone에서는 가속 센서 감 간격이 40 milliseconds에서 1000 milliseconds에서만유효하게 적용된다.

- 만약 3초 간격으 watchAcceleration()을 요청하게 되 , phoneGap을 통해 1초 간격으 가속 센서의 좌 값을

아오 만, phoneGap은 3초 단위 callback함수를 요청하도 자체 정한다.

8. Device API

93Page l 93

q Sample Code



<head><title>Acceleration Example</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);

}

function onSuccess(acceleration) {alert('Acceleration X: ' + acceleration.x + '\n' +

'Acceleration Y: ' + acceleration.y + '\n' +'Acceleration Z: ' + acceleration.z + '\n' +'Timestamp: ' + acceleration.timestamp + '\n');

}

function onError() {alert('onError!');

}

</script></head><body><h1>Example</h1>

</body></html>

8. Device API

94Page l 94

q 디 이스의 카 라 어플리케이션에 접속하는 능을 제공한다.

Device API - Camera

유형 분 설

Methods camera.getPicture

• 카 라 사 을 찍고 찍은 사 을 가져오거나, 단말 의 앨 에서 사 을선택해서 가져온다.

• base64 인코딩된 이미 를 가져오거나 사 파일의 경 를 통해 사 을가져온다.

• navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

Arguments

cameraSuccess • 사 을 찍거나 선택하는데 성공했을 때 실행하는 callback 함수.

cameraError

• 사 을 찍거나 선택하는데 실패했을 때 시 를 매개 수 하는 callback 함수.• Parameters－ message: 단말 에서 제공하는 오류 시 를 문자열 아오는

매개 수.

cameraOptions

• Optional parameters to customize the camera settings.• Options－ quality: 이미 의 (해상도)을 분율 정의한다. (0~100) (Number)－ destinationType: 결과 값의 포맷을 정의한다..

navigator.camera.DestinationType (Number)－ sourceType: 포토 라이브러리, 카 라에서 찍은 사 등 선택할 소스를

설정한다. nagivator.camera.PictureSourceType (Number)－ allowEdit: 이미 선택 전, 이미 편 여부. (Boolean)－ encodingType: 이미 파일의 인코딩 종류를 정의한다.

navigator.camera.EncodingType (Number)－ targetWidth: 이미 의 너비(pixel)를 설정한다. 비율은 고정. (Number)－ targetHeight: 이미 의 높이(pixel)를 설정한다. 비율은 고정. (Number)－ mediaType: pictureSourceType이 PHOTOLIBRARY 또는 SAVEDPHOTOALBUM

일 때, 미디어의 타입을 설정한다.nagivator.camera.MediaType (Number)

－ correctOrientation: 이미 를 담는 동안 이미 회전 여부. (boolean)－ saveToPhotoAlbum: 이미 를 담은 후, 단말 저장 여부. (boolean)

8. Device API

95Page l 95

q 제약사항

Device API - Camera


Arguments cameraOptions

Android

- allowEdit옵션을 원하 않는다.- sourceType은 PHOTOLIBRARY, SAVEDPHOTOALBUM 분 없이

두 포토 앨 을 나타낸다.- Camera.EncodingType을 원하 않는다.- correctOrientation을 원하 않는다.- saveToPhotoAlbum을 원하 않는다.

iOS

- Quality를 50 이하 설정해야 특정 단말 에서 나타나는리 오류를 피할 수 있다.

- destinationType.FILE_URI을 사용할 경우,사 이 어플리케이션의 임시폴더에 저장된다.

- 어플리케이션이 종 될 때, 어플리케이션 임시폴더 내의 사 들은 삭제된다.사 들의 용량이 대체 크 때문에navigator.fileMgr를 통해 단말 의 용량을 조절해야 한다.

8. Device API

96Page l 96

q Sample Code

Device API - Camera


<head><title>Capture Photo</title><script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">

var pictureSource; // picture sourcevar destinationType; // sets the format of returned value

document.addEventListener("deviceready",onDeviceReady,false);

function onDeviceReady() {pictureSource=navigator.camera.PictureSourceType;destinationType=navigator.camera.DestinationType;

}

function onPhotoDataSuccess(imageData) {

var smallImage = document.getElementById('smallImage');

smallImage.style.display = 'block';smallImage.src = "data:image/jpeg;base64," + imageData;

}

function onPhotoURISuccess(imageURI) {

var largeImage = document.getElementById('largeImage');

largeImage.style.display = 'block';largeImage.src = imageURI;

}

8. Device API

97Page l 97

q Sample Code

Device API - Camera

function capturePhoto() {navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,destinationType: destinationType.DATA_URL });

}

function capturePhotoEdit() {// Take picture using device camera, allow edit, and retrieve image as base64-encoded string navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true,destinationType: destinationType.DATA_URL });

}

function getPhoto(source) {

navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI,sourceType: source });

}

function onFail(message) {alert('Failed because: ' + message);

}

</script></head><body><button onclick="capturePhoto();">Capture Photo</button> <br><button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br><button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br><button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br><img style="display:none;width:60px;height:60px;" id="smallImage" src="" /><img style="display:none;" id="largeImage" src="" />

</body></html>

8. Device API

98Page l 98

q 디 이스의 오디오, 이미 , 비디오 캡쳐를 위한 능을 제공한다.

Device API - Capture

유형 분 설

Methods

capture.captureAudio• 단말 의 녹음 프 램을 호출하여 녹음을 하고, 녹음을 완 하 녹음한 데이터(clip)를 가져온다.• navigator.device.capture.captureAudio( CaptureCB captureSuccess, CaptureErrorCB

captureError, [CaptureAudioOptions options]);

capture.captureImage• 단말 의 카 라 프 램을 호출하여 사 을 찍고, 찍은 이미 를 가져온다.• navigator.device.capture.captureImage( CaptureCB captureSuccess, CaptureErrorCB

captureError, [CaptureImageOptions options]);

capture.captureVideo• 단말 의 카 라 프 램을 호출하여 동영상을 촬영하고 촬영한 비디오를 가져온다.• navigator.device.capture.captureVideo( CaptureCB captureSuccess, CaptureErrorCB

captureError, [CaptureVideoOptions options]);

MediaFile.getFormatData• 미디어 파일의 포맷 정 를 가져온다.• mediaFile.getFormatData( MediaFileDataSuccessCB successCallback,

[MediaFileDataErrorCB errorCallback]);

Objects CaptureAudioOptions

• 녹음을 원하는 captureAudio() 소드에 대한 옵션 객체.• Properties－ limit: 한 에 녹음할 수 있는 횟수를 정의한다. ( 값 : 1, 값 : 1 이상)－ duration: 녹음할 경우, 최대 녹음시간을 정의한다.－ mode: capture.supportedAudioModes에서 원하는 오디오 드 하나를 정한다.

8. Device API

99Page l 99



유형 분 설

Objects

CaptureImageOptions

• 이미 촬영을 원하는 captureImage() 소드에 대한 옵션 객체.• Properties－ limit: 한 에 사 촬영할 수 있는 횟수를 정의한다.

( 값 : 1, 값 : 1 이상)－ mode: capture.supportedImageModes 에서 원하는 오디오 드

하나를 정한다.

CaptureVideoOptions

• 동영상 촬영을 원하는 captureVideo() 소드에 대한 옵션 객체.• Properties－ limit: 한 에 촬영할 수 있는 횟수를 정의한다. ( 값 : 1, 값 : 1 이상)－ duration: 촬영할 경우, 최대 촬영시간을 정의한다.－ mode: capture.supportedVideoModes 에서 원하는 비디오 드

하나를 정한다.

CaptureError

• 미디어 촬영 에 생할 수 있는 오류코드를 하는 객체.• Properties－ code: 아래 정의된 상수 하나를 값으 사용한다..

• Constants－ CaptureError.CAPTURE_INTERNAL_ERR: 카 라가 사 을 찍거나 마이크 폰이 녹음을 하는 데

실패했을 경우의 오류.－ CaptureError.CAPTURE_APPLICATION_BUSY: 카 라 또는 녹음 프 램을 다른 서비스 인

해 호출할 수 없는 경우의 오류.－ CaptureError.CAPTURE_INVALID_ARGUMENT: 옵션의 설정이 올 르 않을 경우 phoneGap

API에서 생하는 오류.－ CaptureError.CAPTURE_NO_MEDIA_FILES: 사용자가 촬영을 단하고 임의 빠져 나왔을 때

생하는 오류.－ CaptureError.CAPTURE_NOT_SUPPORTED: 요청한 미디어 촬영이 원하 않을 때 생하는

오류.

8. Device API

100Page l 100



유형 분 설

Objects

CaptureCB• 미디어 촬영에 성공했을 때 실행하는 함수.• function captureSuccess( MediaFile[] mediaFiles ) { ... };

CaptureErrorCB• 미디어 촬영에 실패했을 때 실행하는 함수.• function captureError( CaptureError error ) { ... };

ConfigurationData

• 단말 에서 원하는 캡처 속성들을 할 수 있는 객체.• Properties－ type: 미디어 유형을 ASCII 코드 인코딩한 소문자 문자열. (DOMString)－ height: 이미 나 비디오의 높이(pixel)를 정의하 , 오디오의 경우 0으 처리한다. (Number)－ width: 이미 나 비디오의 너비(pixel)를 정의하 , 오디오의 경우 0으 처리한다. (Number)

MediaFile

• 캡처한 파일의 속성들을 할 수 있는 객체.• Properties－ name: 경 를 제외한 파일 . (DOMString)－ fullPath: 파일 을 제외한 전체경 . (DOMString)－ type: 미디어 파일의 mime type. (DOMString)－ lastModifiedDate: 파일의 최종수정날 . (Date)－ size: byte 단위를 가 는 파일의 크 . (Number)

• Methods－ MediaFile.getFormatData: 미디어 파일의 포맷을 리턴한다.

8. Device API

101Page l 101



유형 분 설

Objects MediaFileData

• 미디어 파일에 대한 포맷 정 를 나타내는 객체.• Properties－ codecs: 오디오 비디오의 포맷. (DOMString)－ bitrate: 오디오나 비디오의 전송 속도를 나타낸다.

이미 의 경우 0. (Number)－ height: 이미 나 비디오의 높이를 나타낸다. 오디오의 경우 0. (Number)－ width: 이미 나 비디오의 너비를 나타낸다. 오디오의 경우 0. (Number)－ duration: 오디오와 비디오의 재생시간을 나타낸다.

이미 의 경우 0. (Number)

properties

supportedAudioModes • 단말 에서 원하는 오디오 녹음 포맷. (ConfigurationData[])

supportedImageModes • 단말 에서 원하는 이미 크 와 포맷. (ConfigurationData[])

supportedVideoModes • 단말 에서 원하는 비디오 포맷. (ConfigurationData[])

Scope• capture는 navigator.device 객체에 속하 , 전역에서 쓸 수 있다.• var capture = navigator.device.capture;

8. Device API

102Page l 102

q 제약사항



Methods

capture.captureAudio

Android -

iOS- iOS는 단순한 유저 인터페이스를 가 때문에 적으 오디오 녹음을 원하

않는다.

MediaFile.getFormatData

Android- 미디어 파일의 포맷 정 를 수 하는 API에 대해 제한이 있어, 일부 MediaFileData

속성을 원하 않는다. - MediaFileData : codecs, bitrate를 원하 않는다.

iOS

- 미디어 파일의 포맷 정 를 수 하는 API에 대해 제한이 있어, 일부 MediaFileData속성을 원하 않는다.

- MediaFileData : codecs 을 원하 않는다.- MediaFileData : bitrate 는 iOS4 에서만 원한다.

Objects CaptureAudioOptions

Android

- duration 파라미터를 원하 않는다. - 프 램적으 녹음 시간을 제한할 수 없다.- mode 파라미터를 원하 않는다. - 오디오 녹음 포맷을 프 램적으 정의할 수 없다.- 오디오 녹음의 포맷은 audio/amr 만을 사용할 수 있다.

iOS

- limit 파라미터를 원하 않는다. - 한 에 하나의 녹음만 실행할 수 있다.- 오디오 녹음 포맷을 프 램적으 정의할 수 없다.- 오디오 녹음의 포맷은 audio/wav 만을 사용할 수 있다.

8. Device API

103Page l 103

q 제약사항



Objects

CaptureImageOptions

Android

- mode 파라미터를 원하 않는다.- 이미 의 크 와 포맷을 프 램적으 정의할 수 없다.- 하 만 단말 사용자가 이미 의 크 는 정할 수 있다.- 이미 는 JPEG (image/jpeg) 저장된다.

iOS

- limit 파라미터를 원하 않는다.- 한 에 하나의 이미 만을 캡처할 수 있다- mode 파라미터를 원하 않는다.- 이미 의 크 와 포맷을 프 램적으 정의할 수 없다.- 이미 는 JPEG (image/jpeg) 저장된다.

CaptureVideoOptions

Android

- duration 파라미터를 원하 않는다.- 비디오 촬영 크 를 프 램적으 제한할 수 없다.- mode 파라미터를 원하 않는다.- 비디오의 크 와 파라미터를 프 램적으 정의할 수 없다.- 비디오는 3GPP (videp/3gpp) 적으 촬영된다.

iOS

- limit 파라미터는 원하 않는다.- 한 에 하나의 비디오 촬영만 할 수 있다.- duration 파라미터를 원하 않는다.- 비디오 촬영 크 를 프 램적으 제한할 수 없다.- mode 파라미터를 원하 않는다.- 비디오의 크 와 파라미터를 프 램적으 정의할 수 없다.- 비디오는 MOV (video/quicktime) 적으 촬영된다.

8. Device API

104Page l 104

q 제약사항



Objects MediaFileData

Android

• MediaFileData는 다음과 같이 원한다.- codecs: 원하 않음. 항상 null 이다.- bitrate: 원하 않음. 항상 0 이다.- height: 원. (단, image와 video 파일인 경우).- width: 원. (단, image와 video 파일인 경우).- duration: 원. (단, audio와 video 파일인 경우).

iOS

• MediaFileData는 다음과 같이 원한다.- codecs: 원하 않음. 항상 null 이다.- bitrate: iOS4 단말 에서 오디오인 경우에만 원.

(이미 와 비디오인 경우, 항상 0.)- height: 원. (단, image와 video 파일인 경우).- width: 원. (단, image와 video 파일인 경우).- duration: 원. (단, audio와 video 파일인 경우).

8. Device API

105Page l 105

q Sample Code



<head><title>Capture Audio</title><script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8" src="json2.js"></script><script type="text/javascript" charset="utf-8">function captureSuccess(mediaFiles) {

var i, len;for (i = 0, len = mediaFiles.length; i < len; i += 1) {

uploadFile(mediaFiles[i]);}

}function captureError(error) {

var msg = 'An error occurred during capture: ' + error.code;navigator.notification.alert(msg, null, 'Uh oh!');

}function captureAudio() {

navigator.device.capture.captureAudio(captureSuccess, captureError, {limit: 2});}function uploadFile(mediaFile) {

var ft = new FileTransfer(),path = mediaFile.fullPath,name = mediaFile.name;ft.upload(path, "http://my.domain.com/upload.php", function(result) {

console.log('Upload success: ' + result.responseCode);console.log(result.bytesSent + ' bytes sent');

}, function(error) {console.log('Error uploading file ' + path + ': ' + error.code);

}, { fileName: name }); }</script> </head><body> <button onclick="captureAudio();">Capture Audio</button> <br> </body>

</html>

8. Device API

106Page l 106

q 디 이스의 향( 위각)을 하는 능을 제공한다.

Device API - Compass

유형 분 설

Methods

compass.getCurrentHeading• 단말 의 위 센서가 감 한 현재 향을 가져온다. ( 0 ~ 359.9)• navigator.compass.getCurrentHeading(compassSuccess, compassError, compassOptions);

compass.watchHeading• 특정 시간 간격으 위 센서가 감 한 빙향 정 를 가져온다.• var watchID = navigator.compass.watchHeading(compassSuccess, compassError,

[compassOptions]);

compass.clearWatch• watchHeading()을 통해 작동 인 위 센서(watchID)를 한다.• navigator.compass.clearWatch(watchID);• watchID: The ID returned by compass.watchHeading.

compassSuccess• 위 센서의 소드가 성공했을 때 실행하는 함수. • Parameters－ heading: 위 센서가 감 한 위 정 . (compassHeading)

compassError • 위 센서의 소드가 실패했을 때 실행하는 함수.

8. Device API

107Page l 107



유형 분 설

Arguments

compassError • 위 센서의 소드가 실패했을 때의 파라미터.

compassOptions

• 위 센서의 옵션을 정의한다.• Options－ frequency: 특정 시간 간격으 위 센서를 감 한다.

(Number) ( : 100)－ filter: watchHeadingFilter() 소드에 사용하는 속성으 , 특정 filter 값 이상일 때만 감 한다.

(Number)

compassHeading

• 위 센서에서 전달 은 향 정 를 나타낸다.• Properties－ magneticHeading: 자 위 값을 나타낸다. (0 ~ 359.99) (Number)－ trueHeading: 북을 으 위 값을 나타낸다. (0 ~ 359.99)

음수는 위 값을 나타낼 수 없음을 의미한다. (Number)－ headingAccuracy: 위 각도에 대한 편차 값을 나타낸다. (Number)－ timestamp: 위를 감 한 시각을 milliseconds 단위 나타낸다.

8. Device API

108Page l 108

q 제약사항



Argumetns

compassOptions

Android - filter 를 원하 않는다.

iOS -

compassHeading

Android- trueHeading 을 원하 않는다. magneticHeading과 동일.- magneticHeading과 magneticHeading 이 동일하 때문에 headingAccuracy 는 항

상 0 이다.

iOS- trueHeading은 navigator.geolocation.watchLocation()이

동작하고 있을 때만 감 된다.- iOS4 이상의 단말 에서는 단말 가 회전했을 때 trueHeading 값을 감 한다.

8. Device API

109Page l 109

q Sample Code



<head><title>Compass Example</title>



function onDeviceReady() {navigator.compass.getCurrentHeading(onSuccess, onError);

}

function onSuccess(heading) {alert('Heading: ' + heading.magneticHeading);

}

function onError(compassError) {alert('Compass Error: ' + compassError.code);

}

</script></head><body><h1>Example</h1><p>getCurrentHeading</p>

</body></html>

8. Device API

110Page l 110


Device API - Connection

유형 분 설

Properties connection.type • 단말 에서 원하는 통신 에 대한 정 를 나타낸다.

Constants

• Connection.UNKNOWN : 알 수 없는 통신 식.• Connection.ETHERNET : 이더넷 통신 식.• Connection.WIFI : Wi-Fi 통신 식.• Connection.CELL_2G : 2G 통신 식.• Connection.CELL_3G : 3G 통신 식.• Connection.CELL_4G : 4G 통신 식.• Connection.NONE : 통신을 원하 않음.

8. Device API

111Page l 111

q Sample Code

Device API - Connection


<head><title>navigator.network.connection.type Example</title><script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">

document.addEventListener("deviceready", onDeviceReady, false);function onDeviceReady() {

checkConnection();}

function checkConnection() {var networkState = navigator.network.connection.type;

var states = {};states[Connection.UNKNOWN] = 'Unknown connection';states[Connection.ETHERNET] = 'Ethernet connection';states[Connection.WIFI] = 'WiFi connection';states[Connection.CELL_2G] = 'Cell 2G connection';states[Connection.CELL_3G] = 'Cell 3G connection';states[Connection.CELL_4G] = 'Cell 4G connection';states[Connection.NONE] = 'No network connection';

alert('Connection type: ' + states[networkState]);}

</script></head><body><p>A dialog box will report the network state.</p>

</body></html>

8. Device API

112Page l 112

q 디 이스의 연락처 데이터 이스에 접속하는 능을 제공한다.

Device API - Contacts

유형 분 설

Methods

contacts.create• 새 운 Contact 객체를 생성한다.• var contact = navigator.contacts.create(properties);

contacts.find

• 단말 가 데이터 이스를 검색하여, 각각의 연락처 정 를 갖는 하나 이상의Contact 객체를 는다.• navigator.contacts.find(contactFields, contactSuccess, contactError, contactFindOptions);• Parameters－ contactFields: 검색하고자 하는 연락처 정 를 정의한다.

(값 : Contact 객체의 값) (DOMString[]) [필수]－ contactSuccess: 연락처 데이터 이스 검색이 성공하였을 때 실행하는

함수. [필수]－ contactError: 검색에 실패하였을 때 실행하는 함수. [선택]－ contactFindOptions: 검색 조건을 정의한다. [선택]

Arguments

contactFields• contacts.find 함수 파라미터 사용된다. Contact 객체의 필드 검색 결과 나타나는 내용들을

정의하는데 사용된다.• ["name", "phoneNumbers", "emails"]

contactSuccess • contacts.find 함수 실행 성공 후에 수행되 Contact 열을 결과 값으 가 다.

contactError • contact 함수 실행에 실패하였을 때 수행된다.

contactFindOptions

－ contacts.find 함수의 선택적 옵션이다. － 연락처 데이터 이스 검색 후에 나타나는 결과들의 내용을 정의한다..－ {

filter: "",multiple: true,

};

8. Device API

113Page l 113



유형 분 설

Objects Contact

• 사용자의 개인 혹은 사무 용도의 연락처 정 를 가 는 객체이다..• Properties－ id: 연락처에 대한 고유한 Id이다. (DOMString)－ displayName: 사용자의 화 에 출 하는 연락처 이름이다. (DOMString)－ name: 연락처에 저장된 이름 정 를 두 포함하고 있다. (ContactName)－ nickname: 연락처에 저장된 이다. (DOMString)－ phoneNumbers: 전화 호를 열 형태 저장하고 있다. (ContactField[])－ emails: 연락처에 대한 이 일 정 의 열이다. (ContactField[])－ addresses: 연락처의 주소에 대한 열이다. (ContactAddresses[])－ ims: 연락처에 대한 신저 주소 정 의 열이다. (ContactField[])－ organizations: 소속 단체 정 에 대한 열이다. (ContactOrganization[])－ birthday: 연락처에 대한 생일이다. (Date)－ note: 연락처에 대한 이다. (DOMString)－ photos: 연락처에 대한 사 이다. (ContactField[])－ categories: 연락처에 대한 분류 카테고리의 열이다. (ContactField[])－ urls: 연락처에 대한 홈페이 주소의 열이다. (ContactField[])

• Methods－ clone: 호출한 Contact 객체를 제하여 새 운 Contact 객체를 생성한다.

새 운 Contact 객체는 null이 때문에 새 운 Contact 객체저장할 수 있도 원한다.

－ remove: 연락처 데이터 이스에서 호출한 Contact 객체를 삭제하고성공 했을 경우에는 Contact 객체를, 실패했을 경우에는ContactError 객체를 전달 는다.

－ save: 신 Contact 객체 경우에는 단말 연락처 데이터 이스에등 하고, 존재하는 경우 연락처를 수정한다.

8. Device API

114Page l 114



유형 분 설

Objects

ContactName

• Contact 객체의 name 속성에 해당하는 속성들의 객체.• Properties－ formatted: 해당 연락처의 전체이름. (DOMString)－ familyName: 전체 이름에서 ‘성’을 의미한다. (DOMString)－ givenName: 전체 이름에서 ‘이름’을 의미한다. (DOMString)－ middleName: 전체 이름에서 성과 이름 사이의 ‘ 간 이름’. (DOMString)－ honorificPrefix: ’Mr.’ 나 ‘Dr.’ 같은 접두 호칭을 의미한다. (DOMString)－ honorificSuffix: ’Esq.’와 같은 접미 호칭을 의미한다. (DOMString)

ContactField

• Contact 객체의 phone numbers, email address, urls 속성에서 사용하는필드 객체.

• Properties－ type: 필드 유형을 정의한다. (DOMString)

(예: ‘home’ 은 전화, ‘mobile’ 은 휴대전화.)－ value: phone number 등과 같은 필드에 대한 값을 정의한다. (DOMString)－ pref: ’true’ 일 경우 필드 내, 다수의 값들의 대 값을 정한다. (boolean)

ContactAddress

• Contact 객체의 주소 속성에 대한 객체.• Properties－ pref: ContactAddress 객체의 대 값 여부. (boolean)－ type: 필드 유형을 정의한다. (DOMString) (예: ‘home’은 .)－ formatted: 출 을 위한 전체 주소. (DOMString)－ streetAddress: 동 / 읍 / / 가 와 같은 전체 주소. (DOMString)－ locality: ’시’ / ‘도’ . (DOMString)－ region: ’주’ / ‘ ’ . (DOMString)－ postalCode: 우편 호 . (DOMString)－ country: 도시이름 . (DOMString)

8. Device API

115Page l 115



유형 분 설

Objects

ContactOrganization

• Contact 객체의 organization 속성에 된 객체.• Properties－ pref: ContactOrganization 객체의 대 값 여부. (boolean)－ type: 필드 유형을 정의한다. (DOMString)

(예: ‘work’ 은 장.)－ name: 소속의 이름을 정의한다. (DOMString)－ department: 소속 부서를 정의한다. (DOMString)－ title: 소속 내의 함을 정의한다. (DOMString)

ContactFindOptions

• contacts.find 함수에서 사용되는 검색 조건을 정의하는 객체.• Properties－ filter: 검색어 또는 검색조건을 정의한다. (DOMString) (Default: "")－ multiple: 검색 결과으 다수의 연락처를 가져올 것인 의 여부.

(Boolean) ( : false)

ContactError• 에러가 생했을 경우, contactError 함수 호출 시, 전달 는 객체. • Properties－ code: 에러 코드를 나타낸다.

8. Device API

116Page l 116

q 제약사항



Objects Contact

Android

• Android 2.x- categories: 원하 않음. 항상 null 값을 리턴한다.

• Android 1.x- name: 원하 않음. 항상 null 값을 리턴한다.- nickname: 원하 않음. 항상 null 값을 리턴한다.- birthday: 원하 않음. 항상 null 값을 리턴한다.- photos: 원하 않음. 항상 null 값을 리턴한다.- categories: 원하 않음. 항상 null 값을 리턴한다.- urls: 원하 않음. 항상 null 값을 리턴한다.

iOS

- displayName: 원하 않음. 항상 null 값을 리턴한다.ContractName 객체가 있을 경우에는 name 이나 nickname, “” 을 갖는다.

- birthday: 자 스크립트의 Date 객체를 사용해야 한다..- photos: 호출한 사 은 단말 의 임시폴더에 저장되 , File URL을 리턴한다. 임시

폴더는 앱이 종 될 때 삭제된다.- categories: 원하 않음. 항상 null 값을 리턴한다.

8. Device API

117Page l 117

q 제약사항



Objects

ContactAddress

Android

• Android 2.x- pref: 원하 않음. 항상 false 값을 리턴한다.

• Android 1.x- pref: 원하 않음. 항상 false 값을 리턴한다.- type: 원하 않음. 항상 null 값을 리턴한다.- streetAddress: 원하 않음. 항상 null 값을 리턴한다.- locality: 원하 않음. 항상 null 값을 리턴한다.- region: 원하 않음. 항상 null 값을 리턴한다.- postalCode: 원하 않음. 항상 null 값을 리턴한다.- country: 원하 않음. 항상 null 값을 리턴한다.

iOS- pref: 원하 않음. 항상 false 값을 리턴한다.- formatted: 현재 원하 않음.

ContactField

Android - pref: 원하 않음. 항상 false 값을 리턴한다.

iOS - pref: 원하 않음. 항상 false 값을 리턴한다.

8. Device API

118Page l 118

q 제약사항



Objects

ContactName

Android- formatted: 부분적으 원함.

honorificPrefix, givenName, middleName, familyName and honorificSuffix 순으리턴 하 만, 저장되 않는다.

iOS - formatted: 부분적으 원함. Composite Name을 리턴 하 만, 저장되 않는다.

ContactOrganization

Android

• Android 2.x- pref: 원하 않음. 항상 false 값을 리턴한다.

• Android 1.x- pref: 원하 않음. 항상 false 값을 리턴한다.- type: 원하 않음. 항상 null 값을 리턴한다.- title: 원하 않음. 항상 null 값을 리턴한다.

iOS

- pref: 원하 않음. 항상 false 값을 리턴한다.- type: 원하 않음. 항상 null 값을 리턴한다.- name: 부분적으 원함.

Organization에 대입한 열 , 첫 ContactOrganization만 유효하다.- department: 부분적으 원함.

Organization에 대입한 열 , 첫 ContactOrganization만 유효하다.- title: 부분적으 원함.

Organization에 대입한 열 , 첫 ContactOrganization만 유효하다.

8. Device API

119Page l 119

q Sample Code



<head><title>Contact Example</title><script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">


function onDeviceReady() {

var contact = navigator.contacts.create();contact.displayName = "Plumber";contact.nickname = "Plumber"; //specify both to support all devicesvar name = new ContactName();name.givenName = "Jane";name.familyName = "Doe";contact.name = name;

contact.save(onSaveSuccess,onSaveError);

var clone = contact.clone();clone.name.givenName = "John";console.log("Original contact name = " + contact.name.givenName);console.log("Cloned contact name = " + clone.name.givenName);

contact.remove(onRemoveSuccess,onRemoveError);}

8. Device API

120Page l 120

q Sample Code


function onSaveSuccess(contact) {alert("Save Success");

}function onSaveError(contactError) {

alert("Error = " + contactError.code);}

function onRemoveSuccess(contacts) {alert("Removal Success");

}function onRemoveError(contactError) {

alert("Error = " + contactError.code);}

</script></head><body><h1>Example</h1><p>Find Contacts</p>

</body></html>

8. Device API

121Page l 121

q 디 이스의 하드웨어 또는 소프트웨어에 대한 정 를 제공한다.

Device API - Device

유형 분 설

Properties

device.name• 단말 의 제 이나 델 .• var string = device.name;

device.phonegap• 웹앱에 탑재한 폰갭 API의 전 정 .• var string = device.phonegap;

device.platform• 단말 의 운영체제(OS)의 이름.• var string = device.platform;

device.uuid• 단말 출고 시, 제작자가 부여한 용 고유 식 자(UUID).• var string = device.uuid;

device.version• 단말 의 운영체제(OS)의 전 정 .• var string = device.version;

Variable Scope

• 용적으 window 객체 부터 단말 정 를 할 수 있다.• // These reference the same `device`

//var phoneName = window.device.name;var phoneName = device.name;

8. Device API

122Page l 122

q 제약사항

Device API - Device


Properties

device.name

Android• 단말 차이가 있 만, 델 대신에 제 을 출 한다.-제 은 간혹 코드를 나타낸다.-Nexus One 은 "Passion", Motorola Droid 은 "voles"

iOS• 델 대신 단말 에 등 한 사용자의 이름을 출 한다.-iTunes 내에 설정한 이름.-e.g. "Joe's iPhone"

device.platform

Android -

iOS- 든 단말 는 ‘iPhone’ 으 출 한다. - 공 자에 따라 다르게 출 될 수 있다.

device.version

Android - Android 2.1 미만 전에서는 원하 않는다.

iOS -

8. Device API

123Page l 123

q Sample Code

Device API - Device


<head><title>Device Properties Example</title>



function onDeviceReady() {var element = document.getElementById('deviceProperties');

element.innerHTML = 'Device Name: ' + device.name + '<br />' + 'Device Cordova: ' + device.cordova + '<br />' + 'Device Platform: ' + device.platform + '<br />' + 'Device UUID: ' + device.uuid + '<br />' + 'Device Version: ' + device.version + '<br />';

}

</script></head><body><p id="deviceProperties">Loading device properties...</p>

</body></html>

8. Device API

124Page l 124

q W3C의 File API를 으 파일 읽 와 쓰 능의 API를 제공한다.

Device API - File

유형 분 설

Objects

File

• 단일 파일의 정 를 갖는 객체.• properties:－ name: 파일의 이름. (DOMString)－ fullPath: 파일의 이름을 포함하는 전체 경 . (DOMString)－ type: 파일의 mime 타입. (DOMString)－ lastModifiedDate: 파일이 마 막으 수정된 날 . (Date)－ size: bytes 단위의 파일 크 . (long)

FileReader

• 파일을 읽을 수 있도 하는 객체.• properties:－ readyState: 객체의 상태 값을 제공한다. (EMPTY, LOADING, DONE)－ result: 읽어온 파일의 내용을 가 고 있는 속성. (DOMString)－ error: 오류 정 를 가 고 있는 속성. (FileError)－ onloadstart: 파일을 읽 시작했을 때 호출하는 함수. (Function)－ onload: 파일을 성공적으 읽었을 때 호출하는 함수. (Function)－ onabort: abort() 함수에 의해서 단되거나 타 다른 사유 인해 단 됐을 때 실행할 함수.

(Function)－ onerror: 파일을 읽는 도 , 에러가 생했을 때 호출하는 함수. (Function)－ onloadend: 성공, 실패와 무 하게 파일 읽 완 했을 때 호출하는 함수. (Function)

• Methods :－ abort: 파일 읽 를 강제 단 시키는 함수.－ readAsDataURL: Base64 인코딩으 읽고 오는 함수.－ readAsText: 파일을 텍스트 읽어오는 함수.

8. Device API

125Page l 125


Device API - File

유형 분 설

Objects

FileWriter

• 파일 쓰 정 를 갖고있는 객체.• properties:－ readyState: 객체의 상태 값. (INIT, WRITING, DONE)－ fileName: 쓰 할 파일의 이름. (DOMString)－ length: 쓰 할 파일의 이. (long)－ position: 쓰 할 파일 포인터의 위치. (long)－ error: 오류 정 를 갖고 있는 객체. (FileError)－ onwritestart: 쓰 를 시작할 때 호출하는 함수. (Function)－ onwrite: 쓰 를 완 했을 때 호출하는 함수. (Function)－ onabort: abort() 함수에 의해서 단되거나 타 다른 사유 인해 단 됐을 때 실행할 함수.

(Function)－ onerror: 파일을 쓰는 도 , 에러가 생했을 때 호출하는 함수. (Function)－ onloadend: 성공, 실패와 무 하게 파일 쓰 완 했을 때 호출하는 함수. (Function)

• Methods :－ abort: 파일 쓰 를 강제 단하는 함수.－ seek: 정한 위치 파일 포인터를 이동하는 함수.－ truncate: 정한 위치 만 존하고, 이후 데이터는 삭제하는 함수.－ write: 현재 파일 포인터 부터 문자열을 파일에 쓰는 함수.

FileSystem

• 파일 시스템 정 를 갖는 객체.• properties:－ name: 파일 시스템의 이름. (DOMString)－ root: 파일 시스템의 트(root) 디 토리 객체. (DirectoryEntry)

8. Device API

126Page l 126


Device API - File

유형 분 설

Objects FileEntry

• 파일 시스템에 있는 디 토리를 정하는 객체.• properties:－ isFile: 항상 true이다. (boolean)－ isDirectory: 항상 false이다. (boolean)－ name: 경 를 제외한 최종 파일 이름. (DOMString)－ fullPath: 트(root)를 포함하는 전체 경 . (DOMString)

• NOTE: 다음은 W3C에서 정의하고 있 만, PhoneGap에서는 따르 않는다:－ filesystem: FileEntry 에 설정되어 있는 FileSystem 객체. (FileSystem)

• Methods :－ getMetadata: 파일에 대한 타데이터.－ moveTo: 파일 시스템의 다른 위치 파일을 이동한다.－ copyTo: 파일 시스템의 다른 위치 파일을 사한다.－ toURI: 파일의 위치를 URI 형식으 환하여 리턴한다.－ remove: 파일을 삭제한다..－ getParent: 현재 디 토리의 상위 경 를 한다.－ createWriter: FileWriter 객체를 생성한다.－ file: 파일 정 를 가 는 File 객체를 생성한다.

8. Device API

127Page l 127


Device API - File

유형 분 설

Objects DirectoryEntry

• W3C Directories and Systems을 따르는 파일 시스템 디 토리 객체.• properties:－ isFile: 항상 false 이다. (boolean)－ isDirectory: 항상 true 이다. (boolean)－ name: 경 를 제외한 DirectoryEntry의 이름. (DOMString)－ fullPath: 트(root) 부터의 절대경 . (DOMString)

• NOTE: 다음은 W3C에서 정의하고 있 만, PhoneGap에서는 따르 않는다:－ filesystem: DirectoryEntry 에 설정되어 있는 FileSystem 객체. (FileSystem)

• Methods :－ getMetadata: 파일에 대한 타데이터.－ moveTo: 파일 시스템의 다른 위치 디 토리를 이동한다.－ copyTo: 파일 시스템의 다른 위치 디 토리를 사한다.－ toURI: 디 토리의 위치를 URI 형식으 환하여 리턴한다.－ remove: 디 토리를 삭제한다..－ getParent: 현재 디 토리의 상위 경 를 한다.－ createWriter: FileWriter 객체를 생성한다.－ getDirectory: 폴더를 가져오거나, 생성한다.－ getFile: 파일을 생성하거나, 가져온다.－ removeRecursively: 하위 폴더의 든 컨텐츠를 삭제한다.

8. Device API

128Page l 128


Device API - File

유형 분 설

Objects

DirectoryReader

• 디 토리 내의 파일들과 디 토리들을 읽는 객체.• Directories and Systems 약을 따른다.• Methods :－ readEntries: 디 토리 내의 객체들을 읽어온다.

FileTransfer• 서 에 파일을 업 드할 수 있도 하는 파일 전송 객체.• Methods :－ upload: 서 파일을 전송한다.

FileUploadOptions

• 파일 업 드시, 전달할 매개 수를 정의하는 업 드 속성객체.• Properties :－ fileKey: 업 드할 파일의 수 . (DOMString)

설정하 않으 “file” 정의된다.－ fileName: 서 에 저장될 파일의 수 . (DOMString)

설정하 않으 "image.jpg“ 정의된다.－ mimeType: 데이터를 업 드시, mimeType을 설정한다. (DOMString)

설정하 않으 "image/jpeg“ 정의된다.－ params: 서 에 추가 전달할 매개 수. (Object)－ chunkedMode: 대형 스트림 드 여부. (Boolean)

설정하 않으 "true“ 정의된다.

FileUploadResult

• FileTransfer 객체를 통해 업 드에 성공했을 때 서 에서 아오는 객체.• Properties :－ bytesSent: 서 에 업 드한 용량 정 . (long)－ responseCode: 서 에서 아온 HTTP 응답코드. (long)－ response: 서 에서 응답 은 데이터. (DOMString)

8. Device API

129Page l 129


Device API - File

유형 분 설

Objects

Flags

• 파일이나 디 토리를 호출할 때, 존재하 않으 생성할 것인 를 설정하는 객체.• Properties :－ create: 파일이나 디 토리가 없을 때, 생성할 것인 의 여부. (boolean)－ exclusive: create 속성과 같이 사용해야 하 , 이미 파일이나 디 토리가 있을 경우 생성 실패

처리할 것인 의 여부. (boolean)

LocalFileSystem

• 단말 의 트(root) 파일 시스템에 접근할 수 있도 원하는 파일 시스템.• Methods :－ requestFileSystem: filesystem 객체를 요청하는 함수. (Function)－ resolveLocalFileSystemURI: URI DirectoryEntry 나 FileEntry 객체를 요청하는 함수. (Function)

• Constants :－ LocalFileSystem.PERSISTENT: 용 저장 공간이 , 사용자가 임의 삭제할 수 없는 공간이

다.－ LocalFileSystem.TEMPORARY: 임시용 저장 공간이 , 안정성을 장하 하는 공간이다.

Metadata• 파일이나 디 토리의 상태 정 를 제공하는 객체.• Properties :－ modificationTime: 파일이나 디 토리의 최종 수정일 정 . (Date)

8. Device API

130Page l 130


Device API - File

유형 분 설

Objects

FileError

• File API 함수 수행 시, 에러가 생했을 때 에러 정 를 갖는 객체.• Properties :－ code: 다음과 같은 에러 코드를 갖는다.

• Constants :－ FileError.NOT_FOUND_ERR－ FileError.SECURITY_ERR－ FileError.ABORT_ERR－ FileError.NOT_READABLE_ERR－ FileError.ENCODING_ERR－ FileError.NO_MODIFICATION_ALLOWED_ERR－ FileError.INVALID_STATE_ERR－ FileError.SYNTAX_ERR－ FileError.INVALID_MODIFICATION_ERR－ FileError.QUOTA_EXCEEDED_ERR－ FileError.TYPE_MISMATCH_ERR－ FileError.PATH_EXISTS_ERR

FileTransferError

• 파일 전송 시, 에러가 생했을 때 에러 정 를 갖는 객체.• Properties :－ code: 다음과 같은 에러코드를 갖는다. (int)

• Constants :－ FileTransferError.FILE_NOT_FOUND_ERR－ FileTransferError.INVALID_URL_ERR－ FileTransferError.CONNECTION_ERR

8. Device API

131Page l 131

q 제약사항

Device API - File


Objects

FileReader

Android -

iOS- Encoding 파라미터는 원하 않음- UTF8 인코딩이 항상 사용된다.

FileUploadResult

Android -

iOS - 업 드 성공 시, FileUploadResult 객체에 responseCode와 bytesSent을 갖 않는다.

DirectoryEntry

Android • W3C Directories and Systems 약 이다.. • 다음은 W3C에서 정의하고 있 만, PhoneGap에서는 따르 않는다:－filesystem: DirectoryEntry 에 설정되어 있는 FileSystem 객체. (FileSystem)iOS

FileEntry

Android • W3C Directories and Systems 약 이다.. • 다음은 W3C에서 정의하고 있 만, PhoneGap에서는 따르 않는다:－filesystem: FileEntry 에 설정되어 있는 FileSystem 객체. (FileSystem)iOS

8. Device API

132Page l 132

q Sample Code

Device API - File


<head><title>FileReader Example</title><script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">

function onLoad() {document.addEventListener("deviceready", onDeviceReady, false);

}

function onDeviceReady() {window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);

}

function gotFS(fileSystem) {fileSystem.root.getFile("readme.txt", null, gotFileEntry, fail);

}

function gotFileEntry(fileEntry) {fileEntry.file(gotFile, fail);

}

function gotFile(file){readDataUrl(file);readAsText(file);

}

8. Device API

133Page l 133

q Sample Code

Device API - File

function readDataUrl(file) {var reader = new FileReader();reader.onloadend = function(evt) {

console.log("Read as data URL");console.log(evt.target.result);

};reader.readAsDataURL(file);

}

function readAsText(file) {var reader = new FileReader();reader.onloadend = function(evt) {

console.log("Read as text");console.log(evt.target.result);

};reader.readAsText(file);

}

function fail(evt) {console.log(evt.target.error.code);

}

</script></head><body><h1>Example</h1><p>Read File</p>

</body></html>

8. Device API

134Page l 134

q 디 이스의 GPS 센서에 의해 제공되는 geolocatino 객체에 접근하는 API이다.

Device API - Geolocation

유형 분 설

Methods

geolocation.getCurrentPosition

• 단말 의 현재 위치를 Position 객체에 담아 한다.• navigator.geolocation.getCurrentPosition(geolocationSuccess,

[geolocationError], [geolocationOptions]);

• Parameters- geolocationSuccess: 현재 위치를 성공적으 하였을 때, 수행하는 함수.- geolocationError: (선택) 에러가 생하였을 때, 수행하는 함수.- geolocationOptions: (선택) geolocation 옵션.

geolocation.watchPosition

• 단말 의 위치 동을 감 한다.• var watchId = navigator.geolocation.watchPosition(geolocationSuccess,

[geolocationError],[geolocationOptions]);

• Parameters- geolocationSuccess: 위치 동을 성공적으 하였을 때, 수행하는 함수.- geolocationError: (선택) 에러가 생하였을 때, 수행하는 함수.- geolocationOptions: (선택) geolocation 옵션.

• Returns- String: 특정 간격으 감 하고 있는 watch Id를 리턴한다. 또한, 이 값과

geolocation.clearWatch를 통해 감 를 단할 수 있다.

geolocation.clearWatch

• watchID 파라미터를 통해 단말 의 위치 동 감 를 단시킬 수 있다..• navigator.geolocation.clearWatch(watchID);• Parameters- watchID: The id of the watchPosition interval to clear. (String)

8. Device API

135Page l 135



유형 분 설

Arguments

geolocationSuccess• 위치 정 를 성공적으 가져왔을 경우, 수행하는 사용자 정의 함수.• Parameters

- position: 단말 의 위치 정 . (Position)

geolocationError• geolocation 함수 수행 시, 에러가 생했을 경우 수행하는 함수. Parameters

- error: 단말 의 에러 정 . (PositionError)

geolocationOptions

• 위치 정 를 할 경우, 선택적으 설정할 수 있는 옵션.• { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true };• Options

- frequency: milliseconds 단위 특정 간격간에 위치 정 를 설정한다. W3C 스펙을 따르 않고있 때문에, 앞으 phoneGap에서 원하 않을 예정이다. (Number) ( : 10000)

- enableHighAccuracy: 어플리케이션이 가장 정확한 정 를 감 하도 설정하는 옵션이다. (Boolean)

- timeout: 위치 감 요청의 제한시간이다.(geolocation.getCurrentPosition, geolocation.watchPosition 요청 후, geolocationSuccess이호출될 때 의 시간.) (Number)

- maximumAge: milliseconds 단위 위치 정 를 저장하고 있는 시간. (Number)

8. Device API

136Page l 136



유형 분 설

Objects

Position

• geolocation API들을 통해 해 는 위치 정 를 갖고 있는 객체.• Properties

- coords: 위성 좌 . (Coordinates)- timestamp: milliseconds 단위 위치 정 를 하는 특정 시간 간격.

(DOMTimeStamp)

PositionError

• 에러가 생하였을 때, 에러 정 를 가 는 객체.• Properties

- code: 에러 코드는 아래와 같다..- message: 에러 시 를 나타낸다.

• Constants- PositionError.PERMISSION_DENIED: 한 부족.- PositionError.POSITION_UNAVAILABLE: 위치를 감 할 수 없음.- PositionError.TIMEOUT: 감 시간 초과.

Coordinates

• Position 객체의 coords 속성 객체이 , 위성 좌 의 정 를 가 고 있는 객체.• Properties

- latitude: 위도. (Number)- longitude: 경도. (Number)- altitude: 타원체 부터 위치 의 미터 단위 높이. (Number)- accuracy: 위도, 경도(미터 단위)의 정확도. (Number)- altitudeAccuracy: 고도(미터 단위)의 정확도. (Number)- heading: 북 향을 시계 향의 각도 나타낸 값. (Number)- speed: 초 단위의 단말 속도(ground speed). (Number)

8. Device API

137Page l 137

q 제약사항



Objects

Coordinates

Android- altitudeAccuracy: 단말 에서 원하 않는다.

항상 null 이다.

iOS -

Position

Android -

iOS - timestamp: milliseconds 단위 대신에 seconds 단위를 쓴다.

Arguments geolocationOptions

Android

- frequency: milliseconds 단위 위치 정 를 감 하는 특정 시간 간격. W3C 스펙을따르 않고 있 때문에 곧 삭제될 예정이다.

- iOS 2.x 전의 가상 에서는 enableHighAccuracy 을 ‘true’ 설정해야만 위치정를 가져올 수 있다.

iOS- frequency: milliseconds 단위 위치 정 를 감 하는 특정 시간 간격. W3C 스펙을

따르 않고 있 때문에 곧 삭제될 예정이다.

8. Device API

138Page l 138

q Sample Code



<head><title>Device Properties Example</title><script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">

document.addEventListener("deviceready", onDeviceReady, false);function onDeviceReady() {

navigator.geolocation.getCurrentPosition(onSuccess, onError);}

function onSuccess(position) {var element = document.getElementById('geolocation');element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +

'Longitude: ' + position.coords.longitude + '<br />' +'Altitude: ' + position.coords.altitude + '<br />' +'Accuracy: ' + position.coords.accuracy + '<br />' +'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +'Heading: ' + position.coords.heading + '<br />' +'Speed: ' + position.coords.speed + '<br />' +'Timestamp: ' + position.timestamp + '<br />';

}function onError(error) {

alert('code: ' + error.code + '\n' +'message: ' + error.message + '\n');

}</script>

</head><body><p id="geolocation">Finding geolocation...</p>

</body></html>

8. Device API

139Page l 139

q 디 이스의 오디오 파일을 재생 또는 녹음 할 수 있는 API이다.

Device API - Media

유형 분 설

• var media = new Media(src, mediaSuccess, [mediaError], [mediaStatus]);• Note: 이 객체는 편리함 때문에 현되었 만, W3C를 으 현된 것이 아니다. 앞으 Media 객체는 다른 객체 대체될 것이 , 새 만들어 객체는

W3C 으 현될 것이다.

Parameters

src • audio 컨텐츠를 포함하고 있는 URI. (DOMString)

mediaSuccess• (선택) play/record, stop이 성공적으 수행되었을 경우, Media 객체를 가 고 호출되는 함

수. (Function)

mediaError • (선택) 에러가 생하였을 때, 호출되는 함수. (Function)

mediaStatus • (선택) 상태의 화가 있을 경우, 호출되는 함수. (Function)

Methods

media.getCurrentPosition

• 오디오 파일의 현재 재생 위치 값을 한다.• media.getCurrentPosition(mediaSuccess, [mediaError]);• Parameters

- mediaSuccess: 초 단위의 현재 위치를 성공적으 하였을 때, 호출하는 함수.- mediaError: (선택) 현재 위치를 하다가 실패했을 경우, 호출하는 함수.

media.getDuration• 오디오 파일의 재생 연 시간.• media.getDuration();

media.pause• 오디오 파일의 재생을 춘다.• media.pause();

media.play• 오디오 파일 재생을 시작하거나, 재실행한다.• media.play();

media.release• 운영체제(OS) 혹은 리 내의 Media 객체에 등 된 오디오 파일을 해제한다.• media.release();

8. Device API

140Page l 140

q 디 이스의 오디오 파일을 재생 또는 녹음 할 수 있는 API이다.

Device API - Media

유형 분 설

Methods

media.seekTo

• 오디오 파일의 재생 위치를 설정한다.• media.seekTo(milliseconds);• Parameters

- milliseconds: milliseconds 단위 오디오 파일의 재생 위치를 설정한다.

media.startRecord• 오디오 파일의 녹음을 시작한다.• media.startRecord();

media.stop• 오디오 파일의 재생을 춘다.• media.stop();

media.stopRecord•오디오 파일의 녹음을 춘다.•media.stopRecord();

Additional ReadOnlyParameters

_position• 현재 오디오 파일의 재생 위치(초 단위). • 하 만 자동적으 업데이트 되 않 때문에, getCurrentPosition 함수를 통해 업데이트한 후 호출

해야 현재 재생 위치를 할 수 있다.

_duration • 미디어 객체의 재생 연 시간(초 단위).

Object MediaError

• 에러가 생했을 경우, 호출되는 함수에서 파라미터 쓰이는 에러 정 객체.• Properties

- code: 에러 코드는 아래와 같은 코드를 갖는다..- message: 에러 시 를 나타낸다.

• Constants- MediaError.MEDIA_ERR_ABORTED- MediaError.MEDIA_ERR_NETWORK- MediaError.MEDIA_ERR_DECODE- MediaError.MEDIA_ERR_NONE_SUPPORTED

8. Device API

141Page l 141

q 제약사항

Device API - Media


Methods media.startRecord

Android -

iOS- 녹음할 파일이 존재하거나, .wav 파일을 미리 생성해야 한다. File API는 파일을 생성

해주 않는다.

8. Device API

142Page l 142

q Sample Code

Device API - Media

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Media Example</title><script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">document.addEventListener("deviceready", onDeviceReady, false);function onDeviceReady() {

playAudio("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3");}var my_media = null;var mediaTimer = null;function playAudio(src) {

my_media = new Media(src, onSuccess, onError);my_media.play();

if (mediaTimer == null) {mediaTimer = setInterval(function() {

my_media.getCurrentPosition(function(position) {

if (position > -1) {setAudioPosition((position) + " sec");

}},// error callbackfunction(e) {

console.log("Error getting pos=" + e);setAudioPosition("Error: " + e);

});

}, 1000);}

}

8. Device API

143Page l 143

q Sample Code

Device API - Media

function pauseAudio() {if (my_media) {

my_media.pause();}

}function stopAudio() {

if (my_media) {my_media.stop();

}clearInterval(mediaTimer);mediaTimer = null;

}function onSuccess() {

console.log("playAudio():Audio Success");}function onError(error) {

alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');

}

function setAudioPosition(position) {document.getElementById('audio_position').innerHTML = position;

}</script>

</head><body><a href="#" class="btn large" onclick="playAudio('http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3');">Play Audio</a><a href="#" class="btn large" onclick="pauseAudio();">Pause Playing Audio</a><a href="#" class="btn large" onclick="stopAudio();">Stop Playing Audio</a><p id="audio_position"></p>

</body></html>

8. Device API

144Page l 144

q 동 소리를 통한 알림 API이다.

Device API - Notification

유형 분 설

Methods

notification.alert

• 설정된 경고창(alert) 나 dialog box을 여 다.• navigator.notification.alert(message, alertCallback, [title], [buttonName])

- message: 세 의 내용. (String)- alertCallback: 경고창이나 대화상자가 사라 때, 호출하는 함수.(Function)- title: 경고창이나 대화상자의 제 . (String) (선택, : "Alert")- buttonName: 경고창이나 대화상자에 여 게 되는 튼 이름. (String) (선택, : "OK")

notification.confirm

• 실행 여부를 선택하는 확인형 대화상자.• navigator.notification.confirm(message, confirmCallback, [title], [buttonLabels])

- message: 세 의 내용. (String)- confirmCallback: - 튼들 하나를 클릭했을 때, 호출되는 함수. 클릭한 호를 전달 는다.

(1, 2 또는 3). (Number)- title: 경고창이나 대화창의 제 . (String) (선택, : "Confirm")- buttonLabels: 경고창이나 대화상자에 여 게 되는 튼 이름. 튼들은‘,’ 분한다.

(String) (선택, : "OK,Cancel")

notification.beep• 단말 의 비프(beep)음을 재생한다.• navigator.notification.beep(times);

- times: 되는 비프(beep)음 재생 횟수. (Number)

notification.vibrate• 정한 시간 동안 단말 의 동을 울리게 한다.• navigator.notification.vibrate(milliseconds)

- time: Milliseconds 단위의 동이 울리는 시간. (Number)

8. Device API

145Page l 145

q 제약사항



Methods

notification.beep

Android - 환경 설정 > 소리 > 알림음 설정에서 정한 알림을 재생.

iOS

• 비프(beep)음 설정을 무시한다.• iPhone에서는 beep API를 원하 않는다.-PhoneGap에서는 media API를 통한 오디오 파일 재생으 비프(beep)를 원한다.-사용자는 비프(beep)음의 파일을 저장해야 한다..-파일은 30초를 넘 않아야 하 , www/root 에 ‘beep.wav’ 이름으 저장해야 한다.

notification.vibrate

Android -

iOS - time: 미리 설정한 동 시간을 무시하고 아이폰 설정을 따른다.

8. Device API

146Page l 146

q 동 소리를 통한 알림 API이다.


유형 분 설

Methods

notification.alert

• 설정된 경고창(alert) 나 dialog box을 여 다.• navigator.notification.alert(message, alertCallback, [title], [buttonName])

- message: 세 의 내용. (String)- alertCallback: 경고창이나 대화상자가 사라 때, 호출하는 함수.(Function)- title: 경고창이나 대화상자의 제 . (String) (선택, : "Alert")- buttonName: 경고창이나 대화상자에 여 게 되는 튼 이름. (String) (선택, : "OK")

notification.confirm

• 실행 여부를 선택하는 확인형 대화상자.• navigator.notification.confirm(message, confirmCallback, [title], [buttonLabels])

- message: 세 의 내용. (String)- confirmCallback: - 튼들 하나를 클릭했을 때, 호출되는 함수. 클릭한 호를 전달 는다.

(1, 2 또는 3). (Number)- title: 경고창이나 대화창의 제 . (String) (선택, : "Confirm")- buttonLabels: 경고창이나 대화상자에 여 게 되는 튼 이름. 튼들은‘,’ 분한다.

(String) (선택, : "OK,Cancel")

notification.beep• 단말 의 비프(beep)음을 재생한다.• navigator.notification.beep(times);

- times: 되는 비프(beep)음 재생 횟수. (Number)

notification.vibrate• 정한 시간 동안 단말 의 동을 울리게 한다.• navigator.notification.vibrate(milliseconds)

- time: Milliseconds 단위의 동이 울리는 시간. (Number)

8. Device API

147Page l 147

q 제약사항



Methods

notification.beep

Android - 환경 설정 > 소리 > 알림음 설정에서 정한 알림을 재생.

iOS

• 비프(beep)음 설정을 무시한다.• iPhone에서는 beep API를 원하 않는다.-PhoneGap에서는 media API를 통한 오디오 파일 재생으 비프(beep)를 원한다.-사용자는 비프(beep)음의 파일을 저장해야 한다..-파일은 30초를 넘 않아야 하 , www/root 에 ‘beep.wav’ 이름으 저장해야 한다.

notification.vibrate

Android -

iOS - time: 미리 설정한 동 시간을 무시하고 아이폰 설정을 따른다.

8. Device API

148Page l 148

q Sample Code



<head><title>Notification Example</title>



function onDeviceReady() {// Empty

}

function alertDismissed() {// do something

}

function showAlert() {navigator.notification.alert(

'You are the winner!', // messagealertDismissed, // callback'Game Over', // title'Done' // buttonName

);}

</script></head><body><p><a href="#" onclick="showAlert(); return false;">Show Alert</a></p>

</body></html>

8. Device API

149Page l 149

바이스 API – Interface API

① 전자정부 프 임워크 의 서 어플리케이션과 일 클라이언트는 웹서비스를 통해 Loosely Coupling 된다.

② 웹서비스는 REST Service 프 토콜을 이용하여 클라이언트와 통신한다.

③ 웹서비스를 이용하는 일 클라이언트는 전자정부 프 임워크 REST 서비스 뿐만 아니라, REST 서비스를 현한 서 와의 통신

이 가능하다.

q 전자정부 프 임워크 서 어플리케이션과 일 하이브리드 앱은 Loosely Coupling 되어 있으 ,

Restful 식으 웹서비스를 통해 통신한다.

8. Device API

150Page l 150

바이스 API – Interface API (Android)

① REST Client Java 의 RestTemplate 사용을 포함

② 트위터, 페이스북 같은 소셜 네트워크에 대한 인 을 원

③ JSON, XML, RSS, Atom 에 대한 third-party 라이브러리

를 사용할 수 있음

④ 최근 1.0 전으 Release 되었음

⑤ Maven 원

q 특정 서 와 HTTP/HTTPS 통신을 하는 static library이다.

q GET, POST, PUT, DELETE 특정서 와 통신 파일 upload / download 가 가능하다.

Spring for Android

Spring for Android 는 안드 이드 어플리케이션 개 을

단순화 하 위한 Spring framework 의 확장 능 이다.분 설

window.plugins.EgovInterface.get - HTTP GET Method를 수행한다.

window.plugins.EgovInterface.post - HTTP POST Method를 수행한다.

window.plugins.EgovInterface.geturl- 환경설정에서 설정한 SERVER_URL

을 얻어온다.

Function List

window.plugins.EgovInterface.get(url,accept_type, null, function(jsondata) {var data = JSON.parse(jsondata);

…});

window.plugins.EgovInterface.post(url, accept_type, null, function(jsondata) {var data = JSON.parse(jsondata);

...});

window.plugins.EgovInterface.geturl(function(url){...

});

8. Device API

151Page l 151

q Sample Code

바이스 API – Interface API (Android)

window.plugins.EgovInterface.get(url,accept_type, null, function(jsondata) {var data = JSON.parse(jsondata);var list_html = "";var totcnt = data.networkInfoList.length;for (var i = 0; i < totcnt; i++) {

result = data.networkInfoList[i];list_html += "<li><h3>UUID : " + result.uuid + "</h3>";list_html += "<p><strong>Network Connection Type : " + result.networktype + "</strong></p>";list_html += "<p>Availibility : " + result.useYn + "</p></li>";

}var theList = $('#theList');theList.html(list_html);

$.mobile.changePage("#networkInfoList", "slide", false, false);theList.listview("refresh"); setTimeout(loadiScroll, 200);

});

var uri = "/nwk/deleteNetworkInfo.do";//Accept_Type settingvar accept_type = "json";// http post method callegovHyb.post(url, accept_type, null, function(jsondata) {

var data = JSON.parse(jsondata);if(data.resultState == "OK"){

$.mobile.changePage("#networkInfo", { transition: "slide", reverse: true });}else{

$("#alert_dialog").click( function() {jAlert('데이터 삭제 오류가 생 했습니다.', '삭제 오류', 'c');

});}

});

8. Device API

152Page l 152

바이스 API – Interface API (iOS)

① EgovInterface Framework

• CFNetwork.framework

• MobileCoreServices.framework

• SystemConfiguration.framework

• Security.framework

② Libraries

EgovInterface API를 연결하는 header 파일

• EgovComModule.h

• libEgovComModule.a

③ EgovInterface

해당 header 파일과 현부 파일이 있어야만 EgovInterface

API와 연동

• EgovInterface.h

• EgovInterface.m

q 특정 서 와 HTTP/HTTPS 통신을 하는 static library이다.

q GET, POST, PUT, DELETE 특정서 와 통신 파일 upload / download 가 가능하다.

분 설

initWithURL:delegate - 초 화와 적인 설정을 한다.

setURL - 통신할 곳의 URL을 설정한다.

setTimeOutSecondsl- time out 초를 설정한다. Default 10초 설정되

어 있다.

addPost:key- 입 하고자 하는 값을 key값의 request 파라미터에

설정한다.

startAsynchronous - 설정하고 입 한 값으 비동 통신을 시작한다.

Function List추가 파일

분 설

onNetworkStarted - 통신이 시작된 후 일어나는 이 트

onNetworkFailed - 통신이 실패한 후 일어나는 이 트

onNetworkFinished:responseString:responseStatusCode:

- 통신이 성공한 후 일어나는 이 트

8. Device API

153Page l 153

q Sample Code

바이스 API – Interface API (iOS)

//생성EGovComModule *m_module = [[[EGovComModule alloc] initWithURL:[NSString stringWithFormat:@"%@/index.do",kSERVER_URL] delegate:self] autorelease];

//wi-fi 네트워크 체크if (m_module.isWifi) {

NSLog(@"wi-fi");} else {

if (m_module.isNetworkConnected) {NSLog(@"3G/4G");

} else {NSLog(@"Network Disconnected");

}}

//통신 시작[m_module startAsynchronous];

//key value 값을 추가하고자 할 경우[m_module addPost:@"값" key:@"key"];

//통신 시작 이 트- (void)onNetworkStarted{}//통신 실패 이 트- (void)onNetworkFailed:(NSError*)error{}//통신 완 이 트- (void)onNetworkFinished:(NSData*)responseData responseString:(NSString*)responseStringresponseStatusCode:(NSInteger)responseStatusCode{}

8. Device API

154Page l 154

바이스 API 러그인

① JavaScript에서 플러 인의 함수를 호출하게 되 내부적으 PhoneGap.exec() 호출한다.

② JavaScript 호출 문이 “gap:xxx” 형태의 문자열인 경우 DroidGap@GapClient에서 PluginManager.exe() 소드를 실행하여 결과를

JSON 스트링으 리턴한다.

③ DroidGap@GapClient PluginManager 부터 리턴 은 플러 인 실행결과 스트링을 jsPromptResult.confirm(실행결과) 서드를 호출해 리

턴한다.

④ 웹 영역에서는 결과 리턴값을 해석하여 Success 또는 Failure 콜 함수를 호출한다.

q 폰갭 프 젝트에서는 동 식 비동 식 두 가 을 통해 플러 인이 동작된다.

8. Device API

155Page l 155

q 폰갭 프 젝트에서는 동 식 비동 식 두 가 을 통해 플러 인이 동작된다.

바이스 API 러그인

① 폰갭 어플리케이션은 비동 식 응답에 요청하 위해 내부적으 Callback Server를 이용하여 XMLHttpRequest 요청에 응답하는 컬

웹서 를 동한다.

② PhoneGap.JSCallback 함수에서 컬 웹서 와 ajax통신하 위한 연결을 맺는다.

③ 동 식과 같은 식으 플러 인의 능을 호출한다.

④ PluginManager는 도의 스 드에서 플러 인을 실행시키고 CallbackServer에 결과를 적재 시킨다.

⑤ CallbackServer에서는 새 운 플러 인 실행결과가 공 되 존에 연결된 XHttpRequest에 대한 응답으 결과를 환 한다.

8. Device API

156Page l 156

î 네이티브 Function을 호출 하 위해 cordova.exe 자 스크립트를 이용한다.

î Res/xml/plugin.xml

바이스 API 러그인 Android

exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);

분 설

successFunction - iOS 네이티브 함수가 정상 호출 되었을 때, 호출되는 자 스크립트 콜 함수

failFunction - iOS 네이티브 함수의 호출 결과 에러가 생했을 때, 호출 되는 자 스크립트 콜 함수

service - 플러 인 설정파일인 plugin.xml에서 설정된 플러 인의 Name

action - 서비스 분을 위해 iOS 네이티브 함수 전달되는 파라미터

args - iOS 네이티브 함수 호출에 필요한 파라미터 열

<plugin name="<service_name>" value="<full_name_including_namespace>"/>

분 설

name - cordova.exe 함수에 전달되는 플러 인 서비스 Name

value - cordova.exe 함수에 의해 호출되는 iOS 네이티브 클래스

8. Device API

157Page l 157

î 플러 인 작성을 위해서는 폰갭 프 임워크에서 제공하는 Plugin 클래스를 상속 아야 한다.

î cordova.exe에 의해 호출되는 서드인 excute 서드를 작성해야 하 PlguinResult클래스를 환한다.

바이스 API 러그인 Android

public class Echo extends CordovaPlugin {@Overridepublic boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException

{if (action.equals("echo")) {

String message = args.getString(0);this.echo(message, callbackContext);return true;

}return false;

}

private void echo(String message, CallbackContext callbackContext) {if (message != null && message.length() > 0) {

callbackContext.success(message);} else {

callbackContext.error("Expected one non-empty string argument.");}

}}

분 설

action - 플러 인 서비스 분을 위해 사용되는 Action

args - 플러 인 호출 자 스크립트에서 넘겨주는 파라미터들

callbackId - 플러 인 실행 완 후 호출되는 자 스크립트 콜 Function

8. Device API

158Page l 158

î 네이티브 Function을 호출 하 위해 cordova.exe 자 스크립트를 이용한다.

î Cordova.plist

바이스 API 러그인 iOS

exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);

분 설

successFunction - iOS 네이티브 함수가 정상 호출 되었을 때, 호출되는 자 스크립트 콜 함수

failFunction - iOS 네이티브 함수의 호출 결과 에러가 생했을 때, 호출 되는 자 스크립트 콜 함수

service - 플러 인 설정파일인 plugin.xml에서 설정된 플러 인의 Name

action - 서비스 분을 위해 iOS 네이티브 함수 전달되는 파라미터

args - iOS 네이티브 함수 호출에 필요한 파라미터 열

<key>service_name</key><string>PluginClassName</string>

분 설

service_name - cordova.exe 함수에 전달되는 플러 인 서비스 Name

PluginClassName - cordova.exe 함수에 의해 호출되는 iOS 네이티브 클래스

8. Device API

159Page l 159

î 플러 인 작성을 위해서는 폰갭 프 임워크에서 제공하는 CDVPlugin 클래스를 상속 아야 한다.

바이스 API 러그인 iOS

#import <Cordova/CDVPlugin.h>

@interface Echo : CDVPlugin

- (void) echo:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;

@end

/********* Echo.m Cordova Plugin Implementation *******/

#import "Echo.h"#import <Cordova/CDVPluginResult.h>

@implementation Echo

- (void) echo:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options{

NSString* callbackId = [arguments objectAtIndex:0];

CDVPluginResult* pluginResult = nil;NSString* javaScript = nil;

@try {NSString* echo = [arguments objectAtIndex:1];

if (echo != nil && [echo length] > 0) {pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsString:echo];javaScript = [pluginResult toSuccessCallbackString:callbackId];

} else {pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_ERROR];javaScript = [pluginResult toErrorCallbackString:callbackId];

}} @catch (NSException* exception) {

pluginResult = [CDVPluginResult resultWithStatus:CDVCommandStatus_JSON_EXCEPTION messageAsString:[exception reason]];javaScript = [pluginResult toErrorCallbackString:callbackId];

}

[self writeJavascript:javaScript];}

@end

분 설

arguments - 플러 인 호출 자 스크립트에서 넘겨주는 파라미터

options - 플러 인 호출 자 스크립트에서 넘겨주는 파라미터 마 막 열 값

8. Device API

01.모바일 프레임워크 이론

Automotive