device api 활용 워크북 - tobesoftdocs.tobesoft.com/mobile_developer_guide_nexacro_17_ko.pdf ·...

Device API 활용 워크북

17.1.0.100

발행처 | (주)투비소프트

발행일 | 2020/02/03

주소 | (06083) 서울시 강남구 봉은사로 617 인탑스빌딩 2-5층

전화 | 02-2140-7700

홈페이지 | www.tobesoft.com

고객지원센터 | support.tobesoft.co.kr

제품기술문의 | 1588-7895 (오전 10시부터 오후 5시까지)

이 문서에 잘못된 정보가 있을 수 있습니다. 투비소프트는 이 문서가 제공하는 정보의 정확성을 유지하기

위해 노력하고 특별한 언급 없이 이 문서를 지속적으로 변경하고 보완할 것입니다. 그러나 이 문서에 잘못된

정보가 포함되어 있지 않다는 것을 보증하지 않습니다. 이 문서에 기술된 정보로 인해 발생할 수 있는

직접적인 또는 간접적인 손해, 데이터, 프로그램, 기타 무형의 재산에 관한 손실, 사용 이익의 손실 등에

대해 비록 이와 같은 손해 가능성에 대해 사전에 알고 있었다고 해도 손해 배상 등 기타 책임을 지지

않습니다.

사용자는 본 문서를 구입하거나, 전자 문서로 내려 받거나, 사용을 시작함으로써, 여기에 명시된 내용을

이해하며, 이에 동의하는 것으로 간주합니다.

각 회사의 제품명을 포함한 각 상표는 각 개발사의 등록 상표이며 특허법과 저작권법 등에 의해 보호를 받고

있습니다. 따라서 본 문서에 포함된 기타 모든 제품들과 회사 이름은 각각 해당 소유주의 상표로서 참조용

으로만 사용됩니다.

변경 이력

iii

버전 변경일 내용

17.0.0.2300 2019-10-10 앱 개발 추가

17.0.0.1400.2 2019-06-27 문서명 변경

모바일 개발 가이드 -> Device API 활용 워크북

17.0.0.1400.1 2018-12-28 AudioPlayer, AudioRecorder 오브젝트 예제 추가

17.0.0.1400 2018-11-23 BluetoothLE, ExternalAPI 오브젝트 예제 추가

17.0.0.1101.1 2018-10-12 Acceleration, Geolocation 오브젝트 예제 추가

17.0.0.1101 2018-09-18 모바일 개발 가이드를 공개했습니다.

차례

iv

저작권 및 면책조항

변경 이력

차례

1. DeviceAPI 활용 워크북 소개

1.1 전체 예제가 포함된 프로젝트 코드(압축파일) 내려받기

1.2 안드로이드 데모 앱 설치하기

2. DeviceAPI 소개

2.1 DeviceAPI 오브젝트 사용하기

2.2 앱에서의 모바일 장치 리소스 접근 권한

파트 I. 기본 활용

3. Acceleration

3.1 Acceleration

3.2 가속도 정보 구하기

3.2.1 예제

3.2.2 예제에서 사용한 핵심 기능

3.2.3 예제 구현 방법

4. AudioPlayer

4.1 AudioPlayer 소개

4.2 오디오 재생하기

4.2.1 예제



5. AudioRecorder

5.1 AudioRecorder 소개

5.2 오디오 녹음하기

5.2.1 예제

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ii

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iii

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . iv

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

차례 | v



6. BluetoothLE

6.1 BluetoothLE 소개

6.2 장치 스캔/연결하기

6.2.1 예제



6.3 서비스 조회하기

6.3.1 예제



7. Camera

7.1 Camera 소개

7.2 사진찍기

7.2.1 예제



7.3 사진 포맷 설정하기

7.3.1 예제



8. ExternalAPI

8.1 ExternalAPI 소개

8.2 외부 앱으로의 접근 가능 여부 확인하기

8.2.1 예제



8.3 외부 API 호출하기

8.3.1 예제



8.4 테스트 앱 만들기

8.4.1 안드로이드

9. Geolocation

9.1 Geolocation

9.2 현재 위치 정보 구하기

9.2.1 예제

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

vi | Device API 활용 워크북



10. ImagePicker

10.1 ImagePicker 소개

10.2 앨범으로부터 이미지 가져오기

10.2.1 예제



11. LiteDB

11.1 LiteDBConnection / LiteDBStatement 소개

11.2 SQLite 데이터베이스 생성하기

11.2.1 SQLite 커맨드 라인 툴 설치하기

11.2.2 데이터베이스 파일 생성하기

11.2.3 테이블 생성하기

11.2.4 데이터 입력하기

11.3 데이터베이스 연결/종료하기

11.3.1 예제



11.4 쿼리 수행하기

11.4.1 예제



11.5 트랜잭션 설정하기

11.5.1 예제



12. Network

12.1 Network 소개

12.2 연결된 네트워크 확인하기

12.2.1 예제



12.3 URL 접속 확인하기

12.3.1 예제



13. Phone

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

차례 | vii

13.1 Phone 소개

13.2 전화걸기

13.2.1 예제



14. SMS

14.1 SMS 소개

14.2 문자메시지 보기/삭제하기

14.2.1 예제



14.3 문자메시지 보내기

14.3.1 예제



15. Vibrator

15.1 Vibrator 소개

15.2 진동 발생시키기

15.2.1 예제



15.3 진동 패턴 설정하기

15.3.1 예제



파트 II. 앱 개발

16. 앱 개발 절차

16.1 시작부터 끝까지

16.2 UI만 수정하는 경우

17. 알람 앱 개발

17.1 UI 디자인과 이벤트 처리

17.1.1 넥사크로 프로젝트 생성

17.1.2 테마 적용

17.1.3 폼 생성

17.1.4 컴포넌트 생성 및 배치

17.1.5 이벤트 처리

17.1.6 xadl 함수 생성(자바 코드에서 호출할 함수)

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

viii | Device API 활용 워크북

17.1.7 UI 디자인 확인

17.2 배포 파일 생성

17.3 UI만 포함된 앱 빌드

17.4 안드로이드 프로젝트 내보내기(Export)

17.5 알람 기능 구현

17.5.1 알람음 리소스 추가

17.5.2 RingtonePlayingService 클래스 생성과 정의

17.5.3 AlarmReceiver 클래스 생성과 정의

17.5.4 UserNotify 클래스 생성과 정의

17.5.5 부트스트랩 설정과 UserNotify 객체 생성

17.5.6 브로드캐스트 리시버와 서비스 추가

17.6 안드로이드 프로젝트 들여오기(Import)

17.7 전체 앱 빌드

17.8 앱 설치 및 실행

17.8.1 앱 설치

17.8.2 알람 설정/중지

17.8.3 알람 설정/취소

17.9 앱 데모 및 소스코드

17.9.1 알람 앱 내려받기

17.9.2 알람 앱 소스 코드 내려받기

17.10 참고

17.10.1 앱 빌더에서 직접 빌드하기

17.10.2 자바스크립트와 자바간 통신 방법

자바스크립트에서 자바로 메시지 전달

자바에서 자바스크립트로 메시지 전달

17.10.3 앱 시작점 지정

17.10.4 MainActivity 설정

17.10.5 앱의 종료

17.10.6 앱을 백그라운드로 전환

17.10.7 앱 리소스 사용

17.10.8 Calendar 오브젝트 시간 설정

17.10.9 AlarmManager를 사용한 알람 설정, 해제, 취소, 확인

17.10.10 Service 수행과 종료

17.10.11 미디어 플레이어를 사용한 알람음 재생

17.10.12 안드로이드 API 레벨(SDK 버전) 관리

부록 A. 모바일 앱 만들 때 참고하세요

A.1 화면 구성

A.2 내비게이션

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

차례 | ix

A.3 색

A.4 아이콘

A.5 가상키보드 키 처리

A.6 Error 혹은 Helper 메시지

A.7 예제 앱에서의 컴포넌트 설정

A.7.1 Button

A.7.2 Edit, MaskEdit, TextArea

A.7.3 Grid

A.7.4 Static

A.7.5 GroupBox

A.7.6 CheckBox

A.7.7 Calendar

A.7.8 Combo

A.7.9 Radio

A.7.10 Spin

A.7.11 ListBox

A.7.12 Tab

A.7.13 Menu

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228

DeviceAPI 활용 워크북 소개

1.

Device API 활용 워크북은 넥사크로플랫폼 DeviceAPI 오브젝트의 사용법을 안내하고 있습니다.

Device API 활용 워크북에서 제공하는 콘텐츠는 실제 실행할 수 있는 데모 프로젝트를 제공합니다. 데모 프로젝트는

안드로이드와 iOS 환경에서만 설치 및 동작이 가능합니다.

17.0.0.1101 이하 버전의 데모 앱은 서버 주소 변경으로 앱 업데이트가 되지 않습니다. 기존 앱을 삭제

하고 새로 내려받아 설치하시기 바랍니다. 데모 앱의 버전은 앱 상단의 Information 메뉴에서 확인할 수

있습니다.

1.1 전체 예제가 포함된 프로젝트 코드(압축파일) 내려

받기

전체 예제가 포함된 데모 프로젝트 코드는 아래 링크에서 내려받을 수 있습니다.

demo_nexacroplatform_17_DeviceAPI-master.zip

DeviceAPI 활용 워크북 소개 | 2

1.2 안드로이드 데모 앱 설치하기

안드로이드용 데모 앱은 아래 QR 코드 및 링크를 통해 설치 파일을 내려받을 수 있습니다. 안드로이드 장치에서 QR

코드 리더로 읽거나 웹 브라우저에서 아래 링크를 오픈하여 앱을 설치합니다.

https://www.tobesoft.com/demo/np17demo.apk

https://www.tobesoft.com/demo/np17demo.apk

DeviceAPI 소개

2.

DeviceAPI는 넥사크로플랫폼 앱에서 모바일 장치의 기능을 사용할 수 있게 해주는 오브젝트의 모음입니다. 블루투스,

WIFI를 비롯하여 카메라, GPS, 저장장치 및 센서 등과 같이 모바일 장치에 종속적인 기능을 앱에서 사용할 수 있게

해줍니다. 현재 지원하는 오브젝트와 기능은 다음과 같습니다. 각 오브젝트에 관한 자세한 내용은 넥사크로 스튜디오

의 Help를 참조하십시오.

오브젝트 설명

Acceleration 모바일 장치의 가속도 정보를 얻을 수 있는 오브젝트입니다.

AudioPlayer 오디오 플레이어 오브젝트입니다.

AudioRecorder 오디오 레코더 오브젝트입니다.

Camera 모바일 장치의 카메라 앱을 이용하여 이미지를 얻는 오브젝트입니다.

Contact 연락처를 관리하는 오브젝트입니다.

ContactAddress 연락처의 주소 정보를 관리하는 오브젝트입니다.

ContactField 연락처 정보의 필드를 관리하는 오브젝트입니다.

ContactOrganization 연락처의 조직 정보를 관리하는 오브젝트입니다.

ContactPhoto 연락처의 사진 정보를 관리하는 오브젝트입니다.

ContactSet 연락처를 조회/추가/삭제/갱신하는 오브젝트입니다.

ExternalAPI 외부 기기, 모듈, 앱과 연동할 때 사용하는 오브젝트입니다.

FileDialog 파일을 오픈하거나 저장할 때 경로를 설정하는 파일 선택 대화상자 오브젝트입니다.

Geolocation 위치 정보를 제공하는 오브젝트입니다.

ImagePicker 앨범 앱으로부터 이미지를 가져오는 오브젝트입니다.

LiteDBConnection 데이터베이스와의 연결 정보를 제공하는 오브젝트입니다.

LiteDBStatement 데이터베이스로의 쿼리를 수행하는 오브젝트입니다.

Network 네트워크 연결 정보를 제공하는 오브젝트입니다.

Phone 전화걸기 기능을 제공하는 오브젝트입니다.

Sms 단문 메시지 송수신 기능을 제공하는 오브젝트입니다.

Vibrator 진동 기능을 관리하는 오브젝트입니다.

DeviceAPI 소개 | 4

2.1 DeviceAPI 오브젝트 사용하기

DeviceAPI는 모바일 환경에서만 동작하는 기능이기 때문에 넥사크로 스튜디오의 기본 컴포넌트로 등록되어 있지 않

습니다. 따라서 DeviceAPI 오브젝트를 사용하려면 사용자가 넥사크로 스튜디오에서 등록하는 절차가 필요합니다.

DeviceAPI 오브젝트를 사용 등록하는 절차는 다음과 같습니다.

1 넥사크로 스튜디오의 Project Explorer에서 [TypeDefinition > Objects]를 더블 클릭하여 Objects 편집기를

오픈합니다.

2 편집기 우측의 Objects 표 하단의 + 버튼을 클릭하여 필요한 오브젝트 항목을 선택하면 하단에 새로운 오브젝

트가 추가됩니다. 표에 등록된 오브젝트의 정보는 수정할 수 있으나 특별한 경우가 아니면 기본 값을 그대로 사

용합니다. 추가된 오브젝트를 삭제하려면 오브젝트명 옆에 있는 - 버튼을 클릭합니다.

3 필요한 오브젝트를 모두 추가한 후 OK 버튼을 클릭합니다. 그러면 등록한 오브젝트가 프로젝트에 반영되며 자

동으로 프로젝트가 재빌드됩니다. 추가된 오브젝트는 즉시 사용이 가능하며 다음과 같이 넥사크로 스튜디오 툴

바에서 확인할 수 있습니다.

5 | Device API 활용 워크북

2.2 앱에서의 모바일 장치 리소스 접근 권한

앱에서 DeviceAPI를 사용하여 기능을 수행하려면 모바일 장치의 리소스에 접근할 수 있는 권한이 필요합니다. 안드

로이드나 iOS 운영체제는 샌드박스 정책을 사용하기 때문에 앱 자신의 데이터 이외의 리소스에 접근할 때는 적절한

권한을 요구합니다. 그 권한 중에 사용자 개인 정보나 다른 앱에 영향을 미칠 수 있는 중요한 권한의 경우에는 사용자

로부터 명시적으로 허가를 받도록 되어 있습니다.

예를 들어, 사진을 찍는 기능을 수행시 앱은 사용자에게 다음과 같은 권한이 필요함을 알리고 허가를 요청합니다. 한

번 사용자로부터 권한을 허가받으면 권한 설정이 변경되거나 앱이 업데이트되기 전까진 더 이상 권한을 요청하지 않

습니다.

만일 접근 권한을 허용하지 않으면 앱 기능이 동작하지 않으며 기능을 수행하는데 필요한 권한을 사용자에게 표시하

여 알려줍니다.

DeviceAPI 소개 | 6

앱에 부여된 권한의 상태는 모바일 장치의 설정 메뉴에서 확인 할 수 있습니다. 사용자가 이미 허가하거나 거부한 권

한도 이곳에서 다시 설정이 가능합니다.

모바일 운영체제나 보안 정책에 따라 요구 권한이 다르게 표시될 수 있습니다.

기본 활용

파트 I.

Acceleration

3.

3.1 Acceleration

Acceleration은 모바일 장치의 가속도 센서로부터 측정된 가속도 정보를 제공하는 오브젝트입니다. 여기서 가속도는

중력 가속도(Gravity)를 의미하며 지구의 중력 가속도를 기준으로 모바일 장치가 얼만큼의 힘을 받고 있는지를 측정

한 값입니다.

가속도 정보는 x축, y축, z축의 세 값을 갖습니다. 이 값은 중력 가속도가 세 축에 작용하는 값을 측정한 것인데 이를

이용해 모바일 장치가 어느 방향으로 얼마나 기울어져 있는지를 감지할 수 있습니다. 가속도 정보는 모바일의 화면 회

전 기능, 체감형 게임 등에서 널리 활용되고 있습니다.

3.2 가속도 정보 구하기

가속도 정보는 Acceleration 오브젝트의 메소드를 호출하여 구할 수 있습니다. getCurrentAcceleration 메소드는

현재 시점의 가속도 정보를 측정합니다. 주기적으로 가속도 정보를 측정하려면 watchStart 메소드를 사용합니다. 메

소드 수행이 성공하면 onrecvsuccess 이벤트가 발생하며 AccelerationEventInfo 오브젝트에서 x, y, z 축에 작용한

가속도 정보 값을 구할 수 있습니다.

3.2.1 예제

다음은 모바일 장치의 가속도 정보를 구하는 예제입니다. Accuracy와 Interval Time을 설정한 후 Watch Start 버튼

을 터치하면 Interval Time 간격으로 가속도 정보를 측정하여 표시해줍니다. Watch Stop 버튼을 터치하면 측정을

멈춥니다.



Acceleration > watchStart 메소드

모바일 장치의 가속도 정보를 일정 간격으로 수신하도록 설정하는 메소드입니다. 메소드 호출 시 Accuracy와

Interval Time 인수를 설정할 수 있는데 Interval Time 간격으로 Accuracy 정확도를 갖는 가속도 정보를 수신

합니다. Accuracy는 0~3 범위의 정숫값을 Interval Time은 200~86,400,000ms 범위의 값을 가질 수 있습

니다.

Acceleration > accuracy 속성

모바일 장치에서 측정한 가속도 정보의 정확도를 갖는 속성입니다. 0~3 범위의 정숫값을 가질 수 있는데 값이

작을수록 정확도가 높아집니다.

Acceleration | 10

Acceleration > xpos 속성

x 축의 가속도 값을 갖는 속성입니다.

Acceleration > ypos 속성

y 축의 가속도 값을 갖는 속성입니다.

Acceleration > zpos 속성

z 축의 가속도 값을 갖는 속성입니다.


1 화면 구성하기

Acceleration 오브젝트를 추가합니다. 추가된 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

Accuracy와 Interval Time 값을 입력받기 위한 Static, Radio, Edit 컴포넌트를 추가하고 가속도 정보 측정을

수행하기 위한 Button 컴포넌트 두 개를 추가합니다. 그리고 측정된 가속도 정보를 화면에 표시하기 위한 Gro

upBox, Static, Edit 컴포넌트를 예제의 그림과 같이 적절히 배치합니다.

화면 구성을 위해 추가한 컴포넌트 및 오브젝트는 다음과 같습니다.

컴포넌트/오브젝트 ID

Static Static00~Static07

Radio rdo_accuracy

Edit edt_intervaltime

edt_timestamp

edt_accuracy

edt_xpos

edt_ypos

edt_zpos

Button btn_start

btn_stop

GroupBox GroupBox00

2 Watch Start 버튼 이벤트 함수 작성하기

Watch Start 버튼의 onclick 이벤트 함수를 다음과 같이 작성합니다.

this.btn_start_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

var nAccuracy = this.rdo_accuracy.text;

Acceleration | 12

this.edt_ypos.set_value(e.ypos);

this.edt_zpos.set_value(e.zpos);

};

가속도 정보 수신에 실패하면 onrecverror 이벤트가 발생합니다. 어떤 이유로 에러가 발생했는지 에러 정보를

표시합니다.

this.Acceleration00_onrecverror = function(obj:nexacro.Acceleration,e:nexacro.

AccelerationErrorEventInfo)

{

var strResult = "["+ e.errortype +" "+ e.statuscode +"] "+ e.errormsg;

trace(strResult);

};

5 모바일 장치에서 확인하기

accuracy와 interval time을 설정한 후 Watch Start 버튼을 터치합니다. 가속도 정보가 정상적으로 측정되면

하단의 Acceleration Information 그룹 박스의 timestamp, xpos, ypos, zpos 값이 interval time 주기로 갱

신되어 보입니다. 가속도 정보 측정을 멈추려면 Watch Stop 버튼을 터치합니다.

AudioPlayer

4.

4.1 AudioPlayer 소개

AudioPlayer는 오디오 파일을 재생하는데 필요한 기능을 제공하는 오브젝트입니다. mp3, mp4, wav, ogg, 3gp 등

의 다양한 포맷을 재생할 수 있으며 기본 재생 기능뿐 아니라 스피커 밸런스 조정, 반복 재생, 구간 반복 등의 기능도

제공합니다. 사용자는 제공되는 오브젝트의 기능을 조합해 원하는 형태로 오디오 플레이어를 구현할 수 있습니다.

안드로이드 환경에서 지원하는 오디오 포맷에 관한 정보는 다음에서 확인할 수 있습니다.

https://developer.android.com/guide/topics/media/media-formats

iOS 환경에서 지원하는 오디오 포맷에 관한 정보는 다음에서 확인할 수 있습니다.

https://developer.apple.com/library/archive/documentation/MusicAudio/Conceptual/CoreAu

dioOverview/CoreAudioEssentials/CoreAudioEssentials.html#//apple_ref/doc/uid/TP4000357

7-CH10-SW57

4.2 오디오 재생하기

AudioPlayer 오브젝트의 기능을 사용해 간단한 오디오 재생기를 구현합니다. 기본적인 오디오 파일의 재생 절차는

크게 오디오 파일의 로딩과 재생의 두 단계로 나눌 수 있습니다.

오디오 파일의 로딩은 load 메소드를 사용합니다. 오디오 파일의 파일명을 경로와 함께 입력합니다. 오디오 파일의

로딩에 성공하면 경로 정보는 url 속성에 재생 시간 정보는 duration 속성에 자동 설정됩니다.

오디오 파일의 재생은 play, stop, pause, resume 메소드를 사용합니다. 인터페이스를 구성하며 필요에 따라 적절히

https://developer.android.com/guide/topics/media/media-formats

https://developer.apple.com/library/archive/documentation/MusicAudio/Conceptual/CoreAudioOverview/CoreAudioEssentials/CoreAudioEssentials.html#//apple_ref/doc/uid/TP40003577-CH10-SW57



AudioPlayer | 14

조합해서 사용하면 재생에 필요한 여러 기능을 구현 할 수 있습니다. play 메소드 호출 시 인수로 전달하는 interval ti

me은 오디오 재생 중 주기적으로 onplaying 이벤트를 발생하게 해줍니다.

4.2.1 예제

다음은 오디오 파일을 로딩한 후 재생하는 단순한 형태의 오디오 재생기 예제입니다.

화면이 출력되면 자동으로 미리 설정된 오디오 파일을 로딩합니다. 하단의 Play, Pause, Stop 버튼을 이용하여 재생

기능을 조작할 수 있습니다. Play 버튼을 터치하면 재생이 시작되며 Pause 버튼으로 변경됩니다. Pause 버튼을 터치

하면 재생이 일시 중지되고 Stop 버튼을 터치하면 재생이 중지됩니다.

재생의 진행은 진행표시줄과 시간으로 표시됩니다.


AudioPlayer > load 메소드

오디오 파일을 재생할 수 있도록 AudioPlayer에 로딩하는 메소드입니다. 인수로 경로와 함께 파일명을 입력

합니다.

OS Alias 경로 실제 경로

Android

%USERAPP% /data/data/{PackageName}/files/NEXACRO/

%SD_CARD%/mnt/sdcard (Android v4.0 이하)

/storage/emulated/0 (Android v4.1 이상)

%INSTALLROOT% %USERAPP%

iOS

%USERAPP% /Library/Caches/nexacro/

%SD_CARD% 미지원




AudioPlayer > play 메소드

로딩된 오디오 파일을 재생하는 메소드입니다. 인수로 시간 값을 설정하는데 시간 값에 따라 주기적으로 onpl

aying 이벤트가 발생합니다. 메소드를 수행하면 onplay 이벤트가 발생하고 설정한 인수 값을 주기로 onplayi

ng 이벤트가 발생합니다. 재생 시작 시 e.reason 속성값은 1이며 재생 중에는 3이 됩니다.

AudioPlayer > stop 메소드

오디오 파일의 재생을 중지하는 메소드입니다. 재생을 중지하면 onstop 이벤트가 발생합니다. e.reason 속성

값은 5입니다.

AudioPlayer > pause 메소드

재생중인 오디오 파일을 일시 중지하는 메소드입니다. pause 메소드를 호출하면 onstop 이벤트가 발생합니

다. e.reason 속성값은 6입니다.

AudioPlayer > resume 메소드

일시 중지 상태의 오디오 파일을 다시 재생하는 메소드입니다. 메소드가 수행되면 onplay 이벤트가 발생합니

다. e.reason 속성값은 2입니다.

AudioPlayer > url 속성

AudioPlayer에 로딩된 오디오 파일의 경로 정보를 갖는 읽기 전용 속성입니다. load 메소드 호출 시 설정한

오디오 파일의 경로가 자동으로 설정됩니다.



AudioPlayer 오브젝트를 추가합니다. 추가된 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

현재 파일 경로 정보를 Static 컴포넌트, 재생 진행 상황을 표시할 ProgressBar 컴포넌트, 재생/일시 중지/멈춤

기능을 수행할 Button 컴포넌트를 예제의 그림과 같이 적절히 배치합니다.

화면 구성을 위해 사용한 컴포넌트 및 오브젝트는 다음과 같습니다.


AudioPlayer AudioPlayer00

Static stt_filepath_title

stt_filepath

ProgressBar prb_time

Button btn_play

AudioPlayer | 16

btn_stop

GroupBox GroupBox00


2 전역 변수 선언하기

플레이어의 상태 정보를 관리하기 위해 enum 타입의 전역 변수를 선언합니다.

eStatus = {

LOAD: 0,

PLAY: 1,

RESUME: 2,

PLAYING: 3,

ENDOFPLAY: 4,

STOP: 5,

PAUSE: 6,

SEEK: 7

};

var ePlayerStatus = eStatus;

3 사용자 함수 작성하기

로딩된 오디오 파일의 재생 시간을 사용자가 보기 편하도록 분, 초로 변환하는 메소드를 다음과 같이 작성합니

다.

this.convertTime = function(nTime)

{

var nMin = parseInt((nTime / 1000) / 60);

var nSec = parseInt((nTime / 1000) % 60);

var strTime = nMin.toString() +"min "+ nSec.toString() +"sec";

return strTime;

}

재생 중에 현재 진행 상태를 한눈에 볼 수 있도록 진행표시줄을 설정하는 메소드를 다음과 같이 작성합니다.

this.updateProgress = function(nCurrentTime, nTotalTime)

{

var strPercentage = parseInt((nCurrentTime / nTotalTime) * 100);


this.prb_time.set_pos(strPercentage);

}

재생이 멈추거나 완료되면 진행 상태를 표시하는 진행표시줄을 초기화하는 메소드를 다음과 같이 작성합니다.

this.initProgress = function()

{

this.prb_time.set_pos(0);

this.prb_time.set_text(this.convertTime(this.AudioPlayer00.duration));

}

4 Form 이벤트 함수 작성하기

Form의 onload 이벤트 함수를 다음과 같이 작성합니다. Form이 로딩되면 사전에 설정된 오디오 파일의 경로

를 AudioPlayer 오브젝트에 로딩합니다.

this.sample_audioplayer_01_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)

{

var strFilePath = "%USERAPP%File/Dutch Swing College Band - Aux Champs Elysees.mp3";

this.AudioPlayer00.load(strFilePath);

};

5 AudioPlayer 오브젝트 이벤트 함수 작성하기

오디오 파일이 로딩된 후 발생하는 onload 이벤트 함수를 작성합니다.

this.AudioPlayer00_onload = function(obj:nexacro.AudioPlayer,e:nexacro.AudioEventInfo)

{

this.stt_filepath.set_text(this.AudioPlayer00.url);

this.initProgress();

};

오디오 파일의 재생이 시작될 때 발생하는 onplay 이벤트 함수를 작성합니다.

this.AudioPlayer00_onplay = function(obj:nexacro.AudioPlayer,e:nexacro.AudioEventInfo)

{

ePlayerStatus = eStatus.PLAY;

this.btn_play.set_text("Pause");

AudioPlayer | 18

};

오디오 파일의 재생 중에 주기적으로 발생하는 onplaying 이벤트 함수를 작성합니다.

this.AudioPlayer00_onplaying = function(obj:nexacro.AudioPlayer,e:nexacro.AudioEventInfo)

{

this.prb_time.set_text(this.convertTime(this.AudioPlayer00.currentpos) +" / "+ this.

convertTime(this.AudioPlayer00.duration));

this.updateProgress(this.AudioPlayer00.currentpos, this.AudioPlayer00.duration);

};

오디오 파일의 재생이 멈출 때 발생하는 onstop 이벤트 함수를 작성합니다.

this.AudioPlayer00_onstop = function(obj:nexacro.AudioPlayer,e:nexacro.AudioEventInfo)

{

switch(e.reason)

{

case 4: //End of play

ePlayerStatus = eStatus.ENDOFPLAY;


case 5: //STOP

ePlayerStatus = eStatus.STOP;


break;

case 6: //PAUSE

ePlayerStatus = eStatus.PAUSE;

break;

}

this.btn_play.set_text("Play");

};

AudioPlayer 오브젝트에서 오디오 파일에 대한 처리가 실패했을 때 발생하는 onerror 이벤트 함수를 작성합

니다.


this.AudioPlayer00_onerror = function(obj:nexacro.AudioPlayer,e:nexacro.

AudioErrorEventInfo)

{

var strResult = "["+ e.errortype +"] "+ e.statuscode +" "+ e.errormsg;

trace(strResult);

};

6 Play/Pause 버튼 이벤트 함수 작성하기

Play/Pause 버튼을 터치했을 때 발생하는 onclick 이벤트 함수를 작성합니다. 현재 플레이어 상태에 따라 어떤

기능을 수행할지 처리합니다.

this.btn_play_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

var nIntervalTime = 1000; //ms

switch(ePlayerStatus)

{

case eStatus.PAUSE:

this.AudioPlayer00.resume();

break;

case eStatus.PLAY:

this.AudioPlayer00.pause();

break;

default:

this.AudioPlayer00.play(nIntervalTime);

}

7 Stop 버튼 이벤트 함수 작성하기

Stop 버튼을 터치했을 때 발생하는 onclick 이벤트 함수를 작성합니다.


{

this.AudioPlayer00.stop();

};


Form이 로딩되면 자동으로 오디오 파일이 로딩되어 재생 준비가 완료됩니다.

AudioPlayer | 20

하단의 Play, Pause, Stop 버튼을 사용하여 오디오 파일의 재생, 일시정지, 멈춤 기능이 정상 동작하는지 확인

합니다. 재생이 시작되면 재생 시간과 진행 상태가 진행표시줄에 표시됩니다.

AudioRecorder

5.

5.1 AudioRecorder 소개

AudioRecorder는 마이크를 통해 입력된 소리 신호를 오디오 데이터로 녹음하는데 필요한 기능을 제공하는 오브젝

트입니다. 오디오 데이터는 wav, ogg, mp3, AMR_NB, AMR_WB 형식의 파일로 저장할 수 있는데 사용자가 별도

로 형식을 설정하지 않으면 안드로이드 환경에서는 mp3, iOS에서는 wav로 자동 설정됩니다.

5.2 오디오 녹음하기

AudioRecorder 오브젝트의 기능을 사용해 간단한 녹음기를 구현합니다. 기본적인 오디오 녹음의 절차는 크게 오디

오 포맷 설정과 녹음의 두 단계로 나눌 수 있습니다.

오디오 파일의 포맷 설정은 audioformat, samplerate, channelconfig 속성을 사용합니다. 필요에 따라 원하는 속

성값을 입력합니다. 속성을 설정하지 않으면 안드로이드의 경우는 mp3, 8000 Hz, mono로 설정되고, iOS의 경우

는 wav, 8000 Hz, mono로 설정됩니다.

설정은 audioformat, channelconfig, samplerate 속성을 사용하고 녹음은 recordingStart, recordingStop, paus

e, resume 메소드를 사용합니다. 기능 구현시 필요에 따라 속성 및 메소드를 적절히 조합해서 사용할 수 있습니다.

5.2.1 예제

다음은 녹음, 일시 중지, 멈춤 기능을 구현한 녹음기 예제입니다.

Record 버튼을 터치하면 녹음이 시작되고 Stop 버튼을 터치하면 녹음이 종료됩니다. 녹음을 종료하면 오디오 파일

AudioRecorder | 22

이 생성되고 하단에 파일 목록이 표시됩니다. 녹음 중 Pause 버튼을 터치하면 녹음이 일시 정지되며 Resume 버튼을

터치하면 녹음이 다시 시작됩니다.

Pause / Resume 기능은 iOS 환경에서만 지원되므로 안드로이드 환경에서는 사용할 수 없습니다.

오디오 파일 이름을 두 번 터치하면 파일은 삭제됩니다. Form을 종료시키면 저장된 오디오 파일이 모두 삭제됩니다.


AudioRecorder > audiofile 속성

오디오 데이터를 저장할 파일명을 설정하는 속성입니다. 인수로 경로와 함께 파일명을 입력합니다.


Android

%USERAPP% /data/data/{PackageName}/files/NEXACRO/

%SD_CARD%/mnt/sdcard (Android v4.0 이하)

/storage/emulated/0 (Android v4.1 이상)


iOS

%USERAPP% /Library/Caches/nexacro/

%SD_CARD% 미지원




AudioRecorder > recordingStart 메소드

오디오 데이터의 녹음을 시작하는 메소드입니다.

AudioRecorder > recordingStop 메소드

오디오 데이터의 녹음을 중지하는 메소드입니다.

AudioRecorder > pause 메소드

오디오 데이터의 녹음을 일시 중지하는 메소드입니다. iOS 넥사크로 브라우저 환경에서만 지원되는 기능입니

다.

AudioRecorder > resume 메소드

일시 중지된 오디오 데이터의 녹음을 다시 시작하는 메소드입니다. iOS 넥사크로 브라우저 환경에서만 지원되

는 기능입니다.

AudioRecorder > onrecording 이벤트

오디오 데이터를 녹음중일 때 발생하는 이벤트입니다.

AudioRecorder > onstop 이벤트

오디오 데이터의 녹음이 종료되었을 때 발생하는 이벤트입니다.

AudioRecorder > onerror 이벤트

오디오 데이터의 녹음이 실패했을 때 발생하는 이벤트입니다.



AudioRecorder 오브젝트를 추가합니다. 추가된 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

현재 녹음중인 파일 정보와 녹음 진행 시간을 표시할 Static 컴포넌트, 녹음/일시 중지/멈춤 기능을 수행할 But

ton 컴포넌트 저장한 녹음 파일과 리스트를 관리할 Grid 컴포넌트와 Dataset, VirtualFile 오브젝트를 예제의

그림과 같이 적절히 배치합니다.



AudioRecorder AudioRecorder00

Static stt_filepath_title

AudioRecorder | 24

stt_filepath

stt_time

Button btn_record

btn_pause

btn_stop

Grid grd_filelist

Dataset ds_filelist

VirtualFile VirtualFile00

GroupBox GroupBox00


2 전역 변수 선언하기

녹음기의 상태 정보를 관리하기 위해 enum 타입의 변수, 타이머 정보를 관리할 변수 그리고 파일 경로 및 이름

을 관리할 변수를 전역으로 선언합니다.

eStatus = {

RECORD: 0,

STOP: 1,

PAUSE: 2,

};

var eRecordStatus = eStatus;

var tMin=0, tSec=0, tMSec=0;

var keepgoing=false;

var DIRECTORY = "%USERAPP%File/";

var FILE_NAME = "Rec";

var FILE_COUNT = 0;

var strOS = nexacro.System.osversion;

if(!strOS.toLowerCase().search(/android/))

{

strOS = "ANDROID";

}

else if(!strOS.toLowerCase().search(/ios/))

{

strOS = "IOS";

}



녹음이 진행된 시간을 사용자가 보기 편하도록 분, 초, 밀리 초로 변환하여 Static 컴포넌트에 표시해주는 time

