Tổng quan về phonegap

PhoneGap menubutton Example document.addEventListener“deviceready”, onDeviceReady, false; function onDeviceReady { // Register the event listener document.addEventListener“menubutton”,

Trang 1

M C L C

L I NÓI U 5

Các tài li u liên quan 6

I.Events 7

1.1.Hi u thêm v events 7

1.2.Cách s d ng EVENTS LISTENER 8

1.3.Hi u thêm v các d ng s ki n EVENT TYPES 9

1.3.1.Backbutton 9

1.3.2.Deviceready 10

1.3.3.Menubutton 11

1.3.4.Pause 12

1.3.5.Resume 13

1.3.6.Searchbutton 14

1.3.7.Online 15

1.3.8.Offline 16

1.3.9.M t ví d đ n gi n v s ph n h i l i các s ki n events 17

1.3.10.M t ví d đ n gi n v vi c ph n h i l i các s ki n Button Events 18

II.Cách làm vi c v i thi t b , m ng network, và các thông báo notifications 20

2.1.Cách l y thông tin t thi t b 20

2.1.2.Cách l y v tên c a thi t b Device Name 20

2.1.3.Cách l y v thông tin phiên b n phonegap 21

2.1.4.Cách l y v n n t ng thi t b Device Platform 21

2.1.5.Cách l y v ID qu c t c a thi t b UUID 21

2.1.6.Cách l y v thông tin phiên b n h đi u hành 22

2.1.7.Ví d v cách l y thông tin c a thi t b 22

2.2.Cách ki m tra 1 m ng network 23

Cách xác đ nh d ng k t n i 24

2.3.Cách s d ng các thông báo NOTIFICATIONS 26

2.3.1.Cách s d ng Alerts 26

2.3.2.Cách s d ng h p tho i t ng tác Confirmation Dialogs 27

2.3.3.Cách s d ng Beeps 28

2.3.4.Cách s d ng ch đ rung Vibrations 29

2.3.5.Ví d v cách s d ng t t c 4 lo i thông báo Notifications 29

III.Gia t c k Accelerometer 32

Trang 2

3.1.Th nào là gia t c k Accelerometer ? 32

3.2.Cách s d ng gia t c k Accelerometer 32

3.3.Các ng d ng dùng gia t c k Accelerometer 33

3.4.Cách s d ng đ i t ng gia t c k ACCELERATION OBJECT 36

3.5.Cách s d ng các ph ng th c ACCELEROMETER METHODS 37

3.5.1.Ph ng th c getCurrentAcceleration 37

3.5.2.Ph ng th c watchAcceleration 38

3.5.3.Ph ng th c clearWatch 39

3.6.L a ch n c u hình ACCELEROMETER OPTION 40

3.7.Ví d v cách s d ng gia t c k ACCELEROMETER 40

Cách th c ví d ho t đ ng 41

IV.Ví trí đ a lý Geolocation 42

4.1.Th nào là v trí đ a lý Geolocation ? 42

4.2.Cách s d ng Geolocation 42

4.3.Các m u ng d ng v Geolocation 42

4.4.Các đ i t ng POSITION, POSITIONERROR, và COORDINATES 45

4.4.1 i t ng Position Object 45

4.4.2 i t ng PositionError 46

4.4.3 i t ng Coordinates Object 46

4.5.Ví d minh h a v geolocation 46

Cách ví d ho t đ ng 47

4.6.Cách c i thi n giao di n và tr i nghi m c a ng i dùng 48

V.Media 52

5.1.Các Media Files là gì ? 52

5.2.Cách s d ng các Media Files 52

5.3.Các ng d ng m u s d ng media API 52

5.4 i t ng MEDIA OBJECT 55

5.5.Cách s d ng các ph ng th c methods 56

5.5.1.ph ng th c media.getCurrentPosition 56

5.5.2.Ph ng th c media.getDuration 57

5.5.3.Ph ng th c media.pause 58

5.5.4.Ph ng th c media.play 59

5.5.5.Ph ng th c media.release 61

5.5.6.Ph ng th c media.seekTo 61

5.5.7.Ph ng th c media.startRecord 62

5.5.8.Ph ng th c media.stop 63

Trang 3

5.5.9.Ph ng th c media.stopRecord 64

5.5.10.Ki m soát l i MediaError 65

5.5.11.Ví d v vi c s d ng media api 66

VI.L u tr Storage 73

6.1 i m khác bi t gi a Session Storage và Local Storage ? 75

6.2.Cách s d ng local storage 76

6.3.Cách s d ng đ i t ng DATABASE OBJECT 77

6.3.1.Cách t o và Cách m 1 database 77

6.3.2.Cách ch y 1 sql Query 78

6.3.3.Cách phân tích và ti n x lý các câu l nh SQL (phòng ch ng SQL injection) 81

6.3.4.Các giao d ch Transactions 82

6.4.Cách xem 1 t p k t qu 84

6.5 i u ch nh l i 86

6.6.Ví d v cách xây d ng 1 database đ n gi n : 89

VII.Files 91

7.1.H th ng FILESYSTEMS 91

7.2.Tìm hi u v các th m c d n DIRECTORIES và các files 92

7.2.1.Cách s d ng đ i t ng DirectoryEntry Object 92

7.2.2.getMetadata 93

7.2.3.setMetadata 94

7.2.4.moveTo 95

7.2.5.copyTo 96

7.2.6.toURI 97

7.2.7.remove 97

7.2.8.getParent 98

7.2.9.createReader 98

7.2.10.getDirectory 99

7.2.11.getFile 99

7.2.12.removeRecursively 100

7.3.metadata 101

7.4.FileError 102

7.5.Flags 102

7.6.LocalFileSystem 103

7.7.DirectoryReader 104

7.8.Cách s d ng đ i t ng FileEntry Object 105

Trang 4

7.8.2.moveTo 107

7.8.3.copyTo 108

7.8.4.toURI 109

7.8.5.remove 109

7.8.6.getParent 109

7.8.7.createWriter 110

7.8.8.file 111

7.9.Cách đ c các files - FileReader 111

7.9.1.readAsDataURL 112

7.9.2.abort 113

7.9.3.readAsText 114

7.10.Cách đ c các files – FileWriter 116

7.11.Cách truy n d n files – FileTransfer 120

7.11.1.upload 120

7.11.2.download 124

7.11.3.abort 125

7.11.4.onprogress 125

7.12.FileTransferError 126

VIII.Camera 127

8.1.Cách truy c p 1 nh Picture 127

8.2.Cách thi t l p các c u hình trong Camera Options 139

8.2.1.Quality 140

8.2.2.destinationType 141

8.2.3.sourceType 143

8.2.4.allowEdit 145

8.2.5.encodingType 146

8.2.6.targetHeight và targetWidth 146

8.2.7.mediaType 146

8.2.8.saveToPhotoAlbum 147

8.3.Làm vi c v i các v n đ x y ra v i camera 147

IX.Splashscreen 151

10.1.Cách ph n quy n Permissions 151

Android 151

iOS 151

10.2.Cách thi t l p 151

10.3.show 152

Trang 5

10.4.hide 153

1 đi m cá nhân mình r t thích Phonegap, đó chính là tính đ n gi n và h u nh không có tính ràng bu c Phonegap đ c g i là framework tuy nhiên nó không gi ng nh 1 vài framework PHP mà mình đã t ng h c, v i nh ng framework PHP này, nó đ nh ngh a l i hoàn toàn cách b n vi t mã code, và nó đòi h i b n ph i hi u rõ sâu r ng v các thành

ph n h th ng bên trong, thì b n m i có th l p trình thông th o đ c V i Phonegap, nó không kìm k p b n vào trong 1 h th ng có 1 quy chu n riêng r i r m nào c , b n có th t

do tho i mái l p trình theo cách mà b n mu n (tuy nhiên cái gì c ng có 2 m t c a nó), b n

ch c n n m b t 1 công ngh duy nh t - công ngh n n Web(bao g m HTML5, Javascript, CSS), b qua gánh n ng c n ph i n m b t và hi u rõ v các công ngh bên trong m i n n

t ng (Android, iOS, Blackberry, Windowphone, ầ) mà b n v n có th t o ra đ c các ng

d ng “vi t m t l n, biên d ch qua cloud và ch y kh p n i – t ng thích v i h u h t các n n

t ng h đi u hành di đ ng hi n t i”

Tài li u đ c vi t gi ng nh 1 b n ghi chép, ghi l i nh ng th mà mình đã đ c đ c t các ebook ti ng anh, do v y b c c s p x p c a nó có th ch a chính xác, cách trình bày không theo chu n 1 ebook nào c và nhi u ch vi t ch a rõ ngh a và không m ch l c do h n ch

v ngo i ng c a b n thân mình Tài li u mang đ m tính ch t cá nhân do v y b n s b t

g p trong tài li u này nhi u đo n kí t in đ m, in màu, c ch l n b t th ng và đ c tô màu khác nhau - đó là các đo n có liên quan đ n nhau hay là nh ng ghi chú quan tr ng mà

b n c n ph i đ c k

N i dung trong tài li u này đ c d a trên các cu n ebook: “Beginning Phonegap -

Thomas Myer”, “PhoneGap Essentials - John M Wargo”,

“Apache Cordova Documentation 2.2.0 – Phonegap team”, và 1 s gi i thích, đ nh ngh a

v ki n trúc c a HTML5 t W3C.org Tài li u này không đ c p t i đ y đ các hàm APIs

đ c Phonegap h tr C th , các ph n sau b l c b : Capture, Compass, Contacts, Globalization, Guides (do mình không có th i gian đ vi t n t, và mình c ng không s

d ng đ n các ph n b l c b này)

N u có th c m c hay góp ý gì, các b n có th đ ng ký ngay 1 nick vào di n đàn

www.phonegap.vn/forum đ đ t câu h i tr c ti p, các MOD và ADMIN s tr l i câu h i

c a b n trong th i gian s m nh t

Trang 6

C ác tài li u liên quan

javascript-va-cac-kieu-mau-thiet-ke

cho-android-tng-tc-my-o-android

http://www.slideshare.net/myloveforyounqt/cch-ti-u-ha-mi-trng-lp-trnh-ng-dng- Ho c đ n gi n truy c p vào th m c chia s sau: http://sdrv.ms/VoAXBi (r t có

th trong 1 th i gian n a, mình s vi t 1 ebook liên quan đ n Jquery Mobile, n u có thì các b n s th y nó xu t hi n trong th m c chia s này)