r 메소드를 다음과 같이 작성합니다. timer 메소드는 ontimer 이벤트를 통해 주기적으로 호출됩니다.

this.timer = function(keepgoing)

{

if(keepgoing)

{

tMSec += 1;

if (tMSec == 100)

{

tMSec = 0;

tSec += 1;

}

if (tSec == 60)

{

tSec = 0;

tMin += 1;

}

strSec = ""+ tSec;

strMin = ""+ tMin;

strMSec = ""+ tMSec;

if (strSec.length != 2)

{

strSec = "0"+ tSec;

}

if (strMin.length != 2)

{

strMin = "0"+ tMin;

}

if (strMSec.length != 2)

{

strMSec = "0"+ tMSec;

}

this.stt_time.set_text(strMin +":"+ strSec +":"+ strMSec);

AudioRecorder | 26

}

}

시간 관련 변수 및 타이머를 초기화시키는 initVar 메소드를 다음과 같이 작성합니다.

this.initVar = function()

{

tMin=0;

tSec=0;

tMSec=0;

keepgoing=false;

this.stt_time.set_text("00:00:00");

this.killTimer(0);

}

녹음기 상태에 따라 Button 컴포넌트의 상태를 변경해주는 changeStatus 메소드를 다음과 같이 작성합니다.

this.changeStatus = function(status)

{

switch(status)

{

case eStatus.RECORD:

eRecordStatus = eStatus.RECORD;

if (strOS == "IOS")

{

this.btn_record.set_visible(false);

this.btn_pause.set_visible(true);

}

else

{

this.btn_record.set_enable(false);

}


break;

case eStatus.PAUSE:

eRecordStatus = eStatus.PAUSE;


this.btn_record.set_visible(false);

this.btn_pause.set_visible(true);


break;

case eStatus.STOP:

eRecordStatus = eStatus.STOP;

if (strOS == "IOS")

{

this.btn_record.set_visible(true);

this.btn_pause.set_visible(false);

}

else

{

this.btn_record.set_enable(true);

}


break;

}

}


Form의 onload 이벤트 함수를 다음과 같이 작성합니다. 이전에 녹음된 오디오 파일이 있으면 그 목록을 Grid

에 출력합니다.

this.example_audiorecorder_01_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)

{

this.VirtualFile00.getFileList(DIRECTORY, ".mp3", VirtualFile.findFileOnly);

};

Form의 ontimer 이벤트 함수를 다음과 같이 작성합니다. 이벤트가 발생할 때마다 timer 메소드를 호출하여

진행 시간을 갱신합니다.

this.example_audiorecorder_01_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo

)

{

if(e.timerid == 0)

{

this.timer(true);

AudioRecorder | 28

}

};

Form의 onbeforeclose 이벤트 함수를 다음과 같이 작성합니다. Form이 종료될 때 생성된 오디오 파일을 삭

제합니다.

this.example_audiorecorder_01_onbeforeclose = function(obj:nexacro.Form,e:nexacro.

CloseEventInfo)

{

for(var i=0; i<FILE_COUNT; i++)

{

this.VirtualFile00.remove(DIRECTORY + FILE_NAME + i +".mp3");

}

this.VirtualFile00.getFileList(DIRECTORY, ".mp3", VirtualFile.findFileOnly);

};

5 AudioRecorder 오브젝트 이벤트 함수 작성하기

오디오 데이터의 녹음이 종료되었을 때 발생하는 onstop 이벤트 함수를 다음과 같이 작성합니다.

this.AudioRecorder00_onstop = function(obj:nexacro.AudioRecorder,e:nexacro.AudioEventInfo)

{

this.initVar();

switch(e.reason)

{

case 4: //End of record

case 5: //STOP

var strFileName = FILE_NAME + FILE_COUNT + ".mp3";

var row = this.ds_filelist.addRow();

var ret = this.ds_filelist.setColumn(row, "FileName", strFileName);

trace("ret = "+ ret);

trace(FILE_NAME + FILE_COUNT + ".mp3");

trace("FILE_COUNT = "+ FILE_COUNT);

FILE_COUNT++;

break;

case 6: //PAUSE


break;

}

};

오디오 데이터의 녹음이 실패했을 때 발생하는 onerror 이벤트 함수를 다음과 같이 작성합니다.

this.AudioRecorder00_onerror = function(obj:nexacro.AudioRecorder,e:nexacro.

AudioErrorEventInfo)

{

var strResult = "\n- AudioRecorder00_onerror"

+"\n["+ e.errortype +"] "+ e.statuscode +" "+ e.errormsg;

alert(strResult);

switch(e.statuscode)

{

case "1301": //already recording

break;

case "1006": //play selection error (startpos >= stoppos)

case "1007": //not loaded

case "1009": //can't resume

case "1302": //not recording

this.initVar();

break;

case "1306": //exist file

FILE_COUNT++;

this.btn_record_onclick();

break;

default:

break;

}

};

6 VirtualFile 이벤트 함수 작성하기

VirtualFile 오브젝트의 작업이 성공했을 때 발생하는 onsuccess 이벤트 함수를 다음과 같이 작성합니다.

this.VirtualFile00_onsuccess = function(obj:nexacro.VirtualFile,e:nexacro.

VirtualFileEventInfo)

{

switch(e.reason)

AudioRecorder | 30

{

case 8: //getFileList

this.ds_filelist.clearData();

for(var i=0; i<e.fileattributelist.length; i++)

{

if(e.fileattributelist[i].filename.indexOf(FILE_NAME) > -1)

{

trace("e.fileattributelist["+ i +"] = "+ e.fileattributelist[i].

filename);

row = this.ds_filelist.addRow();

this.ds_filelist.setColumn(row, "FileName", e.fileattributelist[i].

filename);

FILE_COUNT++;

}

}

break;

}

};

VirtualFile 오브젝트의 작업이 성공했을 때 발생하는 onerror 이벤트 함수를 다음과 같이 작성합니다.

this.VirtualFile00_onerror = function(obj:nexacro.VirtualFile,e:nexacro.

VirtualFileErrorEventInfo)

{

var strResult = "\n- VirtualFile00_onerror"


alert(strResult);

};

7 Grid 컴포넌트 이벤트 함수 작성하기

Grid 컴포넌트의 Cell을 연속 터치 했을 때 발생하는 oncelldblclick 이벤트 함수를 다음과 같이 작성합니다.

this.grd_filelist_oncelldblclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)

{

var rowPos = this.ds_filelist.rowposition;


alert("grd_filelist_oncelldblclick: "+ DIRECTORY + this.ds_filelist.getColumn(rowPos,

"FileName"));

this.VirtualFile00.remove(DIRECTORY + this.ds_filelist.getColumn(rowPos, "FileName"));

this.ds_filelist.deleteRow(rowPos);

};

this.grd_filelist_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)

{

//play? stop?

};

8 Record 버튼 이벤트 함수 작성하기

Record 버튼을 터치했을 때 발생하는 onclick 이벤트 함수를 다음과 같이 작성합니다.

this.btn_record_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.stt_filepath.set_text(DIRECTORY + FILE_NAME + FILE_COUNT);

this.AudioRecorder00.set_audiofile(this.stt_filepath.text);

if(this.AudioRecorder00.recordingStart(1000))

{

this.setTimer(0, 10);

this.changeStatus(eStatus.RECORD);

}

};

9 Pause 버튼 이벤트 함수 작성하기

Pause 버튼을 터치했을 때 발생하는 onclick 이벤트 함수를 다음과 같이 작성합니다.

this.btn_pause_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.AudioRecorder00.pause();

this.changeStatus(eStatus.PAUSE);

};


AudioRecorder | 32

Stop 버튼을 터치했을 때 발생하는 onclick 이벤트 함수를 다음과 같이 작성합니다.


{

this.AudioRecorder00.recordingStop();

this.changeStatus(eStatus.STOP);

this.killTimer(0);

};


Form이 로딩되면 녹음기가 출력되고 만약 기존의 녹음했던 파일이 존재하면 하단에 출력됩니다.

Record 버튼을 터치하면 녹음이 시작되고 Stop 버튼을 터치하면 녹음이 종료됩니다. 녹음을 종료하면 오디오

파일이 생성되고 하단에 표시됩니다. 녹음 중 Pause 버튼을 터치하면 녹음이 일시 정지되며 Resume 버튼을

터치하면 녹음이 다시 시작됩니다.

오디오 파일 이름을 두 번 터치하면 선택된 파일은 삭제됩니다. Form을 종료시키면 녹음에 사용된 오디오 파

일 모두가 삭제됩니다.

BluetoothLE

6.

6.1 BluetoothLE 소개

BluetoothLE(Bluetooth Low Energy, BLE)는 Bluetooth SMART라고도 하며 단거리 무선 통신 기술인 블루투스 4

.0 기술중 하나입니다. 기존의 블루투스(Classic Bluetooth)의 과도한 배터리 소모를 해결하기 위해 생겨난 기술로

기본 개념은 기존의 블루투스와 동일하나 전력 소모를 최소화하고 배터리 수명을 연장하는데 중점을 둔 버전입니다.

따라서 적은 전력를 사용하고 데이터 전송량이 작아 느린 속도를 허용하는 BluetoothLE 장치(근접 센서, 피트니스,

심박수, 환경 모니터링 등)와 통신하는데 사용됩니다.

넥사크로플랫폼에서 제공하는 BluetoothLE는 BluetoothLE 장치와 통신 할 수 있게 해주는 오브젝트입니다. Blueto

othLE 오브젝트에서 제공하는 기능은 다음과 같습니다.

● 블루투스 장치 스캔 및 연결

● Service 검색

● Characteristic 읽기/쓰기

● 알림 수신

BluetoothLE 통신은 다음과 같이 진행됩니다.

1. 스캔: 주변의 연결 가능한 BluetoothLE 장치의 이름과 주소를 검색합니다. 이 때, 다른 장치와 연결되지 않은 주

변의 BluetoothLE 장치는 광고 시그널을 주기적으로 브로드캐스팅합니다. 스캔은 이런 주변의 BluetoothLE

장치의 광고 시그널을 청취하여 연결 가능한 장치를 선별하는 과정입니다.

2. 연결 설정: BluetoothLE 장치의 주소로 연결을 요청합니다. 연결이 설정되면 BluetoothLE 장치는 더이상 광고

시그널을 보내지 않습니다.

3. 서비스(Service) 검색: 연결된 BluetoothLE 장치가 가진 서비스를 조회합니다.

4. 서비스의 특성(Characteristic)으로 데이터 조회 및 조작: 각 특성들의 값을 읽어오거나 씁니다.

5. 연결 종료: BluetoothLE 장치와의 연결을 종료합니다.

BluetoothLE | 34

BluetoothLE는 Bluetooth 4.0 기술로 안드로이드 4.3(API 레벨18 이상), iOS 5 이상의 환경에서 사용

할 수 있습니다.

6.2 장치 스캔/연결하기

BluetoothLE 오브젝트를 사용해 BluetoothLE 장치를 스캔하고 연결할 수 있습니다. BluetoothLE를 지원하는 장치

만 지원하며 일반 블루투스 장치는 사용할 수 없습니다.

장치를 스캔하려면 scanStart/scanStop 메소드를 사용합니다. 이 메소드는 광고 시그널을 보내는 주변의 장치를 검

색하여 이름과 주소(MAC) 정보를 얻습니다.

장치와 연결하려면 connect/disconnect 메소드를 사용합니다. 이 메소드는 장치의 주소로 연결을 수립합니다.

6.2.1 예제

다음은 주변의 BluetoothLE 장치를 스캔하고 연결하는 예제입니다. 단순히 스캔과 연결이 가능한지만을 확인할 수

있습니다.

화면이 로딩되면 자동으로 주변 장치에 대한 스캔을 시작합니다. 스캔 시간은 10초로 설정되어 있으며 스캔된 장치는

목록에 표시됩니다. 스캔 시간 내에 장치간의 타이밍이 맞지 않아 스캔에 실패한 경우에는 상단의 리플레시 버튼을 터

치하면 다시 스캔을 시작합니다.

스캔이 완료되면 장치 이름과 주소가 Grid에 표시됩니다. 목록에서 장치를 터치하면 연결이 진행되는데 연결 시도중

에는 "Connecting"이라 표시되며 연결이 성공하면 "Connected"라고 표시됩니다. 연결이 실패하면 아무 내용도 표

시되지 않습니다.

목록에서 이미 연결이 설정된 장치를 다시 터치하면 연결이 해제되고, 다른 장치를 터치하면 기존 연결은 해제되고 새

로운 장치로 연결을 시도합니다.


현재 블루투스의 상태는 우측 상단에 있는 아이콘의 모양으로 확인할 수 있습니다. 각 상태에 따른 아이콘 모양은 다

음과 같습니다.

모바일 장치의 블루투스 기능이 비활성화 상태입니다.

모바일 장치의 블루투스 기능이 활성화 상태입니다.

주변의 블루투스 장치를 스캐닝하는 상태입니다.

특정 블루투스 장치와 연결이 설정된 상태입니다.


BluetoothLE > scanStart 메소드

광고(advertisement)중인 주변 BluetoothLE 장치를 스캔하는 메소드입니다. 스캔 시간과 서비스 UUID를 인

수로 받아 수행할 수 있습니다. 장치가 스캔될 때마다 onscanresult 이벤트가 발생합니다.

BluetoothLE > connect 메소드

주변 BluetoothLE 장치와의 연결을 수행하는 메소드입니다. 메소드 호출시 장치를 식별할 수 있는 인수를 사

용합니다. 안드로이드 환경에서는 MAC 주소를 사용하며 iOS 환경에서는 스캔된 장치 목록의 인덱스 값을 사

용합니다. 장치의 주소는 onscanresult 이벤트 함수에서 확인할 수 있습니다.

BluetoothLE > disconnect 메소드

연결된 BluetoothLE 장치와의 연결을 해제하는 메소드입니다.

BluetoothLE > onscanresult 이벤트

BluetoothLE 장치가 검색되었을 때 발생하는 이벤트입니다. 검색된 장치의 이름과 주소 정보는 e(Bluetooth

LEScanDeviceEventInfo) 객체를 통해 얻을 수 있습니다.



BluetoothLE 오브젝트를 추가합니다. 추가된 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

현재 블루투스 상태를 표시할 Button, ImageViewer 컴포넌트와 검색된 BluetoothLE 장치의 정보를 표시할

Grid 컴포넌트를 예제의 그림과 같이 적절히 배치합니다.


BluetoothLE | 36


BluetoothLE BluetoothLE00

Button btn_ble

ImageViewer img_ble_status

Grid Grid00

Dataset ds_address


Form의 onload 이벤트 함수를 다음과 같이 작성합니다. Form이 로딩되면 바로 BluetoothLE 장치를 스캔합

니다. scanStart 메소드의 인수로 주어지는 10000은 10초를 의미합니다.

스캔 작업은 배터리 소모를 촉진하므로 스캔 시간을 너무 길게 설정하지 않는 것이 좋습니다.

this.example_bluetoothle_01_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)

{

this.BluetoothLE00.scanStart(10000);

};

Form의 onbeforeclose 이벤트 함수를 다음과 같이 작성합니다. Form이 종료되기 전 블루투스 연결을 종료합

니다.

this.example_bluetoothle_01_onbeforeclose = function(obj:nexacro.Form,e:nexacro.

CloseEventInfo)

{

this.BluetoothLE00.disconnect();

};

3 ds_address Dataset 설정하기

BluetoothLE 장치의 이름과 주소를 저장할 ds_address 데이터셋을 다음과 같이 설정합니다. 설정을 완료한

후 화면에 배치한 Grid 컴포넌트에 바인딩해줍니다.


4 BluetoothLE 오브젝트 이벤트 함수 작성하기

onsuccess 이벤트 함수를 다음과 같이 작성합니다. BluetoothLE 오브젝트에 요청한 작업이 성공했을 때 호출

됩니다. 어떤 이벤트인지는 e.reason 속성의 값으로 확인할 수 있습니다.

this.BluetoothLE00_onsuccess = function(obj:nexacro.BluetoothLE,e:nexacro.

BluetoothLEEventInfo)

{

switch(e.reason)

{

case 10: //scanStart() scan start

this.img_ble_status.set_image("imagerc::ico_bluetooth-signal-indicator_128_

blue.png");

break;

case 11: //scanStart() scan timeout"

this.img_ble_status.set_image("imagerc::ico_blueetooth-logo_128_blue.png");

break;

case 12: //scanStart() discovered for a device that provides specific service

break;

case 20: //scanStop() scan stop


break;

case 30: //connect() connected

this.img_ble_status.set_image("imagerc::ico_bluetooth-connected_128_blue.png

");

this.ds_address.setColumn(this.ds_address.rowposition, "StatusMessage", "

Connected");

break;

case 40: //disconnect() disconnected


this.resetStatusMsg();

break;

case 50: //discoverService() discover service Start

case 51: //discoverService() service discovered

case 60: //subscribe() Subscribe, Notification Start

BluetoothLE | 38

case 61: //subscribe() Subscribe, Notification message received

case 70: //unsubscribe() Unsubscribe, Notification Stop

case 80: //readCharacteristic() Read Characteristics

case 90: //writeCharacteristic() Write Characteristics

default:

break;

}

};

onerror 이벤트 함수를 다음과 같이 작성합니다. BluetoothLE 오브젝트에 요청한 작업이 실패했을 때 발생하

는 이벤트입니다. 어떤 이벤트인지는 e.reason 속성의 값으로 확인할 수 있습니다.

this.BluetoothLE00_onerror = function(obj:nexacro.BluetoothLE,e:nexacro.

BluetoothLEErrorEventInfo)

{

var strResult = "["+ e.eventid +"] "+ e.reason +":"+ e.errormsg;

alert(strResult);

};

onscanresult 이벤트 함수를 다음과 같이 작성합니다. scanStart 메소드 수행 중 주변 BluetoothLE 장치가 스

캔될 때 마다 발생하는 이벤트입니다.

this.BluetoothLE00_onscanresult = function(obj:nexacro.BluetoothLE,e:nexacro.

BluetoothLEScanDeviceEventInfo)

{

var row = this.ds_address.addRow();

this.ds_address.setColumn(row, "DeviceName", e.device_name);

this.ds_address.setColumn(row, "DeviceAddress", e.device_address);

};


BluetoothLE 장치와의 연결/해제시 상태 메시지를 초기화해주는 함수를 다음과 같이 작성합니다.

this.resetStatusMsg = function()

{

nRowCnt = this.ds_address.getCount();


for(var i=0; i<nRowCnt; i++)

{

this.ds_address.setColumn(i, "StatusMessage", "");

}

};

6 Grid 이벤트 함수 작성하기

oncellclick 이벤트 함수를 다음과 같이 작성합니다. 검색된 BluetoothLE 장치 목록이 표시된 Gird의 Cell을

터치하면 연결이 수행됩니다. 이전에 연결된 장치가 있으면 연결을 해제합니다.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)

{

var rowPos = this.ds_address.rowposition;

var strStatus = this.ds_address.getColumn(rowPos, "StatusMessage");

if(strStatus == "Connected")

{


return;

}

else

{


this.ds_address.setColumn(rowPos, "StatusMessage", "Connecting");

var strAddr = this.ds_address.getColumn(rowPos, "DeviceAddress");

this.BluetoothLE00.connect(strAddr);

}

};

7 Button, ImageViewer 이벤트 함수 작성하기

Button/ImageViewer의 onclick 이벤트 함수를 다음과 같이 작성합니다. Button 혹은 ImageViewer를 터치

하면 BluetoothLE 장치와의 연결을 해제합니다.

this.btn_ble_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{


};

BluetoothLE | 40

this.img_ble_status_onclick = function(obj:nexacro.ImageViewer,e:nexacro.ClickEventInfo)

{

this.btn_ble_onclick();

};


Form이 로딩되면 자동으로 주변 BluetoothLE 장치를 스캔하여 장치 목록을 표시합니다.

연결을 수행하려면 목록에서 원하는 장치를 터치합니다. 장치와의 연결이 성공하면 'connected'라고 표시됩

니다. 연결된 다른 장치가 있는 경우 기존의 연결을 해제하고 새로운 장치와 연결을 시도합니다.

연결을 종료하려면 Grid 목록에서 해당 장치 항목을 터치하거나 상단의 블루투스 아이콘을 터치합니다. 버튼

을 터치하면 현재 연결이 종료되고 다시 장치 스캔을 시도합니다.

6.3 서비스 조회하기

BluetoothLE 장치와 통신하려면 먼저 장치가 어떤 서비스(Service)와 특성(Characteristic)을 제공하는지 알아야 합

니다. 그래야 필요한 데이터를 얻기 위해 어떤 서비스로 접근해야 하는지 어떤 특성의 데이터를 조회할 지 판단할 수

있습니다.

특성은 데이터를 나타내는 최소 단위로 데이터를 표현하는 정보와 값으로 구성됩니다. 관련된 특성들을 논리적으로

모아놓은 집합이 서비스이며 서비스는 하나 이상의 특성을 포함할 수 있습니다. 이해를 위해 심박 측정기를 예로 들면

심박 측정기에는 심박 측정이라는 서비스가 존재할 수 있고 심박 측정에 관계된 심박값, 센서 위치값 등의 데이터가

각각의 특성이 될 수 있는 것입니다.

서비스 혹은 특성은 UUID(Universally Unique Identifier) 값으로 식별할 수 있는데 데이터를 조회하거나 명령을 내

릴 때 이 UUID 값을 이용합니다. UUID는 16비트(스펙에 공식적으로 명시된) 혹은 128비트(사용자 지정) 숫자로 구

성됩니다.

BluetoothLE는 장치간에 데이터를 주고 받는 방법으로 GATT(Generic Attribute) 프로파일을 사용합

니다. GATT은 ATT(Attribute Protocol)을 이용하여 두 BluetoothLE 장치간에 데이터를 전송하는 방

식을 결정하는 서비스 프레임워크입니다. ATT는 서비스 및 특성이라는 개념을 사용하여 데이터를 전송

하는 방식을 정의합니다. GATT에 관한 더 자세한 내용은 다음 링크를 참조하십시오.

https://www.bluetooth.com/specifications/gatt

BluetoothLE 장치가 제공하는 서비스는 BluetoothLE 오브젝트의 discoverService 메소드를 사용해 얻을 수 있습니

다. 장치와 연결이 수립된 후 discoverService 메소드를 호출하면 장치가 제공하는 서비스의 UUID 값이 반환됩니다.

https://www.bluetooth.com/specifications/gatt


이 장에서는 BluetoothLE 장치에서 제공하는 서비스의 UUID 값을 조회하는 방법에 대해 설명합니다. 특성의 UUID

정보는 GATT 표준 문서 및 BluetoothLE 장치 제조업체에서 제공하는 정보를 확인해야 합니다.

6.3.1 예제

다음은 연결된 BluetoothLE 장치가 제공하는 서비스를 조회하는 예제입니다. 화면이 로딩된 후 자동으로 주변의 Blu

etoothLE 장치를 스캔하며 스캔이 완료된 후 검색된 장치 이름을 터치하면 연결이 진행됩니다.

연결이 완료되면 자동으로 해당 장치에서 제공하는 서비스를 검색하고 서비스가 검색될 때 마다 서비스의 UUID를 S

ervice 목록에 표시합니다. 이 때, 서비스의 UUID를 선택하면 서비스에서 제공하는 특성의 UUID가 Characteristic

목록에 표시됩니다.

BluetoothLE | 42

이 예제에서 사용한 공기질 측정기 에어큐브의 서비스와 특성은 nordic semiconductor 사에서 만든 사

양을 사용합니다. 이 사양은 GATT 표준에는 정의되어 있지 않으나 블루투스상에서 UART 통신을 에뮬

레이션 할 때 자주 사용되는 사실상의 표준(De facto)입니다.

참고로 GATT 표준에 정의된 서비스인 경우에는 표준 문서에 명시된 특성의 UUID를 이용하면 되고 업

체에서 만든 커스텀 서비스인 경우에는 특성의 UUID를 업체에 문의하거나 제공되는 스펙을 참조해야

합니다.


BluetoothLE > discoverService 메소드

연결된 주변 BluetoothLE 장치가 제공하는 서비스 UUID를 요청하는 메소드입니다. 요청에 성공하여 서비스

UUID를 받을 때 마다 onsuccess 이벤트가 발생합니다.



BluetoothLE 오브젝트를 추가합니다. 추가된 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

현재 블루투스 상태를 표시할 Button, ImageViewer 컴포넌트와 검색된 BluetoothLE 장치의 정보를 표시할

Grid 컴포넌트 그리고 서비스와 특성 정보를 표시할 Static과 Grid 컴포넌트를 예제의 그림과 같이 적절히 배

치합니다.



BluetoothLE BluetoothLE00

Button btn_ble_display

ImageViewer img_ble_status

Grid grd_address

grd_service

grd_characteristic

Dataset ds_address

ds_service

ds_characteristic

ds_uart_characteristic

Static stt_service


stt_characteristic



Form의 onload 이벤트 함수를 다음과 같이 작성합니다. Form이 로딩되면 바로 BluetoothLE 장치를 스캔합

니다. scanStart 메소드의 인수로 주어지는 10000은 10초를 의미합니다.

this.example_bluetoothle_02_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)

{


};

Form의 onbeforeclose 이벤트 함수를 다음과 같이 작성합니다. Form이 종료되기 전 블루투스 연결을 종료합

니다.

this.example_bluetoothle_02_onbeforeclose = function(obj:nexacro.Form,e:nexacro.

CloseEventInfo)

{


};

3 Dataset 오브젝트 설정하기

BluetoothLE 장치의 이름과 주소를 저장할 ds_address 데이터셋을 다음과 같이 설정합니다. 설정을 완료한

후 화면에 배치한 grd_address Grid 컴포넌트에 바인딩합니다.

● DeviceName: BluetoothLE 장치명

● DeviceAddress: BluetoothLE 주소(MAC)

● StatusMessage: 연결 상태

BluetoothLE | 44

BluetoothLE 장치에서 제공하는 서비스 목록을 저장할 ds_service 데이터셋을 다음과 같이 설정합니다. 설정

을 완료한 후 화면에 배치한 grd_service Grid 컴포넌트에 바인딩합니다.

● ServiceUUID: 서비스 UUID

서비스의 특성 정보를 저장할 ds_characteristic 데이터셋을 다음과 같이 설정합니다. 설정을 완료한 후 화면

에 배치한 grd_characteristic Grid 컴포넌트에 바인딩합니다.

● CharacteristicName: 특성명

● CharacteristicUUID: 특성 UUID

UART 서비스에서 제공하는 특성의 UUID를 저장한 ds_uart_characteristic 데이터셋을 다음과 같이 설정합

니다. 이 데이터셋은 조회 용도로만 사용하므로 컴포넌트에 바인딩시키지 않습니다. ds_uart_characteristic

데이터셋에 저장한 서비스와 특성의 UUID는 업체에서 정의해서 사용하는 값으로 표준 문서에서는 확인할 수

없습니다.


● CharacteristicName: 특성명

● CharacteristicUUID: 특성 UUID

● ParentServiceUUID: 특성이 소속된 서비스의 UUID

4 BluetoothLE 오브젝트 이벤트 함수 작성하기

onsuccess 이벤트 함수를 다음과 같이 작성합니다. BluetoothLE 오브젝트에 요청한 작업이 성공했을 때 호출

됩니다. 어떤 이벤트인지는 e.reason 속성의 값으로 확인할 수 있습니다.

this.BluetoothLE00_onsuccess = function(obj:nexacro.BluetoothLE,e:nexacro.

BluetoothLEEventInfo)

{

switch(e.reason)

{

case 10: //scanStart() scan start

this.img_ble_status.set_image("imagerc::ico_bluetooth-signal-indicator_128_

blue.png");

break;

case 11: //scanStart() scan timeout"


break;

case 12: //scanStart() discovered for a device that provides specific service

break;

case 20: //scanStop() scan stop

BluetoothLE | 46


break;

case 30: //connect() connected

this.img_ble_status.set_image("imagerc::ico_bluetooth-connected_128_blue.png

");

this.ds_address.setColumn(this.ds_address.rowposition, "StatusMessage", "

Connected");

this.BluetoothLE00.discoverService();

break;

case 40: //disconnect() disconnected


this.resetStatusMsg();

this.resetDS();

break;

case 51: //discoverService() service discovered

var row = this.ds_service.addRow();

this.ds_service.setColumn(row, "ServiceUUID", e.service_uuid);

this.grd_service.selectRow(row);

break;

case 50: //discoverService() discover service Start

case 60: //subscribe() Subscribe, Notification Start

case 61: //subscribe() Subscribe, Notification message received

case 70: //unsubscribe() Unsubscribe, Notification Stop

case 80: //readCharacteristic() Read Characteristics

case 90: //writeCharacteristic() Write Characteristics

default:

break;

}

};

onerror 이벤트 함수를 다음과 같이 작성합니다. BluetoothLE 오브젝트에 요청한 작업이 실패했을 때 발생하

는 이벤트입니다. 어떤 이벤트인지는 e.reason 속성의 값으로 확인할 수 있습니다.

this.BluetoothLE00_onerror = function(obj:nexacro.BluetoothLE,e:nexacro.

BluetoothLEErrorEventInfo)

{



trace(strResult);

};

onscanresult 이벤트 함수를 다음과 같이 작성합니다. scanStart 메소드 수행 중 주변 BluetoothLE 장치가 스

캔될 때 마다 발생하는 이벤트입니다.

this.BluetoothLE00_onscanresult = function(obj:nexacro.BluetoothLE,e:nexacro.

BluetoothLEScanDeviceEventInfo)

{

var row = this.ds_address.addRow();

this.ds_address.setColumn(row, "DeviceName", e.device_name);

this.ds_address.setColumn(row, "DeviceAddress", e.device_address);

};


BluetoothLE 장치와의 연결/해제시 상태 메시지를 초기화해주는 함수를 다음과 같이 작성합니다.

this.resetStatusMsg = function()

{

nRowCnt = this.ds_address.getCount();

for(var i=0; i<nRowCnt; i++)

{

this.ds_address.setColumn(i, "StatusMessage", "");

}

};

this.resetDS = function()

{

this.ds_service.deleteAll();

this.ds_characteristic.deleteAll();

};

6 Grid 이벤트 함수 작성하기

스캔된 BluetoothLE 장치 목록이 표시된 Grid(grd_address) 컴포넌트의 oncellclick 이벤트 함수를 다음과

같이 작성합니다. Cell을 터치하면 연결이 수행됩니다. 이전에 연결된 장치가 있으면 연결을 해제합니다.

BluetoothLE | 48

this.grd_address_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)

{

var rowPos = this.ds_address.rowposition;

var strStatus = this.ds_address.getColumn(rowPos, "StatusMessage");

if(strStatus == "Connected")

{


return;

}

else

{


this.ds_address.setColumn(rowPos, "StatusMessage", "Connecting");

var strAddr = this.ds_address.getColumn(rowPos, "DeviceAddress");

this.BluetoothLE00.connect(strAddr);

}

};

연결된 장치의 서비스 목록을 표시하는 Grid 컴포넌트의 oncellclick 이벤트 함수를 다음과 같이 작성합니다.

Cell을 터치하면 서비스 특성의 UUID 목록이 grd_characteristic 에 표시됩니다.

this.grd_service_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)

{

var selectedService_uuid = this.ds_service.getColumn(e.row, "ServiceUUID");

this.ds_characteristic.deleteAll();

for (var i=0; i<this.ds_uart_characteristic.getRowCount();i++)

{

if( selectedService_uuid == this.ds_uart_characteristic.getColumn(i, "

ParentServiceUUID"))

{

var row = this.ds_characteristic.addRow();

this.ds_characteristic.setColumn(row, "CharacteristicName", this.ds_uart_

characteristic.getColumn(i, "CharacteristicName"));

this.ds_characteristic.setColumn(row, "CharacteristicUUID", this.ds_uart_

characteristic.getColumn(i, "CharacteristicUUID"));


}

}

};

7 Button, ImageViewer 이벤트 함수 작성하기

Button/ImageViewer의 onclick 이벤트 함수를 다음과 같이 작성합니다. Button 혹은 ImageViewer를 터치

하면 BluetoothLE 장치와의 연결을 해제하고 주변의 BluetoothLE 장치를 다시 스캔합니다.

this.btn_ble_display_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{


this.ds_address.deleteAll();


};

this.img_ble_status_onclick = function(obj:nexacro.ImageViewer,e:nexacro.ClickEventInfo)

{

this.btn_ble_display_onclick();

};


Form이 로딩되면 자동으로 주변 BluetoothLE 장치를 스캔하여 장치 목록을 표시합니다. 목록의 장치를 터치

하면 연결이 수행되며 장치에서 제공하는 서비스를 요청합니다. 장치로부터 받은 서비스 목록은 Service에 목

록으로 표시되며 서비스에 해당하는 특성은 Characteristic 목록에 표시됩니다.

연결을 종료하려면 grd_address Grid 목록에서 해당 장치 항목을 터치하거나 상단의 블루투스 아이콘을 터치

합니다. 버튼을 터치하면 현재 연결이 종료되고 다시 장치 스캔을 시도합니다.

Camera

7.

7.1 Camera 소개

Camera는 모바일 장치의 기본 카메라 앱을 사용하여 사진을 촬영하는 기능을 수행하는 오브젝트입니다. 단순한 촬

영뿐 아니라 사진의 크기와 품질도 설정할 수 있습니다. 단, 이미지만을 지원하므로 카메라 앱 실행시 동영상 촬영 기

능은 자동으로 비활성화됩니다.

7.2 사진찍기

모바일 장치의 카메라를 이용해 사진을 찍으려면 Camera 오브젝트의 takePicture 메소드를 사용합니다. takePictur

e 메소드는 모바일 장치의 기본 카메라 앱을 수행시켜 사진을 찍을 수 있게 해주고 그 결과 이미지를 얻을 수 있게 해

줍니다.

takePicture 메소드 수행으로 얻어진 이미지는 앱에 할당된 경로에 파일로 저장됩니다. 파일의 경로는 CameraEven

tInfo의 url 속성을 통해 얻을 수 있으나 앱의 고유 영역에 저장되므로 데모 앱 이외의 앨범 앱이나 파일 탐색기 등을

통해서는 확인할 수 없습니다.

//data/data/com.tobesoft.np17demodev/files/NEXACRO/_resource_/_devicepics_/1522128907601.JPEG

촬영한 사진 이미지를 앨범에 별도로 저장하려면 usegallery 속성을 사용합니다. usegallery 속성을 설정하면 촬영한

사진의 복사본을 만들어 앨범에 저장해줍니다.


7.2.1 예제

다음은 takePicture 메소드를 수행하여 이미지를 얻고 그 정보를 출력하는 예제입니다.

사진을 찍으려면 Take a picture 버튼을 터치합니다. 그러면 모바일 장치의 카메라 앱이 구동되며 사진을 찍을 수 있

습니다. 사진을 찍으면 그 결과 이미지를 ImageViewer로 보여주며 로그는 하단의 TextArea에 출력됩니다.


Camera > takePicture 메소드

모바일 장치의 카메라 앱을 수행하여 사진을 찍고 그 이미지를 얻는 메소드입니다.

Camera > usegallery 속성

모바일 장치에서 촬영한 사진의 복사본을 만들어 앨범에 저장할지 설정하는 속성입니다. 속성 값을 설정하지

않으면 true로 적용됩니다.

Camera | 52

Camera > oncapture 이벤트

takePicture 메소드의 수행이 성공했을 때 발생하는 이벤트입니다. 이벤트 함수에서 CameraEventInfo 객체

를 통해 이미지 정보를 얻을 수 있습니다.

System > convertRealPath 메소드

%USERAPP%, %CACHE% 등과 같은 Alias가 포함된 경로를 실제 절대 경로로 변환해주는 메소드입니다.



Camera 오브젝트를 추가합니다. 추가된 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

화면을 구성하기 위한 Button, ImageViewer, TextArea 컴포넌트를 예제의 그림과 같이 적절히 배치합니다.



Camera Camera00

Button btn_take_picture

ImageViewer ImageViewer00

TextArea TextArea00

2 Take a picture 버튼 이벤트 함수 작성하기

Take a picture 버튼을 터치했을 때 동작할 함수를 다음과 같이 작성합니다.

this.btn_take_picture_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.Camera00.takePicture();

};

3 Camera 오브젝트 이벤트 함수 작성하기

takePicture 메소드가 수행되면 모바일 장치의 기본 카메라 앱이 실행됩니다. 실행된 카메라 앱으로 사진을 찍

고 이미지를 얻는 데 성공하면 oncapture 이벤트가 발생하고 실패하면 onerror 이벤트가 발생합니다.

● oncapture 이벤트 함수

oncapture는 takePicture 메소드 수행이 성공하면 호출되는 이벤트입니다. oncapture 이벤트 함수에서는 카

메라로부터 얻은 이미지를 ImageViewer로 출력하고 이벤트 정보를 TextArea 컴포넌트에 출력합니다.


this.Camera00_oncapture = function(obj:nexacro.Camera,e:nexacro.CameraEventInfo)

{

var strResult, strEventReason, strFilePath;

if(e.reason === "0")

{

strEventReason = "\nSucceed getting images.\n";

strFilePath = "file://"+ system.convertRealPath(e.url);

this.ImageViewer00.set_image(strFilePath);

strResult = strEventReason;

strResult += "\n> Path: "+ strFilePath;

strResult += "\n> Width: " + e.imagewidth +" px";

strResult += "\n> Height: " + e.imageheight +" px";

}

else if(e.reason === "1")

{

strEventReason = "\nCanceled getting images.\n";

}

this.TextArea00.set_value(strResult);

};

● onerror 이벤트 함수

onerror는 takePicture 메소드 수행이 실패하면 호출되는 이벤트입니다. onerror 이벤트 함수에서는 어떤 문

제가 있었는지 확인할 수 있도록 에러 메시지를 출력합니다.

this.Camera00_onerror = function(obj:nexacro.Camera,e:nexacro.CameraErrorEventInfo)

{


this.TextArea00.set_value(strResult);

};


Take a picture 버튼을 터치하여 카메라 앱이 수행되는지 확인하고 사진을 촬영하여 결과가 옳바르게 화면에

출력되는지 확인합니다.

Camera | 54

7.3 사진 포맷 설정하기

takePicture 메소드를 사용해 촬영된 이미지의 속성은 카메라 앱의 설정을 따릅니다. 일반적으로 카메라 앱의 설정은

사용자가 취향에 맞게 설정해서 사용하기 때문에 촬영된 이미지의 형식, 크기, 품질 등이 제각각입니다. 사용자가 원

하는 이미지 포맷이 있을 경우 Camera 오브젝트의 속성을 설정하면 원하는 포맷의 이미지를 얻을 수 있습니다.

Camera 오브젝트에서 설정 가능한 속성은 이미지 전달 형식, 인코딩 형식, 포맷, 품질, 넓이, 높이 정보입니다.

7.3.1 예제

다음은 Camera 오브젝트의 이미지 속성을 설정하고 takePicture 메소드를 수행하여 이미지를 얻는 예제입니다.

사진을 찍으려면 Take a picture 버튼을 터치합니다. 그러면 모바일 장치의 카메라 앱이 구동되며 사진을 찍을 수 있

습니다. 사진을 찍으면 그 결과 이미지를 하단의 Image 탭에서 보여주며 로그는 Information 탭에 출력됩니다.


특정 포맷으로 설정하여 사진을 찍으려면 상단의 메뉴에서 이미지 전달 방식, 인코딩 타입, 품질, 사이즈를 설정합니

다.

● Imate Type: "url"을 설정하면 이미지의 위치 정보가 URL 형태로 전달되며, "imagedata"로 설정하면 이미지가

오브젝트 형태로 전달됩니다. 결과 값은 Camera 오브젝트의 oncapture 이벤트에서 e.url, e.imagedata 속성

에서 확인할 수 있습니다.

● Encoding: 이미지 형식을 JPEG 혹은 PNG로 설정합니다.

● Quality: 이미지 품질을 설정합니다. 설정 할 수 있는 값은 0~100 입니다.

● Width, Height: 이미지의 크기를 설정합니다. 0 혹은 빈값으로 설정하면 원본 이미지의 크기로 설정됩니다.


Camera > encodingtype 속성

이미지의 인코딩 형식을 설정하는 속성입니다. JPEG와 PNG 형식을 지원하며 기본값은 JPEG입니다.

Camera > imagequality 속성

이미지의 품질을 설정하는 속성입니다. 0~100사이의 값으로 설정할 수 있으며 encodingtype이 JPEG 형식

일 경우에만 적용됩니다.

Camera > imagewidth 속성

이미지의 너비를 설정하는 속성입니다. 속성값을 설정하지 않으면 0으로 설정되며 원본 이미지 너비를 사용합

니다. 너비 설정 시 높이와 비율이 맞지 않으면 이미지가 왜곡될 수 있습니다.

Camera > imageheight 속성

이미지의 높이를 설정하는 속성입니다. 속성 값을 설정하지 않으면 0으로 설정되며 원본 이미지 높이를 사용

합니다. 높이 설정 시 너비와 비율이 맞지 않으면 이미지가 왜곡될 수 있습니다.

Camera > gettype 속성

촬영된 이미지가 전달되는 방식을 설정합니다. url로 설정시 이미지 파일의 위치 정보가 전달되고 imagedata

로 설정 시 오브젝트로 전달됩니다.

Camera > takePicture 메소드

모바일 장치의 카메라 앱을 수행하여 사진을 찍고 그 이미지를 얻는 메소드입니다.

Camera > oncapture 이벤트

takePicture 메소드의 수행이 성공했을 때 발생하는 이벤트입니다. 이벤트 함수에서 CameraEventInfo 객체

를 통해 이미지 정보를 얻을 수 있습니다.

Camera | 56



Camera 오브젝트를 추가합니다. 추가된 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

화면을 구성하기 위한 Static, Radio, Spin, Edit 컴포넌트, 이미지와 로그를 출력하기 위한 Tab, ImageViewe

r, TextArea 컴포넌트를 예제의 그림과 같이 적절히 배치합니다. 화면 구성을 위해 사용한 컴포넌트 및 오브젝

트는 다음과 같습니다.


Camera Camera00

GroupBox GroupBox00

Static stt_imageType

stt_encodingType

stt_quality

stt_width

stt_height

Radio rdo_imageType

rdo_encodingType

Spin spn_quality

Edit edt_width

edt_height

Button btn_take_picture

Tab Tab00


TextArea TextArea00

2 Take a picture 버튼 이벤트 함수 작성하기

Take a picture 버튼을 터치했을 때 동작할 함수를 다음과 같이 작성합니다.

this.btn_take_picture_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.Camera00.set_gettype(this.rdo_imageType.text);

this.Camera00.set_encodingtype(this.rdo_encodingType.text);

this.Camera00.set_imagequality(this.spn_quality.value);

this.Camera00.set_imagewidth(this.edt_width.value);

this.Camera00.set_imageheight(this.edt_height.value);

this.Camera00.takePicture();


};

사용자로부터 입력받은 값을 Camera 오브젝트의 속성에 설정한 후 takePicture 메소드를 호출합니다.

3 Camera 오브젝트 이벤트 함수 작성하기

takePicture 메소드가 수행되면 모바일 장치의 기본 카메라 앱이 실행됩니다. 실행된 카메라 앱으로 사진을 찍

고 이미지를 얻는 데 성공하면 oncapture 이벤트가 발생하고 실패하면 onerror 이벤트가 발생합니다.

● oncapture 이벤트 함수

oncapture는 takePicture 메소드 수행이 성공하면 호출되는 이벤트입니다. oncapture 이벤트 함수에서는 카

메라로부터 얻은 이미지를 ImageViewer로 출력하고 이벤트 정보를 TextArea 컴포넌트에 출력합니다.

this.Camera00_oncapture = function(obj:nexacro.Camera,e:nexacro.CameraEventInfo)

{

var strResult, strEventReason, strFilePath;

if(e.reason === "0")

{

strEventReason = "Succeed getting images.\n";

strFilePath = "file://"+ system.convertRealPath(e.url);

this.Tab00.Tabpage1.form.ImageViewer00.set_image(strFilePath);

strResult = strEventReason;


strResult += "\n> Width: " + e.imagewidth +" px";

strResult += "\n> Height: " + e.imageheight +" px";

}

else if(e.reason === "1")

{

strEventReason = "Canceled getting images.\n";

}

this.Tab00.Tabpage2.form.TextArea00.set_value(strResult);

};


onerror는 takePicture 메소드 수행이 실패하면 호출되는 이벤트입니다. onerror 이벤트 함수에서는 어떤 문

제가 있었는지 확인할 수 있도록 에러 메시지를 출력합니다.

Camera | 58

this.Camera00_onerror = function(obj:nexacro.Camera,e:nexacro.CameraErrorEventInfo)

{



};


Take a picture 버튼을 터치하여 카메라 앱이 정상적으로 오픈되는지 확인합니다. 원하는 이미지 포맷을 설정

한 후 사진을 촬영하고 촬영된 이미지가 설정에 맞게 출력되는지 확인합니다.

ExternalAPI

8.

8.1 ExternalAPI 소개

ExternalAPI는 넥사크로 앱과 외부 앱 간의 연동이 필요한 경우 사용하는 오브젝트입니다. 특정 앱으로 메시지를 전

달하여 앱을 실행하거나 특정 기능을 수행할 수 있습니다. 물론 모든 앱과의 연동이 가능한 것은 아니며 넥사크로 앱

에서 보내는 메시지를 받고 처리하는 로직이 구현된 앱과만 연동할 수 있습니다.

안드로이드와 iOS는 앱간 통신 방법에 차이가 있는데 ExternalAPI는 환경에 상관없이 동일한 사용법으로 이를 가능

하게 해줍니다. 다만 메소드 호출시 대상 앱을 식별할 때 사용하는 ID 설정에서 약간의 차이가 있을뿐입니다. 안드로

이드에서는 패키지명을, iOS에서는 custom URL scheme을 ID로 사용합니다. 그 외의 인수 설정은 동일합니다. 다음

은 안드로이드와 iOS 환경에서 ExternalAPI 오브젝트의 execExtAPI 메소드 호출 예를 보여줍니다.

//Android

this.ExternalAPI00.execExtAPI("100", "com.nexacro.ExternalAPITest", "fn_Chk", "aa bb 'cc c' dd

");

//iOS

this.ExternalAPI00.execExtAPI("200", "ExternalAPITest://", "fn_Chk", "aa bb 'cc c' dd");

당연하지만 안드로이드나 iOS 앱에서는 위 코드의 요청을 처리하기 위한 로직의 구현이 필요합니다. 안드로이드는

브로드캐스트 리시버에 대한 처리가 필요하며 iOS 앱에서는 custom URL scheme에 대한 처리가 필요합니다.

이번 장에서는 넥사크로 앱에서 다른 앱으로 메시지를 보내거나 API를 호출하는 방법에 관해 설명합니다. 넥사크로

앱과 통신할 테스트 용도의 안드로이드, iOS 앱을 제작하는 방법이나 앱 데모 프로젝트 파일은 테스트 앱 만들기를 참

조하십시오.

ExternalAPI | 60

8.2 외부 앱으로의 접근 가능 여부 확인하기

외부 앱과 연동하려면 먼저 접근이 가능한지를 확인하는 것이 좋습니다. 연동하려는 앱이 설치가 되어 있는지 애플리

케이션 ID가 정확한지도 모른채 무턱대고 메시지를 보내봐야 시스템 성능 저하의 원인이 될 뿐입니다. 이런 경우에 손

쉽게 사용할 수 있는 메소드가 isAccessible 입니다. isAccessible 메소드는 패키지 이름(안드로이드) 혹은 custom U

RL scheme(iOS)을 사용하여 다른 앱으로 접근이 가능한지 확인하는 용도로 사용합니다.

8.2.1 예제

다음은 외부 앱으로의 접근이 가능한지 확인하는 isAccessible 메소드의 사용 예입니다. 접근 여부를 확인할 앱의 Ap

plication ID를 입력한 후 Access 버튼을 터치합니다. 안드로이드 환경에서는 패키지 이름을 입력하고 iOS 환경에서

는 custom URL을 입력합니다.

다른 앱으로의 접근이 가능하면 onsuccess 이벤트를, 불가능하면 onerror 이벤트가 발생하며 결과 로그가 TextAre

a에 표시됩니다.



ExternalAPI > isAccessible 메소드

특정 앱에 접근이 가능한지 확인하는 메소드입니다. 안드로이드는 애플리케이션 ID, iOS는 URL scheme을 인

수로 호출합니다.

ExternalAPI > onsuccess 이벤트

ExternalAPI 오브젝트에서 요청한 작업이 성공했을 때 발생하는 이벤트입니다.

ExternalAPI > onerror 이벤트

ExternalAPI 오브젝트에서 요청한 작업이 실패했을 때 발생하는 이벤트입니다.



ExternalAPI 오브젝트를 추가합니다. 추가된 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

대상 앱의 Application ID 혹은 custom URL scheme을 입력받을 Static, Button, Edit 컴포넌트와 결과를 출

력할 TextArea를 예제의 그림과 같이 적절히 배치합니다.



ExternalAPI ExternalAPI00

Button btn_isaccessible

Edit edt_appid

Static stt_appid

GroupBox GroupBox00

TextArea TextArea00


Form의 onload 이벤트 함수를 다음과 같이 작성합니다. isAccessible 메소드 호출시 OS에 따라 인수를 달리

설정해줘야 하므로 OS를 체크하여 Edit 컴포넌트에 기본 인수 값을 설정해줍니다.

this.example_externalapi_01_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)

{


ExternalAPI | 62

if(!strOS.toLowerCase().search(/android/)) //Android

{

this.edt_appid.set_value("com.nexacro.extAPITest");

}

else if(!strOS.toLowerCase().search(/ios/)) //iOS

{

this.edt_appid.set_value("extAPITest://");

}

else

{

this.edt_appid.set_value("");

}

this.TextArea00.set_value("");

};

3 ExternalAPI 오브젝트 이벤트 함수 작성하기

onsuccess 이벤트 함수를 다음과 같이 작성합니다. ExternalAPI 오브젝트에 요청한 작업이 성공했을 때 호출

됩니다.

this.ExternalAPI00_onsuccess = function(obj:nexacro.ExternalAPI,e:nexacro.

ExternalAPIEventInfo)

{

this.TextArea00.set_value(this.TextArea00.value + "\n" + "- ExternalAPI onsuccess");

this.TextArea00.set_value(this.TextArea00.value + "\n" + " > obj : " + obj);

this.TextArea00.set_value(this.TextArea00.value + "\n" + " > e.eventid : " + e.

eventid);

this.TextArea00.set_value(this.TextArea00.value + "\n" + " > e.reason : " + e.reason

);

this.TextArea00.set_value(this.TextArea00.value + "\n" + " > e.recvid : " + e.recvid

);

this.TextArea00.set_value(this.TextArea00.value + "\n" + " > e.recvdata : " + e.

recvdata +"\n");

};

onerror 이벤트 함수를 다음과 같이 작성합니다. ExternalAPI 오브젝트에 요청한 작업이 실패했을 때 발생하

는 이벤트입니다.


this.ExternalAPI00_onerror = function(obj:nexacro.ExternalAPI,e:nexacro.

ExternalAPIErrorEventInfo)

{

this.TextArea00.set_value(this.TextArea00.value + "\n" + "- ExternalAPI onerror");



eventid);

this.TextArea00.set_value(this.TextArea00.value + "\n" + " > e.statuscode : " + e.

statuscode);

this.TextArea00.set_value(this.TextArea00.value + "\n" + " > e.errormsg : " + e.

errormsg +"\n");

};

4 Access 버튼 이벤트 함수 작성하기

Access 버튼의 onclick 이벤트 함수를 다음과 같이 작성합니다.

this.btn_isaccessible_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.ExternalAPI00.isAccessible(this.edt_appid.value);

};

5 Edit 이벤트 함수 작성하기

Edit 컴포넌트의 onkeydown 이벤트 함수를 다음과 같이 작성합니다. 사용자가 Access 버튼을 터치하지 않고

Edit에서 입력한 후 소프트 키보드로 Enter 키를 입력했을 때 Access 버튼을 터치한 것처럼 처리해줍니다.

this.edt_appid_onkeydown = function(obj:nexacro.Edit,e:nexacro.KeyEventInfo)

{

var strURL = this.edt_appid.value;

if(e.keycode == "13") //Enter key

{

if(nexacro._isNull(strURL) || strURL == "")

{

this.edt_appid.setFocus();

}

else

{

this.btn_isaccessible_onclick();

ExternalAPI | 64

}

}

};


넥사크로 애플리케이션과 연동할 앱을 설치합니다. 안드로이드 앱은 Application ID가 설정되어 있어야 하고 i

OS 앱은 custom URL scheme에 대한 설정이 되어 있어야 합니다.

OS에 따라 Application ID 혹은 custom URL scheme을 입력한 후 Access 버튼을 터치하여 수행이 정상적으

로 수행되는지 확인합니다. 수행에 성공하면 onsuccess 이벤트가, 실패하면 onerror 이벤트 로그가 하단의 Te

xtArea에 출력됩니다.

8.3 외부 API 호출하기

외부 앱을 수행하거나 특정 기능을 사용하려면 execExtAPI 메소드를 사용할 수 있습니다. execExtAPI 메소드를 사

용해 메시지를 전달하면 외부 앱에서 이를 받아 처리하고 결과를 전달합니다.

8.3.1 예제

다음은 외부 앱으로 데이터를 전달하고 받는 execExtAPI 메소드 사용 예제입니다. 인수를 설정한 후 Go 버튼을 터치

합니다. 데이터 전달이 성공하면 onsuccess 이벤트가 발생하며 외부 앱으로부터 데이터를 받으면 onrecvdata 이벤

트가 발생합니다.


다음은 넥사크로 애플리케이션으로부터 메시지를 전달받은 외부 앱의 로그 메시지입니다.

11-22 20:48:37.939 10661-10661/com.nexacro.extAPITest I/nexacro: >> [com.nexacro.extAPITest]

message received.

11-22 20:48:37.941 10661-10661/com.nexacro.extAPITest I/nexacro: - sender:com.tobesoft.np17

demodev.extAPI

11-22 20:48:37.942 10661-10661/com.nexacro.extAPITest I/nexacro: - recvID:1

11-22 20:48:37.943 10661-10661/com.nexacro.extAPITest I/nexacro: - apiname:dummyApi

11-22 20:48:37.943 10661-10661/com.nexacro.extAPITest I/nexacro: - params:arg1=text arg2=1234

ExternalAPI | 66


ExternalAPI > execExtAPI 메소드

외부 앱의 API를 호출하는 메소드입니다. 호출하려는 앱을 식별할 수 있는 애플리케이션 ID 혹은 URL shcem

e, 호출할 API 이름이 필요합니다. 필요한 경우 파라미터도 전달이 가능합니다.

ExternalAPI > onrecvdata 메소드

execExtAPI 메소드로 호출한 앱에서 데이터(문자열)를 전달받았을 때 발생하는 이벤트입니다.



ExternalAPI 오브젝트를 추가합니다. 추가된 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

execExtAPI 메소드 인수를 입력받기 위한 Static, Button, Edit 컴포넌트와 결과를 출력할 TextArea를 예제

의 그림과 같이 적절히 배치합니다.



ExternalAPI ExternalAPI00

Button btn_go

Edit edt_recvid

edt_appid

edt_apiname

edt_parameter

Static stt_recvid

stt_appid

stt_apiname

stt_parameter

GroupBox GroupBox00

TextArea TextArea00


Form의 onload 이벤트 함수를 다음과 같이 작성합니다. execExtAPI 메소드 호출시 OS에 따라 Application I

D 인수를 달리 설정해줘야 하므로 OS를 체크하여 Edit 컴포넌트에 기본 인수 값을 설정해줍니다.


this.example_externalapi_02_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)

{



if(!strOS.toLowerCase().search(/android/))

{

this.edt_appid.set_value("com.nexacro.extAPITest");

}

else if(!strOS.toLowerCase().search(/ios/))

{

this.edt_appid.set_value("extAPITest://");

}

else

{

this.edt_appid.set_value("");

}

};

3 ExternalAPI 오브젝트 이벤트 함수 작성하기

onsuccess 이벤트 함수를 다음과 같이 작성합니다. ExternalAPI 오브젝트에 요청한 작업이 성공했을 때 호출

됩니다.

this.ExternalAPI00_onsuccess = function(obj:nexacro.ExternalAPI,e:nexacro.


{

this.TextArea00.set_value(this.TextArea00.value + "\n" + "- ExternalAPI onsuccess");



eventid);


);


);


recvdata +"\n");

};

onerror 이벤트 함수를 다음과 같이 작성합니다. ExternalAPI 오브젝트에 요청한 작업이 실패했을 때 발생하

ExternalAPI | 68

는 이벤트입니다.

this.ExternalAPI00_onerror = function(obj:nexacro.ExternalAPI,e:nexacro.

ExternalAPIErrorEventInfo)

{

this.TextArea00.set_value(this.TextArea00.value + "\n" + "- ExternalAPI onerror");



eventid);

this.TextArea00.set_value(this.TextArea00.value + "\n" + " > e.statuscode : " + e.

statuscode);

this.TextArea00.set_value(this.TextArea00.value + "\n" + " > e.errormsg : " + e.

errormsg +"\n");

};

onrecvdata 이벤트 함수를 다음과 같이 작성합니다. 외부 앱으로부터 메시지를 받으면 발생하는 이벤트입니

다. 전달받은 메시지는 e.recvdata 속성에서 확인할 수 있습니다.

this.ExternalAPI00_onrecvdata = function(obj:nexacro.ExternalAPI,e:nexacro.


{

this.TextArea00.set_value(this.TextArea00.value + "\n" + "- ExternalAPI onrecvdata");



eventid);


);


);


recvdata +"\n");

};

4 Go 버튼 이벤트 함수 작성하기

Go 버튼의 onclick 이벤트 함수를 다음과 같이 작성합니다. 사용자로부터 입력받은 인수를 설정한 후 execExt

API 메소드를 호출합니다.

this.btn_go_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{


var strRecvID = this.edt_recvid.value;

var strApplicationID = this.edt_appid.value;

var strAPI = this.edt_apiname.value;

var strParams = this.edt_parameter.value;

this.ExternalAPI00.execExtAPI(strRecvID, strApplicationID, strAPI, strParams);

};


넥사크로 앱과 연동할 앱이 모바일 장치에 설치되어 있는지 확인합니다. 설치가 되어 있으면 execExtAPI 메소

드에 설정할 인수를 입력한 후 Go 버튼을 터치하여 정상적으로 수행되는지 확인합니다.

수행에 성공하면 onsuccess 이벤트가, 실패하면 onerror 이벤트 로그가 하단의 TextArea에 출력됩니다. 외부

앱으로부터 메시지를 받으면 onrecvdata 이벤트가 발생합니다.

8.4 테스트 앱 만들기

안드로이드나 iOS에서는 각 환경에 맞게 앱간의 연동 방법들을 제공하고 있습니다. 이를 통해 앱 간에 메시지, 데이터

를 전달하거나 앱을 호출하는 등의 연동을 가능하게 합니다. 이 과정에서와 같이 앱에 처리 로직을 구현해주면 넥사크

로 앱과의 연동이 가능합니다.

이번 장에서는 넥사크로 앱과 데이터 전달, API 호출 등을 수행할 수 있는 테스트 앱을 제작하는 방법에 관해 설명합

니다. 테스트 앱의 제작은 안드로이드에서는 안드로이드 스튜디오와 자바, iOS에서는 xcode와 오브젝티브C로 제작

합니다. 메시지를 주고 받을 수 있는 인터페이스를 만들어 주는것이 중요하므로 사용자는 각자의 환경에 맞게 코틀린

이나 스위프트 등으로 앱을 제작해도 무방합니다.

8.4.1 안드로이드

안드로이드에서는 앱, 컴포넌트간 통신에 인텐트와 브로드캐스트 리시버를 사용할 수 있습니다. 인텐트는 앱의 컴포

넌트간에 요청 및 메시지 등의 데이터를 전달해주는 역할을 하고 브로드캐스트 리시버는 인텐트를 안드로이드 시스

템에 전파하거나 수신하는 역할을 합니다.

앱에서 브로드캐스트로 메시지가 담긴 인텐트를 안드로이드 시스템에 전파하면 앱에서 브로드캐스트 리시버를 통해

이를 수신할 수 있습니다. 안드로이드 시스템에 전파되는 여러 브로드캐스트 메시지중에서 자신이 수신할 메시지는

앱에서 등록한 인텐트 필터를 통해 고를 수 있습니다. 따라서 어떤 종류의 메시지를 수신할지 사전에 안드로이드 시스

템에 등록해야 하며 이는 매니페스트를 통해 할 수 있습니다.

ExternalAPI | 70

예제가 포함된 데모 프로젝트 코드는 아래 링크에서 내려받을 수 있습니다.

demo_android_ExternalAPITest

1 앱 프로젝트 생성

넥사크로플랫폼 17 배포가이드에서 앱 개발 및 실행 (안드로이드)의 앱 프로젝트 개발 장을 참조하여 안드로이

드 앱 프로젝트를 만들어줍니다.

프로젝트 생성시 패키지명은 com.nexacro.ExternalAPITest로 해줍니다. 패키지 이름은 넥사크로 앱과의 통

신에서 ID로 사용되므로 중요합니다.

별도의 화면이 필요한 앱이 아니므로 액티비티는 추가하지 않으며 아이콘, 스플래시 이미지 등의 리소스 관련

설정도 하지 않습니다. 또한 넥사크로 앱이 아니므로 넥사크로플랫폼 라이브러리와 nexacro config도 설정하

지 않습니다.

2 strings.xml 작성

앱에서 사용할 문자열을 선언해 놓는 strings.xml 파일을 작성합니다. strings.xml 파일은 보통 프로젝트 생성

시 자동으로 만들어지는데 만일 res > values 디렉터리에 없다면 툴바의 File 메뉴 혹은 프로젝트 탐색창의 콘

텍스트 메뉴에서 [New > XML > Values XML File]를 수행하여 생성해 줄 수 있습니다.

http://docs.tobesoft.com/deployment_guide_nexacro_17_ko#705531caff528563


<?xml version="1.0" encoding="utf-8"?>

<resources>

<string name="hello">Hello World, ExternalAPITest Activity!</string>

<string name="app_name">ExternalAPITest</string>

</resources>

3 main.xml 작성

앱 실행시 환영 메시지를 출력할 첫 화면에 사용할 레이아웃 파일을 작성합니다. [New > XML > Layout XML

File] 메뉴를 통해 생성합니다. Layout File Name은 main으로 하고 Root Tag는 LinearLayout으로 합니다.

생성된 파일은 res > layout 디렉터리에서 확인할 수 있는데 아래 코드를 참고하여 수정해줍니다.


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="@string/hello" />

</LinearLayout>

4 ExternalAPITestActivity.java 작성

앱 실행시 Hello 메시지를 출력할 첫 화면을 만듭니다. Activity 클래스를 상속받아 ExternalAPITestActivity

액티비티를 클래스를 선언합니다.

package com.nexacro.ExternalAPITest;

import android.app.Activity;

import android.os.Bundle;

public class ExternalAPITestActivity extends Activity {

/* 액티비티가 처음 생성될 때 호출 */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

ExternalAPI | 72

setContentView(R.layout.main);

}

}

5 extAPIReceiver.java 파일 작성

브로드캐스트 리시버를 구현한 extAPIReceiver 클래스를 생성합니다.

브로드캐스트 리시버는 BroadcastReceiver 클래스를 상속받아서 구현할 수 있으며 클래스 내부에 onReceive

r 메소드를 정의해야 합니다. 이 메소드는 원하는 브로드캐스트 메시지가 도착하면 자동으로 호출됩니다.

메시지는 인텐트 객체로 전달되므로 수신하고 싶은 메시지가 있다면 사전에 인텐트 필터를 등록해놔야 합니다.

즉, 어떤 인텐트를 받고 싶은지 인텐트 필터를 사용해 안드로이드 시스템에 미리 알려주어야 합니다. 인텐트 필

터의 등록은 매니페스트 파일에서 할 수 있습니다.

package com.nexacro.ExternalAPITest;

import android.content.BroadcastReceiver;

import android.content.Context;

import android.content.Intent;

import android.util.Log;

public class ExternalAPIReceiver extends BroadcastReceiver {

@Override

public void onReceive(Context context, Intent intent) {

//브로드캐스트 메시지를 받으면 인텐트로부터 받은 내용을 로그로 출력

Log.i("nexacro", ">> [com.nexacro.ExternalAPITest] message received.");

Log.i("nexacro", "- sender:" + intent.getExtras().getString("sender"));

Log.i("nexacro", "- recvID:" + intent.getExtras().getString("recvID"));

Log.i("nexacro", "- apiname:" + intent.getExtras().getString("apiname"));

Log.i("nexacro", "- params:" + intent.getExtras().getString("params"));

//인텐트를 만들어 브로드캐스팅으로 전달

Intent callExtAPI = new Intent(intent.getExtras().getString("sender"));

callExtAPI.putExtra("recvID", intent.getExtras().getString("recvID"));

callExtAPI.putExtra("recvdata", "This is a message from com.nexacro.ExternalAPITest

");

context.sendBroadcast(callExtAPI);

}

}

extAPIReceiver 클래스는 브로드캐스트 메시지를 받으면 인텐트 객체로부터 전달받은 데이터를 추출한 후 새

로운 인텐트 객체를 만들어 브로드캐스트로 넥사크로 앱에 전달합니다.

6 AndroidManifest.xml 작성

앱 관련 설정 정보를 담고 있는 AndroidManifest.xml 파일에 액티비티와 브로드캐스트 리시버, 인텐트 필터

를 설정합니다.

우선 앱 수행시 첫 화면으로 사용할 ExternalAPITestActivity 액티비티를 등록해줍니다. 그 다음 모바일 장치

내의 다른 앱이 보낸 메시지를 전달 받기위해 브로드캐스트 리시버를 등록해주고 그 아래 인텐트 필터를 등록

해줍니다. 브로드캐스트 리시버도 애플리케이션 구성 요소이므로 새로운 브로드캐스트 리시버를 만들면 반드

시 매니페스트 파일에 등록해야 시스템이 알 수 있습니다.

브로드캐스트 리시버를 등록하는 방법으로는 매니페스트 파일에 등록해 사용하는 정적 리시버와 자바 코드에

서 registerReceiver/unregisterReceiver 메소드를 사용해 등록/해제하는 동적 리시버의 두 가지가 있습니다.


<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.nexacro.ExternalAPITest"

android:versionCode="1"

android:versionName="1.0" >

<application

android:icon="@drawable/ic_launcher"

android:label="@string/app_name" >



<activity

android:label="@string/app_name"

android:name=".ExternalAPITestActivity" >

<intent-filter >

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>



<receiver android:name="com.nexacro.ExternalAPITest.ExternalAPIReceiver" android:

enabled="true">

<intent-filter>

<action android:name="com.nexacro.ExternalAPITest.extAPI" />

</intent-filter>

</receiver>

ExternalAPI | 74

</application>

</manifest>

7 빌드 및 앱 설치

넥사크로플랫폼 17 배포가이드에서 앱 개발 및 실행 (안드로이드)의 빌드 장을 참조하여 안드로이드 스튜디오

에서 앱을 빌드하고 모바일 장치에 설치합니다.

8 결과 확인

제작한 테스트 앱과 넥사크로 데모 앱이 모두 설치되어 있는지 확인한 후 넥사크로 데모 앱을 실행합니다. 메뉴

에서 [ExternalAPI > 외부 API 호출하기]를 선택하고 Application ID가 테스트 앱의 패키지 이름과 동일하게

설정되었는지 확인 후 Go 버튼을 터치합니다.

하단의 TextArea에 로그 메시지가 출력됩니다. 성공인 경우 onsuccess 이벤트와 onrecvdata 이벤트가 순차

적으로 발생합니다. onsuccess 이벤트는 execExtAPI 메소드 호출이 성공하면 발생하고 onrecvdata 이벤트

는 다른 앱으로부터 데이터가 수신되면 발생합니다. 메소드 호출이 실패한 경우에는 onerror 이벤트가 발생합

니다.

http://docs.tobesoft.com/deployment_guide_nexacro_17_ko#a4682bbf4696d7c3

Geolocation

9.

9.1 Geolocation

Geolocation은 모바일 장치의 위치 정보를 제공하는 오브젝트입니다. 위치 정보는 GPS(Global Positioning Syste

m)나 WPS(Wifi Positioning System)를 통해 측정되는데 고도, 방향, 위도, 경도, 속도 정보가 포함됩니다.

위치 정보를 기반으로 하는 서비스는 모바일에서 없어서는 안 될 주요 콘텐츠로 자리매김 했습니다. 특히 지도와 결합

하여 길을 찾아주는 내비게이션, 대중교통 정보, 배달 등 다양한 앱에서 활용되고 있습니다.

9.2 현재 위치 정보 구하기

위치 정보는 Geolocation 오브젝트의 메소드를 호출하여 구할 수 있습니다. getCurrentPosition 메소드는 현재 시

점의 위치 정보를 수신합니다. 주기적으로 위치 정보를 수신하려면 watchStart 메소드를 사용합니다. 메소드 수행이

성공하면 onrecvsuccess 이벤트가 발생하며 GeolocationEventInfo 오브젝트에서 출처, 고도, 방향, 위도, 경도, 속

도 등의 값을 구할 수 있습니다.

9.2.1 예제

다음은 GPS 혹은 WPS로부터 위치 정보를 수신받아 모바일 장치의 위치 정보를 보여주는 예제입니다. Accuracy와 I

nterval Time을 설정한 후 Watch Start 버튼을 터치하면 Interval Time 간격으로 위치 정보를 측정하여 표시해줍니

다. Watch Stop 버튼을 터치하면 측정을 멈춥니다.

Geolocation | 76


Geolocation > watchStart 메소드

모바일 장치의 위치 정보를 주기적으로 수신하는 메소드입니다. accuracy와 interval time을 인수로 설정합니

다. accuracy는 안드로이드의 경우 0~2 사이의 값, iOS의 경우 0~4 사이의 값을 설정할 수 있습니다. interv

al time은 밀리 초(milliseconds) 단위로 200~86,400,000ms 사이로 설정할 수 있습니다.

Geolocation > sourcetype 속성

위치 정보를 제공한 소스 정보를 갖는 속성입니다. GPS면 1 값을, WPS면 2 값을 갖습니다. iOS 환경에서는

사용할 수 없습니다.


Geolocation > coords 속성

모바일 장치에서 수신한 위치 정보를 갖는 읽기 전용 속성입니다. coords가 갖는 위치 정보는 다음과 같습니

다.

accuracy 위치 정보의 오차 범위

altitude 고도 정보(Meter 단위)

altitudeaccuracy 고도 정보의 오차 범위(iOS에서만 지원)

heading 방향 정보(˚ 단위)

latitude 위도 정보

longitude 경도 정보

speed 속도 정보(미터 퍼 세컨드, m/s 단위)



Geolocation 오브젝트를 추가합니다. 추가된 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

위치 정보를 표시할 Static 컴포넌트와 GoogleMap 컴포넌트를 예제의 그림과 같이 적절히 배치합니다.



Static Static00~Static11

Radio rdo_accuracy

Edit edt_intervaltime

edt_timestamp

edt_sourcetype

edt_accuracy

edt_altitude

edt_altitudeaccuracy

edt_heading

edt_latitude

edt_longitude

edt_speed

Button btn_start

btn_stop

GroupBox GroupBox00

2 Watch Start 버튼 이벤트 함수 작성하기

Geolocation | 78

Watch Start 버튼의 onclick 이벤트 함수를 다음과 같이 작성합니다.

this.btn_start_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

var nAccuracy = this.rdo_accuracy.text;

var nIntervalTime = this.edt_intervaltime.value;

if(nIntervalTime < 200 || nIntervalTime > 86400000)

{

this.edt_intervaltime.setFocus();

alert("Invalid range");

return;

}

this.Geolocation00.watchStart(nAccuracy, nIntervalTime);

this.btn_start.set_enable(false);


};