Trang 7

1.1.Hi u thêm v events

đ n gi n hóa, ta hi u 1 event là b t c hành đ ng nào mà có th đ c xác đ nh (nh n

bi t) b i phonegap.trong l p trình javascript truy n th ng, b t c ph n t nào trên 1 trang page c ng có th có các s ki n event nào đó, và nó có th đ c kích ho t b i 1 vài mã javascript.ví d nh 1 s ki n onrollover trên 1 link có th gây ra xu t hi n 1 b ng pop-up, hay s ki n onclick có th gây ra 1 b ng h p tho i xem tr c

Tóm l i, s ki n events có th là click chu t, 1 image loading, rolling over trên 1 link nào đó hay nh ng đ i t ng DOM khác, vi c l a ch n 1 tr ng input field trong 1 form, submitting

1 form, hay s ki n gõ 1 phím b t kì trên bàn phím.v đa s thì t t c các d ng s ki n events trên c ng có th đ c s d ng khi ta phát tri n các ng d ng s d ng phonegap.tuy nhiên có nh ng s ki n ch đ c đ nh ngh a bên trong phonegap nh sau :

Trang 8

 endcallbutton

 volumedownbutton

 volumeupbutton

trong t t c các s ki n events trên thì s ki n deviceready là quan tr ng nh t mà ta ph i