3 Watch Stop 버튼 이벤트 함수 작성하기

Watch Stop 버튼의 onclick 이벤트 함수를 다음과 같이 작성합니다.


{

this.Geolocation00.watchStop();

this.btn_start.set_enable(true);


};

4 Geolocation 이벤트 함수 작성하기

위치 정보 수신에 성공하면 onrecvsuccess 이벤트를, 실패하면 onrecverror 이벤트가 발생합니다.

위치 정보 수신에 성공하면 onrecvsuccess 이벤트가 발생합니다. GeolocationEventInfo 오브젝트로부터 so

urcetype, accuracy, altitude, altitudeaccuracy, heading, latitude, longitude, speed 값을 얻을 수 있습

니다.


this.Geolocation00_onrecvsuccess = function(obj:nexacro.Geolocation,e:nexacro.

GeolocationEventInfo)

{

this.edt_accuracy.set_value(e.coords.accuracy);

this.edt_altitude.set_value(e.coords.altitude);

this.edt_altitudeaccuracy.set_value(e.coords.altitudeaccuracy);

this.edt_heading.set_value(e.coords.heading);

this.edt_latitude.set_value(e.coords.latitude);

this.edt_longitude.set_value(e.coords.longitude);

this.edt_speed.set_value(e.coords.speed);

var strSourceType = "UNKNOWN";

switch(e.sourcetype)

{

case "1":

strSourceType = "GPS";

break;

case "2":

strSourceType = "WPS";

break;

default:

strSourceType = "UNKNOWN";

}

this.edt_sourcetype.set_value(strSourceType);

this.edt_timestamp.set_value(e.timestamp);

};

위치 정보 수신에 실패하면 onrecverror 이벤트가 발생합니다. 어떤 이유로 에러가 발생했는지 에러 정보를 팝

업으로 표시합니다.

this.Geolocation00_onrecverror = function(obj:nexacro.Geolocation,e:nexacro.

GeolocationErrorEventInfo)

{


alert(strResult);

};


Geolocation | 80

accuracy와 interval time을 설정한 후 Watch Start 버튼을 터치합니다. 위치 정보가 정상적으로 수신되면 하

단의 Coords Information 그룹 박스의 위치 정보 값이 interval time 주기로 갱신되어 보입니다. 위치 정보 수

신을 멈추려면 Watch Stop 버튼을 터치합니다.

ImagePicker

10.

10.1 ImagePicker 소개

ImagePicker는 모바일 장치의 앨범으로부터 이미지를 가져오는 기능을 수행하는 오브젝트입니다.

10.2 앨범으로부터 이미지 가져오기

모바일 장치에 저장된 이미지를 가져오려면 ImagePicker 오브젝트의 open 메소드를 사용합니다. open 메소드는

모바일 장치의 기본 앨범 앱을 수행하여 이미지를 사용자가 원하는 포맷으로 변환하여 가져올 수 있게 해줍니다. ope

n 메소드 수행으로 얻은 이미지는 앱에 할당된 경로에 파일로 저장됩니다.

10.2.1 예제

다음은 모바일 장치의 앨범으로부터 ImagePicker 컴포넌트의 open 메소드를 사용해서 이미지를 가져오는 예제입니

다.

앨범으로부터 이미지를 가져오려면 OPEN 버튼을 터치합니다. 수행결과는 하단의 탭에 표시됩니다. Image 탭에서는

이미지가 로딩되며 Information 탭에서는 결과 로그를 확인할 수 있습니다.

ImagePicker | 82

이미지를 특정 포맷으로 변경하여 가져오려면 상단의 메뉴에서 이미지 전달 방식, 인코딩 타입, 품질, 사이즈를 설정

합니다.

● Imate Type: "url"을 설정하면 이미지의 위치 정보가 URL 형태로 전달되며, "imagedata"로 설정하면 이미지가

오브젝트 형태로 전달됩니다. 결과 값은 ImagePicker 오브젝트의 onsuccess 이벤트에서 e.imageurl, e.image

data 속성에서 확인할 수 있습니다.

● Encoding: 이미지 형식을 JPEG 혹은 PNG로 설정합니다.

● Quality: 이미지 품질을 설정합니다. 설정 할 수 있는 값은 0~100 입니다.

● Width, Height: 이미지의 크기를 설정합니다. 0 혹은 빈값으로 설정하면 원본 이미지의 크기로 설정됩니다.



ImagePicker > open 메소드

모바일 장치의 앨범 앱을 실행하여 앨범으로부터 이미지를 가져오는 메소드입니다. 앨범에서 선택한 이미지는

설정 값에 맞게 변경된 후 %USERAPP%/_resource_/_devicepics_/ 경로에 저장되며 저장된 이미지의 URL

또는 오브젝트 형태로 전달됩니다.

ImagePickerEventInfo > imageurl 속성

앨범에서 선택한 이미지의 경로 정보를 갖는 속성입니다. open 메소드 수행시 첫 번째 인수 값을 'url'로 설정

한 경우에만 유효한 속성입니다.

ImagePickerEventInfo > imagedata 속성

앨범에서 선택한 이미지를 오브젝트 형태로 갖는 속성입니다. open 메소드 수행시 첫 번째 인수 값을 'image

data'로 설정한 경우에만 유효한 속성입니다.

system > convertRealPath 메소드

%USERAPP%, %CACHE% 등과 같은 Alias가 포함된 경로를 실제 절대 경로로 변환해주는 메소드입니다.



ImagePicker 오브젝트를 추가합니다. 추가된 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

화면을 구성하기 위한 Static, Radio, Spin, Edit 컴포넌트, 이미지와 로그를 출력하기 위한 Tab, ImageViewe

r, TextArea 컴포넌트를 예제의 그림과 같이 적절히 배치합니다.



ImagePicker ImagePicker00

GroupBox GroupBox00

Static stt_imageType

stt_encodingType

stt_quality

stt_width

stt_height

Radio rdo_imageType

rdo_encodingType

Spin spn_quality

ImagePicker | 84

Edit edt_width

edt_height

Button btn_open

Tab Tab00


TextArea TextArea00


2 Open 버튼 이벤트 함수 작성하기

Open 버튼을 터치했을 때 동작할 함수를 다음과 같이 작성합니다.

this.btn_open_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.ImagePicker00.set_imagequality(this.spn_quality.value);

this.ImagePicker00.set_imagewidth(this.edt_width.value);

this.ImagePicker00.set_imageheight(this.edt_height.value);

this.ImagePicker00.open(this.rdo_imageType.text, this.rdo_encodingType.text);

};

사용자로부터 입력받은 이미지 설정값을 ImagePicker 오브젝트의 속성에 설정한 후 open 메소드를 호출합니

다.

3 ImagePicker 오브젝트 이벤트 함수 작성하기

open 메소드가 수행되면 모바일 장치의 앨범 앱이 실행됩니다. 사용자가 앨범에서 이미지를 선택하고 오픈하

는데 성공하면 onsuccess 이벤트가 발생하고 실패하면 onerror 이벤트가 발생합니다.

● onsuccess 이벤트 함수

this.ImagePicker00_onsuccess = function(obj:nexacro.ImagePicker,e:nexacro.

ImagePickerEventInfo)

{

var strResult, strFilePath;

strFilePath = system.convertRealPath(e.imageurl);

this.Tab00.Tabpage1.form.ImageViewer00.set_image("file://" + strFilePath);

strResult = "Image open succeed.\n";



strResult += "\n> Encoding Type: "+ this.ImagePicker00.encodingtype;

strResult += "\n> Delivery Type: "+ this.ImagePicker00.gettype;


};


this.ImagePicker00_onerror = function(obj:nexacro.ImagePicker,e:nexacro.

ImagePickerErrorEventInfo)

{

var strResult = "Image open failed.\n";

strResult += "\n["+ e.errortype +" "+ e.statuscode +"] "+ e.errormsg;


};


설정을 변경하지 않고 OPEN 버튼을 터치하여 카메라 앨범 앱이 수행되는지 확인하고 이미지를 선택하여 결과

가 옳바르게 출력되는지 확인합니다.

설정을 변경한 후 동일한 방법으로 결과를 확인합니다.

LiteDB

11.

11.1 LiteDBConnection / LiteDBStatement 소개

LiteDBConnection, LiteDBStatement는 데이터베이스를 연결하고 쿼리를 수행하여 데이터를 조작할 수 있게 해주

는 오브젝트입니다. 오브젝트 이름에서 알 수 있듯이 경량 데이터베이스 엔진인 SQLite를 연결해 사용할 수 있으며

사용자에게 SQLite를 조작할 수 있는 API를 제공합니다.

SQLite는 별도의 서버가 필요 없는 파일 기반의 DBMS로 애플리케이션에 임베딩하여 라이브러리 형태

로 사용합니다. SQLite에 대한 자세한 정보는 https://www.sqlite.org를 참조하십시오.

본 장의 샘플에서는 nexacro_sample_db.sqlite 파일을 사용합니다. 이 파일은 사전에 데이터를 입력해 놓은 SQLite

파일로서 TB_DEPT, TB_POS, TB_EMP 세 개의 테이블로 구성되어 있습니다. 각 테이블은 다음과 같은 구조를 갖습

니다.

https://www.sqlite.org


사용자가 직접 SQLite 데이터베이스 파일의 내용을 확인하거나 수정하려면 SQLite에서 기본적으로 제

공하는 SQLite command-line tool이나 DB Browser for SQLite와 같은 애플리케이션을 사용해야 합

니다.

11.2 SQLite 데이터베이스 생성하기

SQLite 프로젝트에서는 데이터베이스 엔진과 더불어 간단히 사용할 수 있는 커맨드 라인 기반의 툴을 제공합니다. 사

용자는 커맨드를 입력하여 데이터베이스를 생성, 설정하고 SQL문을 수행하여 데이터베이스를 조작할 수 있습니다.

이 절에서는 커맨드 라인 툴로 예제에서 사용할 SQLite 데이터베이스를 만드는 방법을 설명합니다.

SQLite 커맨드 라인 툴은 사용자가 모든 명령을 직접 입력해야 하고 결과물을 확인할 수 있는 UI 인터페

이스를 제공하지 않습니다. 만일 사용이 불편하다면 DB Browser for SQLite와 같이 UI를 제공하는 애

플리케이션을 사용해도 같은 결과를 얻을 수 있습니다.

11.2.1 SQLite 커맨드 라인 툴 설치하기

SQLite 커맨드 라인 툴은 SQLite Download에서 사용자 환경에 맞는 버전('sqlite-tools-'로 시작하는 압축 파일)을

내려받을 수 있습니다. 파일을 내려받은 후 적당한 디렉터리에 압축을 해제하면 exe 형태의 실행 파일이 나옵니다.

sqlite3.exe 데이터베이스를 생성, SQL 문을 수행하여 데이터 베이스 관리

sqlite3_analyzer.exe 데이터베이스 파일을 분석

sqldiff.exe 데이터베이스 파일 비교

이 파일들은 별도의 설치 과정없이 바로 실행이 가능한 프로그램입니다. 여기서는 sqlite3.exe만을 사용합니다.

11.2.2 데이터베이스 파일 생성하기

데이터베이스 파일을 생성하려면 sqlite3.exe를 사용합니다. 사용법은 다음과 같이 생성할 데이터베이스 파일명만 입

력하면 됩니다. 데이터베이스 파일의 확장자는 어떤 것을 사용해도 무방하나 일반적으로 db, db3, sqlite 등을 사용

합니다.

https://www.sqlite.org/cli.html

https://sqlitebrowser.org/

https://sqlitebrowser.org/

https://sqlite.org/download.html

https://sqlite.org/cli.html

https://sqlite.org/sqlanalyze.html

https://sqlite.org/sqldiff.html

LiteDB | 88

sqlite3.exe [DB 파일]

sqlite3.exe 파일이 위치한 경로로 이동 후 커맨드 프롬프트에서 'sqlite3.exe nexacro_sample_db.sqlite' 라고 입

력합니다. 만일 해당 경로에 같은 파일이 존재하면 파일을 새로 생성하지 않고 기존 파일을 오픈합니다. '.databases'

명령어로 현재 오픈된 데이터베이스 파일을 확인할 수 있습니다.

sqlite3.exe 실행 후 다른 데이터베이스 파일을 생성 혹은 오픈하려면 '.open' 커맨드를 사용합니다.

sqlite> .open [DB 파일]

11.2.3 테이블 생성하기

데이터베이스 파일을 생성했으므로 이제 테이블을 생성합니다. 커맨드 프롬프트에 다음과 같이 SQL 문을 입력하여

테이블을 생성합니다. 생성하는 테이블은 TB_POS(직책 정보), TB_EMP(직원 정보), TB_DEPT(부서 정보)와 같으며

다음에서 스키마를 확인할 수 있습니다.

/* TB_POS Table */

CREATE TABLE IF NOT EXISTS `TB_POS` (

`POS_CD` VARCHAR2 ( 2 ),

`POS_NAME` VARCHAR2 ( 50 )

);

/* TB_EMP Table */

CREATE TABLE IF NOT EXISTS `TB_EMP` (

`EMPL_ID` VARCHAR2 ( 5 ),

`FULL_NAME` VARCHAR2 ( 50 ) DEFAULT (null),

`DEPT_CD` VARCHAR2 ( 2 ) DEFAULT (null),

`POS_CD` VARCHAR2 ( 2 ),

`HIRE_DATE` VARCHAR2 ( 8 ),

`GENDER` VARCHAR2 ( 1 ),

`MARRIED` BOOLEAN ( 1 ),


`SALARY` INTEGER ( 12 ),

`MEMO` TEXT

);

/* TB_DEPT Table */

CREATE TABLE IF NOT EXISTS `TB_DEPT` (

`DEPT_CD` VARCHAR2 ( 2 ) DEFAULT (NULL),

`DEPT_NAME` VARCHAR2 ( 50 ) DEFAULT (NULL)

);

SQL문 수행이 완료된 후 테이블이 정상적으로 생성됐는지 '.tables' 명령어로 확인합니다.

11.2.4 데이터 입력하기

테이블을 생성했으면 이제 실제 데이터를 입력합니다. 커맨드 프롬프트에서 다음과 같이 SQL 문으로 각 테이블에 데

이터를 입력합니다.

/* TB_POS Table */

INSERT INTO `TB_POS` VALUES ('07','Officer');

INSERT INTO `TB_POS` VALUES ('06','Supervisor');

INSERT INTO `TB_POS` VALUES ('05','Assistant Manager');

INSERT INTO `TB_POS` VALUES ('04','Department Manager');

INSERT INTO `TB_POS` VALUES ('03','Division Manager');

INSERT INTO `TB_POS` VALUES ('02','President');

INSERT INTO `TB_POS` VALUES ('01','Chairman');

/* TB_EMP Table */

INSERT INTO `TB_EMP` VALUES ('AA001','Oleg','08','03','20072504','W',1,70000,'green');

INSERT INTO `TB_EMP` VALUES ('AA010','Aladdin','07','06','20041909','M',0,120000,'green');

INSERT INTO `TB_EMP` VALUES ('BB010','Curran','02','03','20070111','M',1,210000,'orange');

LiteDB | 90

INSERT INTO `TB_EMP` VALUES ('BB020','Adam','07','07','20011602','W',1,90000,'indigo');

INSERT INTO `TB_EMP` VALUES ('BB030','Heather','03','03','20061406','M',0,50000,'blue');

INSERT INTO `TB_EMP` VALUES ('CC110','Lester','07','05','20171604','M',0,100000,'green');

INSERT INTO `TB_EMP` VALUES ('CD120','Elijah','10','01','20151304','W',0,110000,'gold');

INSERT INTO `TB_EMP` VALUES ('AB100','Angela','08','04','20021110','M',1,670000,'blue');

INSERT INTO `TB_EMP` VALUES ('AC310','Rae','02','05','20072603','W',1,90000,'green');

INSERT INTO `TB_EMP` VALUES ('AC210','Denton','02','04','20172503','M',1,90000,'skyblue');

INSERT INTO `TB_EMP` VALUES ('DD002','Nora','05','01','20160202','W',0,420000,'blue');

INSERT INTO `TB_EMP` VALUES ('DD200','Adrian','05','04','20160212','W',0,80000,'violet');

INSERT INTO `TB_EMP` VALUES ('AD020','Ulric','04','04','20042107','W',0,420000,'yellow');

INSERT INTO `TB_EMP` VALUES ('BD030','Veronica','10','06','20130701','M',1,70000,'green');

INSERT INTO `TB_EMP` VALUES ('AA200','Phyllis','02','06','20120812','W',1,350000,'orange');

/* TB_DEPT Table */

INSERT INTO `TB_DEPT` VALUES ('01','Accounting Team');

INSERT INTO `TB_DEPT` VALUES ('02','Finances Team');

INSERT INTO `TB_DEPT` VALUES ('03','Human Resource Team');

INSERT INTO `TB_DEPT` VALUES ('04','Marketing Team');

INSERT INTO `TB_DEPT` VALUES ('05','Sales Team');

INSERT INTO `TB_DEPT` VALUES ('06','Consulting Team');

INSERT INTO `TB_DEPT` VALUES ('07','Design Team');

INSERT INTO `TB_DEPT` VALUES ('08','Mobile Team');

INSERT INTO `TB_DEPT` VALUES ('09','Education Team');

INSERT INTO `TB_DEPT` VALUES ('10','Technical Support Team');

INSERT INTO `TB_DEPT` VALUES ('11','Customer Support Team');

데이터 입력 후 SQL 문을 사용해 각 테이블에 입력된 데이터를 확인할 수 있습니다.


데이터 입력 및 확인을 완료하면 '.exit' 명령으로 프로그램을 종료합니다. 생성된 nexacro_sample_db.sqlite 파일

은 별다른 처리없이 LiteDB 오브젝트에 연결해 사용이 가능합니다.

11.3 데이터베이스 연결/종료하기

애플리케이션에서 데이터베이스를 연결, 종료할 때는 LiteDBConnection 오브젝트를 사용합니다. async, busytime

out, datasource, openflag, preconnect 등의 속성을 설정하면 데이터베이스 연결시 옵션을 설정할 수 있습니다.

11.3.1 예제

다음은 데이터베이스에 연결하고 데이터베이스의 특정 테이블을 조회하여 Grid로 출력하는 예제입니다.

Open 버튼을 터치하면 데이터베이스로 연결이 설정되고 TB_EMP 테이블을 조회하여 데이터를 Grid로 출력해줍니

다. Close 버튼을 터치하면 데이터베이스로의 연결이 종료됩니다.

nexacro_sample_db.sqlite 파일은 사전에 작성한 SQLite 데이터베이스 파일입니다. 생성 방법은 SQLite 데이터베

이스 생성하기를 참조하십시오.

LiteDB | 92


LiteDBConnection > open 메소드

데이터베이스를 연결하는 메소드입니다. 첫 번째 인자로 SQLite 파일의 위치와 파일명을 입력하고, 두 번째

인자로 데이터베이스를 어떻게 오픈할지 설정합니다.

LiteDBConnection > datasource 속성

연결할 데이터베이스의 위치 정보를 설정하는 속성입니다. 데이터베이스 경로와 파일명을 같이 입력합니다.

LiteDBConnection > close 메소드

데이터베이스 연결을 닫는 메소드입니다.

LiteDBConnection > isConnected 메소드

데이터베이스가 연결되어 있는지 확인하는 메소드입니다.

LiteDBErrorEventInfo 오브젝트

LiteDBConnection, LiteDBStatement 오브젝트의 수행에 오류가 생겼을 때 onerror 이벤트 함수로 전달되

는 EventInfo 오브젝트입니다. 어떤 에러가 발생했는지 확인하여 예외 처리를 할 수 있습니다.

LiteDBEventInfo 오브젝트

LiteDBConnection, LiteDBStatement 오브젝트의 작업 수행이 성공했을 때 onsuccess 이벤트 함수로 전달

되는 EventInfo 오브젝트입니다. 이벤트 발생 원인에 대한 정보와 작업 수행 결과값을 갖습니다.



LiteDBConnection, LiteDBStatement 오브젝트를 추가합니다. 추가된 오브젝트는 Invisible Object 창에서

확인할 수 있습니다.

데이터베이스 파일 경로를 입력 혹은 표시할 Edit 컴포넌트와 사용자로부터 수행을 명령을 받기 위한 Button

컴포넌트를 예제의 그림과 같이 적절히 배치합니다. 추가로 오픈한 데이터베이스로부터 데이터를 받아 화면에

출력할 Grid 컴포넌트와 Dataset 오브젝트도 추가합니다.



LiteDBConnection LiteDBConnection00

LiteDBStatement LiteDBStatement00

Dataset Dataset00


Grid Grid00

GroupBox GroupBox00

Edit edt_dbfile

Button btn_dbopen

btn_dbclose


2 Edit 컴포넌트 설정하기

추가한 Edit 컴포넌트의 value 속성을 '%USERAPP%File/nexacro_edu_db.sqlite'로 설정합니다. 이 파일은

SQLite 파일로 프로젝트와 함께 샘플로 제공된 파일로 넥사크로 스튜디오의 Project Explorer에서 File 디렉터

리에서 확인할 수 있습니다.

3 Open 버튼 이벤트 함수 작성하기

/* Open 버튼 onclick 이벤트 함수 */

this.btn_dbopen_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.LiteDBConnection00.isConnected();

};

4 Close 버튼 이벤트 함수 작성하기

/* Close 버튼 onclick 이벤트 함수 */

this.btn_dbclose_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.LiteDBConnection00.close();

};

5 LiteDBConnection 이벤트 함수 작성하기

데이터베이스 연결, 연결 체크, 종료 작업이 성공했을 때 수행할 onsuccess 이벤트 함수를 작성합니다. e.reas

on 속성 값을 통해 어떤 메소드를 호출했는지 확인할 수 있습니다.

/* LiteDBConnection 오브젝트 onsuccess 이벤트 함수 */

this.LiteDBConnection00_onsuccess = function(obj:nexacro.LiteDBConnection,e:nexacro.

LiteDBEventInfo)

{

switch(e.reason)

{

LiteDB | 94

case 2: // LiteDBConnection close()

this.Grid00.set_visible(false);

alert("DB close succeed.");

break;

case 4: // LiteDBConnection isConnected()

alert("Already connected to DB.");

break;

case 5: // LiteDBConnection open()

this.Grid00.set_visible(true);

this.LiteDBStatement00.set_ldbconnection(this.LiteDBConnection00);

this.LiteDBStatement00.executeQuery("select * from tb_emp");

break;

case 1: // LiteDBConnection begin()

case 3: // LiteDBConnection commit()

case 6: // LiteDBConnection rollback()

default:

break;

}

};

데이터베이스 연결, 연결 체크, 종료 작업이 실패했을 때 수행할 onerror 이벤트 함수를 작성합니다. e.statusc

ode 속성 값을 통해 어떤 메소드 수행시 에러가 발생했는지 확인할 수 있습니다.

/* LiteDBConnection 오브젝트 onerror 이벤트 함수 */

this.LiteDBConnection00_onerror = function(obj:nexacro.LiteDBConnection,e:nexacro.

LiteDBErrorEventInfo)

{

switch(e.statuscode.toString())

{

case "1203": //LiteDBConnection close() error

alert("DB close failed.");

break;

case "1205": //LiteDBConnection isConnected() error

//alert("DB is not connected.");

this.LiteDBConnection00.set_datasource(this.edt_dbfile.value);

this.LiteDBConnection00.open();

break;

case "1206": //LiteDBConnection open() error

alert("DB open failed.");

break;


case "00001": //Parameter setting error

case "1201": //DB response timeout error

case "1202": //LiteDBConnection begin() error

case "1204": //LiteDBConnection commit() error

case "1207": //LiteDBConnection rollback() error

default: //Unknown error

var strResult = "[LiteDBConnection00_onerror]";


strResult += "\ne.ldberrorcode: "+ e.ldberrorcode;

strResult += "\ne.ldberrormsg: "+ e.ldberrormsg;

alert(strResult);

}

};

6 LiteDBStatement 이벤트 함수 작성하기

연결된 데이터베이스에 쿼리 수행이 성공하면 발생할 onsuccess 이벤트 함수를 작성합니다. 쿼리문의 결과 값

으로 받은 데이터를 Dataset으로 받아 Grid로 출력합니다.

/* LiteDBStatement 오브젝트 onsuccess 이벤트 함수 */

this.LiteDBStatement00_onsuccess = function(obj:nexacro.LiteDBStatement,e:nexacro.

LiteDBEventInfo)

{

this.Dataset00.copyData(e.returnvalue);

this.Grid00.createFormat();

};

연결된 데이터베이스에 대한 쿼리 수행이 실패하면 발생할 onerror 이벤트 함수를 작성합니다.

/* LiteDBStatement 오브젝트 onerror 이벤트 함수 */

this.LiteDBStatement00_onerror = function(obj:nexacro.LiteDBStatement,e:nexacro.


{


{

case "1210": //LiteDBStatement executeQuery() error

alert("LiteDBStatement executeQuery() error");

break;

case "1211": //LiteDBStatement executeUpdate() error

alert("LiteDBStatement executeUpdate() error");

break;

LiteDB | 96




var strResult = "[LiteDBStatement00_onerror]";




alert(strResult);

}

};


Open 버튼을 터치하여 데이터베이스 연결이 수행되는지 확인합니다. 정상적으로 연결이 수행되면 Grid에 TB

_EMP 테이블의 데이터가 출력됩니다.

데이터베이스 연결을 닫으려면 Close 버튼을 터치합니다. 정상적으로 데이터베이스가 닫히면 Grid가 사라집

니다.

11.4 쿼리 수행하기

LiteDBStatement는 DB 연결 후 쿼리를 수행할 때 사용하는 오브젝트입니다. LiteDBStatement 오브젝트는 쿼리를

수행하는 executeQuery, executeUpdate 메소드와 수행중인 쿼리를 중단하는 close 메소드를 제공합니다. 쿼리를

수행하는 메소드는 쿼리문의 종류에 따라 Select 문은 executeQuery 메소드를 사용하고 Insert, Update, Delete 문

은 executeUpdate 메소드를 사용합니다.

11.4.1 예제

다음은 데이터베이스에 연결하고 쿼리문을 수행한 결과를 Grid로 출력하는 예제입니다.

화면이 로딩되면 자동으로 데이터베이스 연결을 수행하며 TB_POS 테이블을 조회하여 데이터를 Grid로 출력합니다.

데이터베이스 연결이 완료되면 쿼리문을 선택하고 Query 버튼을 터치합니다. 쿼리가 수행된 결과는 즉시 Grid로 반

영됩니다. 쿼리 수행중에 Stop 버튼을 터치하면 수행이 중단됩니다.



LiteDBStatement > ldbconnection 속성

데이터베이스와 연결된 LiteDBConnection 오브젝트를 LiteDBStatement 오브젝트로 연결해주는 속성입니

다. 정상적으로 속성 설정이 완료되어야 쿼리문을 수행할 수 있습니다.

LiteDBStatement > query 속성

쿼리문을 설정하는 속성입니다. executeQuery, executeUpdate 메소드 호출시 쿼리문을 인수로 입력하지

않으면 이 속성에 설정된 값이 쿼리문으로 사용됩니다.

LiteDBStatement > executeQuery 메소드

select 쿼리를 수행하는 메소드입니다. 인수를 입력하지 않으면 query 속성에 설정된 값이 쿼리문으로 사용됩

니다.

LiteDB | 98

LiteDBStatement > executeUpdate 메소드

insert, update, delete 쿼리를 수행하는 메소드입니다. 인수를 입력하지 않으면 query 속성에 설정된 값이

쿼리문으로 사용됩니다.

LiteDBStatement > close 메소드

쿼리 수행을 중단하는 메소드입니다.





데이터베이스 파일 경로를 입력 혹은 표시할 Edit 컴포넌트와 사용자로부터 수행 명령을 받기 위한 ExtCombo,

Button 컴포넌트를 예제의 그림과 같이 적절히 배치합니다. 추가로 정상적으로 데이터베이스가 오픈됐는지 확

인하기 위한 Grid 컴포넌트와 Dataset 오브젝트도 추가합니다.





Dataset Dataset00

Grid Grid00

GroupBox GroupBox00

GroupBox01

Edit edt_dbfile

ExtCombo ExtCombo00

Button btn_query

btn_stop

2 Database 그룹의 Edit 컴포넌트 설정하기





폼 로딩 후 데이터베이스가 연결되어 있는지 확인할 onload 이벤트 함수를 작성합니다.


/* Form의 onload 이벤트 함수 */

this.sample_litedb_02_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)

{


};


데이터베이스 연결, 연결 체크, 종료 작업이 성공했을 때 수행할 onsuccess 이벤트 함수를 작성합니다. e.reas

on 속성 값을 통해 어떤 메소드를 호출했는지 확인할 수 있습니다.


LiteDBEventInfo)

{

switch(e.reason)

{



this.btn_query.set_enable(false);

break;



break;



this.btn_query.set_enable(true);


this.LiteDBStatement00.executeQuery("select * from tb_pos");

break;




default:

break;

}

};

데이터베이스 연결, 연결 체크, 종료 작업이 실패했을 때 수행할 onerror 이벤트 함수를 작성합니다. e.statusc

ode 속성 값을 통해 어떤 메소드 수행시 에러가 발생했는지 확인할 수 있습니다.

LiteDB | 100



{


{



break;




break;



break;











alert(strResult);

}

};


쿼리 수행이 성공했을 때 수행할 onsuccess 이벤트 함수를 작성합니다. e.reason 속성 값을 통해 어떤 메소드

를 호출했는지 확인할 수 있습니다.



LiteDBEventInfo)

{

switch(e.reason)

{

case 7: // LiteDBStatement executeQuery()


this.Dataset00.copyData(e.returnvalue);

this.Dataset00.set_keystring("S:+POS_CD+POS_NAME");


break;

case 8: // LiteDBStatement executeUpdate()

this.LiteDBStatement00.set_query("select * from tb_pos");

this.LiteDBStatement00.executeQuery();

break;

case 9: // LiteDBStatement close()

default:

break;

}

};

쿼리 수행이 실패했을 때 수행할 onerror 이벤트 함수를 작성합니다. e.statuscode 속성 값을 통해 어떤 메소

드 수행시 에러가 발생했는지 확인할 수 있습니다.




{


{


alert("LiteDBStatement executeQuery() error.");

break;


alert("LiteDBStatement executeUpdate() error.");

break;








alert(strResult);

}

};

LiteDB | 102

6 Query 그룹의 ExtCombo 설정하기

ExtCombo 컴포넌트의 innerdataset 속성에서 편집기를 오픈하여 innerdataset을 설정합니다. 예제에서 사

용할 SQL 쿼리문을 다음과 같이 입력합니다.

ExtCombo 컴포넌트의 속성을 다음과 같이 설정합니다. innerdataset을 바인딩 해주고 ExtCombo 클릭시

오픈될 팝업 윈도우 폼을 popupurl 속성에 설정합니다.

속성 값

popupurl Base::pExtCombo.xfdl

innerdataset innerdataset

codecolumn codecolumn

datacolumn datacolumn

7 Query 그룹의 Query 버튼 이벤트 함수 작성하기

사용자로부터 입력받은 문자열을 보고 어떤 쿼리문인지 판단하여 select면 executeQuery 메소드를 호출하고,

insert, update, delete면 executeUpdate 메소드를 호출합니다.

/* Query 버튼 onclick 이벤트 함수 */

this.btn_query_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.LiteDBStatement00.set_query(this.ExtCombo00.text);

var arrString = this.LiteDBStatement00.query.split(" ");

switch(arrString[0])

{

case "select":


break;

case "insert":

case "update":


case "delete":

this.LiteDBStatement00.executeUpdate();

break;

default:

alert(arrString[0] + " is illegal query statement.");

}

};

8 Query 그룹의 Stop 버튼 이벤트 함수 작성하기

LiteDBStatement의 close 메소드를 호출하면 진행중이던 Query 수행을 중단합니다.

/* Stop 버튼 onclick 이벤트 함수 */


{

this.LiteDBStatement00.close();

};


화면이 로딩되면 데이터베이스가 자동으로 연결됩니다. 정상적으로 연결이 수행되어 Grid에 TB_POS 테이블

의 데이터가 출력되는지 확인합니다.

쿼리문을 선택하고 Query 버튼을 터치합니다. 쿼리가 정상적으로 수행되면 Grid에 수행 결과가 반영되는지 확

인합니다.

쿼리 수행중 Stop 버튼을 터치하여 수행중이던 쿼리가 중단되는지 확인합니다.

11.5 트랜잭션 설정하기

데이터베이스에서는 데이터의 무결성을 보장하는 것이 무엇보다 중요합니다. 데이터베이스의 상태를 변경하는 도중

발생할 수 있는 치명적 오류로부터 데이터를 보호하기 위한 메커니즘이 트랜잭션입니다.

SQLite는 기본적으로 트랜잭션을 지원합니다. AUTOCOMMIT 모드를 지원하므로 사용자가 별도로 트랜잭션을 설

정하지 않더라도 내부적으로 SQL 연산이 하나의 트랜잭션 내에서 수행되도록 처리합니다. 별도의 설정이 필요없기에

사용이 편리하지만 모든 SQL 연산마다 트랜잭션 설정/해제가 반복되므로 많은 양의 데이터를 입력하거나 여러 개의

SQL 문으로 구성된 복합 연산이 필요할 때는 비효율적일 수 있습니다. 이런 경우에는 사용자가 직접 트랜잭션을 설정

하고 커밋/롤백을 수행할 필요가 있습니다.

본 절에서는 사용자가 명시적으로 트랜잭션을 설정하고 이를 데이터베이스에 반영하는 Commit과 취소하는 Rollbac

LiteDB | 104

k 기능을 사용하는 방법에 관해 설명합니다.

11.5.1 예제

다음은 데이터베이스에 연결하고 트랜잭션을 설정한 후 SQL 연산을 수행하여 그 결과를 Grid로 출력하는 예제입니

다.


데이터베이스 연결이 완료되면 쿼리문을 선택하고 Query 버튼을 터치합니다. 쿼리가 수행된 결과는 즉시 Grid로 반

영됩니다.


데이터베이스 연결이 완료되면 Begin 버튼을 터치하여 트랜잭션을 설정할 수 있습니다. 트랜잭션이 설정된 후 적절

한 쿼리문을 선택하고 Query 버튼을 터치하여 데이터를 입력, 삭제 혹은 변경하는 SQL 연산을 수행합니다. 수행된

결과는 즉시 Grid로 반영되어 확인할 수 있습니다.

쿼리 수행이 끝나고 변경된 내용을 데이터베이스에 반영하려면 Commit 버튼을 터치하고 취소하려면 Rollback 버튼

을 터치합니다. 트랜잭션 도중에 애플리케이션을 종료하면 그동안의 SQL 연산은 자동으로 Rollback 처리됩니다.



LiteDBConnection > begin 메소드

데이터베이스에 트랜잭션을 설정하는 메소드입니다.

LiteDBConnection > commit 메소드

트랜잭션이 설정된 데이터베이스에 변경된 내용을 반영하는 메소드입니다. commit을 수행하면 트랜잭션 설

정이 해제됩니다.

LiteDBConnection > rollback 메소드

변경된 내용을 트랜잭션이 설정되기 전 상태로 되돌리는(취소) 메소드입니다. rollback을 수행하면 트랜잭션

설정이 해제됩니다.





데이터베이스 파일 경로를 입력 혹은 표시할 Edit 컴포넌트와 사용자로부터 수행을 명령을 받기 위한 Button

컴포넌트를 예제의 그림과 같이 적절히 배치합니다. 추가로 정상적으로 데이터베이스가 오픈됐는지 확인하기

위한 Grid 컴포넌트와 Dataset 오브젝트도 추가합니다.





Static stt_transaction

Dataset ds_sqlite

Grid Grid00

GroupBox GroupBox00

GroupBox01

GroupBox02

Edit edt_dbfile

ExtCombo ExtCombo00

Button btn_query

btn_begin

btn_commit

LiteDB | 106

btn_rollback



폼 로딩 후 데이터베이스가 연결되어 있는지 확인할 onload 이벤트 함수를 작성합니다.

/* Form의 onload 이벤트 함수 */

this.sample_litedb_03_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)

{


};

3 Database 그룹의 Edit 컴포넌트 설정하기




4 Query 그룹의 ExtCombo 설정하기

ExtCombo 컴포넌트의 innerdataset 속성에서 편집기를 오픈하여 innerdataset을 설정합니다. 예제에서 사

용할 SQL 쿼리문을 다음과 같이 입력합니다.

ExtCombo 컴포넌트의 속성을 다음과 같이 설정합니다. innerdataset을 바인딩 해주고 ExtCombo 클릭시

오픈될 팝업 윈도우 폼을 popupurl 속성에 설정합니다.

속성 값

popupurl Base::pExtCombo.xfdl

innerdataset innerdataset

codecolumn codecolumn

datacolumn datacolumn


5 Query 그룹의 Query 버튼 이벤트 함수 작성하기

우선 예제와 같이 두 개의 Query 버튼에 대해 각각 아래와 같이 onclick 이벤트 함수를 작성합니다.

/* Query 버튼 onclick 이벤트 함수 */

this.btn_query_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.execute_query(this.ExtCombo00.text);

};

위의 onclick 이벤트 함수에서 사용된 execute_query는 입력된 쿼리문을 분석하여 어떤 메소드를 호출할지

결정해주는 함수입니다. 이는 쿼리문에 따라 쿼리를 수행하는 메소드가 다르기 때문으로 select 문은 execute

Query 메소드를 사용해야 하고 insert, update, delete 문은 executeUpdate 메소드를 사용해야 하기 때문입

니다.

/* execute_query 함수 */

this.execute_query = function(strQuery)

{

this.LiteDBStatement00.set_query(strQuery);

var arrString = this.LiteDBStatement00.query.split(" ");

switch(arrString[0])

{

case "select":


break;

case "insert":

case "update":

case "delete":

this.LiteDBStatement00.executeUpdate();

break;

default:

alert(arrString[0] + " is illegal query statement.");

}

}

6 Transaction 그룹의 Begin, Commit, Rollback 버튼 이벤트 함수 작성하기

LiteDB | 108

/* Begin 버튼의 onclick 이벤트 함수 */

this.btn_begin_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.LiteDBConnection00.begin();

};

/* Commit 버튼의 onclick 이벤트 함수 */

this.btn_commit_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.LiteDBConnection00.commit();

};

/* Rollback 버튼의 onclick 이벤트 함수 */

this.btn_rollback_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.LiteDBConnection00.rollback();

};


LiteDBConnection 오브젝트에서 발생한 이벤트를 처리하기 위한 함수를 작성합니다. LiteDBConnection의

메소드 호출을 성공하면 onsuccess 이벤트가 발생하는데 e.reason 값을 통해 어떤 메소드가 호출됐는지 알 수

있습니다.

/* LiteDBConnection 오브젝트 onsuccess 이벤트 함수 */


LiteDBEventInfo)

{

switch(e.reason)

{


this.btn_begin.set_enable(false);

this.btn_commit.set_enable(true);

this.btn_rollback.set_enable(true);

this.stt_transaction.set_visible(true);

alert("Transaction setup succeeded.");

break;




this.btn_query.set_enable(false);

this.btn_begin.set_enable(false);

this.btn_commit.set_enable(false);

this.btn_rollback.set_enable(false);

this.stt_transaction.set_visible(false);

break;





this.btn_begin.set_enable(true);

alert("Commit succeeded.");


break;



break;



this.btn_query.set_enable(true);




break;






alert("Rollback succeeded.");


break;

default:

break;

LiteDB | 110

}

};

LiteDBConnection의 메소드 호출에 실패하면 onerror 이벤트가 발생하는데 e.statuscode 값을 통해 어떤 메

소드 수행시 에러가 발생했는지 확인할 수 있습니다.

/* LiteDBConnection 오브젝트 onerror 이벤트 함수 */



{


{


alert("DB response timeout.");

break;


alert("Transaction setup failed.");

break;



break;


alert("Commit failed.");

break;




break;



break;


alert("Rollback failed.");

break;



alert("Parameter setting error.");

break;






alert(strResult);

}

};


LiteDBStatement 오브젝트에서 발생한 이벤트를 처리하기 위한 함수를 작성합니다. LiteDBStatement의 메

소드 호출을 성공하면 onsuccess 이벤트가 발생하는데 e.reason 값을 통해 어떤 메소드가 호출됐는지 알 수

있습니다.



LiteDBEventInfo)

{

switch(e.reason)

{

case 7: // LiteDBStatement executeQuery()

this.ds_sqlite.copyData(e.returnvalue);

this.ds_sqlite.set_keystring("S:+POS_CD+POS_NAME");


break;

case 8: // LiteDBStatement executeUpdate()


break;

case 9: // LiteDBStatement close()

alert("Query execution stopped.");

break;

default:

LiteDB | 112

break;

}

};

LiteDBStatement의 메소드 호출에 실패하면 onerror 이벤트가 발생하는데 e.statuscode 값을 통해 어떤 메

소드 수행시 에러가 발생했는지 확인할 수 있습니다.




{


{


alert("LiteDBStatement executeQuery() error.");

break;


alert("LiteDBStatement executeUpdate() error.");

break;


alert("LiteDBStatement parameter setting error.");

break;






alert(strResult);

}

};


화면이 로딩되면 데이터베이스가 자동으로 연결됩니다. 정상적으로 연결이 수행되어 Grid에 TB_POS 테이블

의 데이터가 출력되는지 확인합니다.

Transaction 그룹의 Begin 버튼을 터치하여 오픈된 데이터베이스에 트랜잭션을 설정합니다. 트랜잭션 설정이

성공하면 "The transaction has been set"이라는 문구가 출력됩니다.


Query 그룹에서 쿼리문을 선택한 후 Query 버튼을 터치하여 쿼리를 수행합니다. 쿼리가 정상적으로 수행되면

그 즉시 Grid에 수행 결과가 반영됩니다.

쿼리 수행을 모두 완료한 후 변경된 내용을 데이터베이스에 반영하려면 Commit 버튼을 터치하고, 취소하려면

Rollback 버튼을 터치합니다. Commit이나 Rollback 버튼을 터치하면 트랜잭션 설정이 해제됩니다.

Network

12.

12.1 Network 소개

Network는 모바일 장치에서 네트워크 연결 정보를 확인할 때 사용하는 오브젝트입니다. 사용자는 Network 오브젝

트에서 제공하는 속성과 메소드를 사용해 주기적으로 네트워크 연결 상태를 확인할 수 있습니다.

12.2 연결된 네트워크 확인하기

모바일 장치가 현재 어떤 네트워크로 연결되어 있는지 확인하려면 availabletype 속성과 watchStart, watchStop

메소드를 사용합니다. 사용자는 watchStart 메소드를 수행하여 설정된 시간마다 주기적으로 네트워크 연결 정보를 a

vailabletype 속성을 통해 확인할 수 있습니다. 네트워크 연결 정보가 더 이상 갱신되길 원치 않으면 watchStop 메

소드를 수행합니다.

12.2.1 예제

Check Start 버튼을 터치하면 현재 연결된 네트워크 정보와 시간 정보를 받아 이미지와 로그에 표시합니다. Check S

top 버튼을 터치하면 더 이상 정보를 갱신하지 않습니다.



Network > availabletype 속성

모바일 장치에서 현재 연결된 네트워크 정보를 갖는 읽기 전용 속성입니다. 상태 값에 따른 네트워크 정보는

다음과 같습니다.

값 설명

0 연결된 네트워크 없음

1 3G 혹은 LTE 네트워크

2 WIFI 네트워크

Network > watchStart 메소드

모바일 장치에서 네트워크 상태 정보를 일정 간격마다 수신하는 메소드입니다. 수신 주기는 200~86,400,00

0 ms 사이의 값으로 설정할 수 있습니다. 수신 정보는 availabletype, timestamp 속성에서 확인할 수 있습니

다.

Network | 116

Network > watchStop 메소드

watchStart 메소드의 수행을 종료하는 메소드입니다.



Network 오브젝트를 추가합니다. 추가된 Network 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

화면을 구성하기 위한 Static, Button 컴포넌트를 예제의 그림과 같이 적절히 배치합니다.



Network Network00

GroupBox GroupBox00

Static stt_datanetwork

stt_wifi

stt_none

stt_logtitle

ImageViewer img_datanetwork

img_wifinetwork

TextArea ta_log

Button btn_watch

2 watchStart 버튼 이벤트 함수 작성하기

watchStart 버튼의 onclick 이벤트를 다음과 같이 작성합니다. watchStart 메소드의 인자는 밀리초 단위입니

다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.Network00.watchStart(1000);

};

3 watchStop 버튼 터치 이벤트 함수 작성하기

watchStop 버튼의 onclick 이벤트를 다음과 같이 작성합니다.


this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.Network00.watchStop();

};

4 Network 오브젝트 이벤트 함수 작성하기

watchStart 메소드가 수행되면 설정된 간격으로 네트워크 정보가 수신되며 수신된 정보는 Network 오브젝트

의 이벤트 함수에서 얻을 수 있습니다.

● onrecvsuccess 이벤트 함수

watchStart 메소드가 정상적으로 수행되면 onrecvsuccess 이벤트가 호출됩니다. availabletype 속성에는 네

트워크 정보가 저장되고 timestamp 속성에는 네트워크 정보를 수신한 시간이 저장됩니다.

availabletype 속성의 값은 숫자 형태이므로 사용자가 알아볼 수 있도록 fn_getNetworkType 함수를 사용해

문자열 형태로 변경해줍니다.

this.Network00_onrecvsuccess = function(obj:nexacro.Network,e:nexacro.NetworkEventInfo)

{

var strResult = this.fn_getNetworkType(this.Network00.availabletype);

this.stt_network.set_text(strResult);

this.stt_timestamp.set_text(this.Network00.timestamp);

};

● onrecverror 이벤트 함수

watchStart 메소드 수행시 에러가 발생하면 호출되는 에러 이벤트 함수입니다.

this.Network00_onrecverror = function(obj:nexacro.Network,e:nexacro.NetworkErrorEventInfo)

{


this.stt_network.set_text(strResult);

};

● fn_getNetworkType 함수

fn_getNetworkType 함수는 availabletype 속성 값을 사용자가 알아볼 수 있는 문자열로 변환해 반환합니다.

Network | 118

this.fn_getNetworkType = function(intAvailableType)

{

var strNetworkType;

switch(intAvailableType)

{

case 1:

strNetworkType = "3G/LTE";

break;

case 2:

strNetworkType = "WIFI";

break;

case 0:

default:

strNetworkType = "NONE";

}

return strNetworkType;

}


watchStart 버튼을 터치한 후 모바일 장치의 네트워크를 WIFI나 3G/LTE로 변경하여 현재 네트워크 정보가 정

상적으로 수신되는지 확인합니다.

12.3 URL 접속 확인하기

앱에서 특정 URL에 접근하기 전에 해당 URL로의 접근이 문제가 없는지 확인할 필요가 있습니다. 이 때, Network 오

브젝트의 isReachable 메소드를 사용하면 간편히 확인이 가능합니다.

12.3.1 예제

가상 키보드를 사용해 URL을 입력 후 Enter 키를 입력합니다. 해당 URL로의 접근에 문제가 없으면 하단의 브라우저

에서 웹 페이지를 표시합니다. 입력한 URL로의 접근이 불가능하면 팝업창으로 에러 메시지를 출력합니다.



Network > isReachable 메소드

모바일 앱에서 특정 URL로의 접근에 문제가 없는지 확인하는 메소드입니다.



Network 오브젝트를 추가합니다. 추가된 Network 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

화면을 구성하기 위한 Static, Button 컴포넌트와 URL 입력을 받기 위한 Edit 컴포넌트를 예제의 그림과 같이

적절히 배치합니다.



Network Network00

Static stt_text

Edit edt_url

Network | 120

Button btn_verification

btn_clear


2 Go 버튼 이벤트 함수 작성하기

Go 버튼의 onclick 이벤트를 다음과 같이 작성합니다.

this.btn_go_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

var strURL = this.edt_url.value;

if(nexacro._isNull(strURL) || strURL == "")

{

this.edt_url.setFocus();

}

else

{

this.Network00.isReachable(strURL);

}

};

3 Edit 컴포넌트 이벤트 함수 작성하기

Edit 컴포넌트의 onkeydown 이벤트 함수를 다음과 같이 작성합니다. 가상 키보드의 엔터키 입력을 처리합니

다.

this.edt_url_onkeydown = function(obj:nexacro.Edit,e:nexacro.KeyEventInfo)

{

if(e.keycode == "13") //Enter key code

{

this.btn_go_onclick();

this.btn_go.setFocus();

}

};

4 Network 오브젝트 이벤트 함수 작성하기

● onrecvsuccess 이벤트 함수

isReachable 메소드가 정상적으로 수행되면 onrecvsuccess 이벤트가 호출됩니다.


this.Network00_onrecvsuccess = function(obj:nexacro.Network,e:nexacro.NetworkEventInfo)

{

var strResult = this.edt_url.value +" is reachable.";

this.stt_result.set_text(strResult);

};

● onrecverror 이벤트 함수

isReachable 메소드 수행시 에러가 발생하면 호출되는 에러 이벤트 함수입니다.

this.Network00_onrecverror = function(obj:nexacro.Network,e:nexacro.NetworkErrorEventInfo)

{

var strResult = this.edt_url.value +" is unreachable.";

this.stt_result.set_text(strResult);

};


URL을 입력하고 Go 버튼을 터치하여 해당 URL로의 접근 가능 여부를 확인합니다.

Phone

13.

13.1 Phone 소개

Phone은 모바일 장치의 전화걸기 기능을 수행하는 오브젝트입니다.

13.2 전화걸기

Phone 오브젝트의 makeCall 메소드는 인수로 전달된 전화번호로 전화를 걸어주는 기능을 합니다. 전화 걸기시 자동

다이얼링 옵션을 설정할 수 있는데 옵션 설정에 따라 전화 걸기 화면만 오픈할지 전화 걸기까지 진행할지 선택 할 수

있습니다. 자동 다이얼링 옵션을 설정하지 않으면 전화 번호가 설정된 전화 걸기 화면까지만 진행되므로 통화 버튼을

사용자가 직접 터치해야 합니다.

13.2.1 예제

전화 번호를 입력 후 Call 버튼을 터치하면 전화가 걸립니다.

유심이 없거나 전화 기능이 되지 않는 장치에서는 모바일 장치의 오류 처리 방식을 따릅니다. 따라서 전화걸기 화면으

로 넘어가지 않거나 경고 메시지 출력 혹은 일시적으로 멈춘것처럼 느리게 처리 될 수 있습니다.



Phone > makeCall 메소드

인수로 전달된 전화 번호로 전화를 거는 메소드입니다. 인수를 두 개 받을 수 있는데 첫 번째 인수는 전화번호

로 반드시 입력해야 합니다. 두 번째 인수는 자동 다이얼링 기능을 설정하는 옵션입니다. 기본 값은 'false'로

모바일 장치의 전화 연결 화면까지만 진행되며 'true'로 설정하면 해당 번호로 바로 전화를 겁니다.



Phone 오브젝트를 추가합니다. 추가된 Phone 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

화면을 구성하기 위한 Static, Button 컴포넌트와 전화 번호를 입력받을 Edit 컴포넌트를 예제의 그림과 같이




Phone Phone00

Edit edt_phonenumber

Button btn_call

Static stt_result


2 Call 버튼 이벤트 함수 작성하기

Call 버튼의 onclick 이벤트를 다음과 같이 작성합니다. 전화번호가 입력되지 않았는지 확인 후 makeCall 메소

드를 호출하여 전화를 겁니다.

this.btn_call_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

var strPhoneNumber = this.edt_phonenumber.value;

if(nexacro._isNull(strPhoneNumber) || strPhoneNumber == "")

{

this.edt_phonenumber.setFocus();

}

else

{

Phone | 124

if(this.Phone00.makeCall(strPhoneNumber, true))

{

this.stt_result.set_text("makeCall() succeed.");

}

else

{

this.stt_result.set_text("makeCall() failed.");

}

}

};



다.

this.edt_phonenumber_onkeydown = function(obj:nexacro.Edit,e:nexacro.KeyEventInfo)

{

if(e.keycode == "13")

{

this.btn_call_onclick();

this.btn_call.setFocus();

}

};

4 ImageViewer 컴포넌트 이벤트 함수 작성하기

ImageViewer 컴포넌트의 onclick 이벤트 함수를 작성합니다. 전화 번호 입력란의 X 버튼을 터치하면 Edit 컴

포넌트에 입력한 전화번호를 삭제합니다.

this.ImageViewer00_onclick = function(obj:nexacro.ImageViewer,e:nexacro.ClickEventInfo)

{

this.edt_phonenumber.set_value("");


};


전화번호를 입력하고 Call 버튼을 터치하여 전화가 걸리는지 확인합니다.

SMS

14.

14.1 SMS 소개

SMS(Short Message Service)는 모바일 장치에서 문자메시지를 처리하고 관리하는 기능을 수행하는 오브젝트입니

다. 목록보기, 보내기, 받기, 삭제하기와 같은 기본 기능과 수신 이벤트 처리 기능을 수행할 수 있습니다.

iOS에서는 환경의 제약으로 문자 보내기 기능만 사용이 가능합니다.

14.2 문자메시지 보기/삭제하기

모바일 장치에 저장되어 있는 문자 메시지 목록을을 가져오는 방법과 삭제하는 방법에 대해 설명합니다.

문자 메시지 삭제 기능은 안드로이드 v4.4(KitKat) 미만의 장치에서만 사용할 수 있습니다.

14.2.1 예제

다음은 모바일 장치에 저장된 문자 메시지 목록을 받아와서 ListView 컴포넌트를 사용해 화면에 출력하는 예제입니

다. 예제를 실행하면 메시지를 받아온 후 가장 최근의 8개 메시지만 화면에 출력해줍니다.

문자 메시지를 삭제하려면 삭제하려는 항목을 약 1초 정도 터치합니다.



Sms > readMessageList 메소드

모바일 장치에 저장되어 있는 문자 메시지 목록을 가져오는 메소드입니다. 받아온 메시지는 onreadmessagel

ist 이벤트의 e.smsmessages 속성에서 확인할 수 있습니다. 저장된 문자 메시지가 많으면 조회에 시간이 걸

릴 수 있습니다.

Sms > deleteMessage 메소드

모바일 장치에 저장되어 있는 문자 메시지를 삭제하는 메소드입니다. 환경의 제약으로 iOS는 지원하지 않으며

안드로이드에서는 v4.4 미만 버전에서만 동작합니다.

SmsMessageListEventInfo > smsmessages 속성

조회한 문자 메시지 목록을 갖는 속성입니다. 문자 메시지 목록은 SmsMessage 오브젝트 배열로 저장됩니다.

조회된 목록의 총 개수는 e.smsmessages.length로 확인할 수 있습니다.

SMS | 128

SmsMessage 오브젝트

문자 메시지 목록을 저장하는 오브젝트입니다. date, message, phonenumber, smsid, type 속성을 갖습니

다. 각 속성에 대한 자세한 설명은 넥사크로 스튜디오 Help의 [EventInfo Objects > SmsMessageListEventI

nfo > SmsMessage] 항목을 참조하십시오.



Sms 오브젝트를 추가합니다. 추가된 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

조회한 문자 메시지를 저장하기 위한 Dataset과 화면에 출력하기 위한 ListView 컴포넌트, Static 컴포넌트를

추가한 후 예제의 그림과 같이 적절히 배치합니다.



SMS Sms00

ListView lstv_msg

Static stt_msg

Dataset Dataset00

2 Dataset 오브젝트 설정하기

조회한 문자 메시지를 저장할 Dataset 오브젝트를 설정합니다. Invisible Object 창에서 Dataset 오브젝트를

오픈하여 다음과 같이 컬럼을 생성합니다.

3 ListView 컴포넌트 설정과 데이터셋 바인딩하기

Dataset에 저장한 문자 메시지를 ListView 컴포넌트를 사용해 화면에 출력합니다. ListView 컴포넌트의 속성


을 다음과 같이 설정하고 Dataset을 바인딩합니다.

속성 값

bandexpandtype accordion

bandinitstatus collapse

visible false

binddataset Dataset00

4 ListView 아이템 구성하기

ListView에서 아이템 목록을 표현하려면 Band와 Detail 밴드를 생성하고 화면 요소인 Cell을 추가해 준 후 각

Cell과 Dataset을 바인딩 시켜주는 작업이 필요합니다.

우선 ListView를 더블 클릭하여 ListView 편집기를 오픈합니다. 앞 과정에서 이미 Dataset을 바인딩시켜놨기

때문에 Body 밴드와 각 항목이 Cell로 추가되어 있음을 확인할 수 있습니다. 문자 메시지의 전체 내용은 Detail

밴드 영역에 출력할 것이므로 [Append Detail] 버튼으로 Detail 밴드를 생성합니다.

Body 밴드에는 전화번호(Phonenumber), 일부 문자 내용(Message), 날짜 정보(Date)를 출력하고 Detail 밴

드에는 문자 메시지(Message)를 출력하도록 Cell을 구성합니다.

Body 밴드를 더블 클릭하여 다음과 같이 Cell을 배치합니다. 화면에 출력할 필요가 없는 smsid, type Cell은

삭제하고 새로 두 개의 Cell을 추가합니다.

SMS | 130

Body 밴드의 각 Cell의 속성을 다음과 같이 설정합니다.

Cell id 속성 값

Cell00 displaytype checkboxcontrol

edittype checkbox

Cell01 text bind:Phonenumber

Cell02 displaytype imagecontrol

expr EXPR:dataset.getColumn(currow,

"type")=="receive"?"imagerc::ico_

call-received-arrow_32_blue.png":

"imagerc::ico_call-made-right-arro

w_32_red.png"

imagestretch fixaspectratio

Cell03 text bind:Message

Cell04 text bind:Date

Detail 밴드를 더블 클릭하여 다음과 같이 Cell을 배치한 후 Cell을 하나 추가합니다. 추가한 Cell은 문자 메시

지 내용을 출력할 수 있도록 TextArea로 설정합니다.


Detail 밴드의 Cell 속성을 다음과 같이 설정합니다.

Cell id 속성 값

Cell00 displaytype textareacontrol

text bind:Message


Form을 로딩한 후 바로 모바일 장치의 문자 메시지를 조회합니다.

/* Form onload 이벤트 함수 */

this.sample_sms_01_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)

{

this.stt_msg.set_text("Loading message.");

this.stt_msg.set_visible(true);

this.lstv_msg.set_visible(false);

// 문자 메시지를 조회

this.Sms00.readMessageList();

};

ListView의 아이템을 일정 시간 터치했을 때 아이템을 삭제할 수 있도록 ontimer 이벤트 함수를 작성합니다.

그리고 다른 함수에서 타이머를 종료시킬 수 있도록 타이머 ID를 저장할 전역 변수를 선언합니다.

SMS | 132

// 타이머 ID를 저장할 전역 변수

var numTimerID = 17;

/* Form ontimer 이벤트 함수 */

this.sample_sms_01_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo)

{

var arrRowIdx = this.lstv_msg.getSelectedRows();

var bReturn = this.confirm("Are you sure delete message?")

if(bReturn)

{

var numSmsID = this.Dataset00.getColumn(arrRowIdx[0], "smsid");

this.Sms00.deleteMessage(numSmsID);

}

this.killTimer(numTimerID);

};

6 Sms 오브젝트 이벤트 함수 작성하기

Form이 로딩된 후 readMessageList 메소드가 수행되면 onreadmessagelist 이벤트가 발생합니다. onread

messagelist 이벤트 함수에서는 조회된 문자 메시지를 Dataset에 저장하는 기능을 합니다.

/* Sms 오브젝트 onreadmessagelist 이벤트 함수 */

this.Sms00_onreadmessagelist = function(obj:nexacro.Sms,e:nexacro.SmsMessageListEventInfo)

{

var numSMS, curRow, strImage;

if(e.smsmessages.length > 0)

{

this.stt_msg.set_visible(false);

this.lstv_msg.set_visible(true);

this.Dataset00.clearData();

this.lstv_msg.set_enableevent(false);

for(numSMS=0; numSMS < 8; numSMS++)

{

curRow = this.Dataset00.addRow();


this.Dataset00.setColumn(curRow, "smsid", e.smsmessages[numSMS].smsid);

this.Dataset00.setColumn(curRow, "Phonenumber", e.smsmessages[numSMS].

phonenumber);

this.Dataset00.setColumn(curRow, "Message", e.smsmessages[numSMS].message);

this.Dataset00.setColumn(curRow, "Date", e.smsmessages[numSMS].date);

this.Dataset00.setColumn(curRow, "Type", e.smsmessages[numSMS].type);

}

this.lstv_msg.set_enableevent(true);

this.resetScroll();

}

else

{

this.stt_msg.set_text("No messages.");

this.stt_msg.set_visible(true);

this.lstv_msg.set_visible(false);

}

};

ondeletemessage 이벤트는 사용자가 문자 메시지를 삭제할 때 발생합니다. 삭제된 문자 메시지에 해당하는

Dataset 항목을 삭제합니다.

/* Sms 오브젝트 ondeletemessage 이벤트 함수 */

this.Sms00_ondeletemessage = function(obj:nexacro.Sms,e:nexacro.SmsEventInfo)

{

var numRow = this.Dataset00.findRow("smsid", e.smsid)

this.Dataset00.deleteRow(numRow);

};

Sms 오브젝트의 onerror 이벤트 함수를 다음과 같이 작성합니다. Sms 오브젝트의 메소드 호출에 오류가 발생

했을 때 사용자에게 어떤 오류인지 알려줍니다.

/* Sms 오브젝트 onerror 이벤트 함수 */

this.Sms00_onerror = function(obj:nexacro.Sms,e:nexacro.SmsErrorEventInfo)

{


strResult += "\n"+ "smsid = "+ e.smsid;

SMS | 134

strResult += "\n"+ "phonenumber = "+ e.phonenumber;

strResult += "\n"+ "message = "+ e.message;

alert(strResult);

};

7 ListView 컴포넌트 이벤트 함수 작성하기

ListView 컴포넌트의 Band 영역이나 Cell 영역을 클릭하면 Detail 밴드를 화면에 표시합니다.

/* ListView 컴포넌트의 onbandclick 이벤트 함수 */

this.lstv_msg_onbandclick = function(obj:nexacro.ListView,e:nexacro.ListViewClickEventInfo

)

{

this.lstv_msg.showDetailBand(e.row);

};

/* ListView 컴포넌트의 oncellclick 이벤트 함수 */

this.lstv_msg_oncellclick = function(obj:nexacro.ListView,e:nexacro.ListViewClickEventInfo

)

{

this.lstv_msg.showDetailBand(e.row);

};

ListView 컴포넌트를 사용자가 터치했을 때 발생하는 ontouchstart, ontouchend, ontouchmove 이벤트 함

수를 작성합니다. 이 이벤트 함수는 문자 메시지 삭제 기능에 사용됩니다. 사용자가 터치를 시작할 때 타이머를

동작시키고 터치를 떼거나 터치 후 드래그 동작을 하면 타이머를 종료시킵니다.

/* ListView 컴포넌트 ontouchstart 이벤트 함수 */

this.lstv_msg_ontouchstart = function(obj:nexacro.ListView,e:nexacro.TouchEventInfo)

{

this.setTimer(numTimerID, 1000);

};

/* ListView 컴포넌트 ontouchend 이벤트 함수 */

this.lstv_msg_ontouchend = function(obj:nexacro.ListView,e:nexacro.TouchEventInfo)

{


};

/* ListView 컴포넌트 ontouchmove 이벤트 함수 */


this.lstv_msg_ontouchmove = function(obj:nexacro.ListView,e:nexacro.TouchEventInfo)

{


};


Form을 로딩하면 자동으로 모바일 장치에 저장된 문자 메시지를 조회합니다. 문자 메시지를 조회하는 동안에

는 "Loading message."라고 표시되며 조회할 문자 메시지가 없으면 "No messages."라고 표시됩니다.

조회가 완료되면 문자 메시지가 화면에 출력됩니다. 각 항목을 터치하면 항목 하단에 문자 메시지 전체가 보여

집니다.

문자 메시지 항목을 1초 정도 터치하여 문자 메시지가 삭제되는지 확인합니다. 삭제에 실패하면 오류 메시지

창이 오픈됩니다.

14.3 문자메시지 보내기

Sms 오브젝트를 사용해 문자 메시지를 작성하고 보내는 방법에 대해 설명합니다.

14.3.1 예제

다음은 문자 메시지를 작성하고 전송하는 예제입니다. 예제를 실행한 후 전화 번호와 문자 메시지를 입력한 후 Send

버튼을 터치하면 문자를 전송할 수 있습니다. Clear 버튼을 터치하면 작성한 문자 메시지를 삭제합니다.

SMS | 136


phonenumber 속성

문자 메시지를 전송할 상대의 전화 번호를 설정하는 속성입니다.

message 속성

전송할 문자 메시지 내용을 설정하는 속성입니다.

sendMessage 메소드

문자 메시지를 전송을 위해 모바일 장치의 기본 SMS 앱을 오픈하는 메소드입니다. 메소드 자체 기능으로 전

송하지 않고 기본 SMS 앱에 전달해주는 역할을 합니다.



Sms 오브젝트를 추가합니다. 추가된 오브젝트는 Invisible Object 창에서 확인할 수 있습니다.

전화 번호를 입력할 Edit 컴포넌트와 문자 메시지를 작성할 TextArea 컴포넌트를 추가합니다. 그리고 작성 완

료 후 전송할 Send 버튼과 Clear 버튼을 추가한 후 예제의 그림과 같이 적절히 배치합니다.



SMS Sms00

Edit edt_phonenumber

TextArea ta_message

Button btn_send

btn_clear

2 Sms 오브젝트 이벤트 함수 작성하기

Sms 오브젝트의 onerror 이벤트 함수를 다음과 같이 작성합니다. Sms 오브젝트의 메소드 호출에 오류가 발생

했을 때 사용자에게 어떤 오류인지 알려줍니다.

/* Sms 오브젝트 onerror 이벤트 함수 */

this.Sms00_onerror = function(obj:nexacro.Sms,e:nexacro.SmsErrorEventInfo)

{


strResult += "\n"+ "smsid = "+ e.smsid;


strResult += "\n"+ "phonenumber = "+ e.phonenumber;

strResult += "\n"+ "message = "+ e.message;

alert(strResult);

};

3 Send 버튼 이벤트 함수 작성하기

Send 버튼을 터치하면 전화번호와 문자 메시지가 정상적으로 작성되었는지 확인 후 문자 메시지를 전송합니

다.

/* Send 버튼 onclick 이벤트 함수 */

this.btn_send_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

var strNumber = this.edt_phonenumber.value;

var strMsg = this.ta_message.value;

if(nexacro._isNull(strNumber) || strNumber == "")

{


}

else if(nexacro._isNull(strMsg) || strMsg == "")

{

this.ta_message.setFocus();

}

else

{

this.Sms00.set_phonenumber(strNumber);

this.Sms00.set_message(strMsg);

this.Sms00.sendMessage();

}

};

4 Clear 버튼 이벤트 함수 작성하기

Clear 버튼을 터치하면 작성중이던 문자 메시지가 삭제됩니다.

/* Clear 버튼 onclick 이벤트 함수 */

this.btn_clear_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.ta_message.deleteText();

SMS | 138

};

5 Edit, TextArea 컴포넌트 이벤트 함수 작성하기

/* Edit 컴포넌트 canchange 이벤트 함수 */

this.edt_phonenumber_canchange = function(obj:nexacro.Edit,e:nexacro.ChangeEventInfo)

{

if(this.edt_phonenumber.value == "")

{

this.edt_phonenumber.value = null;

}

};

/* TextArea 컴포넌트 canchange 이벤트 함수 */

this.ta_message_canchange = function(obj:nexacro.TextArea,e:nexacro.ChangeEventInfo)

{

if(this.ta_message.value == "")

{

this.ta_message.value = null;

}

};


전화번호와 문자 메시지를 작성한 후 Send 버튼을 터치하여 모바일 장치의 기본 SMS 앱에 작성한 내용이 반

영되어 오픈되는지 확인합니다.

문자 메시지 작성중 Clear 버튼을 터치하면 내용이 모두 삭제됩니다.

Vibrator

15.

15.1 Vibrator 소개

Vibrator는 모바일 장치의 진동 기능을 사용할 수 있게 해주는 오브젝트입니다. 사용자는 제공되는 속성과 메소드를

사용해 단순 진동뿐 아니라 원하는 진동 패턴을 만들 수 있습니다.

15.2 진동 발생시키기

모바일 장치에서 진동을 발생시키려면 play 메소드를 호출하고 진동을 멈추려면 stop 메소드를 호출합니다.

15.2.1 예제

진동 반복 회수를 입력한 후 Play 버튼을 터치하면 입력한 숫자만큼 진동이 반복됩니다. 0을 입력하면 무한 반복되며

진동이 발생할 때마다 하단에 로그메시지가 출력됩니다. 진동 발생 중 Stop 버튼을 터치하면 진동이 멈춥니다.

Vibrator | 140


Vibrator > hasVibrator 메소드

진동 기능을 사용할 수 있는지 확인하는 메소드입니다.

Vibrator > repeatcount 속성

진동 패턴의 반복 횟수를 설정하는 속성입니다. 속성 값을 설정하지 않으면 1로 적용되며, 0으로 설정시 진동