xem xét t i.không có nó thì ng d ng c a ta s không bi t khi nào phonegap đã đ c load hoàn toàn.khi nó đ c kích ho t, ta có th g i 1 cách an toàn b t c các hàm PhoneGap function nào và do đó có th l n l t truy c p an toàn vào các API b n đ a

khi s ki n deviceready event đ c kích ho t, thì ta bi t đ c 2 đi u : DOM đã đ c load,

<title>PhoneGap Device Ready Example</title>

document.addEventListener(“deviceready”, onDeviceReady, false);

function onDeviceReady() {

// call the phonegap api

document.addEventListener(“pause”, onPause, false);

document.addEventListener(“resume”, onResume, false);

Trang 9

</html>

Ví d trên nh c nh ta r ng deviceready có th là 1 s ki n nh ng nó l i không ph i là s

ki n chu n t c trong trình duy t, nó ch ho t đ ng và nh n bi t b i trong phonegap.n u ta

th ch y s ki n này trong 1 trình duy t thông th ng thì nó không bao gi đ c kích ho t

1.3.Hi u thêm v các d ng s ki n EVENT TYPES

1.3.1.Backbutton

S ki n backbutton đ c kích ho t khi ng i dùng n vào nút Back trên thi t b Android

xác đ nh s ki n event này, thì ta c n đ ng ký 1 event listener nh sau :

document.addEventListener(“backbutton”, onBackButton, false);

<title>PhoneGap backbutton Example</title>

// Register the event listener

}

// Handle the back button

//