이 무한 반복됩니다.

Vibrator > play 메소드

진동을 발생시키는 메소드입니다. patterns 속성에 설정된 패턴대로 repeatcount 속성에 설정된 값만큼 반복

하여 진동을 발생시킵니다.

Vibrator > stop 메소드

진동을 멈추는 메소드입니다.



Vibrator 오브젝트를 선택한 후 디자인 화면을 클릭하여 추가합니다. 추가된 Vibrator 오브젝트는 Invisible O

bject 창에서 확인할 수 있습니다.


화면을 구성하기 위한 Static, Button 컴포넌트와 반복 회수를 입력받을 Edit 컴포넌트를 예제의 그림과 같이




Vibrator Vibrator00

Static stt_count

Edit edt_count

Button btn_vibPlay

btn_vibStop

TextArea TextArea00


진동시마다 몇 번째 진동인지 로그 메시지로 출력하기 위한 전역 변수인 numCount를 선언하고 동작 수행시

마다 타이머, 변수를 초기화 할 initData 함수를 선언합니다.

//Global Variable

var numCount = 0;

//Variables initialization function

this.initData = function()

{

this.killTimer(0);

numCount = 0;

this.TextArea00.set_value(this.TextArea00.value +"\n");

};

정해진 시간 간격으로 로그 메시지를 TextArea에 출력하는 timer 함수를 선언합니다.

//Functions that are called repeatedly at specified time intervals

this.timer = function()

{

if(this.Vibrator00.repeatcount == 0 || numCount < this.Vibrator00.repeatcount)

{

numCount++;

this.TextArea00.set_value(this.TextArea00.value +"\nVibration occurs: "+ numCount

+" times");

this.TextArea00.scrollBy(0, this.TextArea00.getVScrollPos()+19);

Vibrator | 142

}

else

{

this.initData();

}

};


● oninit 이벤트 함수

폼 로딩 후 로그 메시지를 출력하기 전 TextArea를 초기화합니다.

this.sample_vibrator_01_oninit = function(obj:nexacro.Form,e:nexacro.EventInfo)

{


};

● ontimer 이벤트 함수

지정된 시간 간격마다 timer 함수를 호출합니다.

this.sample_vibrator_01_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo)

{

if(e.timerid == 0)

{

this.timer();

}

};

4 Play 버튼 이벤트 함수 작성하기

Play 버튼의 onclick 이벤트 함수를 다음과 같이 작성합니다. 모바일 장치의 진동 기능을 사용할 수 있는지 확

인 후 사용자가 설정한 반복 회수만큼 진동 기능을 수행합니다.

this.btn_vibPlay_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

if(this.Vibrator00.hasVibrator())

{

var repeatCount = this.edt_count.value;


if(repeatCount !== null && repeatCount !== "")

{

this.Vibrator00.set_repeatcount(repeatCount);

this.Vibrator00.play();

}

else

{

alert("Please enter the count of repeat for vibration.");

}

}

else

{

alert("Vibration function is not available.");

}

};


Stop 버튼의 onclick 이벤트 함수를 다음과 같이 작성합니다. 모바일 장치의 진동 기능을 중지합니다.

this.btn_vibStop_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.Vibrator00.stop();

};

6 Vibrator 이벤트 함수 작성하기

● onplay 이벤트 함수

Vibrator 오브젝트의 play 메소드가 호출되면 발생하는 이벤트입니다. 사용자가 play를 수행하면 로그 메시지

를 출력하기 위해 타이머를 설정합니다.

this.Vibrator00_onplay = function(obj:nexacro.Vibrator,e:nexacro.VibratorEventInfo)

{

this.setTimer(0, 200);

};

● onstop 이벤트 함수

Vibrator 오브젝트의 stop 메소드가 호출되면 발생하는 이벤트입니다. 사용자가 stop을 수행하면 초기화 함수

를 호출합니다.

Vibrator | 144

this.Vibrator00_onstop = function(obj:nexacro.Vibrator,e:nexacro.VibratorEventInfo)

{

this.initData();

};


Vibrator 오브젝트 기능 수행시 오류가 발생하면 발생하는 이벤트입니다. 오류 코드를 TextArea로 출력합니

다.

this.Vibrator00_onerror = function(obj:nexacro.Vibrator,e:nexacro.VibratorErrorEventInfo)

{

var strResult = "\n> Vibrator00_onerror()"


this.TextArea00.set_value(this.TextArea00.value + strResult);

};



다.

this.edt_count_onkeydown = function(obj:nexacro.Edit,e:nexacro.KeyEventInfo)

{


{

this.btn_vibPlay_onclick();

this.btn_vibPlay.setFocus();

}

};


진동 반복 회수를 입력하고 Play 버튼을 터치하여 입력한 회수만큼 진동이 반복되는지 확인합니다. 0을 입력하

여 무한히 진동이 반복되는지 확인하고 Stop 버튼을 터치하여 진동이 멈추는지 확인합니다.


15.3 진동 패턴 설정하기

진동을 원하는 패턴으로 설정하여 발생시키고 싶을 때는 patterns 속성을 사용합니다.

iOS 환경에서는 patterns 속성이 동작하지 않고 iOS에서 제공하는 진동 패턴이 적용됩니다.

15.3.1 예제

진동 패턴을 다음과 같이 숫자와 쉼표(,)로 입력한 후 Play 버튼을 터치하여 진동을 발생시킵니다. 진동을 멈추려면 St

op 버튼을 터치합니다.

진동 패턴은 무진동, 진동의 쌍으로 이뤄집니다. 예를 들어, "200,1000,200,500"과 같이 패턴을 입력하면 200ms

동안 무진동, 1000ms 동안 진동, 200ms 동안 무진동, 500ms 동안 진동이 발생합니다.


Vibrator > hasVibrator 메소드

모바일 장치가 진동 기능을 사용할 수 있는지 확인하는 메소드입니다.

Vibrator > patterns 속성

진동 패턴을 설정하는 속성입니다. 패턴 값은 무진동, 진동의 쌍으로 이루어진 배열 형태로 설정합니다. 예를

들어, "10, 100, 20, 200"와 같이 설정하면 10ms 동안 무진동, 100ms 동안 진동, 20ms 동안 무진동, 200

ms 동안 진동이 발생합니다. iOS에서는 지원하지 않는 기능입니다.

Vibrator > play 메소드

진동을 발생시키는 메소드입니다. patterns 속성에 설정된 패턴대로 repeatcount 속성에 설정된 값만큼 반복

하여 진동을 발생시킵니다.

Vibrator | 146

Vibrator > stop 메소드

진동을 멈추는 메소드입니다.



Vibrator 오브젝트를 선택한 후 디자인 화면을 클릭하여 추가합니다. 추가된 Vibrator 오브젝트는 Invisible O

bject 창에서 확인할 수 있습니다.

화면을 구성하기 위한 Static, Button 컴포넌트와 반복 회수를 입력받을 Edit 컴포넌트를 예제의 그림과 같이




Vibrator Vibrator00

Static stt_pattern

Edit edt_pattern

Button btn_vibPlay

btn_vibStop

2 Play 버튼 이벤트 함수 작성하기

Play 버튼의 onclick 이벤트 함수를 다음과 같이 작성합니다. 모바일 장치의 진동 기능을 사용할 수 있는지 확

인하고 사용자가 설정한 진동 패턴대로 진동 기능을 수행합니다.

this.btn_vibPlay_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

if(this.Vibrator00.hasVibrator())

{

var strInput = this.edt_pattern.value;

if(strInput !== null && strInput !== "")

{

var arrPattern = strInput.split(",");

this.Vibrator00.set_patterns(arrPattern);

this.Vibrator00.play();

}


else

{

alert("Please enter a vibration pattern.");

}

}

else

{

alert("Vibration function is not available.");

}

};


Stop 버튼의 onclick 이벤트 함수를 다음과 같이 작성합니다. 모바일 장치의 진동 기능을 중지합니다.

this.btn_vibStop_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

this.Vibrator00.stop();

};

4 Vibrator 오브젝트의 onerror 이벤트 함수 작성하기

Vibrator 오브젝트 기능 수행시 오류가 발생하면 발생하는 이벤트입니다. 오류 코드를 출력합니다.

this.Vibrator00_onerror = function(obj:nexacro.Vibrator,e:nexacro.VibratorErrorEventInfo)

{

var strResult = "\n> Vibrator00_onerror()"


alert(strResult);

};



다.

this.edt_count_onkeydown = function(obj:nexacro.Edit,e:nexacro.KeyEventInfo)

{


{

Vibrator | 148

this.btn_vibPlay_onclick();

this.btn_vibPlay.setFocus();

}

};


진동 패턴을 입력하고 Play 버튼을 터치하여 입력한 패턴대로 진동이 발생하는지 확인합니다. 진동 발생중 Sto

p 버튼을 터치하여 진동이 멈추는지 확인합니다.

앱 개발

파트 II.

앱 개발 절차

16.

이번 장에서는 넥사크로플랫폼 애플리케이션을 안드로이드 환경에서 동작할 수 있도록 앱으로 제작하는 절차에 관해

설명합니다.

『시작부터 끝까지』에서는 앱 개발 시작부터 배포용 앱 패키지 파일을 생성하는 과정까지를 다루고, 『UI만 수정하는 경

우』에서는 UI 수정이 필요한 경우에 한해서 넥사크로 스튜디오를 사용해 UI만 간단히 수정한 후 배포용 앱 패키지 파

일을 생성하는 과정을 다룹니다.

16.1 시작부터 끝까지

넥사크로플랫폼으로 안드로이드 앱을 개발하려면 넥사크로 스튜디오와 앱 빌더가 필요합니다. 거기에 안드로이드 플

랫폼에서 제공하는 라이브러리를 이용하여 기능을 추가하거나 테스트, 디버깅 하려면 안드로이드 스튜디오가 추가로

필요하게 됩니다. 사용자는 UI를 제작하는데 필요한 넥사크로 스튜디오, 배포를 수행하는 앱 빌더 그리고 안드로이드

기능을 제작하는데 필요한 안드로이드 스튜디오, 이렇게 세 가지 도구를 적절히 사용하여 빠르고 효율적으로 앱 개발

을 수행할 수 있습니다.

다음은 넥사크로플랫폼 환경에서 세가지 도구를 사용하여 앱을 개발하는 절차를 정리한 순서도입니다. 각 절차에서

사용자가 해야 하는 작업과 어떤 결과물을 얻을 수 있는지 확인할 수 있습니다.


Nexacro Studio App Builder Android Studio

UI Design (UI 디자인과 이벤트 처리)

넥사크로 스튜디오를 사용하여 UI를 디

자인하고 사용자와의 상호작용으로 발생

하는 이벤트와 처리 로직을 구현합니다.

Packing (배포 파일 생성)

넥사크로 스튜디오로 제작한 애플리케이

션을 배포하기 위한 패킹 작업을 수행합

니다.

Build App (UI만 포함된 앱 빌드)

넥사크로 스튜디오에서 앱 빌더 서버로

연결해 프로젝트 생성, 패킹 파일 업로딩

앱 개발 절차 | 152

그리고 빌드를 수행하여 APK 파일을 빌

드합니다.

Export android project (안드로이드

프로젝트 내보내기)

앱 빌더 서버의 웹 콘솔에서 안드로이드

프로젝트를 내보내기 하여 내려받습니다.

Implement android functions (안드로

이드 기능 구현)

내려받은 안드로이드 프로젝트에서 부트

스트랩, 프로젝트 URL을 설정하고 안드로

이드 기능을 구현합니다.

6 Test and Debug

구현된 앱을 에뮬레이터와 모바일 장치에

서 테스트하고 디버깅합니다.

Import android project (안드로이드

프로젝트 들여오기)

앱 빌더 서버의 웹 콘솔에서 구현이 완료

된 안드로이드 프로젝트를 앱 빌더 서버

로 들여오기 합니다.

Build App (전체 앱 빌드)

넥사크로 스튜디오에서 Build App을 수

행하여 배포판 APK 파일을 생성합니다.


16.2 UI만 수정하는 경우

UI 응용 부분에 대한 수정만 하는 경우 다시 말해 플랫폼에서 제공하는 기능의 개발은 완료되어 안드로이드 자바 코드

를 수정할 필요가 없는 경우에는 넥사크로 스튜디오만으로 개발 작업을 수행할 수 있습니다.

물론 앱으로 빌드하려면 앱 빌더는 필요하지만 사용자가 직접 앱 빌더를 조작할 필요는 없으며 오직 넥사크로 스튜디

오만으로 개발과 빌드를 모두 수행 가능합니다. 이 경우에는 개발 절차도 무척 단순해 집니다. 다음 표는 이 경우의 개

발 절차를 보여줍니다.


UI Design (UI 디자인과 이벤트 처리)

넥사크로 스튜디오를 사용하여 UI와 이벤트, 기능을 수정합니다.

Packing (배포 파일 생성)

넥사크로 스튜디오로 제작한 애플리케이션을 배포하기 위한 패킹 작업을 수행합

니다. 패킹시 수정한 항목의 Version을 올려주어야 업데이트가 수행됩니다.


Build App (빌드 앱)

넥사크로 스튜디오에서 빌드 앱 위저드의 설정 화면에서 Build Type 항목을 "U

pload Contents"로 설정한 후 빌드를 수행합니다.


알람 앱 개발

17.

이번 장에서는 앞서 설명한 앱 개발 절차에 따라 알람 기능을 수행하는 간단한 데모 앱을 제작해보며 실제 사례에서

어떻게 활용될 수 있는지 살펴봅니다.

『UI 디자인과 이벤트 처리』, 『배포 파일 생성』, 『UI만 포함된 앱 빌드』, 『안드로이드 프로젝트 내보내기(Export)』, 『알

람 기능 구현』, 『안드로이드 프로젝트 들여오기(Import)』, 『전체 앱 빌드』에서는 넥사크로 스튜디오, 앱 빌더, 안드로

이드 스튜디오를 사용해서 앱을 제작하는 과정을 다룹니다. 그리고 『앱 설치 및 실행』에서는 완성된 앱을 직접 스마트

폰에 설치하여 구현한 기능이 잘 동작하는지 확인합니다.

『앱 데모 및 소스코드』에서는 완성된 앱 데모와 소스 코드 링크를 제공합니다.

마지막으로 『참고』에서는 알람 앱 개발 단계에서 참고할 수 있는 설명을 제공합니다.

알람 앱의 구조와 주요 구성요소

일반적으로 알람은 사용자가 시간을 설정하면 설정된 시간에 알람음을 재생하여 사용자에게 알려주는 기능을 합니다.

앱 개발에 앞서 알람 앱의 구조와 기능 구현을 위해 어떤 요소들이 필요한지 살펴봅니다.

알람 앱의 주요 구성 요소로는 알람을 설정하는 넥사크로플랫폼 디자인 화면, 디자인 화면을 화면에 출력해주는 Nex

acroActivity, 알람을 관리하는 AlarmManager, 알람 이벤트를 수신하는 브로드캐스트 리시버, 알람음을 재생하는

미디어 플레이어 서비스 그리고 자바스크립트와 자바 객체간의 메시지 전달을 담당하는 UserNotify 이벤트 객체, cal

lScript 메소드 등이 있습니다.


구성 요소 설명

1 NexacroActivity

넥사크로플랫폼 17 프레임워크와 넥사크로 스튜디오에서 구현한 애플리케이션을 로딩

하여 화면에 출력합니다. 앱이 실행되면 먼저 NexacroUpdatorActivity가 실행되어 업

데이트 체크를 수행한 후 NexacroActivity를 실행해 줍니다.

2 UserNotify

이벤트 클래스로 자바스크립트에서 자바로의 인터페이스를 제공합니다. 자바스크립트

에서 ID, 문자열 인수와 함께 userNotify 메소드를 호출하면 자바에서 onUserNotify 이

벤트 함수를 통해 인수값을 받을 수 있습니다.

3 AlarmManager시스템의 알람 서비스로 접근할 수 있는 기능을 제공합니다. 이를 통해 알람 설정/해지

합니다.

4 BroadcastReceiver안드로이드 시스템에서 알람 발생시 전달되는 브로드캐스트를 수신하는 역할을 수행합

니다.

5 Service 알람 발생시 백그라운드에서 MediaPlayer를 사용해 알람음을 재생합니다.

17.1 UI 디자인과 이벤트 처리

넥사크로 스튜디오를 사용하여 UI를 디자인하고 사용자 액션으로 발생하는 이벤트에 대한 처리 로직을 구현합니다.

알람 앱은 하나의 폼과 날짜, 시간을 설정할 수 있도록 몇 개의 컴포넌트로 구성되는 간단한 구조를 가집니다. 주요 컴

포넌트로는 날짜를 선택하기 위한 Calendar 컴포넌트, 시간을 설정하기 위한 Spin 컴포넌트 그리고 기능을 동작시킬

Button 컴포넌트가 있습니다. 다음은 우리가 제작할 알람 앱의 화면을 구성하는 컴포넌트 배치와 버튼의 기능을 정리

한 표입니다.

알람 앱 개발 | 156

기능 설명

Alarm SET 현재 설정된 시간으로 알람을 설정합니다.

Alarm OFF 알람을(알람음 재생) 종료시킵니다.

Alarm CANCEL 현재 설정된 알람을 취소합니다.

Alarm CHECK 현재 알람이 설정되어 있는지 확인합니다.

17.1.1 넥사크로 프로젝트 생성

새로운 넥사크로 프로젝트를 생성하고 스마트폰 환경에 맞게 스크린 및 프레임을 설정합니다.

1 메뉴에서 [File > New > Project]를 실행하여 프로젝트 위저드를 실행합니다.

2 프로젝트 위저드 Screen 설정 화면에서 Phone을 선택한 후 Next 버튼을 클릭합니다.

3 프로젝트 위저드 Frame 설정 화면에서 프레임 옵션을 설정합니다.

Frameset Template 탭에서 "Full"을 선택합니다.


Details Setting (Optional) 탭에서 Mainframe 설정의 Show Titlebar와 Show Statusbar 사용을 체크 해제

합니다. PC 환경과 달리 모바일 환경에서는 일반적으로 화면 크기에 제약을 받기 때문에 Titlebar나 Statusbar

와 같이 실행에 꼭 필요한 요소가 아니면 제거하는게 좋습니다.

4 Finish 버튼을 클릭하여 프로젝트 생성을 완료합니다.

알람 앱 개발 | 158

17.1.2 테마 적용

기본으로 적용되는 default 테마를 안드로이드 환경에 최적화된 android 테마로 변경합니다.

1 Resource Explorer에서 NexacroTheme의 android.xtheme을 선택한 후 아래 Theme로 드래그 앤 드랍으

로 테마를 추가합니다. 기존의 default 테마는 필요없으므로 삭제합니다.

2 Project Explorer에서 Environment를 선택한 후 Properties 창에서 themeid 속성을 android로 설정하여 테

마를 적용합니다.


17.1.3 폼 생성

1 메뉴에서 [File > New > Form (.xfdl)]를 클릭하여 폼 위저드를 실행한 후 폼 이름을 "AlarmSet"으로 설정하

고 screenid 속성을 "Phone_screen"으로 설정합니다.

screenid 속성값을 설정하면 위 그림과 같이 현재 폼의 크기가 설정한 스크린에 맞춰 변경된다는 정보창이 열

립니다. YES를 선택하여 폼을 생성합니다. YES를 선택하면 폼 크기가 480*768로 변경되고 NO를 선택하면

기본 크기인 1280*720이 유지됩니다.

Screen ID 값인 "Phone_screen"은 폰 스크린 생성시 기본으로 설정되는 값입니다. 만약 스크린

생성시 다른 이름을 설정했다면 새로 설정한 이름이 표시됩니다.

폰 스크린은 모바일 화면에 적합하도록 사전에 mobile_small(480*768), mobile_medium(64

0*1024), mobile_large(800*1280)의 세 가지 타입으로 정의되어 있습니다. 여기서 기본으로

적용되는 타입이 mobile_small입니다. 폰 스크린의 타입을 변경하려면 Screen의 type 속성에서

설정할 수 있습니다.

2 Project Explorer에서 WorkFrame(ChildFrame)을 선택한 후 Properties 창에서 formurl 속성값을 "Base::A

larmSet.xfdl"로 설정합니다.

알람 앱 개발 | 160

17.1.4 컴포넌트 생성 및 배치

각 컴포넌트를 다음 앱 화면과 같이 생성, 배치하고 속성을 설정합니다.

1 Calendar 컴포넌트를 생성하고 Properties 창에서 속성을 다음 표와 같이 설정합니다.


컴포넌트 속성 값

Calendar

popuptype center

type monthonly

usetrailingday true

2 Spin 컴포넌트를 2개 생성하고 Properties 창에서 속성을 다음 표와 같이 설정합니다.


Spin(시간 설정)

id spn_hour

circulation true

max 23

min 0

font normal 32pt/normal "Arial"

Spin(분 설정)

id spn_min

circulation true

max 59

min 0

font normal 32pt/normal "Arial"

3 나머지 화면을 구성하는데 필요한 Static, Button 컴포넌트를 생성하여 Properties 창에서 id 속성을 다음 표

와 같이 설정합니다.


Static(제목)id stt_subject

text Wake me up before I'm late

Static(Hour)id stt_hour

text Hour

Static(Min)id stt_min

text Min

Button(Alarm SET)id btn_setAlarm

text Alarm SET

Button(Alarm OFF)id btn_offAlarm

text Alarm OFF

Button(Alarm CANCEL)id btn_cancelAlarm

text Alarm CANCEL

Button(Alarm CHECK)id btn_checkAlarm

text Alarm CHECK

알람 앱 개발 | 162

17.1.5 이벤트 처리

1 전연 변수를 선언합니다.

폼에서 자유롭게 userNotify 메소드를 사용하기 위해 xfdl의 가장 앞에 선언합니다

/* AlarmSet.xfdl */

var objEnv = nexacro.getEnvironment();

2 Form의 onload 이벤트 함수에서 컴포넌트의 초기값을 설정합니다.

폼 로딩시 현재 시간을 구하여 Calendar와 Spin 컴포넌트에 설정합니다.

/* AlarmSet.xfdl */

this.AlarmSet_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)

{

var dTime = new Date();

var strDate = dTime.getFullYear() + (dTime.getMonth()+1).toString().padLeft(2, "0") +

dTime.getDate().toString().padLeft(2, "0");

this.Calendar00.set_value(strDate);

this.spn_hour.set_value(dTime.getHours().toString().padLeft(2, "0"));

this.spn_min.set_value((dTime.getMinutes()).toString().padLeft(2, "0"));

};

3 Alarm SET(알람 설정) 버튼의 터치 이벤트 함수를 작성합니다.

사용자가 Calendar와 Spin 컴포넌트로 날짜와 시간, 분을 설정하면 그 시간값을 문자열 변수에 담아 userNoti

fy 메소드로 자바 코드로 전달합니다.

/* AlarmSet.xfdl */

this.btn_setAlarm_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

var strYear = this.Calendar00.getYear();

var strMonth = this.Calendar00.getMonth();

var strDay = this.Calendar00.getDay();

var strHour = this.spn_hour.value;

var strMin = this.spn_min.value;


var strParams = strYear +","

+ strMonth +","

+ strDay +","

+ strHour +","

+ strMin;

objEnv.userNotify(101, strParams);

trace(strParams);

};

userNotify 메소드 호출시 사용하는 ID 값과 문자열은 자바 코드에서 사용자가 어떤 명령을 내렸는지 구분하는

데 사용되는 식별자와 상태값입니다. 자바스크립트 코드에서 userNotify 메소드를 호출하면 자바 코드에서 이

벤트(onUserNotify)가 발생하며 ID값과 문자열을 이벤트 함수의 매개변수로 전달 받을 수 있습니다. 다음은 u

serNotify 메소드 호출시 사용하는 ID와 상태값을 정리한 표입니다.

코드값 상태값 설명

101 시간 정보 알람 설정 처리

102 "ALARMOFF" 알람 중지 처리

103 "ALARMCANCEL" 설정된 알람을 취소

104 "ALARMCHECK" 설정된 알람이 있는지 확인

901 "ACTIVITYHIDE" 앱 종료

4 Alarm OFF(알람 중지), Alarm CANCEL(알람 취소), Alarm CHECK(알람 확인) 버튼의 터치 이벤트 함수를

작성합니다.

Alarm OFF 버튼은 알람 발생시 알람음이 재생되는데 이를 종료시킵니다.

/* AlarmSet.xfdl */

this.btn_offAlarm_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

var strParams = "ALARMOFF";


trace(strParams);

};

Alarm CANCEL 버튼은 알람이 설정되어 있을 때 이를 취소합니다.

알람 앱 개발 | 164

/* AlarmSet.xfdl */

this.btn_cancelAlarm_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

var strParams = "ALARMCANCEL";


trace(strParams);

};

Alarm CHECK 버튼은 시스템에 설정된 알람이 있는지 확인합니다.

/* AlarmSet.xfdl */

this.btn_checkAlarm_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)

{

var strParams = "ALARMCHECK";


trace(strParams);

};

알람의 상태값을 설정할 문자열을 strParams 변수에 담아 userNotify 메소드를 호출하여 자바 코드로 전달합

니다.

5 스마트폰 네비게이션 바의 뒤로가기(Back) 버튼의 터치 이벤트 함수를 작성합니다.

뒤로가기 버튼을 포함한 네비게이션 바의 모양은 스마트폰 제조사에 따라 차이가 있을 수 있습니

다.

사용자가 모바일 장치의 뒤로가기 버튼을 터치하면 앱을 종료할지 물어보고 "예"를 선택하면 앱을 종료시킵니

다.


/* AlarmSet.xfdl */

this.AlarmSet_ondevicebuttonup = function(obj:nexacro.Form,e:nexacro.DeviceButtonEventInfo

)

{

//back button

if(e.button == 2)

{

if(this.confirm("Do you want to quit?", "EXIT", "question"))

{

var strParams = "ACTIVITYHIDE";


trace("EXIT");

}

}

};

위의 코드는 자바의 UserNotify 객체로 이벤트를 전달하여 종료 기능을 수행하도록 되어 있습니

다. 따라서 『UI 디자인과 이벤트 처리』 단계에서 종료 기능을 동작시키려면 아래와 같이 코드를 수

정해서 사용할 수 있습니다.

이 부분을

> var strParams = "ACTIVITYHIDE";

> objEnv.userNotify(901, strParams);

다음과 같이 수정

> var objApp = nexacro.getApplication();

> objApp.exit();

17.1.6 xadl 함수 생성(자바 코드에서 호출할 함수)

1 애플리케이션(XADL) 파일을 편집 모드로 오픈합니다.

넥사크로 스튜디오의 [Project Explorer > App Information > Apps]에서 애플리케이션 파일을 더블 클릭하

여 XADL 파일이 오픈되면 편집기에서 Script 탭을 선택합니다.

알람 앱 개발 | 166

2 XADL에 자바 코드로부터 전달되는 메시지를 처리하는 함수를 작성합니다.

사용자가 수행한 기능이 정상적으로 처리됐는지 자바 코드로부터 알림을 받으면 그 결과를 화면에 토스트 메시

지로 출력하는 함수입니다. userNotify 메소드를 사용해 자바 코드쪽으로 토스트 메시지 호출을 요청합니다.

fn_callScript는 폼이 아닌 XADL에 선언해야 하는 메소드로 자바 코드 쪽의 callScript 메소드에 의해 호출됩

니다.

만일 상태에 따라 어떤 동작을 할 필요가 있으면 switch 문의 각 case에 기능을 구현해줍니다.

/* App_Phone.xadl */

var objEnv = nexacro.getEnvironment(); //global variable

this.fn_callScript = function(strCallID, strMessage)

{

switch(strCallID)

{

case "ALARMON":

objEnv.userNotify(1001, strMessage);

break;

case "ALARMOFF":

objEnv.userNotify(1001, "Alarm has been stopped");

break;

case "ALARMCANCEL":

objEnv.userNotify(1001, "Alarm has been cancelled");

break;

case "ALARMCHECK":

objEnv.userNotify(1001, "Alarm is found");

break;


case "NOALARM":

objEnv.userNotify(1001, "No alarm is found");

break;

default:

trace("[fn_callScript] strCallID: "+ strCallID +" strMessage: "+ strMessage);

}

}

callScript 메소드의 사용법에 관한 설명은 자바에서 자바스크립트로 메시지 전달를 참조하십시오.

17.1.7 UI 디자인 확인

현재까지 작업한 애플리케이션을 실행하여 화면에서 어떻게 보여지는지 확인합니다.

1 넥사크로 스튜디오의 메뉴에서 [Generate > Launch]를 실행합니다.

2 Run Configuration 창에서 Nexacro Emulator를 선택한 후 Run 버튼을 클릭합니다.

알람 앱 개발 | 168

3 작업한 결과가 화면에 이상없이 나오는지 확인합니다.

이 앱은 모바일 용으로 디자인하려고 타이틀바와 상태바를 제거했습니다. 따라서 별도의 닫기(X)

버튼이 존재하지 않으므로 앱 실행시에는 Nexacro Browser보다는 Nexacro Emulator를 사용

하는 것이 좋습니다. 만약 Nexacro Browser로 실행했을 경우에는 강제로 프로세스를 종료시켜

줘야 합니다.

17.2 배포 파일 생성

넥사크로 스튜디오에서 제작한 애플리케이션을 배포하기 위해 코드, 라이브러리, 리소스 파일들을 각각 하나의 파일

로 묶는 패킹 작업을 수행합니다.

1 [Deploy > Packing(Archive&Update)] 메뉴를 실행하여 먼저 애플리케이션 산출물을 생성할 Output Path

를 설정한 후 [Next >] 버튼을 클릭합니다.

2 패킹 위저드 좌측의 실행 환경에서 Android를 선택하고 다른 옵션은 사용자의 환경에 맞게 적절히 선택해준

후 하단의 [Packing] 버튼을 클릭합니다.


패킹 옵션에 관한 설명은 Packing (Archive&Update) 메뉴를 참조하십시오.

3 패킹 결과를 확인합니다.

패킹이 성공적으로 수행되면 다음과 같이 결과가 출력됩니다.

http://docs.tobesoft.com/deployment_guide_nexacro_17_ko#26534c6595e1a845

알람 앱 개발 | 170

17.3 UI만 포함된 앱 빌드

이 단계는 넥사크로 스튜디오에서 앱 빌더 서버로 연결해 새로운 앱 빌더 프로젝트를 생성하고, 넥사크로 애플리케이

션을 적용할 수 있도록 설정된 안드로이드 프로젝트를 생성하여 앱 빌더 서버에 적용하는 과정입니다. 안드로이드 기

능을 구현하는 경우 앱 빌더 서버에서 안드로이드 프로젝트를 내보내기 전에 반드시 한번은 빌드 앱 과정을 수행해야

합니다.

1 전 단계인 패킹이 완료된 후 다음과 같이 결과창이 나오면 하단의 [Build App] 버튼을 클릭합니다.

만일 패킹 위저드를 닫은 경우에는 [Deploy > Build App] 메뉴를 클릭하여 빌드 앱 위저드를 실행합니다.

2 Build Target 옵션에서 Android를 선택하고 AppBuilder Login Information에 앱 빌더 URL과 계정 정보를

입력한 후 [Next] 버튼을 클릭합니다.

3 Target Project 항목에서 [+] 버튼을 클릭하여 새로운 앱 빌더 프로젝트 이름과 앱에서 사용할 패키지 이름을

설정합니다.


빌드 앱 위저드의 설정 단계에서는 새로운 프로젝트 생성, 빌드 환경 설정을 비롯한 여러 옵션을 설정합니다.

여기서 설정된 패키지 이름은 앱 빌더 서버에서 프로젝트 이름으로 등록되고 앱의 패키지 이름으로 사용되므로

신중히 설정합니다. 덧붙여서 앱 빌더에서 내보내기 할 때의 안드로이드 프로젝트 이름도 이 값으로 설정됩니

다.

Build Library는 앱에서 사용할 라이브러리를 설정할 수 있는 옵션으로 넥사크로 스튜디오와 같이 배포되는 버

전을 사용해야 합니다. 사전에 앱 빌더 서버에서 등록한 라이브러리 목록이 출력되는데 정확한 정보를 모르면 "

local library"를 선택합니다.

Signing은 안드로이드 앱 배포시 사용하는 디지털 서명 정보를 설정하는 옵션입니다. 사전에 앱 빌더 서버에

서명 정보와 키스토어 파일이 등록되어 있어야 목록이 출력됩니다.

4 새로운 프로젝트 이름을 설정하고 빌드 환경에서 옵션을 위와 같이 설정한 후 하단의 [Build] 버튼을 클릭하여

빌드를 수행합니다.

빌드가 성공적으로 수행되면 하단에 APK 파일 링크와 QR 코드가 표시됩니다.

알람 앱 개발 | 172

네이버 앱을 비롯한 일부 QR 코드 스캐너에서는 내려받을 파일 이름을 잘못 인식하여 "wakeme

up.apk; size=xxxx"와 같이 저장되는 오류가 있습니다. 이런 경우에는 파일을 APK로 인식하지

못하여 설치가 진행되지 않을 수 있으므로 파일 관리자에서 확장자를 APK로 변경 후 설치를 진행

하던지 버그가 없는 다른 QR 코드 스캐너를 사용하시기 바랍니다.

빌드 앱 과정을 수행하면 앱 빌더 서버에 새로운 앱 빌더 프로젝트가 생성되며 더블어 넥사크로 앱을 구동할 수

있게 설정된 안드로이드 프로젝트도 자동으로 생성됩니다. 이 안드로이드 프로젝트에는 넥사크로 앱 구동에 필

요한 넥사크로플랫폼 라이브러리, 설정 파일, 스플래시 이미지, 아이콘, 레이아웃 등의 리소스 등이 모두 포함

되어 있어 별도의 수정없이 바로 사용이 가능합니다.

이 단계까지 완료하면 앱을 설치하여 실행시켜 볼 수 있습니다. 그러나 실제 알람 동작에 필요한

로직의 구현은 되어있지 않기 때문에 UI만 확인이 가능합니다.

17.4 안드로이드 프로젝트 내보내기(Export)

앱에 안드로이드 기능을 추가하려면 앱 빌더 서버에서 넥사크로 앱 환경에 맞게 설정된 안드로이드 프로젝트를 내보

내기 하여 사용자가 직접 추가 작업을 진행해야 합니다. 앱 빌더 서버는 내보내기 기능을 웹 인터페이스로 제공합니다.

1 웹 브라우저로 앱 빌더 서버로 접속하여 로그인합니다.


2 화면 상단에서 [App > App List] 메뉴를 클릭하여 앱 빌더 프로젝트 목록을 화면으로 이동합니다.

3 앱 빌더 프로젝트 목록에서 자신의 프로젝트를 더블 클릭하여 프로젝트 상세 화면으로 이동합니다.

4 프로젝트 상세 화면에서 [Android platform]을 클릭하여 안드로이드 설정 화면으로 이동합니다.

알람 앱 개발 | 174

5 Project Modification 항목에서 [Export] 버튼을 클릭합니다. 내보내기 한 안드로이드 프로젝트는 압축된 형

태의 [프로젝트 이름].zip 파일로 내려받을 수 있습니다.

17.5 알람 기능 구현

앱 빌더 서버로부터 내보내기 하여 내려받은 기본 안드로이드 프로젝트를 베이스로 플랫폼에서 제공하는 라이브러리

를 이용하여 알람 기능을 구현합니다.

먼저 내려받은 안드로이드 프로젝트 파일을 적당한 위치에 압축 해제한 후 안드로이드 스튜디오에서 프로젝트의 루

트 디렉터리를 선택해 오픈합니다. 안드로이드 프로젝트의 경우에는 아래와 같이 디렉터리 아이콘이 안드로이드 스

튜디오 아이콘으로 표시됩니다.


안드로이드 스튜디오에서 외부 프로젝트를 오픈 시 버전을 비롯한 여러 환경의 차이로 오류가 발생할 수

있습니다. 대부분의 경우에는 자동으로 동기화 작업이 수행되어 해결되지만 그렇지 못한 경우에는 수동

으로 안드로이드 스튜디오 환경을 점검하여 해결하던지 아니면 최신 버전의 안드로이드 스튜디오를 사

용하시길 바랍니다.

안드로이드 스튜디오 Project 윈도우의 보기 모드를 "Project"로 설정한 후 프로젝트의 디렉터리 구조를 보면 다음과

같습니다. 아래 그림에서 왼쪽은 넥사크로플랫폼에 맞게 앱 빌더에서 생성한 초기 디렉터리 구조입니다. 새로 생성하

는 자바 클래스 파일은 java 디렉터리에 배치하고 각 리소스 파일은 리소스 성격에 맞는 디렉터리에 배치하여 구현 작

업을 완료하면 오른쪽과 같이 됩니다.

알람 앱 개발 | 176

17.5.1 알람음 리소스 추가

1 리소스 raw 디렉터리를 생성한 후 알람음으로 사용할 미디어 파일을 추가합니다.

먼저 안드로이드 스튜디오의 Project 윈도우에서 [src > main > res] 디렉터리 밑에 raw 디렉터리를 생성해야

합니다. 리소스 디렉터리 생성은 메뉴의 [File > New > Folder > Res Folder]를 실행하여 다음과 같이 생성해

줍니다.


그런 후 알람음으로 사용할 미디어 파일을 윈도우 탐색기로부터 복사하여 새로 생성한 raw 디렉터리로 붙여넣

기 합니다.

raw 리소스 디렉터리는 원시 형태로 저장해두고 사용할 수 있는 리소스 파일을 배치하는 곳으로

코드상에서 리소스 ID(R.raw.filename)를 사용해 리소스 파일에 직접 접근할 수 있습니다.

17.5.2 RingtonePlayingService 클래스 생성과 정의

1 RingtonePlayingService.java 파일을 생성합니다.

안드로이드 스튜디오의 메뉴에서 [File > New > Java Class]을 실행한 후 다음과 같이 설정하여 RingtonePlay

ingService.java 파일를 생성합니다.

알람 앱 개발 | 178

2 RingtonePlayingService 클래스를 정의합니다.

앞 단계에서 생성한 RingtonePlayingService.java 파일을 오픈하여 다음과 같이 RingtonePlayingService 클

래스를 정의합니다. RingtonePlayingService 클래스는 알람음을 재생하기 위해 사용합니다. 앱의 상태와 관

계없이 동작해야 하므로 서비스 형태로 동작합니다.

/* RingtonePlayingService.java */

package com.demo.wakemeup;

import android.app.Service;


import android.media.MediaPlayer;

import android.os.IBinder;

import android.support.annotation.Nullable;

import com.nexacro.NexacroActivity;

public class RingtonePlayingService extends Service {

MediaPlayer mediaPlayer;

int startId;

boolean isRunning;

@Nullable

@Override

public IBinder onBind(Intent intent) {

return null;

}

@Override


public void onCreate() {

super.onCreate();

}

@Override

public int onStartCommand(Intent intent, int flags, int startId) {

String getState = intent.getExtras().getString("state");

assert getState != null;

switch (getState) {

case "ALARMON":

startId = 1;

break;

case "ALARMOFF":

default:

startId = 0;

break;

}

// 알람음 재생중이 아니면 알람음 재생 시작

if(!this.isRunning && startId == 1) {

mediaPlayer = MediaPlayer.create(this, R.raw.anything);

mediaPlayer.start();

this.isRunning = true;

this.startId = 0;

}

// 알람음 재생중이면 알람음 재생 종료

else if(this.isRunning && startId == 0) {

mediaPlayer.stop();

mediaPlayer.reset();

mediaPlayer.release();

this.isRunning = false;

this.startId = 0;

}

// 알람음 재생중이 아니면 알람음 재생종료

else if(!this.isRunning && startId == 0) {

알람 앱 개발 | 180

this.isRunning = false;

this.startId = 0;

}

// 알람음 재생중이면 알람음 재생 시작

else if(this.isRunning && startId == 1){

this.isRunning = true;

this.startId = 1;

}

Intent nIntent = new Intent(this, NexacroActivity.class);

nIntent.addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP);

startActivity(nIntent);

return START_NOT_STICKY;

}

@Override

public void onDestroy() {

super.onDestroy();

}

}

AlarmReceiver에 의해 서비스가 시작되면 알람 상태값을 인텐트로부터 받아 알람 상태에 따라 MediaPlayer

를 사용해 알람음을 재생하거나 멈추는 동작을 수행합니다. 그리고 사용자가 알람음 재생을 멈출 수 있도록 Ne

xacroActivity를 시작하여 앱을 실행해 줍니다.

MediaPlayer 클래스 사용에 관한 설명은 미디어 플레이어를 사용한 알람음 재생을 참조하십시오.

앱 리소스에 등록되어 있는 알람 음원을 사용하는 방법은 앱 리소스 사용을 참조하십시오.

17.5.3 AlarmReceiver 클래스 생성과 정의

1 AlarmReceiver.java 파일을 생성합니다.

안드로이드 스튜디오의 메뉴에서 [File > New > Java Class]을 실행한 후 다음과 같이 설정하여 AlarmReceiv

er.java 파일를 생성합니다.


2 AlarmReceiver 클래스를 정의합니다.

앞 단계에서 생성한 AlarmReceiver.java 파일을 오픈하여 다음과 같이 AlarmReceiver 클래스를 정의합니다.

AlarmReceiver는 알람 발생시 시스템으로부터 이벤트를 수신하는 브로드캐스트 리시버 클래스입니다. 알람

이벤트가 발생하면 onReceive 메소드가 수행되며 알람음을 재생하는 서비스를 시작합니다.

/* AlarmReceiver.java */


import android.content.BroadcastReceiver;



public class AlarmReceiver extends BroadcastReceiver {

@Override


// intent로부터 전달받은 알람 상태값 ALARMON

String strAlarmState = intent.getExtras().getString("state");

// RingtonePlayingService 서비스 intent 생성

Intent service_intent = new Intent(context, RingtonePlayingService.class);

// RingtonePlayinService intent에 알람 상태값 저장

service_intent.putExtra("state", strAlarmState);

// 안드로이드 SDK 버전에 맞게 알람음 서비스 시작

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {

context.startForegroundService(service_intent);

}

알람 앱 개발 | 182

else {

context.startService(service_intent);

}

}

}

서비스를 시작하려면 인텐트를 생성해줘야 합니다. 서비스 호출에 사용할 인텐트는 호출할 RingtonePlayingS

ervice 클래스를 명시적으로 지정해서 생성해 줍니다. 그리고 생성된 인텐트에는 putExtra 메소드를 사용해 현

재 알람의 상태값을 저장해 줍니다.

마지막으로 안드로이드 버전에 맞게 startService 혹은 startForegroundService 메소드를 호출해 줍니다.

서비스에 관한 좀 더 자세한 설명은 Service 수행과 종료를 참조하십시오.

17.5.4 UserNotify 클래스 생성과 정의

1 UserNotify.java 파일을 생성합니다.

안드로이드 스튜디오의 메뉴에서 [File > New > Java Class]을 실행한 후 다음과 같이 설정하여 UserNotify.ja

va 파일를 생성합니다.

2 UserNotify 클래스를 정의합니다.

앞 단계에서 생성한 UserNotify.java 파일을 오픈하여 다음과 같이 UserNotify 클래스를 정의합니다. UserNo

tify 클래스는 넥사크로 화면에서 발생한 자바스크립트 이벤트를 자바 코드쪽으로 전달해주는 기능을 합니다.

넥사크로의 자바스크립트 코드에서 usernotify 메소드를 호출하면 UserNotify 객체의 onUserNotify 이벤트

함수가 동작하게 됩니다.


/* UserNotify.java */


import android.app.AlarmManager;

import android.app.PendingIntent;




import android.widget.Toast;


import com.nexacro.event.NexacroEventHandler;

import java.util.Calendar;

import java.util.Locale;

import static android.content.Context.ALARM_SERVICE;

public class UserNotify implements NexacroEventHandler {

AlarmManager alarmManager;

Context context;

PendingIntent pendingIntent;

Intent alarmIntent; //알람 리시버용 인텐트

NexacroActivity nActivity = com.nexacro.NexacroActivity.getInstance();

public UserNotify(Context mContext) {

this.context = mContext;

this.alarmIntent = new Intent(this.context, AlarmReceiver.class);

if(NexacroActivity.getInstance() != null)

NexacroActivity.getInstance().setNexacroEventListener(this);

}

@Override

public void onUserNotify(int nNotifyID, String strMessage) {

String strMsg = "";

알람 앱 개발 | 184

// 알람매니저 설정

alarmManager = (AlarmManager) this.context.getSystemService(ALARM_SERVICE);

switch(nNotifyID)

{

case 101:

/* Alarm set code */

case 102:

/* Alarm off code */

case 103:

/* Alarm cancel code */

case 104:

/* Alarm check code */

case 901:

/* Activity hidden code */

case 1001:

/* Toast messsage */

default:

Log.i("UserNotify", "Unknown nNotifyID: "+ nNotifyID);

}//end of switch(nNotifyID)

}

public void showToast(String strMessage) {

Toast.makeText(this.context, strMessage, Toast.LENGTH_LONG).show();

}

}

onUserNotify 이벤트 함수는 메시지의 ID값을 갖는 nNotifyID와 문자열 메시지를 갖는 strMessage 값을 매

개변수로 받을 수 있습니다. onUserNotify 이벤트 함수는 전달받은 nNotifyID 값에 따라 앱이 어떤 동작을 수

행할지 분기 처리합니다. 현재 넥사크로 자바스크립트에서 넘겨주는 nNotifyID와 strMessage 값은 다음과 같

습니다.

nNotifyID strMessage 설명 참조 설명

101 "2019,5,29

,18,17"

알람 설정, 사용자가 설정한 알람

시간 설정값

Calendar 오브젝트 시간 설정AlarmManager를 사용

한 알람 설정, 해제, 취소, 확인

102 "ALARMOF

F"

알람 중지(알람음 재생 중지) AlarmManager를 사용한 알람 설정, 해제, 취소, 확

인

103 "ALARMCA

NCEL"

알람 취소(설정한 알람 취소) AlarmManager를 사용한 알람 설정, 해제, 취소, 확

인

104 "ALARMCH

ECK"

알람 확인(설정한 알람이 있는지

확인)

AlarmManager를 사용한 알람 설정, 해제, 취소, 확

인


901 "ACTIVITYH

IDE"

앱 종료 혹은 모바일 장치의 홈 화

면으로 이동

앱의 종료앱을 백그라운드로 전환

1001 [기능 수행

결과 메시지]

UI로부터 전달된 문자열을 화면

에 토스트 메시지로 출력

nNotifyID strMessage 설명 참조 설명

case 101: 알람 설정


switch(nNotifyID)

{

case 101: //Alarm Setting

String[] strRecvTime = strMessage.split(",", 5);

// Calendar 객체 생성

final Calendar calendar = Calendar.getInstance();

// calendar에 시간 셋팅

calendar.set(Calendar.YEAR, Integer.parseInt(strRecvTime[0]));

calendar.set(Calendar.MONTH, Integer.parseInt(strRecvTime[1])-1);

calendar.set(Calendar.DATE, Integer.parseInt(strRecvTime[2]);

calendar.set(Calendar.HOUR_OF_DAY, Integer.parseInt(strRecvTime[3]));

calendar.set(Calendar.MINUTE, Integer.parseInt(strRecvTime[4]));

calendar.set(Calendar.SECOND, 0);

// receiver에 알람 상태값 설정

alarmIntent.putExtra("state","ALARMON");

// BroadcastReceiver를 시작하는 인텐트를 생성

pendingIntent = PendingIntent.getBroadcast(this.context,

0, alarmIntent, PendingIntent.FLAG_UPDATE_CURRENT);

// 알람 반복 셋팅

long aTime = System.currentTimeMillis();

long bTime = calendar.getTimeInMillis();

long oneday = 1000 * 60 * 60 * 24;

while(aTime>bTime){

알람 앱 개발 | 186

bTime += oneday;

}

//알람 설정. RTC_WAKEUP: 지정된 시간에 펜딩인텐트를 작동시키기 위해 장치를 깨움.

alarmManager.setRepeating(AlarmManager.RTC_WAKEUP, bTime, oneday, pendingIntent);

strMsg = "This alarm will ring at " +

calendar.getDisplayName(Calendar.MONTH, Calendar.LONG, Locale.ENGLISH) + "

" +

calendar.get(Calendar.DATE) + ", " +

calendar.get(Calendar.YEAR) + " " +

calendar.get(Calendar.HOUR_OF_DAY) + ":" +

calendar.get(Calendar.MINUTE);

if(nActivity != null) {

nActivity.callScript("fn_callScript('ALARMON', '"+strMsg+"')");

}

break;

case 102: 알람 중지(알람음 재생 중지)


switch(nNotifyID)

{

..

case 102: //Alarm OFF

//알람매니저 취소

alarmManager.cancel(pendingIntent);

alarmIntent.putExtra("state","ALARMOFF");

//서비스로 ALARMOFF 전달하여 알람음 재생 중지

this.context.sendBroadcast(alarmIntent);


nActivity.callScript("fn_callScript('ALARMOFF', '"+strMsg+"')");

}

break;


case 103: 알람 취소(설정한 알람 취소)


switch(nNotifyID)

{

..

case 103: //Alarm CANCEL

Intent cancelIntent = new Intent(this.context, AlarmReceiver.class);

PendingIntent cancelSender = PendingIntent.getBroadcast(this.context, 0,

cancelIntent, PendingIntent.FLAG_UPDATE_CURRENT);

if(cancelSender != null) {

alarmManager.cancel(cancelSender);

cancelSender.cancel();


nActivity.callScript("fn_callScript('ALARMCANCEL', '"+strMsg+"')");

}

}

else {


nActivity.callScript("fn_callScript('NOALARM', '"+strMsg+"')");

}

}

break;

case 104: 알람 확인(설정한 알람이 있는지 확인)


switch(nNotifyID)

{

..

case 104: //Alarm CHECK

Intent checkIntent = new Intent(this.context, AlarmReceiver.class);

PendingIntent checkSender = PendingIntent.getBroadcast(this.context, 0,

checkIntent, PendingIntent.FLAG_NO_CREATE);

if(checkSender == null) {

알람 앱 개발 | 188


nActivity.callScript("fn_callScript('NOALARM', '"+strMsg+"')");

}

}

else {


nActivity.callScript("fn_callScript('ALARMCHECK', '"+strMsg+"')");

}

}

break;

case 901: 앱 종료 혹은 모바일 장치의 홈 화면으로 이동


switch(nNotifyID)

{

..

case 901: //ACTIVITY hidden 처리

Intent intent = new Intent();

intent.setAction(Intent.ACTION_MAIN);

intent.addCategory(Intent.CATEGORY_HOME);

this.context.startActivity(intent);

break;

case 1001: 토스트 메시지 출력


switch(nNotifyID)

{

..

case 1001: //TOAST message

showToast(strMessage);

break;

위 Switch 문의 각 분기에서 현재 동작상황을 넥사크로 UI로 알려주기위해 callScript 메소드를 사용합니다. c

allScript 메소드는 자바에서 넥사크로 자바스크립트의 메소드를 호출하는 용도로 사용되는데 호출하면서 문자


열 변수를 같이 전달할 수 있기 때문에 메시지를 전달하는 용도로도 사용이 가능합니다.

usernotify 메소드에 관한 자세한 설명은 자바스크립트에서 자바로 메시지 전달에서 usernotify

메소드 편을 참조하십시오.

callScript 메소드에 관한 자세한 설명은 자바에서 자바스크립트로 메시지 전달를 참조하십시오.

17.5.5 부트스트랩 설정과 UserNotify 객체 생성

MainActivity.java 파일에서 부르스트랩, 프로젝트 URL을 설정하고 UserNotify 객체를 생성해줍니다.

앱 빌더 서버가 아닌 별도의 배포 서버를 운용하는 경우에는 Bootstrap URL과 Project URL을 배포 서버에 맞게 설정

해 줍니다. MainActivity.java 파일을 오픈하여 MainActivity 생성자에서 설정 정보를 수정합니다. 앱 빌더 서버를

배포 서버로 사용한다면 수정하지 않고 다음으로 넘어갑니다.

/* MainActivity.java */

public class MainActivity extends NexacroUpdatorActivity {

public MainActivity() {

super();

setBootstrapURL("http://[Bootstrap URL]/appbuilder/archives/629/_android_/start_android

.json");

setProjectURL("http://[Project URL]/appbuilder/archives/629/_android_/");

}

.

.

MainActivity 클래스에 onDestroy 메소드가 정의되어 있는지 확인하고 없으면 생성해 줍니다. 그리고 다음과 같이

UserNotify 객체를 생성해 주는 코드를 삽입합니다. UserNotify 객체는 넥사크로 UI의 자바스크립트 코드에서 user

notify 메소드 호출시 발생하는 이벤트를 처리해주는 클래스입니다.

/* MainActivity.java */

protected void onDestroy() {

new UserNotify(this);

super.onDestroy();

}

알람 앱 개발 | 190

MainActivity 클래스 설정에 관한 자세한 설명은 MainActivity 설정을 참조하십시오.

17.5.6 브로드캐스트 리시버와 서비스 추가

앱 매니페스트(AndroidManifest.xml)에 앱의 구성요소인 브로드캐스트 리시버와 서비스를 추가합니다.

AndroidManifest.xml 파일을 오픈하여 알람 발생시 이벤트를 수신할 AlarmReceiver와 알람음 재생에 사용할 Rin

gtonePlayingService 서비스를 application의 하위 요소로 다음과 같이 추가해 줍니다.



<application>

...

<receiver android:name=".AlarmReceiver" />

<service

android:name=".RingtonePlayingService"

android:enabled="true">

</service>

</application>

17.6 안드로이드 프로젝트 들여오기(Import)

앱 빌더 서버의 웹 콘솔을 통해서 구현 작업이 완료된 안드로이드 프로젝트를 앱 빌더 서버로 들여오기 합니다. 수정

된 안드로이드 프로젝트를 앱 빌더 서버로 들여오기 하면 향후 앱을 빌드할 때 새로 수정된 안드로이드 프로젝트를 기

반으로 빌드가 수행됩니다.

1 수정된 안드로이드 프로젝트의 루트 디렉터리를 통째로 zip 형식으로 압축하여 "[프로젝트 이름].zip" 파일을

생성합니다.

2 앱 빌더 서버의 프로젝트 상세 화면으로 들어가서 Project Modification 항목에서 [Import] 버튼을 클릭합니

다.

파일을 선택 팝업에서 파일을 선택하면 업로딩이 수행되는데 웹 브라우저의 상태표시줄에서 업로딩 상태를 확

인할 수 있습니다. 들여오기 기능은 내보내기 기능과 같은 위치에 있습니다.


안드로이드 프로젝트를 압축하여 들여오기 할 때 앱 빌더의 프로젝트 이름과 동일하게 설정해야

합니다. 이름이 다르면 들여오기가 실패하며 수정 내용이 서버에 반영되지 않으므로 주의하십시

오.

3 들여오기 옵션을 선택합니다.

프로젝트 파일의 업로딩이 완료되면 다음과 같이 들여오기 옵션을 선택할 수 있는 팝업이 오픈됩니다. 앱 빌더

콘솔에서 프로젝트 설정을 수정할 수 없게 하려면 [YES], 있게 하려면 [NO]를 선택합니다. 여기서는 [YES]를

선택합니다.

17.7 전체 앱 빌드

이 과정은 기본적으로 앞에서 설명한 UI만 포함된 앱 빌드 과정과 동일합니다. 다만 앞의 과정에서 앱 빌더 프로젝트

와 안드로이드 프로젝트의 생성과 설정을 완료했으므로 앞의 빌드 앱 과정에서 생성한 앱 빌더 프로젝트만 Target Pr

oject 옵션에 지정해줍니다.

알람 앱 개발 | 192

1 넥사크로 스튜디오의 [Deploy > Build App] 메뉴를 클릭하여 빌드 앱 위저드를 실행합니다.

2 [빌드 앱 위저드 > Build Target] Build Target 항목에서 Android를 선택하고 AppBuilder Login Informatio

n에 앱 빌더 URL과 계정 정보를 입력한 후 [Next] 버튼을 클릭합니다.

3 [빌드 앱 위저드 > AppBuilder] Target Project 항목에서 앞의 빌드 앱 과정에서 생성했던 프로젝트를 선택하

고 적절한 옵션을 선택 후 하단의 [Build] 버튼을 클릭하여 빌드를 진행합니다.

4 빌드 결과를 확인합니다.

빌드가 성공적으로 수행되면 하단에 APK 파일 링크와 QR 코드가 표시됩니다.

넥사크로 스튜디오가 설치되어 있지 않거나 사용할 수 없는 환경에서는 앱 빌더의 웹 인터페이스

를 통해 직접 빌드 앱 작업을 진행할 수 있습니다. 더 자세한 내용은 앱 빌더에서 직접 빌드하기를

참조하십시오.

17.8 앱 설치 및 실행

알람 앱 제작을 완료했으면 스마트폰으로 앱을 내려받아 설치한 후 실행해 봅니다. 시간을 설정한 후 알람을 설정/해

지시켜 봅니다. 버튼 터치하면 알람 기능이 수행되며 하단에 토스트 메시지가 출력됩니다.


17.8.1 앱 설치

앞 단계의 앱 빌드 결과물로 생성된 QR 코드를 스마트폰의 QR 코드 리더기로 읽거나, URL을 직접 웹 브라우저에서

오픈하여 앱 패키지(APK) 파일을 내려받습니다. 다운로딩이 완료되면 내려받은 앱 패키지(APK) 파일을 실행하여 설

치합니다.

17.8.2 알람 설정/중지

알람을 설정한 후 알람 음이 발생하면 알람을 중지 시켜 봅니다. 버튼을 터치하여 기능이 수행되면 앱 화면 하단에 토

스트 메시지가 출력되어 결과를 확인할 수 있습니다.

1 날짜와 시간을 설정한 후 Alarm Setting 버튼을 터치합니다.

알람 앱 개발 | 194

2 Alarm CHECK 버튼을 터치하여 알람이 설정됐는지 확인합니다.

3 설정된 시간에 알람음이 재생되는지 확인하고, Alarm OFF 버튼을 터치하여 알람음 재생이 멈추는지 확인합니

다.

17.8.3 알람 설정/취소

알람을 설정했다가 알람을 취소 시켜 봅니다. 버튼을 터치하여 기능이 수행되면 앱 화면 하단에 토스트 메시지가 출력

되어 결과를 확인할 수 있습니다.

1 날짜와 시간을 설정한 후 Alarm Setting 버튼을 터치합니다.

2 Alarm CHECK 버튼을 터치하여 알람이 설정됐는지 확인합니다.

3 Alarm CANCEL 버튼을 터치하여 설정한 알람을 취소합니다.


4 Alarm CHECK 버튼을 터치하여 알람이 취소됐는지(설정된 알람이 없는지) 확인합니다.

17.9 앱 데모 및 소스코드

17.9.1 알람 앱 내려받기

모바일 장치에서 알람 앱 데모를 내려받아 설치하려면 QR 코드 스캐너로 아래 이미지를 스캔하십시오.

17.9.2 알람 앱 소스 코드 내려받기

알람 앱 데모의 소스 코드를 내려받으려면 다음 표의 링크를 클릭하십시오.

넥사크로플랫폼 프로젝트 https://github.com/TOBESOFT-DOCS/demo_nexacroplatform_17_WakeMeUp/archiv

e/master.zip

안드로이드 프로젝트 https://github.com/TOBESOFT-DOCS/demo_android_wakemeup/archive/master.zip

https://github.com/TOBESOFT-DOCS/demo_nexacroplatform_17_WakeMeUp/archive/master.zip

https://github.com/TOBESOFT-DOCS/demo_nexacroplatform_17_WakeMeUp/archive/master.zip

https://github.com/TOBESOFT-DOCS/demo_android_wakemeup/archive/master.zip

알람 앱 개발 | 196

안드로이드 프로젝트 소스는 넥사크로 플랫폼 환경에 맞게 설정되어 있으며 앱 빌더에 들여오기(Import

)해서 사용할 수 있습니다.

17.10 참고

17.10.1 앱 빌더에서 직접 빌드하기

앱 빌더는 넥사크로 스튜디오를 통해서도 사용이 가능하지만 앱 빌더에서 제공하는 웹 인터페이스를 통해서도 사용

이 가능합니다. 이는 개발자뿐 아니라 앱 개발 지식이 없거나 개발 환경을 구성하기 힘든 관리자 등이 앱을 빌드할 수

있도록 도와줍니다.

이번 장에서는 사용자가 넥사크로 스튜디오를 사용하지 않고 직접 웹 인터페이스를 사용해 앱을 빌드하는 과정을 설

명합니다.

이 과정은 넥사크로 스튜디오를 사용해 빌드 앱 과정을 한번 수행한 이후에 진행할 수 있습니다. 그 이유

는 빌드 앱을 수행하는 과정에서 앱 빌더가 앱을 빌드 할 수 있는 환경을 구성하기 때문입니다.

1 웹 브라우저로 앱 빌더 서버로 접속하여 로그인합니다.


2 화면 상단에서 [App > App List] 메뉴를 클릭하여 앱 빌더 프로젝트 목록을 화면으로 이동합니다.

3 앱 빌더 프로젝트 목록에서 자신의 프로젝트를 더블 클릭하여 프로젝트 상세 화면으로 이동합니다.

4 [App Info] 메뉴에서 빌드 준비가 되어 있는지 확인합니다.

앞 단계의 프로젝트 목록에서 프로젝트 항목을 더블 클릭하면 [App Info] 화면으로 이동합니다. 여기서 빌드

준비가 되어 있는지 Target OS와 Nexacro application resource 항목을 확인합니다.

Target OS는 빌드를 수행할 운영체제를 선택하는 항목으로 빌드를 원하는 운영체제에 체크가 되어 있는지, 부

알람 앱 개발 | 198

트스트랩 파일이 등록되어 있는지 확인합니다.

Nexacro application resource는 빌드를 수행할 애플리케이션 파일을 확인하는 항목입니다. 빌드에 필요한

넥사크로 애플리케이션 코드와 라이브러리, 리소스 파일이 등록되어 있는지 확인합니다. 여기서 보이는 apk

파일은 빌드를 한번이라도 수행시 자동으로 등록되는 항목입니다.

Target OS가 체크되어 있지 않거나 Nexacro application resource 파일이 등록되어 있지 않으

면 빌드가 수행되지 않습니다. UI만 포함된 앱 빌드 과정을 먼저 진행하십시오.

5 [Build Application] 메뉴를 클릭하여 빌드 화면으로 이동한 후 [Start to build] 버튼을 클릭하여 빌드를 수행

합니다.

6 빌드 결과를 확인합니다.


메뉴 설명

1 운영체제 운영체제 이름을 표시해줍니다. 앱 빌더는 안드로이드, iOS, 맥OS를 지원합니다.

2 패키지 파일 다운로드 링크 빌드된 패키지 파일(APK)을 다운로드 할 수 있는 링크입니다.

3 QR 코드 QR 코드 스캐너를 사용해 패키지 파일을 내려받을 수 있는 링크입니다.

4 Rebuild 빌드 작업을 다시 수행합니다.

5 View Log 빌드 로그를 보여줍니다.

6 Last Build Time 최종 빌드 시간을 보여줍니다.

7 빌드 성공 여부 빌드가 성공하면 O 표시, 실패하면 X 표시를 합니다.

8 Rebuild All 모든 운영체제의 빌드 작업을 다시 수행합니다.

만약 빌드에 실패하면 다음과 같이 에러 메시지 창이 표시됩니다.

알람 앱 개발 | 200

17.10.2 자바스크립트와 자바간 통신 방법

자바스크립트에서 자바로 메시지 전달

넥사크로플랫폼 자바스크립트에서 안드로이드 자바로 메시지를 전달할 수 있는 방법은 execExtAPI 메소드를 사용하

는 방법과 userNotify 메소드를 사용하는 방법 두 가지가 있습니다. 두 방식 모두 메시지를 전달할 수 있지만 구현 방

법 및 특성이 다르므로 용도에 맞게 선택합니다.

execExtAPI 메소드 userNotify 메소드

동작 환경 안드로이드, iOS 안드로이드

용도 앱 간의 메시지 전달. 자신을 포함한 안드

로이드 시스템 상의 모든 앱으로 전달 가

능.

앱 내부 객체간 메시지 전달

오브젝트 ExternalAPI Environment

전달 인수 Receive ID

Application ID

API name

Parameter

Notify ID

Message

동작 방식 브로드캐스팅 방식. 안드로이드 브로드캐

스트 스킴을 사용하여 메시지를 전달. 자

바 브로드캐스트 리시버를 통해 메시지를

받을 수 있음.

이벤트 방식. 자바스크립트에서 전달한

메시지를 자바 이벤트 함수를 통해 받을

수 있음.

execExtAPI 메소드

ExternalAPI는 앱 간의 연동이 필요한 경우에 사용할 수 있는 오브젝트입니다. execExtAPI는 메시지 전달을 수행하

는 메소드로 메시지를 전달하여 외부 앱을 실행하거나 특정 기능을 수행하도록 할 수 있습니다. 물론 모든 앱과의 연

동이 가능한 것은 아니며 자바스크립트에서 보내는 메시지를 받고 처리하는 로직이 자바로 구현된 앱과만 연동할 수

있습니다. 다음은 자바스크립트에서 execExtAPI 메소드를 사용해 메시지를 전달하는 예입니다.

/* nexacro */

var strRecvID = "nexacrowakemeup";

var strApplicationID = "com.nexacro.wakemeup";

var strAPI = "setAlarm";

var strParams = sCurrentTime;

this.ExternalAPI00.execExtAPI(strRecvID, strApplicationID, strAPI, strParams);

안드로이드 환경에서는 execExtAPI 메소드를 호출하면 메시지가 브로드캐스트 형식으로 전달됩니다. 따라서 이 메


시지를 받으려면 자바에서 해당 메시지를 받을 수 있도록 인텐트 필터와 브로드캐스트 리시버가 설정되어 있어야 합

니다. 인텐트 필터는 안드로이드 시스템에서 보내는 수많은 브로드캐스트 메시지 중 원하는 메시지를 골라서 받을 때

사용합니다. 브로드캐스트 리시버는 전달받은 브로드캐스트 메시지의 처리를 담당합니다. 다음은 브로드캐스트 메시

지를 자바에서 받을 수 있도록 AndroidManifest.xml에 브로드캐스트 리시버와 인텐트 필터를 설정한 예입니다.


<receiver android:name=".ExternalAPIReceiver" android:enabled="true">

<intent-filter>

<action android:name="com.nexacro.wakemeup.extAPI" />

</intent-filter>

</receiver>

안드로이드 시스템으로부터 전달받은 브로드캐스트 메시지는 브로드캐스트 리시버로 등록한 ExternalAPIReceiver

객체의 onReceive 메소드에서 인텐트 객체를 통해 추출할 수 있습니다. 다음은 브로드캐스트 리시버 클래스의 onRe

ceiver 메소드에서 인텐트 객체로부터 메시지를 추출하는 예를 보여줍니다.

/* Android */

public class ExternalAPIReceiver extends BroadcastReceiver {

@Override


//브로드캐스트 메시지를 받으면 인텐트로부터 받은 내용을 로그로 출력

Log.i("nexacro", ">> [com.nexacro.wakemeup] message received.");

Log.i("nexacro", "- sender:" + intent.getExtras().getString("sender"));

Log.i("nexacro", "- recvID:" + intent.getExtras().getString("recvID"));

Log.i("nexacro", "- apiname:" + intent.getExtras().getString("apiname"));

Log.i("nexacro", "- params:" + intent.getExtras().getString("params"));

}

}

인텐트 객체로부터 메시지를 추출할 때는 getExtras 메소드를 사용하고 인텐트 객체에 데이터를 저장할 땐 putExtra

메소드를 사용합니다. getExtras, putExtra 메소드 사용시 데이터 타입에 따라 getString, getInt 등의 메소드를 이

용 할 수 있습니다.

String name = intent.getExtras().getString("name");

int age = intent.getExtras().getInt("age");

알람 앱 개발 | 202

userNotify 메소드

userNotify는 Environment 오브젝트의 메소드로 자바스크립트에서 자바로 메시지를 전달 할 때 사용합니다. 메시

지는 문자열 형태로 전달되며 메시지마다 ID를 설정할 수 있어 간단한 메시지 관리가 가능합니다.

nexacro.Environment.userNotify(nNotifyID, strMessage)

다음은 자바스크립트에서 userNotify 메소드를 사용하는 예입니다.

/* nexacro */


objEnv.userNotify( 200, "Hello usernotify!" );

userNotify 메소드를 사용해 자바스크립트 코드에서 전달한 메시지는 자바 코드에서 이벤트 형태로 받을 수 있는데

이 때, 사용되는 이벤트 함수가 onUserNotify 입니다. 자바에서 onUserNotify 이벤트 함수를 사용하려면 우선 Nexa

croEventHandler 인터페이스를 상속받아 다음과 같이 UserNotify 클래스를 정의합니다. 그리고 onUserNotify 이

벤트 함수를 재정의 하여 필요한 처리를 해줍니다.

/*

UserNotify.java: UserNotify 클래스

*/

package com.nexacro.wakemeup;



import com.nexacro.event.NexacroEventHandler;

public class UserNotify implements NexacroEventHandler {

public UserNotify() {

if(NexacroActivity.getInstance() != null)

NexacroActivity.getInstance().setNexacroEventListener(this);

}

@Override


// TODO :

//Log.d("UserNotify", "onUserNotify nNotifyID : " + nNotifyID + " strMessage : " +

strMessage);


}

}

클래스를 정의했으면 다음은 이를 사용할 수 있도록 UserNotify 객체를 생성합니다. UserNotify 객체 생성은 그 시점

이 중요한데 넥사크로 액티비티 로딩이 완료된 이후에 생성해야 합니다. 넥사크로 엔진 업데이트 작업이 완료되고 넥

사크로 액티비티가 화면에 로딩된 이후, 예를 들면 MainActivity가 종료되는 시점인 onDestroy에서 해주거나 그 이

후 프로세스에 해당하는 Activity나 서비스 등에서 생성해줍니다. 다음은 MainActivity가 종료되는 시점에 UserNoti

fy 객체의 인스턴스를 생성해주는 예를 보여줍니다.

/* Android */


.

.

@Override


new UserNotify();

super.onDestroy();

}

}

위와 같이 UserNotify 객체를 생성한 다음에는 자바스크립트 코드에서 userNotify 메소드를 호출할 때마다 자바 코

드에서 onUserNotify 이벤트 함수가 호출됩니다.

userNotify 메소드는 2019년 4월 정기 버전(17.0.0.1900)부터 지원하며 안드로이드 넥사크로 브라우