function onBackButton() {

Trang 10

dành cho nh ng ng i phát tri n trên BlackBerry OS 4.6, thì RIM Browserfield không

h tr hàm s ki n event này, nên ta c n s d ng PhoneGap.available đ thay th nh

Trang 11

<title>PhoneGap menubutton Example</title>

document.addEventListener(“menubutton”, onMenuButton, false);

Trang 12

1.3.4.Pause

Khi s ki n pause đ c kích ho t là khi 1 ng d ng đ c đ t vào ch đ ch y n n

xác đ nh s ki này, ta đ ng kí 1 event listener nh sau :

document.addEventListener(“pause”, onPause, false);

<title>PhoneGap pause Example</title>

document.addEventListener(“deviceready”, onDeviceReady, false);

function onDeviceReady() {

document.addEventListener(“pause”, onPause, false);

Trang 13

1.3.5.Resume

S ki n resume đ c kích ho t khi 1 ng d ng đang tr ng thái t m d ng (ch y n n)

đ c kích ho t tr l i làm vi c

document.addEventListener(“resume”, onResume, false);

<title>PhoneGap resume Example</title>

document.addEventListener(“resume”, onResume, false);

Trang 14

<title>PhoneGap searchbutton Example</title>

document.addEventListener(“searchbutton”, onSearchButton, false);

Trang 15

1.3.7.Online

S ki n online đ c kích ho t khi 1 ng d ng phonegap đang online (đi u này có ngh a là

nó đang đ c k t n i internet).đây là 1 s ki n m i đ c thêm vào trong phiên b n 0.9.6 và

nó ch đ c h tr trên các thi t b iOS, Android, and BlackBerry

document.addEventListener(“online”, isOnline, false);

<title>PhoneGap online Example</title>

document.addEventListener(“online”, isOnline, false);

Trang 16

1.3.8.Offline

S ki n offline đ c kích ho t khi 1 ng d ng phonegap đang offline (đi u này có ngh a là

nó không k t n i internet).đây là 1 s ki n m i đ c thêm vào trong phiên b n 0.9.6 và nó

ch đ c h tr trên các thi t b iOS, Android, and BlackBerry

document.addEventListener(“offline”, isOffline, false);

<title>PhoneGap offline Example</title>

document.addEventListener(“offline”, isOffline, false);

Trang 17

<title>PhoneGap Event Example</title>

<script type=”text/javascript” charset=”utf-8” src=”phonegap.js”></script>

<script type=”text/javascript” charset=”utf-8”>

// Register the event listeners

document.addEventListener(“pause”, onPause, false);

document.addEventListener(“resume”, onResume, false);

Trang 18

Ch ng trình ch y nh th nào

event listener là 1 khóa quan tr ng, nó dùng đ xác đ nh khi nào s ki n deviceready event đ c kích ho t và khi s ki n này đ c kích ho t thì ta bi t đ c r ng ta có th g i 1 cách an toàn các API còn l i c a phonegap

khi nó đ c kích ho t, thì s ki n deviceready event làm ch y hàm onDeviceReady() function và l n l t trong hàm này đ ng ký 2 event listener m i, 1 cái cho s ki n pause event và cái th 2 cho s ki n resume event

1.3.10.M t ví d đ n gi n v vi c ph n h i l i các s ki n Button Events

<!DOCTYPE html>

<html>

<head>

<title>PhoneGap Button Example</title>

// Register the event listeners

document.addEventListener(“searchbutton”, onSearch, false);

document.addEventListener(“menubutton”, onMenuButton, false);

Trang 19

phonegap đã s n sàng hay ch a, và sau đó đ ng ký 3 event listeners, t ng cái 1 dành cho

các nút c a thi t b nh Search, Menu, và Back buttons

Trang 20

II Cách làm vi c v i thi t b , m ng network, và các thông báo notifications

2.1 Cách l y thông tin t thi t b

Phonegap có 1 runtime object đ c g i là đ i t ng thi t b device, đ l u gi thông tin có ích v thi t b sau đây là nh ng thu c tính c a đ i t ng device :

 device.name – là tên c a thi t b (ví d nh my iphone)

 device.phonegap – phiên b n c a phonegap

 device.platform – lo i c a thi t b (ví d nh iphone)

 device.uuid – s id c a thi t b

 device.Version – phiên b n h đi u hành OS đang ch y

quan tr ng ph i chú ý r ng : device đ c gán thành đ i t ng window object, do v y nó hoàn toàn có ph m vi toàn c c.hi u theo cách khác, c 2 bi n sau đ u tham chi u t i cùng thi t b device :

//both of these reference the same device

var myPhoneName = window.device.name;

var myPhoneName = device.name;

trong ph n này ta s h c l y v các thông tin sau :

 tên c a thi t b device

 phiên b n phonegap

 ID qu c t dùng đ xác đ nh thi t b duy nh t (UUID)

 Phiên b n h đi u hành c a thi t b

2.1.2 Cách l y v tên c a thi t b Device Name

l y v tên c a thi t b ta s d ng device.name nh sau:

var myPhoneName = device.name;

giá tr này đ c tr v đ c thi t l p b i nhà s n xu t và có th bi n đ i t s n ph m này

đ n s n ph m khác và bi n đ i ngay c trên cùng 1 phiên b n s n ph m.ví d , đây là 1 danh sách c a các giá tr tr v cho các lo i đi n tho i khác nhau :

 Android Nexus One tr v là Passion ( đây là tên mã s n ph m)

 Android Motorola Droid tr v là voles

Trang 21

 BlackBerry Bold 8900 tr v là 8900

 iPhone tr v là tên đ c thi t l p trong iTunes( ví d nh Tom‟s phone )

thu c tính device.name đ c h tr trong các thi t b Android, BlackBerry, và iPhone

2.1.3.C ách l y v thông tin phiên b n phonegap

đ l y v thông tin phiên b n phonegap trên thi t b , ta s d ng thu c tính

device.phonegap nh sau :

var myDevicePhoneGap = device.phonegap;

thu c tính device.phonegap đ c h tr trên các thi t b Android, Blackberry, và iPhone 2.1.4.C ách l y v n n t ng thi t b Device Platform

cách l y v tên c a h đi u hành trên thi t b , ta s d ng device.platform nh sau:

var myDevicePlatform = device.platform;

ph thu c vào thi t b device, câu l nh này tr v các th sau :

m i thi t b đi u ph i có s UUID, s này đ c thêm vào thi t b b i nhà s n xu t UUID có

th có nh ng chi u dài khác nhau ph thu c vào thi t b , nó có th luôn luôn đ c đ nh ngh a nh là 1 m u model và n n t ng platform.ví d , android s d ng 1 s ki u int ng u nhiên 64-bit; blackberry s d ng mã PIN 9 kí t ; và iphone s d ng 1 chu i string là giá tr

c a hàm b m hash

cách l y UUID c a thi t b , ta s d ng device.uuid nh sau :

var myDeviceID = device.uuid;

Trang 22

2.1.6.C ách l y v thông tin phiên b n h đi u hành

cách l y v tên phiên b n h đi u hành c a thi t b , ta s d ng device.version nh sau : var myDeviceOS = device.version;

ph thu c vào h đi u hành, ta s l y đ c v các giá tr khác nhau.ví d trên android, h

đi u hành Froyo OS tr v là 2.2 và Éclair OS tr v là 2.1, 2.0.1 hay 2.0 BlackBerry Bold

9000 s d ng OS 4.6 thì tr v là 4.6.0.282 và 1 iphone ch y IOS 3.2 tr v là 3.2

thu c tính device.version đ c h tr trên các thi t b Android (2.1 and higher), BlackBerry, and iPhone

2.1.7.V í d v cách l y thông tin c a thi t b

ta t o ra 1 đo n mã đ n gi n dùng đ cho phép ta s d ng các ph n t device đ l y v các thông tin v thi t b :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<title>My Device</title>

// Use an event listener to detect if PhoneGap is ready

var myDiv = document.getElementById(„props‟);

myDiv.innerHTML = „Device Name: „ + device.name + „<br />‟ +

„Device PhoneGap: „ + device.phonegap + „<br />‟ +

„Device Platform: „ + device.platform + „<br />‟ +

„Device UUID: „ + device.uuid + „<br />‟ +

„Device Version: „ + device.version + „<br />‟;

Trang 23

Trong ví d này, ta t o ra 1 tài li u HTM đ n gi n, đ u tiên t i v th vi n phonegap.js.ti p

theo ta vi t 1 hàm onLoad() function dùng đ đ ng ký 1 event handler b ng cách s d ng addEventListener.đ c bi t, ta mu n tuân theo s ki n deviceready event, và khi nó đ c

kích ho t thì nó s ch y hàm onDeviceReady() function

Hàm onDeviceReady() function làm 2 th : th nh t là nó đi n vào 1 đo n v n vào trong

document DOM có id là “props” b ng cách s d ng getElementById, sau đó nó in ra thông tin v thi t b vào trong ph n t DOM đó

N u ta s d ng JQuery, thì ta có th đ n gi n vi t nh sau :

$(“#props”).html(„Device Name: „ + device.name + „<br />‟ +

„Device PhoneGap: „ + device.phonegap + „<br />‟ +

„Device Platform: „ + device.platform + „<br />‟ +

„Device UUID: „ + device.uuid + „<br />‟ +

„Device Version: „ + device.version + „<br />‟);

May m n cho ta là phonegap API có ch a 1 đ i t ng là Connection object, đ i t ng này

cho phép ta truy c p vào thông tin k t n i cellular và WiFi c a thi t b

Trang 24

Cách xác đ nh d ng k t n i

xác đ nh d ng c a k t n i m ng network thì ta s ph i s d ng connection.type nh

sau :

function checkConnection(){

var myState = navigator.network.connection.type;

//return a specific state

states[Connection.UNKNOWN] = „Unknown connection‟;

states[Connection.ETHERNET] = „Ethernet connection‟;

states[Connection.WIFI] = „WiFi connection‟;

states[Connection.CELL_2G] = „Cell 2G connection‟;

states[Connection.NONE] = „No network connection‟;

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

}

Trang 25

ví d trên, n u d ng k t n i là NONE thì thông báo s ch a thông đi p là „No network connection‟

states[Connection UNKNOWN] = „Unknown connection‟;

states[Connection.ETHERNET] = „Ethernet connection‟;

states[Connection.WIFI] = „WiFi connection‟;

states[Connection.NONE] = „No network connection‟;

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

Trang 26

Cách th c ví d ho t đ ng

u tiên ta load th vi n phonegap và sau đó đ ng ký 1 event handler là s ki n

deviceready

Khi thi t b đã tr ng thái s n sàng thì ta ch y navigator.network.isReachable trên

google.com.website này luôn luôn s ng và nó là công c t t đ ki m tra k t n i m ng

network (hay theo cách khác, ta có th không mu n ki m tra trên 1 server vì nó có th ch t

b t c lúc nào khi vào lúc ta ti n hành ki m tra)

Ti p theo, ta thi t l p 1 đ i t ng đ n gi n có ch a thông báo tr ng thái network status t

phonegap gi ng nh các ch m c keys, v i các thông đi p ta tùy ch nh gi ng nh các giá tr values – đây là cách ta tránh kh i b t c thông đi p khó hi u nào đ c g i t i ng i s

d ng thi t b

Ti p theo, ta ch y 1 hàm JavaScript alert() ch a thông đi p v k t n i.nó s đ c pop-up trên thi t b và ng i dùng có th t t nó

Cu i cùng, đ ch c ch n ta ti n hành ch y hàm onLoad() t th <body>

2.3 Cách s d ng các thông báo NOTIFICATIONS

Trong nh ng ví d mà ta đã làm t tr c, ta đã s d ng 1 hàm tiêu chu n c a javascript là

alert() đ hi n th thông tin t i ng i s d ng( đ c bi t nh t là thông tin v tr ng thái c a k t

n i m ng network).m c dù ta có th s d ng lo i h th ng thông báo này trên thi t b , tuy

nhiên phonegap mang t i t n 4 lo i thông báo notifications khác nhau mà ta có th t n

Trang 27

 Message – 1 chu i string ch a thông đi p (ví d nh “The network status is WIFI only”

 Callback – là hàm function g i l i đ c g i khi thông báo alert b b qua

 Title – 1 chu i string ch a tên tiêu đ c a h p alert (tùy ch n)

 Button – 1 chu i string ch a tên c a nút button (ví d nh OK) (tùy ch n)

Hàm notification.alert có h tr trên các thi t b Android, BlackBerry OS 4.6,

[AU: Be sure you replace all tabs in your code with five spaces.]

„Game Over!‟, // message

//BlackBerry 4.6 / webOS

navigator.notification.alert(„Game Over! „);

2.3.2.C ách s d ng h p tho i t ng tác Confirmation Dialogs

1 h p tho i confirmation dialog c ng gi ng v i 1 alert, ngo i tr r ng nó ch a nhi u nút buttons.ví d nh 1 h p tho i confirmation dialog đ a ra câu h i “Do you wish to continue?” Thì có 2 button là Yes và No

Trang 28

t o ra 1 h p tho i confirmation dialog, ta s d ng hàm notification.confirm.ta s c n

đóng gói nó trong 1 hàm function, b i vì nó th ng đ c g i t 1 link hay 1 button trên giao

onConfirm , // callback to invoke with index of button pressed

„Game Over‟, // title

„Restart,Exit‟ // buttonLabels

);

}

2.3.3 Cách s d ng Beeps

Th nh tho ng ta không c n t i 1 hi n th thông báo – mà đ n gi n ch c n 1 ti ng beep đ ra

hi u thông báo khi ng i dùng làm gì đó.đ t o ra ti ng beep, ta s d ng hàm

notification.beep nh sau :

navigator notification.beep( 2 );

hàm này c n 1 tham s truy n vào, nó là 1 ki u int dùng đ xác đ nh s ti ng beep mà ta

mu n phát

hàm này đ c h tr trong các thi t b Android, BlackBerry, webOS, và iPhone

Chú ý: android s ch i b n nh c thông báo Notification m c đ nh đ c thi t l p Settings Sound and Display panel còn iphone c ng s t ch i tham s ti ng beep truy n vào

Trang 29

hàm này đ c h tr trong các thi t b Android, BlackBerry, webOS, và iPhone

Chú ý: iphone s t ch i tham s truy n vào và nó s rung theo th i gian đ c thi t

l p s n

2.3.5.V í d v cách s d ng t t c 4 lo i thông báo Notifications

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<title>Notifications</title>

// Wait for PhoneGap to load

Trang 30

onConfirm, // callback to invoke with index of button pressed

„Game Over‟, // title

Trang 31

<p><a href=”#” onclick=”showAlert(); return false;”>Show Alert</a></p>

<p><a href=”#” onclick=”showConfirm(); return false;”>Show Confirmation</a></p>

<p><a href=”#” onclick=”vibrate(); return false;”>Vibrate</a></p>

</body>

</html>

Cách th c ví d ho t đ ng

ví d này, trong hàm onDeviceReady(), ta đ nó tr ng r ng b i vì tài li u document chính

đã ch a 1 dãy các link dùng đ g i các hàm function và l n l t chúng s kích ho t các thông báo khác nhau

ví d , b ng cách n vào link đ u tiên hàm showAlert() s đ c kích ho t và nó s hi n th 1 thông báo alert tùy ch nh.link th 2 s kích ho t hàm showConfirm() hi n th ra 1 h p tho i confirmation box

Trang 32

III.Gia t c k Accelerometer

3.1.Th n ào là gia t c k Accelerometer ?

gia t c k Accelerometer là 1 thi t b dùng đ ghi l i chuy n đ ng trong không gian 3 chi u XYZ

đ hình dung đ c 3 chi u XYZ, thì ta đ t thi t b lên trên 1 b m t ph ng gi ng nh trên

m t bàn.ta gi s r ng b m t này có r t ít ma sát và ví d nh ta có th đ t thi t b sang

trái và sang ph i mà không c n ph i nâng nó lên.m c đích c a ví d này là giúp ta hình dung đ c n i ta đ t thi t b t i v trí (0,0,0) trong không gian t a đ b t c cách nào mà ta

dùng đ di chuy n thi t b thì s d n đ n 1 s thay đ i trong h t a đ

n u thi t b là m ng n m trên m t bàn và khi ta di chuy n nó sang trái hay sang ph i thì

chính là ta di chuy n nó d c theo tr c X.ta di chuy n nó sang trái là ta cho nó 1 k t qu âm,

và ta di chuy n nó sang ph i thì ta cho nó k t qu d ng.n u ta di chuy n thi t b ra xa bàn hay t i g n ch ta thì chính là ta đang di chuyên nó trên tr c Y.n u di chuy n nó ra xa thì ta

đ c k t qu d ng theo tr c Y, và n u di chuy n nó l i g n thì ta đ c k t qu âm

tr c Z đ c miêu t là chi u lên xu ng và đ c thêm vào làm chi u th 3 c a h tr c t a

đ n u ta c m l y thi t b và c m nó ti n đ n m t thì ta đ c k t qu d ng theo tr c Z.n u

ta cho thi t b xu ng d i m t bàn thì ta đ c k t qu âm theo tr c Z

t t nhiên r t là khó kh n khi ta d ch chuy n 1 thi t b theo ch 1 tr c mà không gây nh

h ng t i các tr c khác.n u ta c m thi t b lên ( ví nh di chuy n nó t i g n m t) thì ta nh n

đ c k t qu d ng đ i v i tr c Z, nh ng c ng gi ng nh v y khi ta mang nó g n c th

h n thì thu đ c k t qu âm theo tr c Yầầ

gi hình dung xem, chuy n gì s x y ra n u ta tung thi t b quay tr l i b m t bàn - nh đùng tung quá m nh ta có th làm v nó.khi đó gia t c k accelerometer bên trong thi t b

s xác đ nh t t c chuy n đ ng d c theo tr c XYZ

Trang 33

 Dành cho các v trí có ánh sáng th p, thì ta có th t đ ng ch p 1 b c nh v i

camera c a thi t b n u thi t b v n ho t đ ng t t

 Ta có th xây d ng 1 game mà trong đó ta đi u khi n các b ph n có t ng tác v i

đ nghiêng hay chuy n đ ng c a thi t b

3.3.C ác ng d ng dùng gia t c k Accelerometer

n u ta có 1 chi c iphone, và ta h u nh ch c ch n bi t đ n hay đã t ng ch i “DoodleJump”

nh trong hình d i “DoodleJump” là 1 game d gây nghi n nó cho phép nhân v t c a ta

nh y t m c này t i m c khác b ng cách s d ng gia t c k đ xác đ nh chuy n đ ng sang trái/ph i

1 game khá ph bi n khác là “Super Monkey Ball” nh trong hình 6-2 Ý t ng n m đ ng sau game này là h ng d n 1 chú kh nh d th ng v t qua các ch ng ng i v t khác nhau b ng cách nghiêng hay l c iphone

Trang 34

Trên thi t b android, ta c ng có “Hyperspace” nh trong hình 6-3, trong đó ta s d ng nghiêng hay chuy n đ ng đ đi u khi n 1 trái bóng đ đi xuyên qua các ch ng ng i v t

t t nhiên, có vô s các ng d ng s d ng gia t c k accelerometer

Trang 36

3.4.C ách s d ng đ i t ng gia t c k ACCELERATION

OBJECT

đ i t ng gia t c k ACCELERATION OBJECT là 1 đ i t ng ch có th đ c và nó ch a d

li u gia t c k đ c ch p l i t i 1 đi m xác đ nh trong 1 th i đi m.và đ i t ng này có các thu c tính :

 X - đ i l ng chuy n đ ng trên tr c X, đ c trình bày là 1 s

 Y - đ i l ng chuy n đ ng trên tr c Y, đ c trình bày là 1 s

 Z - đ i l ng chuy n đ ng trên tr c Z, đ c trình bày là 1 s

 Timestamp – m c th i gian lúc t o ra, đ c trình bày trong mili giây

i t ng này đ c t o ra và đ c c trú trong phongegap và nó tr v 1 ph ng th c accelerometer method nh ví d sau :

navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);

//you now have access to an acceleration object

//which contains x, y, z, and timestamp data

Trang 37

navigator accelerometer.getCurrentAcceleration( onSuccess, onError);

Chú ý:trên các thi t b IOS, thì vi c g i ph ng th c getCurrentAcceleration() s không làm vi c nh cách mà ta ngh ,dùng đ thay th cho current acceleration thì nó s báo cáo v giá tr cu i cùng đ c báo cáo t l i g i PhoneGap accelerometer.đ thay th , ta s

c n s d ng ph ng th c watchAcceleration()

Trang 38

var options = { frequency: 1000 }; // Update every second

var watchID = navigator accelerometer.watchAcceleration( onSuccess, onError,

options);

đo n code trên s t o ra 1 thông báo alert theo chu kì t ng giây m t.1 hàm h u d ng có

th là 1 vài th gi ng nh d i mà trong đó các ph n t DOM luôn đ c làm m i bên trong HTML, và do v y nó cho ta bi t s in d li u ra màn hình h u d ng nh sau :

function onSuccess(acceleration) {

var myX = document.getElementById(„my_x‟);

var myY = document.getElementById(„my_y‟);

var myZ = document.getElementById(„my_z‟);

var myT = document.getElementById(„my_timestamp‟);

Trang 39

};

var options = { frequency: 1000 }; // Update every second