저 환경에서만 사용이 가능합니다.

자바에서 자바스크립트로 메시지 전달

callScript 메소드

자바 코드에서 자바스크립트로 메시지를 보낼 때는 callScript 메소드를 사용합니다. callScript는 자바 코드쪽에서 X

ADL에 선언되어 있는 자바스크립트 메소드를 호출하는 기능인데 인수로 문자열 형식의 메시지를 전달할 수 있습니

다. callScript는 NexacroActivity 클래스에 정의되어 있으며 사용 방법은 다음과 같습니다.

/* JAVA */

NexacroActivity act = NexacroActivity.getInstance();

if(act!=null)act.callScript("fn_test('Hello nexacro!')");

알람 앱 개발 | 204

자바 코드에서 위와 같이 메소드를 호출하면 자바스크립트 코드의 fn_test 메소드가 호출됩니다. 단, callScript() 호

출시 인수로 설정한 "fn_test('arguments')"와 동일한 함수 명으로 넥사크로의 XADL에 메소드가 정의되어 있어야

합니다.

/* Javascript in XADL file */

this.fn_test = function(arg)

{

trace("[testAlarm]: arg="+ arg);

};

17.10.3 앱 시작점 지정

안드로이드 앱에서는 별도의 main 함수가 존재하지 않기 때문에 사용자가 직접 앱의 시작점을 설정해야 합니다. 일

반적으로는 프로젝트 생성시 디폴트로 MainActivity가 시작점으로 지정되지만 필요에 따라 다른 activity로도 변경이

가능합니다. 앱의 시작점은 AndroidManifest.xml 파일에서 다음과 같이 설정할 수 있습니다.


<activity

android:name="com.demo.wakemeup.MainActivity"

android:label="@string/app_name">

<intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

우선 앱 시작시 실행될 activity를 선언하고 해당 activity에 intent-filter를 설정합니다. intent-filter의 action은 "an

droid.intent.action.MAIN", category는 "android.intent.category.LAUNCHER"로 설정하면 앱 실행시 가장 먼저

해당 intent-filter가 설정된 activity가 실행됩니다. 여기서는 activity의 이름을 MainActivity로 설정합니다.

17.10.4 MainActivity 설정

MainActivity에서는 앱 실행에 필요한 Bootstrap URL(start_android.json), Project URL(제너레이트된 프로젝트

소스)을 설정하고 NexacroUpdatorActivity의 인스턴스를 생성합니다. NexacroUpdatorActivity에서는 설정된 UR

L의 정보를 확인하여 업데이트 작업을 수행한 후 넥사크로 애플리케이션 화면을 출력하는 NexacroActivity를 호출합

니다.

NexacroUpdatorActivity 클래스나 NexacroActivity 클래스는 앱 빌드시 등록한 라이브러리(nexacro17.android.j


ar)에서 제공하므로 사용자가 별도로 구현할 필요는 없습니다. 사용자는 MainActivity 클래스 선언시 NexacroUpda

torActivity를 상속받아 다음과 같이 구현해줍니다.

/* MainActivity.java*/


public MainActivity() {

super();

setBootstrapURL("http://[Bootstrap File URL]/start_android.json");

setProjectURL("http://[Generated Project URL]/");

}

@Override

protected void onCreate(Bundle savedInstanceState) {

NexacroResourceManager.createInstance(this);

NexacroResourceManager.getInstance().setDirect(false);

Intent intent = getIntent();

if(intent != null) {

String bootstrapURL = intent.getStringExtra("bootstrapURL");

String projectUrl = intent.getStringExtra("projectUrl");

if(bootstrapURL != null) {

setBootstrapURL(bootstrapURL);

setProjectURL(projectUrl);

}

}

super.onCreate(savedInstanceState);

}

@Override

public void setContentView(View view) {

super.setContentView(view);

}

@Override



super.onDestroy();

알람 앱 개발 | 206

}

}

MainActivity 클래스 선언시 중요한 부분은 Bootstrap URL과 Project URL의 설정입니다. NexacroUpdatorActivit

y는 이 정보를 바탕으로 앱 업데이트를 진행하고 실행합니다.

Bootstrap URL 설정은 start_android.json 파일이 배치된 서버의 URL 경로를 setBootstrapURL 메소드를 사용하

여 설정합니다.

setBootstrapURL("http://[Bootstrap File URL]/start_android.json");

Project URL 설정은 제너레이트된 프로젝트 소스가 배치된 서버의 URL 경로를 setProjectURL 메소드를 사용하여

설정합니다. URL의 끝에는 "/"를 붙여줍니다.

setProjectURL("http://[Generated Project URL]/");

다음은 onDestroy 메소드에서 UserNotify 객체의 인스턴스를 생성해 줍니다. UserNotify는 넥사크로의 자바스크립

트에서 안드로이드의 자바로 메시지 전달을 담당하는 이벤트 객체입니다.



super.onDestroy();

}

UserNotify 클래스는 사용자가 직접 작성해야 합니다. 자세한 구현 방법은 자바스크립트에서 자바로 메시지 전달에

서 UserNotify 단락을 참조하시기 바랍니다.

17.10.5 앱의 종료

현재 실행중인 앱을 종료시키려면 넥사크로 Application 객체의 exit 메소드를 사용합니다. 넥사크로 앱은 기본적으

로 수행중에 NexacroActivity라는 단일 Activity 구조로 동작하므로 넥사크로에서 exit 메소드를 호출하여 종료해 버

리면 앱이 종료됩니다.

다음은 사용자가 모바일 장치의 뒤로가기 버튼을 터치했을 때 자바스크립트에서의 처리 함수입니다.

this.SetAlarm_ondevicebuttonup = function(obj:nexacro.Form,e:nexacro.DeviceButtonEventInfo)

{

//back button

if(e.button == 2)


{


{

var objApp = nexacro.getApplication();

objApp.exit();

}

}

};

17.10.6 앱을 백그라운드로 전환

사용자가 앱을 나가려 할 때 앱을 완전히 종료시키지 않고 백그라운드로 전환할 수 있습니다. 이는 작업중이던 화면을

유지해야 할 때 유용합니다. 앱의 백그라운드 전환은 크게 intent를 사용해 홈 화면으로 이동하는 방법과 moveTaskT

oBack 메소드를 사용하는 두 가지 방법이 있습니다. 여기서는 좀 더 간편한 방법인 intent를 이용한 방법을 사용합니

다.

다음은 사용자가 모바일 장치의 Back 버튼을 눌렀을 때 자바스크립트에서의 처리 함수입니다. userNotify 메소드를

사용해 자바 코드 쪽으로 앱을 백그라운드로 전환하도록 메시지를 전달합니다. userNotify 메소드의 인수로 설정한 n

NotifyID와 strMessage 값은 앱 개발시 임의로 지정한 값으로 필요시 변경해서 사용할 수 있습니다.

this.SetAlarm_ondevicebuttonup = function(obj:nexacro.Form,e:nexacro.DeviceButtonEventInfo)

{

//back button

if(e.button == 2)

{


{

var strParams = "ACTIVITYHIDE";



}

}

};

다음은 자바스크립트에서 userNotify 메소드를 호출했을 때 자바에서 발생한 이벤트를 처리하는 onUserNotify 이벤

트 함수의 일부입니다. 자바스크립트에서 보낸 메시지를 확인하여 intent를 설정하여 장치의 홈 화면으로 이동하는

작업을 수행합니다.

알람 앱 개발 | 208

@Override


switch(nNotifyID)

{

case 901: //ACTIVITY hidden 처리, 홈 화면으로 이동

Intent intent = new Intent();

intent.setAction(Intent.ACTION_MAIN);

intent.addCategory(Intent.CATEGORY_HOME);

this.context.startActivity(intent);

break;

Intent의 액션을 "ACTION_MAIN"으로 설정하고, 카테고리를 "CATEGORY_HOME"으로 설정한 후 activity를 전

환하는 startActivity 메소드를 호출하면 모바일 장치의 홈 스크린 화면으로 전환됩니다.

17.10.7 앱 리소스 사용

안드로이드 앱 배포시 사용하는 apk 파일은 앱의 수행에 관련된 코드뿐 아니라 이미지, 오디오, 문자열 등의 리소스

도 담을 수 있습니다. 안드로이드 스튜디오에서 포함시킨 리소스는 SDK 빌드 도구가 고유한 정수형 ID를 자동으로

부여하여 관리합니다. 이 리소스 ID를 사용하면 앱에서 특정 리소스에 접근하여 사용하는 것이 가능해집니다.

public static final class raw {

public static final int jetaime=0x7f0b0000;

public static final int ouu=0x7f0b0001;

}

예를 들어, 오디오 파일인 jetaime.mp3를 res/raw/ 디렉터리에 추가했다면 위와 같이 SDK 도구가 앱 빌드시 자동으

로 리소스 ID를 생성해 줍니다.


사용자가 앱에서 리소스를 사용하려면 복잡한 정수형 ID값을 찾아서 입력할 필요 없이 다음과 같은 형식으로 사용이

가능합니다.

R.raw.jetaime

R은 R 클래스를 의미하고, raw는 리소스 유형, jetaime은 리소스 이름을 의미합니다. 이 형식은 프로젝트의 리소스

디렉터리 구조와 같습니다. 이미지, 문자열 등의 다른 종류의 리소스들에 대해서도 같은 형식으로 사용이 가능합니다.

다음은 실제 코드에서 리소스에 접근하는 예를 보여줍니다. 앱 리소스의 오디오 파일을 MediaPlayer에서 재생하기

위해 설정하는 예입니다.

mediaPlayer = MediaPlayer.create(this, R.raw.jetaime);

17.10.8 Calendar 오브젝트 시간 설정

알람 설정시 사용자로부터 입력받은 시간을 calendar 오브젝트를 사용하여 설정하면 편리합니다. 일반적으로는 그냥

입력받은 값을 설정하면 되지만 월과 초 설정은 유의해야 합니다.

월 설정의 경우는 Calendar.MONTH에 값을 설정해줄 때 원하는 월-1을 설정해야 합니다. 이는 Calendar.MONTH

값의 범위가 0~11까지이기 때문으로 설정할 월에서 -1을 해줘야 원하는 월값을 입력할 수 있습니다.

초 설정의 경우는 Calendar.SECOND를 0으로 설정합니다. 일반적으로 알람 설정시 초 단위까지는 설정하지 않으므

로 Calendar.SECOND 값 설정없이 알람을 설정하면 알람을 설정했던 초 값이 자동으로 설정되어 설정한 분(Calend

ar.MINUTE)의 정각에 알람이 울리지 않게 됩니다.

Calendar calendar = Calendar.getInstance();

calendar.set(Calendar.YEAR, intYear);

calendar.set(Calendar.MONTH, intMonth-1);

calendar.set(Calendar.DATE, intDay);

calendar.set(Calendar.HOUR_OF_DAY, intHour);

calendar.set(Calendar.MINUTE, intMin);


alarm_manager.set(AlarmManager.RTC_WAKEUP, calendar.getTimeInMillis(), pendingIntent);

알람 앱 개발 | 210

17.10.9 AlarmManager를 사용한 알람 설정, 해제, 취소, 확인

앱 개발시 원하는 시간에 특정 작업을 수행하도록 해야 하는 경우가 있습니다. 안드로이드 시스템에서는 원하는 시간

에 시스템으로부터 알림을 받을 수 있는 알람 기능을 AlarmManager 컴포넌트를 통해 제공합니다. AlarmManager

를 사용해 시스템에 알람을 등록해 놓으면 설정된 시간에 맞춰 시스템이 메시지를 보내 앱에 등록된 브로드캐스트 리

시버에 알려줍니다. 사용자는 브로드캐스트 리시버를 통해 정해진 시간에 수행해야 할 작업을 수행합니다.

AlarmManager를 사용한 알람 설정은 다음과 같이 진행됩니다.

// 인텐트를 수신할 BroadcastReceiver 클래스 설정

Intent alarmIntent = new Intent([현재 activity].this, [intent를 수신할 class]);

// 인텐트를 통해 전달할 값 설정

alarmIntent.putExtra("state","ALARMON");

// BroadcastReceiver를 시작하는 인텐트 생성

PendingIntent pendingIntent = PendingIntent.getBroadcast([현재 activity].this,

0, alarmIntent, PendingIntent.FLAG_UPDATE_CURRENT);

// calendar 객체에 알람 시간 설정

Calendar calendar = Calendar.getInstance();

calendar.set(Calendar.YEAR, intYear);

calendar.set(Calendar.MONTH, intMonth-1);

calendar.set(Calendar.DATE, intDay);

calendar.set(Calendar.HOUR_OF_DAY, intHour);

calendar.set(Calendar.MINUTE, intMin);


// AlarmManager 객체 생성

AlarmManager alarmManager = (AlarmManager) getSystemService(ALARM_SERVICE);

// 알람 설정

alarmManager.set(AlarmManager.RTC_WAKEUP, calendar.getTimeInMillis(), pendingIntent);

설정한 알람을 해제(종료)시키려면 다음과 같이 AlarmManager의 cancel 메소드를 사용합니다. 그리고 RingtoneP

layingService에서 알람음 재생을 멈추기 위해 "ALARMOFF" 상태값을 인텐트에 담아 전달합니다.


//알람매니저 cancel

alarmManager.cancel(pendingIntent);

//필요한 경우 인텐트를 통해 값 전달

alarmIntent.putExtra("state","ALARMOFF");

//서비스로 ALARMOFF 전달하여 알람음 재생 stop

this.context.sendBroadcast(alarmIntent);

설정된 알람을 취소시키려면 다음과 같이 알람 해제와 더블어 브로드캐스트 리시버인 AlarmReceiver의 등록을 해제

시켜줘야 합니다.

Intent cancelIntent = new Intent(this.context, AlarmReceiver.class);

PendingIntent cancelSender = PendingIntent.getBroadcast(this.context, 0, cancelIntent,

PendingIntent.FLAG_UPDATE_CURRENT);

if(cancelSender != null) {

alarmManager.cancel(cancelSender);

cancelSender.cancel();

strMsg = "설정된 알람을 취소했습니다.";

}

else {

strMsg = "취소할 알람이 없습니다.";

}

알람이 설정되어 있는지 확인하려면 브로드캐스트 리시버가 등록되어 있는지 확인해줍니다.

Intent checkIntent = new Intent(this.context, AlarmReceiver.class);

PendingIntent checkSender = PendingIntent.getBroadcast(this.context, 0, checkIntent,

PendingIntent.FLAG_NO_CREATE);

if(checkSender == null) {

strMsg = "설정된 알람이 없습니다.";

}

else {

strMsg = "설정된 알람이 있습니다.";

}

알람 앱 개발 | 212

17.10.10 Service 수행과 종료

서비스는 사용자와 상호작용하는 Activity와는 달리 백그라운드에서 동작하는 컴포넌트입니다. Activity의 상태와 관

계없이 어떤 작업을 수행해야 할 경우에 사용합니다. 예를 들어, 음악 재생이나 알람음 재생같은 경우 앱이 포그라운

드에서 열려있지 않거나 종료된 상태에서도 기능이 계속 수행되어야 합니다. 이런 경우에 서비스를 사용합니다.

서비스를 수행하려면 우선 서비스 클래스의 intent 객체를 다음과 같이 생성합니다. RingtonePlayingService 클래

스는 미디어 파일을 재생하는 MediaPlayer 서비스로 Service 클래스를 상속받아 구현합니다.

// RingtonePlayingService 서비스 인텐트 생성

Intent service_intent = new Intent(context, RingtonePlayingService.class);

생성된 RingtonePlayingService intent는 startService 메소드를 사용해 서비스로 실행할 수 있습니다. 한가지 유의

할 점은 안드로이드 API 버전에 따라 서비스 실행시 사용하는 방식에 차이가 있다는 것입니다. Oreo(8.0, API level

26)에서는 서비스의 백그라운드 실행을 금지하기 때문에 서비스 실행을 포그라운드(startForegroundService)로 실

행해야 하며 그 이전 버전에서는 백그라운드(startService)로 실행합니다. 따라서 버전을 체크하여 현재 장치에서 동

작중인 SDK 버전이 오레오(8.0, API level 26) 버전보다 높으면 startForegroundService 메소드를 호출하여 서비스

를 시작하고, 낮으면 startService 메소드를 호출하여 서비스를 시작합니다.

// RingtonePlayingService 서비스 시작

if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O){

this.context.startForegroundService(service_intent);

}else{

this.context.startService(service_intent);

}

API 레벨(SDK 버전) 체크에 관한 자세한 설명은 다음을 참조하십시오.

https://developer.android.com/reference/android/os/Build.VERSION.html

https://developer.android.com/reference/android/os/Build.VERSION_CODES.html

필요에 따라 서비스로 상태값과 같은 데이터를 전달해야 할 경우에는 intent 객체를 사용할 수 있습니다. intent로부

터 값을 가져올 때는 getExtras 메소드를 사용하고 값을 저장할 때는 putExtras 메소드를 사용합니다.

// intent로부터 전달받은 상태값

String strAlarmState = intent.getExtras().getString("state");

// RingtonePlayinService로 상태값 전달

service_intent.putExtra("state", strAlarmState);

https://developer.android.com/reference/android/os/Build.VERSION.html

https://developer.android.com/reference/android/os/Build.VERSION_CODES.html


17.10.11 미디어 플레이어를 사용한 알람음 재생

안드로이드 시스템에서는 미디어를 재생하기 위해 MediaPlayer 오브젝트를 제공합니다. 로컬 스토리지, 앱의 리소

스를 통한 비디오, 오디오 파일 재생과 URL을 통한 스트리밍 재생이 가능합니다.

앱 리소스 파일을 MediaPlayer로 재생하는 가장 간단한 방법은 다음과 같습니다. 먼저 다음과 같이 리소스 id와 함께

create 메소드를 호출하여 객체를 생성합니다. 그런 후 start 메소드를 호출하면 리소스에 해당하는 미디어 파일의 재

생이 시작됩니다.

MediaPlayer mediaPlayer;

mediaPlayer = MediaPlayer.create(this, R.raw.jetaime);

mediaPlayer.start();

재생을 일시 정지시키려면 pause 메소드를 사용합니다. 일시 정지 상태에서 다시 재생을 시작하려면 start 메소드를

호출합니다.

mediaPlayer.pause();

MediaPlayer의 재생을 멈추려면 stop 메소드를 호출합니다.

mediaPlayer.stop();

만일 다른 미디어를 재생하려거나 초기 상태로 되돌리고 싶으면 reset 메소드를 사용합니다.

mediaPlayer.reset();

더 이상 미디어 재생이 필요없어 MediaPlayer 객체를 완전히 제거할 땐 release 메소드를 사용합니다.

mediaPlayer.release();

MediaPlayer 오브젝트에 관한 자세한 정보는 다음 링크를 참조하십시오.

https://developer.android.com/reference/android/media/MediaPlayer

17.10.12 안드로이드 API 레벨(SDK 버전) 관리

https://developer.android.com/reference/android/media/MediaPlayer

알람 앱 개발 | 214

넥사크로플랫폼에서 지원하는 안드로이드 최소 지원 사양은 4.4.2(KitKat) 버전입니다. 따라서 minim

um SDK 설정시 API 레벨 19 이상을 지원하는 SDK를 사용해야 합니다.

안드로이드 환경에서 앱 개발시에는 API 레벨의 관리가 중요합니다. 각 버전에 따라 지원하는 장치, 기능 및 보안 등

에 제약이 있으므로 이러한 것들을 종합적으로 고려해야 합니다. 다음은 안드로이드 API 레벨별 누적 분포를 보여줍

니다.

안드로이드 스튜디오에서는 API 레벨에 따라 SDK 버전이 나뉩니다. 현재 사용중인 SDK 버전을 변경하려면 build.gr

adle에서 compileSdkVersion 값을 설정합니다. 그러면 새로운 SDK에 맞춰 환경을 구성하는 gradle sync 작업이 수

행되는며 재컴파일이 수행됩니다. 만일 새로 설정한 compileSdkVersion의 SDK 버전이 PC에 설치되어 있지 않으면

자동으로 다운로딩 및 인스톨이 진행됩니다.

/* build.gradle */

android {

compileSdkVersion 28

defaultConfig {

applicationId "com.demo.wakemeup"

minSdkVersion 19

targetSdkVersion 28

versionCode 1

.


.

안드로이드에서는 compileSdkVersion, minSdkVersion, targetSdkVersion 설정을 통하여 안드로이드 API 레벨간

호환성을 보장하도록 합니다.

compileSdkVersion 프로젝트를 컴파일 할 때 사용할 SDK의 버전입니다. 즉, 앱이

지원할 수 있는 가장 높은 SDK 버전을 말합니다. 이 버전은 가

능한 최신 버전으로 유지하는게 앱의 안정성에 좋습니다. com

pileSdkVersion은 targetSdkVersion보다 높거나 같아야 합니

다.

minSdkVersion 앱이 실행되는데 필요한 최소 SDK 버전을 설정합니다. minSd

kVersion보다 낮은 API 버전의 기능은 사용할 수 없습니다. 구

글 플레이 서비스에서 사용자의 기기에 앱을 설치할 수 있을지

결정하는 요소로 안드로이드 시스템의 API 레벨이 이 값보다

낮은 경우 앱 설치가 되지 않습니다.

이 값은 반드시 설정해야 하는데 만약 설정하지 않았을 경우에

는 1로 설정됩니다.

targetSdkVersion 앱이 지원하는(테스트된) 가장 높은 SDK 버전을 설정합니다.

minSdkVersion 이상에서 지원하는 기능을 사용하고 싶을 때

해당 버전을 설정해줍니다. 이 버전에 따라 앱의 동작 로직이

변경되며 안드로이드의 버전간의 호환성을 제공할 수 있습니다.

예를 들어, 안드로이드 마시멜로 6.0(API 23)에서 도입된 런타

임 퍼미션 모델은 targetSdkVersion을 API 23으로 설정해야

적용됩니다.

이 값을 선언하지 않을시 기본 값은 minSdkVersion 값이 됩니

다.

각 SDK 버전의 설정 가능 범위는 다음과 같습니다.

minSdkVersion <= targetSdkVersion <= compileSdkVersion

minSdkVersion, targetSdkVersion 값은 apk가 빌드되는 과정에서 AndroidManifest.xml에 <uses-s

dk> attribute로 포함됩니다.

종속성이 있는 라이브러리가 앱에서 사용중일 때 라이브러리 버전이 compileSdkVersion과 맞지 않으면 에러가 발

생합니다. 이런 경우에는 build.gradle의 dependencies에서 라이브러리의 버전을 SDK 버전에 맞게 수정해줍니다.

/* build.gradle */

.

.

dependencies {

implementation fileTree(include: ['*.jar'], dir: 'libs')

알람 앱 개발 | 216

implementation 'com.android.support:appcompat-v7:26.1.0'

testImplementation 'junit:junit:4.12'

androidTestImplementation 'com.android.support.test:runner:1.0.1'

androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'

implementation files('libs/nexacro17.android.jar')

}

모바일 앱 만들 때 참고하세요

부록 A.

217

모바일 앱 사용성에 대한 정해진 규칙이 있는 것은 아닙니다. 다만 수년간의 앱 개발 경험을 통해 쌓이고 그 경험을 공

유하고 있습니다. 이번 장에서 다루는 내용은 모바일 앱을 만들 때 참고할만한 내용을 정리한 것입니다.

A.1 화면 구성

사용자에게 제공하는 핵심 콘텐츠에 집중할 수 있도록 도움이 되지 않는 시각적 요소를 최소화합니다. 콘텐츠를 촘촘

히 채우기보다는 충분한 여백을 주고 콘텐츠가 많다면 시각적인 계층 구조를 명확히 합니다. 연관된 콘텐츠는 묶어서

표현해 화면의 복잡도를 줄입니다.

● 콘텐츠가 한 화면에 들어가지 않을 때에는 화면에 딱 맞춰 디자인하지 말고 잘려 보이게 해서 좌, 우 혹은 위, 아

래로 스크롤 할 수 있음을 사용자에게 인지시킵니다.

● 격자형 보더는 복잡해 보이므로 될 수 있으면 사용하지 않는 것이 좋고 목록의 하위 항목에서는 구분 라인을 사용

하지 않는 것이 좋습니다.

● 키보드 입력 작업 시 키보드를 닫지 않고도 작업을 완료할 수 있게 구성합니다.

● 모달 팝업은 가능하면 풀 프레임을 사용합니다.

● 사용자의 노력으로 만들어진 정보는 쉽게 삭제할 수 없게(예를 들어 전체 선택/삭제 등과 같은) 디자인하는 것이

좋습니다.

● 삭제 등과 같이 되돌릴 수 없는 액션의 경우 다시 한번 사용자에게 확인을 요청합니다.

● 주 액션과 되돌릴 수 없는 액션을 수행하는 기능은 같은 위치에 배치하지 않는 것이 좋습니다.

● 닫기, 확인, 취소 등의 버튼 등의 UI 요소는 같은 위치에 배치하여 사용자 인터페이스를 일관성있게 구성합니다.

모바일 앱 만들 때 참고하세요 | 218

A.2 내비게이션

내비게이션 바는 한 단으로 구성하며 항상 같은 위치에 배치하여 사용자가 쉽게 인식할 수 있게 합니다. 또한 아이콘

과 텍스트를 함께 사용하면 복잡해 보이므로 가능한 한 가지만 사용하는 것이 좋습니다.

● 내비게이션과 UI 요소가 콘텐츠보다 튀어보이지 않도록 합니다.

A.3 색

앱에서 사용하는 색상의 수는 최소화하고 사용자의 행동을 유도하는 UI 요소 외에는 눈에 띄는 색상을 적용하지 않는

것이 좋습니다.

다음은 예제 앱의 색상 구성을 보여줍니다.


A.4 아이콘

아이콘은 사용자가 의미나 액션을 연상시킬 수 있어야 합니다. 따라서 많이 사용되어 이미 사용자에게 익숙한 형태의

아이콘을 사용하는 것이 좋습니다.

일례로 구글의 Material Icon이 있습니다. 아이콘과 그 의미를 정의하여 사용자에게 제공합니다. Material Icon은 1

8dp, 24dp, 36dp, 48dp 크기로 제공되는데 사용 환경에 맞게 선택해 사용할 수 있습니다.

Material Icon은 다음의 링크에서 무료로 내려받을 수 있습니다.

https://material.io/tools/icons/?style=baseline

https://www.flaticon.com/packs/material-design

A.5 가상키보드 키 처리

Edit, MaskEdit, TextArea 등의 입력 컴포넌트에서는 usesoftkeyboard 속성을 'true'로 설정하면 가상 키보드를 사

용할 수 있습니다. 가상 키보드의 키를 처리하려면 onkeydown 이벤트 함수에서 키코드 값을 체크하여 처리할 수 있

습니다.

● Edit 컴포넌트의 onkeydown 이벤트 함수에서 가상 키보드의 Enter 키 입력을 체크하여 가상 키보드를 닫지 않

고도 앱의 기능을 수행할 수 있게 합니다.

https://material.io/tools/icons/?style=baseline

https://www.flaticon.com/packs/material-design


this.edt_query_onkeydown = function(obj:nexacro.Edit,e:nexacro.KeyEventInfo)

{

// Enter 키 처리


{

this.btn_search_onclick();

}

};

● 입력 필드가 여러 개 존재할 경우 Endter 키 입력을 받으면 다음 입력 필드로 포커스를 이동해줍니다.

A.6 Error 혹은 Helper 메시지

입력 필드에서의 에러는 가능하면 사용자 입력시 체크하고 해당 필드의 아래에 표시하여 사용자가 쉽게 식별할 수 있

도록 합니다.

입력 내용이나 길이를 고려하여 필요하면 clear 버튼을 배치하여 삭제 동작을 쉽게 합니다.

A.7 예제 앱에서의 컴포넌트 설정

Device API 활용 워크북 예제 앱 제작시 사용한 컴포넌트의 설정에 대해 설명합니다. 모바일 장치의 환경에 따라 결

과가 달라질 수 있습니다. 따라서 권장사항은 아니며 단순한 참고 자료입니다.

● 화면의 첫 UI 요소는 left 10px, top 20px에 위치시킵니다.

● 각 컴포넌트 간의 거리는 기본적으로 20px로 합니다. 단, Static 컴포넌트는 영역이 넓으므로 -20px로 합니다.

● 입력 컴포넌트가 있는 경우에는 첫 번째 컴포넌트에 포커스를 줍니다.


A.7.1 Button

설정 항목 설정 값 기타

ID Prefix btn_

사이즈 넓이: 가변

높이: 60

폰트 font-size: 16~18pt 필요한 경우 font-weight를 bold(700)로

설정

● 부정적 액션은 왼쪽에, 긍적적 액션은 오른쪽에 배치합니다. 예를 들면, 확인 버튼은 오른쪽에 취소 버튼은 왼쪽

에 배치합니다.

● 입력을 완료하지 않은 상태에서 완료 혹은 액션 버튼은 비 활성화하여 사용자의 오류 가능성을 최소화합니다.

● 버튼의 스타일은 중요도에 맞게 설정합니다. 예를 들어, 로그인에서 가장 중요한 버튼은 로그인 버튼이므로 그 외

의 버튼은 로그인과 같은 형태로 디자인하지 않는 것이 좋습니다.

● 링크와 버튼은 구분하지 않고 버튼으로 표현합니다. 링크는 네비게이션으로 버튼은 액션 실행으로 이해하고 디

자인 하는 것이 좋습니다.

A.7.2 Edit, MaskEdit, TextArea


ID Prefix edt_


높이: 60

폰트 font-size: 18pt

● 가능하면 입력 필드의 텍스트를 모두 지울 수 있는 clear 버튼을 제공합니다.

● 필드 명을 따로 두지말고 입력 필드 내에 표시하면 공간을 효율적으로 관리할 수 있습니다.

● 입력 에러나 필수 입력 항목 표시는 컴포넌트 하단에 표시합니다.

● 반드시 입력이 필요한 항목은 "필드명*"와 같이 *을 붙여 표기하고 하단에 "*Required"라고 문자열을 붙여줍니

다.


A.7.3 Grid

● 기본 Grid의 경우 모바일에서는 보기에 편하지 않으므로 컬럼 혹은 로우간 충분한 공간을 줍니다.

● 격자형 보더는 가급적 사용하지 않고 필요한 경우 가로 보더만 설정합니다.


ID Prefix grd_


높이: 가변

폰트 Head Column font-size: 16pt

Body Column font-size: 16pt

Cell padding 5px 설정하지 않으면 글자가 보더에 너무 붙어

나옴.

wordWrap english


A.7.4 Static


ID Prefix stt_


높이: 60

폰트 font-size: 16~18pt

A.7.5 GroupBox


ID Prefix grp_


높이: 가변


A.7.6 CheckBox


ID Prefix chk_


높이: 60


● 디폴트 값이 선택되어 있어야 합니다.

● 선택할 수 있는 옵션이 두 개만 있는 경우에는 하나의 체크박스 혹은 토글 스위치를 사용합니다.


A.7.7 Calendar

모바일 환경에서는 OS에서 제공하는 시스템의 달력을 사용합니다. Calendar 컴포넌트의 기본 동작이므로 별도의 설

정(popuptype 속성)이 필요치 않습니다.


ID Prefix cal_


높이: 60

type이 monthonly일 경우

daysize: 40px, 40px

headheight: 80


● popuptype은 default(system)를 사용합니다.

● type을 monthonly로 설정할 경우에는 day 및 요일 폰트 크기를 테마에서 설정해야합니다.(.DatePickerContro


l .body .dayitem 등)

A.7.8 Combo

모바일 환경에서는 확장 Combo를 사용합니다. 확장 Combo는 기본 Combo 컴포넌트를 모바일 환경에 맞도록 아

이템 리스트를 보여주는 기능을 변경한 사용자 컴포넌트입니다. 따라서 개발 단계에서 모듈과 오브젝트를 등록해야

합니다.



ID Prefix extcmb_


높이: 60

폰트 font-size: 16~18pt 아이템 리스트의 글자 크기는 pExtComb

o.xfdl의 grid의 font를 14~16pt로 설정

속성 usetype: "popup"

popupurl: "Base::pExtCombo.xfdl"

innerdataset

pExtCombo.xfdl은 Combo 리스트를 보

여줄 폼 파일

dataset 설정 필수

기본 Combo를 꼭 사용해야 할 경우에는 다음과 같이 사용합니다.


ID Prefix cmb_


높이: 60

itemheight: 40

폰트 font-size: 16~18pt 아이템 리스트의 글자 크기는 테마에서 설

정 필요(listboxitem의 font를 18pt로 설

정)

속성 popuptype: "center"

● 선택 메뉴에서는 언제나 디폴트 값이 선택되어 있어야 합니다.

● 선택 옵션이 5개 이하일 경우에는 드롭다운 형식의 메뉴보다는 그냥 선택 옵션을 모두 노출해서 사용자가 한눈에

보고 선택할 수 있게 하는것이 좋습니다. 드롭다운은 일반적으로 7개 이상일 때 사용합니다.

A.7.9 Radio


ID Prefix rdo_


높이: 가변





● 컴포넌트의 높이와 넓이는 아이템 개수에 맞게 충분히 크게 만들어 줍니다.

A.7.10 Spin


ID Prefix spn_


높이: 80



A.7.11 ListBox

모바일에서 사용성이 좋지 않으므로 가급적 사용하지 않습니다. 다중 선택이 필요한 경우 체크 박스 등을 이용합니다.


ID Prefix lst_


높이: 가변

itemheight: 40

폰트 리스트박스 아이템의 텍스트 크기는 테마

에서 설정해야 함. (.ListBox .listboxitem,.

ListBoxControl .listboxitem의 font를 1

8pt로 설정)


● 리스트에서 선택 또는 실행 버튼은 불필요합니다. 항목 선택시 바로 실행할 수 있도록 하고 부수적인 액션(수정,

옵션 설정 등)이 필요할 경우 항목 오른쪽에 배치합니다.


A.7.12 Tab

모바일에서 사용성 및 뷰가 좋지 않으므로 가급적 사용하지 않고 Button과 Div 등을 이용하여 Tab 기능을 제작합니

다. 꼭 사용해야 할 경우에는 다음과 같이 설정하여 사용합니다.


ID Prefix tab_


높이: 가변

tabjustify: true

showextrabutton: false

폰트

● 탭은 가능한 1단으로 만들고 화면 크기보다 넓어질 경우 좌우 스크롤이 가능하도록 만듭니다.

● 탭 항목은 한 단에 최대 3개 이하로 구성하고 탭 버튼 아이템 텍스트를 짧게하여 prev, next 버튼이 생기지 않게

합니다.

● 탭 버튼 텍스트 크기는 테마에서 설정합니다.

.Tab .tabbuttonitem .tabbuttonitemtext

{

font : bold 20pt "NanumGothic";

}

A.7.13 Menu

모바일에서 사용성이 좋지 않으므로 가능하면 사용하지 않는다. 꼭 사용해야 할 경우에는 다음과 같이 설정하여 사용

합니다.


ID Prefix mnu_

사이즈 넓이: 100%

높이: 60

popupitemheight: 40

폰트 font-size: 16~18pt 서브 메뉴 글자 크기는 테마에서 설정(.po

pupmenuitemtext)

속성 popuptype: center

● 가능한 서브 메뉴를 만들지 않고 1단으로 사용합니다.

device api 활용 워크북 - tobesoftdocs.tobesoft.com/mobile_developer_guide_nexacro_17_ko.pdf ·...

Documents