var watchID = navigator accelerometer.watchAcceleration( onSuccess, onError,

Chú ý: trong iOS thì gia t c k đ c quan tâm đ c bi t, do v y phonegap s b gi i

h n m c chu k nh nh t là 40 mili giây và l n nh t là 1000 mili giây.do v y n u ta yêu c u

1 c p nh t có chu k là 3000 mili giây(hay là 3 giây) thì phonegap s yêu c u 1 chu k là

1000 mili giây trên thi t b nh ng s g i hàm callback thành công l i d a vào yêu c u là chu

thông th ng, ta s kích ho t s ki n này thông qua 1 nút click nh sau :

<button onclick=”stopWatch();”>Stop Watching</button>

T t nhiên, ta c ng có th gán s ki n này t i 1 vài lo i chu k nh sau : thu th p d li u trong 30 giây r i ng ng l i

Trang 40

3.6.L a ch n c u hình ACCELEROMETER OPTION

thi t l p t n s là 5 giây, ta làm nh sau :

var options = { frequency: 5000 }; // Update every 5 seconds

var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError,

options);

đ thi t l p t n s thành n a giây thì ta s d ng nh sau :

var options = { frequency: 500 }; // Update every 5 seconds

var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError,

var watchID = null;

// Wait for PhoneGap to load

// PhoneGap is ready, start watching

// Update acceleration every 3 seconds

var options = { frequency: 3000 };

watchID = navigator.accelerometer.watchAcceleration( onSuccess, onError,

options);

}

Định dạng
Số trang	155
Dung lượng	3,5 MB