lập trình phonegap cho người mới học

Phonegap cho ngi mi hc
MC LC
LI NI U ........................................................................................................................ 5
Cc ti liu lin quan ............................................................................................................. 6
I.Events................................................................................................................................. 7
1.1.Hiu thm v events .................................................................................................... 7
1.2.Cch s dng EVENTS LISTENER............................................................................. 8
1.3.Hiu thm v cc dng s kin 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.Mt v d n gin v s phn hi li cc s kin events .................................. 17
1.3.10.Mt v d n gin v vic phn hi li cc s kin Button Events ................... 18
II.Cch lm vic vi thit b, mng network, v cc thng bo notifications ......................... 20
2.1.Cch ly thng tin t thit b ...................................................................................... 20
2.1.2.Cch ly v tn ca thit b Device Name ........................................................... 20
2.1.3.Cch ly v thng tin phin bn phonegap.......................................................... 21
2.1.4.Cch ly v nn tng thit b Device Platform ..................................................... 21
2.1.5.Cch ly v ID quc t ca thit b UUID ............................................................ 21
2.1.6.Cch ly v thng tin phin bn h iu hnh ..................................................... 22
2.1.7.V d v cch ly thng tin ca thit b ................................................................ 22
2.2.Cch kim tra 1 mng network .................................................................................. 23
Cch xc nh dng kt ni .......................................................................................... 24
2.3.Cch s dng cc thng bo NOTIFICATIONS......................................................... 26
2.3.1.Cch s dng Alerts ........................................................................................... 26
2.3.2.Cch s dng hp thoi tng tc Confirmation Dialogs .................................... 27
2.3.3.Cch s dng Beeps .......................................................................................... 28
2.3.4.Cch s dng ch rung Vibrations ................................................................. 29
2.3.5.V d v cch s dng tt c 4 loi thng bo Notifications ................................ 29
III.Gia tc k Accelerometer ................................................................................................ 32
Ng Quang Trung email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum

3.1.Th no l gia tc k Accelerometer ? ....................................................................... 32
3.2.Cch s dng gia tc k Accelerometer .................................................................... 32
3.3.Cc ng dng dng gia tc k Accelerometer ........................................................... 33
3.4.Cch s dng i tng gia tc k ACCELERATION OBJECT ................................ 36
3.5.Cch s dng cc phng thc ACCELEROMETER METHODS ............................. 37
3.5.1.Phng thc getCurrentAcceleration.................................................................. 37
3.5.2.Phng thc watchAcceleration ......................................................................... 38
3.5.3.Phng thc clearWatch .................................................................................... 39
3.6.La chn cu hnh ACCELEROMETER OPTION ..................................................... 40
3.7.V d v cch s dng gia tc k ACCELEROMETER .............................................. 40
Cch thc v d hot ng ........................................................................................... 41
IV.V tr a l Geolocation ................................................................................................... 42
4.1.Th no l v tr a l Geolocation ? .......................................................................... 42
4.2.Cch s dng Geolocation ........................................................................................ 42
4.3.Cc mu ng dng v Geolocation ........................................................................... 42
4.4.Cc i tng POSITION, POSITIONERROR, v COORDINATES .......................... 45
4.4.1.i tng Position Object ................................................................................... 45
4.4.2.i tng PositionError ...................................................................................... 46
4.4.3.i tng Coordinates Object............................................................................. 46
4.5.V d minh ha v geolocation................................................................................... 46
Cch v d hot ng ................................................................................................... 47
4.6.Cch ci thin giao din v tri nghim ca ngi dng ........................................... 48
V.Media............................................................................................................................... 52
5.1.Cc Media Files l g ? .............................................................................................. 52
5.2.Cch s dng cc Media Files .................................................................................. 52
5.3.Cc ng dng mu s dng media API ..................................................................... 52
5.4.i tng MEDIA OBJECT ....................................................................................... 55
5.5.Cch s dng cc phng thc methods ................................................................. 56
5.5.1.phng thc media.getCurrentPosition .............................................................. 56
5.5.2.Phng thc media.getDuration ......................................................................... 57
5.5.3.Phng thc media.pause ................................................................................. 58
5.5.4.Phng thc media.play..................................................................................... 59
5.5.5.Phng thc media.release ............................................................................... 61
5.5.6.Phng thc media.seekTo ............................................................................... 61
5.5.7.Phng thc media.startRecord ......................................................................... 62
5.5.8.Phng thc media.stop .................................................................................... 63

5.5.9.Phng thc media.stopRecord ......................................................................... 64
5.5.10.Kim sot li MediaError ................................................................................... 65
5.5.11.V d v vic s dng media api ....................................................................... 66
VI.Lu tr Storage .............................................................................................................. 73
6.1.im khc bit gia Session Storage v Local Storage ?.......................................... 75
6.2.Cch s dng local storage ....................................................................................... 76
6.3.Cch s dng i tng DATABASE OBJECT ......................................................... 77
6.3.1.Cch to v Cch m 1 database ....................................................................... 77
6.3.2.Cch chy 1 sql Query ........................................................................................ 78
6.3.3.Cch phn tch v tin x l cc cu lnh SQL (phng chng SQL injection) ..... 81
6.3.4.Cc giao dch Transactions ................................................................................. 82
6.4.Cch xem 1 tp kt qu ............................................................................................. 84
6.5.iu chnh li ............................................................................................................. 86
6.6.V d v cch xy dng 1 database n gin : .......................................................... 89
VII.Files ............................................................................................................................... 91
7.1.H thng FILESYSTEMS .......................................................................................... 91
7.2.Tm hiu v cc th mc dn DIRECTORIES v cc files ......................................... 92
7.2.1.Cch s dng i tng 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.Cch s dng i tng FileEntry Object................................................................ 105
7.8.1.getMetadata ...................................................................................................... 106

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.Cch c cc files - FileReader ............................................................................... 111
7.9.1.readAsDataURL ................................................................................................ 112
7.9.2.abort.................................................................................................................. 113
7.9.3.readAsText........................................................................................................ 114
7.10.Cch c cc files FileWriter .............................................................................. 116
7.11.Cch truyn dn 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.Cch truy cp 1 nh Picture..................................................................................... 127
8.2.Cch thit lp cc cu hnh 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.Lm vic vi cc vn xy ra vi camera ............................................................. 147
IX.Splashscreen ................................................................................................................ 151
10.1.Cch phn quyn Permissions .............................................................................. 151
Android ..................................................................................................................... 151
iOS ............................................................................................................................ 151
10.2.Cch thit lp......................................................................................................... 151
10.3.show ...................................................................................................................... 152

10.4.hide ....................................................................................................................... 153
LI NI U
1 im c nhn mnh rt thch Phonegap, chnh l tnh n gin v hu nh
khng c tnh rng buc. Phonegap c gi l framework tuy nhin n khng ging nh 1
vi framework PHP m mnh tng hc, vi nhng framework PHP ny, n nh ngha li
hon ton cch bn vit m code, v n i hi bn phi hiu r su rng v cc thnh
phn h thng bn trong, th bn mi c th lp trnh thng tho c. Vi Phonegap, n
khng km kp bn vo trong 1 h thng c 1 quy chun ring ri rm no c, bn c th t
do thoi mi lp trnh theo cch m bn mun (tuy nhin ci g cng c 2 mt ca n), bn
ch cn nm bt 1 cng ngh duy nht - cng ngh nn Web(bao gm HTML5, Javascript,
CSS), b qua gnh nng cn phi nm bt v hiu r v cc cng ngh bn trong mi nn
tng (Android, iOS, Blackberry, Windowphone, ) m bn vn c th to ra c cc ng
dng vit mt ln, bin dch qua cloud v chy khp ni tng thch vi hu ht cc nn
tng h iu hnh di ng hin ti.
Ti liu c vit ging nh 1 bn ghi chp, ghi li nhng th m mnh c c t cc
ebook ting anh, do vy b cc sp xp ca n c th cha chnh xc, cch trnh by khng
theo chun 1 ebook no c v nhiu ch vit cha r ngha v khng mch lc do hn ch
v ngoi ng ca bn thn mnh. Ti liu mang m tnh cht c nhn do vy bn s bt
gp trong ti liu ny nhiu on k t in m, in mu, c ch ln bt thng v c t
mu khc nhau - l cc on c lin quan n nhau hay l nhng ghi ch quan trng m
bn cn phi c k.
Ni dung trong ti liu ny c da trn cc cun ebook: Beginning Phonegap Thomas Myer, PhoneGap Essentials - John M. Wargo,
Apache Cordova Documentation 2.2.0 Phonegap team, v 1 s gii thch, nh ngha
v kin trc ca HTML5 t W3C.org. Ti liu ny khng cp ti y cc hm APIs
c Phonegap h tr. C th, cc phn sau b lc b: Capture, Compass, Contacts,
Globalization, Guides (do mnh khng c thi gian vit nt, v mnh cng khng s
dng n cc phn b lc b ny)
Nu c thc mc hay gp g, cc bn c th ng k ngay 1 nick vo din n
www.phonegap.vn/forum t cu hi trc tip, cc MOD v ADMIN s tr li cu hi
ca bn trong thi gian sm nht.
Cc ti liu lin quan
Lp trnh hng i tng trong Javascript v cc kiu mu thit k:

http://www.slideshare.net/myloveforyounqt/lap-trinh-huong-doi-tuong-trongjavascript-va-cac-kieu-mau-thiet-ke
Cch ti u ha mi trng lp trnh ng dng cho Android:

http://www.slideshare.net/myloveforyounqt/cch-ti-u-ha-mi-trng-lp-trnh-ng-dngcho-android-tng-tc-my-o-android
Hoc n gin truy cp vo th mc chia s sau: http://sdrv.ms/VoAXBi (rt c

th trong 1 thi gian na, mnh s vit 1 ebook lin quan n Jquery Mobile, nu c
th cc bn s thy n xut hin trong th mc chia s ny)
I.Events
1 s kin events trong phonegap tng i ging s kin trong javascript.1 hnh ng (thao
tc) c thc hin trn thit b - v d nh document object model (DOM) c ti xong
v do thit b trng thi sn sng ready - v hin ti phonegap c th thc hin 1 vi
th tr li(p ng) li s kin ny
1.1.Hiu thm v events

n gin ha, ta hiu 1 event l bt c hnh ng no m c th c xc nh (nhn
bit) bi phonegap.trong lp trnh javascript truyn thng, bt c phn t no trn 1 trang
page cng c th c cc s kin event no , v n c th c kch hot bi 1 vi m
javascript.v d nh 1 s kin onrollover trn 1 link c th gy ra xut hin 1 bng pop-up,
hay s kin onclick c th gy ra 1 bng hp thoi xem trc
Tm li, s kin events c th l click chut, 1 image loading, rolling over trn 1 link no
hay nhng i tng DOM khc, vic la chn 1 trng input field trong 1 form, submitting
1 form, hay s kin g 1 phm bt k trn bn phm.v a s th tt c cc dng s kin
events trn cng c th c s dng khi ta pht trin cc ng dng s dng phonegap.tuy
nhin c nhng s kin ch c nh ngha bn trong phonegap nh sau :
deviceready
pause
resume
online
offline
backbutton
batterycritical
batterylow
batterystatus
menubutton
searchbutton
startcallbutton
endcallbutton
volumedownbutton
volumeupbutton
trong tt c cc s kin events trn th s kin deviceready l quan trng nht m ta phi
xem xt ti.khng c n th ng dng ca ta s khng bit khi no phonegap c load
hon ton.khi n c kch hot, ta c th gi 1 cch an ton bt c cc hm PhoneGap
function no v do c th ln lt truy cp an ton vo cc API bn a
khi s kin deviceready event c kch hot, th ta bit c 2 iu : DOM c load,
v do vy c PhoneGap API
1.2.Cch s dng EVENTS LISTENER

s dng bt c s kin event no, th ta s cn phi s dng 1 event listener.nh v d
sau : dng xc nh s kin deviceready.ta phi lm nh sau :
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Device Ready Example</title>
<script type=text/javascript charset=utf-8 src=phonegap.js></script>
<script type=text/javascript charset=utf-8>
document.addEventListener(deviceready, onDeviceReady, false);
function onDeviceReady() {
// call the phonegap api
document.addEventListener(pause, onPause, false);
document.addEventListener(resume, onResume, false);
}
function onPause(){
}
function onResume(){
}
</script>
</head>
<body>
</body>

</html>
V d trn nhc nh ta rng deviceready c th l 1 s kin nhng n li khng phi l s
kin chun tc trong trnh duyt, n ch hot ng v nhn bit bi trong phonegap.nu ta
th chy s kin ny trong 1 trnh duyt thng thng th n khng bao gi c kch hot
1.3.Hiu thm v cc dng s kin EVENT TYPES

1.3.1.Backbutton
S kin backbutton c kch hot khi ngi dng n vo nt Back trn thit b Android
xc nh s kin event ny, th ta cn ng k 1 event listener nh sau :
document.addEventListener(backbutton, onBackButton, false);
function onBackButton(){
//handle the back button
}
Cng ging nh cc s kin event khc th ta khng nn ng k ging nh th ny cho ti
khi ta xc nh c s kin deviceready event:
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap backbutton Example</title>
function onDeviceReady()
// Register the event listener

}
// Handle the back button
//
function onBackButton() {

}
</script>
</head>
<body>
</body>
</html>
1.3.2.Deviceready
Nh nhc n t trc, s kin deviceready l s kin quan trng nht m ta c th
xc nh.theo ta cn phi xc nh s kin ny u tin trc khi ta lm bt c nhng g
khc bi v khi n c kch hot th ng ngha vi vic ta chc chn gi c cc
PhoneGap API
function onDeviceReady(){
//ready!
}
dnh cho nhng ngi pht trin trn BlackBerry OS 4.6, th RIM Browserfield khng
h tr hm s kin event ny, nn ta cn s dng PhoneGap.available thay th nh
sau :
function onLoad() {
var intervalID = window.setInterval(
function() {
if (PhoneGap.available) {
window.clearInterval(intervalID);
onDeviceReady();
}
},
500
);
}
// use the phonegap api!
}
10
1.3.3.Menubutton
S kin menubutton c kch hot khi ngi dung n vo nt Menu trn thit b android
xc nh s kin ny, th ta cn ng k 1 event listener nh sau :
document.addEventListener(menubutton, onMenuButton, false);
function onMenuButton(){
//handle the menu button
}
Cng ging nh cc events khc, ta khng nn ng k kiu nh th ny cho ti khi ta xc
nh c s kin deviceready
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap menubutton Example</title>

}
// Handle the menu button
//
function onMenuButton() {
}
</script>
</head>
<body>
</body>
</html>
11
1.3.4.Pause
Khi s kin pause c kch hot l khi 1 ng dng c t vo ch chy nn
xc nh s ki ny, ta ng k 1 event listener nh sau :
function onPause(){
//handle the pause event
}
Hay ta lm theo nh ng tiu chun ging nh trn nh sau :
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap pause Example</title>
}
// Handle the pause
//
function onPause() {
}
</script>
</head>
<body>
</body>
</html>
12
1.3.5.Resume
S kin resume c kch hot khi 1 ng dng ang trng thi tm dng (chy nn)
c kch hot tr li lm vic
function onResume(){
//handle the resume event
}
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap resume Example</title>
}
// Handle the resume
//
function onResume() {
}
</script>
</head>
<body>
</body>
</html>
13
1.3.6.Searchbutton
S kin searchbutton c kch hot khi ngi dng n vo nt Search trn thit b android
document.addEventListener(searchbutton, onSearchButton, false);
function onSearchButton(){
//handle the search button
}
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap searchbutton Example</title>
document.addEventListener(searchbutton, onSearchButton, false);
}
// Handle the search button
//
function onSearchButton() {
}
</script>
</head>
<body>
</body>
</html>
14
1.3.7.Online
S kin online c kch hot khi 1 ng dng phonegap ang online (iu ny c ngha l
n ang c kt ni internet).y l 1 s kin mi c thm vo trong phin bn 0.9.6 v
n ch c h tr trn cc thit b iOS, Android, and BlackBerry
document.addEventListener(online, isOnline, false);
function isOnline(){
//handle the online event
}
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap online Example</title>
document.addEventListener(online, isOnline, false);
}
// Handle the online event
//
function isOnline() {
}
</script>
</head>
<body>
</body>
</html>
15
1.3.8.Offline
S kin offline c kch hot khi 1 ng dng phonegap ang offline (iu ny c ngha l
n khng kt ni internet).y l 1 s kin mi c thm vo trong phin bn 0.9.6 v n
ch c h tr trn cc thit b iOS, Android, and BlackBerry
document.addEventListener(offline, isOffline, false);
function isOffline(){
//handle the offline event
}

<!DOCTYPE html>
<html>
<head>
<title>PhoneGap offline Example</title>
document.addEventListener(offline, isOffline, false);
}
// Handle the offline event
//
function isOffline() {
}
</script>
</head>
<body>
</body>
</html>
16
1.3.9.Mt v d n gin v s phn hi li cc s kin events

Ta to ra ng dng n gin, phn hi li cc s kin pause v resume events :
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Event Example</title>
// Register the event listeners

}
// Handle the pause
//
function onPause() {
alert(Paused!);
}
// Handle the resume
//
function onResume() {
alert(Resumed!);
}
</script>
</head>
<body>
</body>
</html>
17
Chng trnh chy nh th no

event listener l 1 kha quan trng, n dng xc nh khi no s kin deviceready
event c kch hot v khi s kin ny c kch hot th ta bit c rng ta c th gi 1
cch an ton cc API cn li ca phonegap
khi n c kch hot, th s kin deviceready event lm chy hm onDeviceReady()
function v ln lt trong hm ny ng k 2 event listener mi, 1 ci cho s kin pause
event v ci th 2 cho s kin resume event
1.3.10.Mt v d n gin v vic phn hi li cc s kin Button

Events
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Button Example</title>
// Register the event listeners

document.addEventListener(searchbutton, onSearch, false);
}
// Handle the backbutton
//
function onBackButton() {
alert(You hit the back button!);
}
// Handle the menubutton
//
18

function onMenuButton() {
alert(You hit the menu button!);
}
// Handle the searchbutton
//
function onSearchButton() {
alert(You hit the search button!);
}
</script>
</head>
<body>
</body>
</html>
Chng trnh chy nh th no

Chng trnh n gin l u tin tin hnh kim tra chc chn rng ng dng
phonegap sn sng hay cha, v sau ng k 3 event listeners, tng ci 1 dnh cho
cc nt ca thit b nh Search, Menu, v Back buttons
19
II.Cch lm vic vi thit b, mng network, v cc thng

bo notifications
2.1.Cch ly thng tin t thit b
Phonegap c 1 runtime object c gi l i tng thit b device, lu gi thng tin c
ch v thit b.sau y l nhng thuc tnh ca i tng device :
device.name l tn ca thit b (v d nh my iphone)
device.phonegap phin bn ca phonegap
device.platform loi ca thit b (v d nh iphone)
device.uuid s id ca thit b
device.Version phin bn h iu hnh OS ang chy
quan trng phi ch rng : device c gn thnh i tng window object, do vy n

hon ton c phm vi ton cc.hiu theo cch khc, c 2 bin sau u tham chiu ti cng
thit b device :
//both of these reference the same device
var myPhoneName = window.device.name;
var myPhoneName = device.name;
trong phn ny ta s hc ly v cc thng tin sau :
tn ca thit b device
phin bn phonegap
ID quc t dng xc nh thit b duy nht (UUID)
Phin bn h iu hnh ca thit b
2.1.2.Cch ly v tn ca thit b Device Name

ly v tn ca thit b ta s dng device.name nh sau:
var myPhoneName = device.name;
gi tr ny c tr v c thit lp bi nh sn xut v c th bin i t sn phm ny
n sn phm khc v bin i ngay c trn cng 1 phin bn sn phm.v d, y l 1
danh sch ca cc gi tr tr v cho cc loi in thoi khc nhau :
Android Nexus One tr v l Passion ( y l tn m sn phm)
Android Motorola Droid tr v l voles
20
BlackBerry Bold 8900 tr v l 8900
iPhone tr v l tn c thit lp trong iTunes( v d nh Toms phone )
thuc tnh device.name c h tr trong cc thit b Android, BlackBerry, v iPhone
2.1.3.Cch ly v thng tin phin bn phonegap

ly v thng tin phin bn phonegap trn thit b, ta s dng thuc tnh
device.phonegap nh sau :
var myDevicePhoneGap = device.phonegap;
thuc tnh device.phonegap c h tr trn cc thit b Android, Blackberry, v iPhone
2.1.4.Cch ly v nn tng thit b Device Platform

cch ly v tn ca h iu hnh trn thit b, ta s dng device.platform nh sau:
var myDevicePlatform = device.platform;
ph thuc vo thit b device, cu lnh ny tr v cc th sau :
android
blackberry
iphone
webOS
Ch : theo kinh nghim ca lp trnh vin th cc thit b iphone tr v l ios v 1

vi thit b blackberry tr v phin bn h iu hnh thay th cho tn ca h iu hnh.v
d n c th tr v 1.10.3.5 thay cho blackberry
2.1.5.Cch ly v ID quc t ca thit b UUID

mi thit b iu phi c s UUID, s ny c thm vo thit b bi nh sn xut. UUID c
th c nhng chiu di khc nhau ph thuc vo thit b, n c th lun lun c nh
ngha nh l 1 mu model v nn tng platform.v d, android s dng 1 s kiu int ngu
nhin 64-bit; blackberry s dng m PIN 9 k t; v iphone s dng 1 chui string l gi tr
ca hm bm hash
cch ly UUID ca thit b, ta s dng device.uuid nh sau :
var myDeviceID = device.uuid;
thuc tnh device.uuid c h tr trn cc thit b Android, BlackBerry, v iPhone
21
2.1.6.Cch ly v thng tin phin bn h iu hnh

cch ly v tn phin bn h iu hnh ca thit b, ta s dng device.version nh sau :
var myDeviceOS = device.version;
ph thuc vo h iu hnh, ta s ly c v cc gi tr khc nhau.v d trn android, h
iu hnh 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 dng OS 4.6 th tr v l 4.6.0.282 v 1 iphone chy IOS 3.2 tr v l 3.2
thuc tnh device.version c h tr trn cc thit b Android (2.1 and higher), BlackBerry,
and iPhone
2.1.7.V d v cch ly thng tin ca thit b

ta to ra 1 on m n gin dng cho php ta s dng cc phn t device ly v
cc thng tin v thit 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
//
function onLoad() {
}
// okay, 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 />;
22

}
</script>
</head>
<body onload=onLoad()>
<p id=props>Loading device properties...</p>
</body>
</html>
Cch thc chng trnh hot ng

Trong v d ny, ta to ra 1 ti liu HTM n gin, u tin ti v th vin phonegap.js.tip
theo ta vit 1 hm onLoad() function dng ng k 1 event handler bng cch s dng
addEventListener.c bit, ta mun tun theo s kin deviceready event, v khi n c
kch hot th n s chy hm onDeviceReady() function.
Hm onDeviceReady() function lm 2 th : th nht l n in vo 1 on vn vo trong
document DOM c id l props bng cch s dng getElementById, sau n in ra
thng tin v thit b vo trong phn t DOM
Nu ta s dng JQuery, th ta c th n gin vit 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 />);
}
2.2.Cch kim tra 1 mng network

Vi 1 ngi lp trnh nn web hay destop, th ta thng gi nh rng kt ni mng network
lun lun c bt thng qua kt ni c dy hoc khng dy.tuy nhin khi ta bt u lm
vic vi cc thit b di ng, ta khng th lun lun gi nh nh vy.tn hiu kt ni c th
khng tn ti hoc c th rt yu khng n nh, hay ngi dng c th chuyn i t
cellular sang wifi hay ngc li
May mn cho ta l phonegap API c cha 1 i tng l Connection object, i tng ny
cho php ta truy cp vo thng tin kt ni cellular v WiFi ca thit b
23
Cch xc nh dng kt ni
xc nh dng ca kt ni mng network th ta s phi s dng connection.type nh
sau :
function checkConnection(){
var myState = navigator.network.connection.type;
//return a specific state
}
Hm connection.type s tr v 1 trong s danh sch cc dng kt ni c th sau :
UNKNOWN
ETHERNET
WIFI
CELL_2G
CELL_3G
CELL_4G
NONE
1 tng tt lm vic vi cc bng thng ip thng bo ti ngi dng.ta s lm

nh sau :
function checkConnection() {
var networkState = navigator.network.connection.type;
var states = {};
states[Connection.UNKNOWN] = Unknown connection;
states[Connection.ETHERNET] = Ethernet connection;
states[Connection.WIFI] = WiFi connection;
states[Connection.CELL_2G] = Cell 2G connection;
states[Connection.NONE] = No network connection;
alert(Connection type: + states[networkState]);
}
24

v d trn, nu dng kt ni l NONE th thng bo s cha thng ip l No network
connection
v d v cch kim tra mng network kh dng
<!DOCTYPE html>
<html>
<head>
<title>Connectivity Example</title>
checkConnection();
}
function checkConnection() {
var networkState = navigator.network.connection.type;
var states = {};
states[Connection.UNKNOWN] = Unknown connection;
states[Connection.ETHERNET] = Ethernet connection;
states[Connection.WIFI] = WiFi connection;
states[Connection.NONE] = No network connection;
alert(Connection type: + states[networkState]);
}
</script>
</head>
<body>
<p>A dialog box will report the network state.</p>
</body>
</html>
25
Cch thc v d hot ng

u tin ta load th vin phonegap v sau ng k 1 event handler l s kin
deviceready
Khi thit b trng thi sn sng th ta chy navigator.network.isReachable trn
google.com.website ny lun lun sng v n l cng c tt kim tra kt ni mng
network (hay theo cch khc, ta c th khng mun kim tra trn 1 server v n c th cht
bt c lc no khi vo lc ta tin hnh kim tra)
Tip theo, ta thit lp 1 i tng n gin c cha thng bo trng thi network status t
phonegap ging nh cc ch mc keys, vi cc thng ip ta ty chnh ging nh cc gi tr
values y l cch ta trnh khi bt c thng ip kh hiu no c gi ti ngi s
dng thit b
Tip theo, ta chy 1 hm JavaScript alert() cha thng ip v kt ni.n s c pop-up
trn thit b v ngi dng c th tt n
Cui cng, chc chn ta tin hnh chy hm onLoad() t th <body>
2.3.Cch s dng cc thng bo NOTIFICATIONS

Trong nhng v d m ta lm t trc, ta s dng 1 hm tiu chun ca javascript l
alert() hin th thng tin ti ngi s dng( c bit nht l thng tin v trng thi ca kt
ni mng network).mc d ta c th s dng loi h thng thng bo ny trn thit b, tuy
nhin phonegap mang ti tn 4 loi thng bo notifications khc nhau m ta c th tn
dng :
Alerts
Confirmation dialogs
Beeps
Vibrations
2.3.1.Cch s dng Alerts

hin th ra 1 thng bo alert ty chnh hay 1 hp tng tc dialog box, ta s dng hm
notification.alert nh sau :
navigator.notification.alert(message,callback,[title],[button]);
hm ny cn bt buc phi c 2 tham s truyn vo v 2 tham s ty chn :
26
Message 1 chui string cha thng ip (v d nh The network status is WIFI

only
Callback l hm function gi li c gi khi thng bo alert b b qua
Title 1 chui string cha tn tiu ca hp alert (ty chn)
Button 1 chui string cha tn ca nt button (v d nh OK) (ty chn)
Hm notification.alert c h tr trn cc thit b Android, BlackBerry OS 4.6,

webOS,iphone
y l 1 v d hi phc tp bao gm cha tham s callback :
function gameOverDismissed() {
// calculate or store their final score...
}
navigator.notification.alert(
[AU: Be sure you replace all tabs in your code with five spaces.]
Game Over!, // message
gameOverDismissed, // callback
Game Over, // title
Done // buttonName
);
Nu ta ang lm vic trn blackberry hay webOS th ch rng ta s ch c th gi i 1
thng ip (khng ty chnh c tiu titles, tn ca nt button, hay kh nng s dng
hm callback) nh sau :
//BlackBerry 4.6 / webOS
navigator.notification.alert(Game Over! );
2.3.2.Cch s dng hp thoi tng tc Confirmation Dialogs

1 hp thoi confirmation dialog cng ging vi 1 alert, ngoi tr rng n cha nhiu nt
buttons.v d nh 1 hp thoi confirmation dialog a ra cu hi Do you wish to continue?
Th c 2 button l Yes v No
27

to ra 1 hp thoi confirmation dialog, ta s dng hm notification.confirm.ta s cn
ng gi n trong 1 hm function, bi v n thng c gi t 1 link hay 1 button trn giao
din HTML nh sau :
// process the confirmation dialog result
function onConfirm(button) {
alert(You selected button + button);
}
// Show a custom confirmation dialog
//
function showConfirm() {
navigator.notification.confirm(
onConfirm, // callback to invoke with index of button pressed
Game Over, // title
Restart,Exit // buttonLabels
);
}
2.3.3.Cch s dng Beeps

Thnh thong ta khng cn ti 1 hin th thng bo m n gin ch cn 1 ting beep ra
hiu thng bo khi ngi dng lm g . to ra ting beep, ta s dng hm
notification.beep nh sau :
navigator.notification.beep(2);
hm ny cn 1 tham s truyn vo, n l 1 kiu int dng xc nh s ting beep m ta
mun pht
hm ny c h tr trong cc thit b Android, BlackBerry, webOS, v iPhone
Ch : android s chi bn nhc thng bo Notification mc nh c thit lp

Settings Sound and Display panel.cn iphone cng s t chi tham s ting beep truyn
vo
28
2.3.4.Cch s dng ch rung Vibrations

thnh thong khng phi lc no cng thch hp thit b pht ra ting, do phonegap
cung cp 1 hm s dng ch rung l notification.vibrate, hm ny cn 1 tham s
truyn vo l thi gian tnh bng mili giy nh sau :
navigator.notification.vibrate(2000);
hm ny c h tr trong cc thit b Android, BlackBerry, webOS, v iPhone
Ch : iphone s t chi tham s truyn vo v n s rung theo thi gian c thit

lp sn
2.3.5.V d v cch s dng tt c 4 loi thng bo 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
//
function onLoad() {
}
// PhoneGap is ready
//
// Empty
}
// Show a custom alert
//
function showAlert() {
navigator.notification.alert(
29

alertCallback, //callback
Game Over, // title
Available for
download on
Wrox.com
Available for
download on
Wrox.com
Using Notifications 69
Done // buttonName
);
}
//alert call back
function alertCallback(){
//do something... like calculate final score
}
// process the confirmation dialog result
function onConfirm(button) {
alert(You selected button + button);
}
// Show a custom confirmation dialog
//
function showConfirm() {
navigator.notification.confirm(
onConfirm, // callback to invoke with index of button pressed
Game Over, // title
Restart,Exit // buttonLabels
);
}
// Beep twice
//
function playBeep() {
navigator.notification.beep(2);
}
// Vibrate for 4 seconds
30

//
function vibrate() {
navigator.notification.vibrate(4000);
}
</script>
</head>
<body onload=onLoad()>
<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=playBeep(); return false;>Play Beep</a></p>
<p><a href=# onclick=vibrate(); return false;>Vibrate</a></p>
</body>
</html>
Cch thc v d hot ng

v d ny, trong hm onDeviceReady(), ta n trng rng bi v ti liu document chnh
cha 1 dy cc link dng gi cc hm function v ln lt chng s kch hot cc
thng bo khc nhau
v d, bng cch n vo link u tin hm showAlert() s c kch hot v n s hin th 1
thng bo alert ty chnh.link th 2 s kch hot hm showConfirm() hin th ra 1 hp thoi
confirmation box
31
III.Gia tc k Accelerometer
3.1.Th no l gia tc k Accelerometer ?
gia tc k Accelerometer l 1 thit b dng ghi li chuyn ng trong khng gian 3 chiu
XYZ
hnh dung c 3 chiu XYZ, th ta t thit b ln trn 1 b mt phng ging nh trn
mt bn.ta gi s rng b mt ny c rt t ma st v v d nh ta c th t thit b sang
tri v sang phi m khng cn phi nng n ln.mc ch ca v d ny l gip ta hnh
dung c ni ta t thit b ti v tr (0,0,0) trong khng gian ta .bt c cch no m ta
dng di chuyn thit b th s dn n 1 s thay i trong h ta
nu thit b l mng nm trn mt bn v khi ta di chuyn n sang tri hay sang phi th
chnh l ta di chuyn n dc theo trc X.ta di chuyn n sang tri l ta cho n 1 kt qu m,
v ta di chuyn n sang phi th ta cho n kt qu dng.nu ta di chuyn thit b ra xa bn
hay ti gn ch ta th chnh l ta ang di chuyn n trn trc Y.nu di chuyn n ra xa th ta
c kt qu dng theo trc Y, v nu di chuyn n li gn th ta c kt qu m
trc Z c miu t l chiu ln xung v c thm vo lm chiu th 3 ca h trc ta
.nu ta cm ly thit b v cm n tin n mt th ta c kt qu dng theo trc Z.nu
ta cho thit b xung di mt bn th ta c kt qu m theo trc Z
tt nhin rt l kh khn khi ta dch chuyn 1 thit b theo ch 1 trc m khng gy nh
hng ti cc trc khc.nu ta cm thit b ln ( v nh di chuyn n ti gn mt) th ta nhn
c kt qu dng i vi trc Z, nhng cng ging nh vy khi ta mang n gn c th
hn th thu c kt qu m theo trc Y
gi hnh dung xem, chuyn g s xy ra nu ta tung thit b quay tr li b mt bn - nh
ng tung qu mnh ta c th lm v n.khi gia tc k accelerometer bn trong thit b
s xc nh tt c chuyn ng dc theo trc XYZ
3.2.Cch s dng gia tc k Accelerometer

nh rng gia tc k c th xc nh c chuyn ng, nghing, v gia tc do n
dng to ra cc ng dng sng to
Lm th na to ra 1 ng dng dng xc nh chuyn ng ca ngi v gi

cc vt ca chng trong lc ngi s dng ang thc hin? tt c nhng g ngi
dng phi lm l bt ng dng ln v t thit b vo trong ti
32
Dnh cho cc v tr c nh sng thp, th ta c th t ng chp 1 bc nh vi

camera ca thit b nu thit b vn hot ng tt
Ta c th xy dng 1 game m trong ta iu khin cc b phn c tng tc vi

nghing hay chuyn ng ca thit b
3.3.Cc ng dng dng gia tc k Accelerometer

nu ta c 1 chic iphone, v ta hu nh chc chn bit n hay tng chi DoodleJump
nh trong hnh di. DoodleJump l 1 game d gy nghin n cho php nhn vt ca ta
nhy t mc ny ti mc khc bng cch s dng gia tc k xc nh chuyn ng sang
tri/phi
1 game kh ph bin khc l Super Monkey Ball nh trong hnh 6-2. tng nm ng
sau game ny l hng dn 1 ch kh nh d thng vt qua cc chng ngi vt khc
nhau bng cch nghing hay lc iphone
33
Trn thit b android, ta cng c Hyperspace nh trong hnh 6-3, trong ta s dng
nghing hay chuyn ng iu khin 1 tri bng i xuyn qua cc chng ngi vt.
tt nhin, c v s cc ng dng s dng gia tc k accelerometer
34
35
3.4.Cch s dng i tng gia tc k ACCELERATION

OBJECT
i tng gia tc k ACCELERATION OBJECT l 1 i tng ch c th c v n cha d
liu gia tc k c chp li ti 1 im xc nh trong 1 thi im.v i tng ny c cc
thuc tnh :
X - i lng chuyn ng trn trc X, c trnh by l 1 s
Y - i lng chuyn ng trn trc Y, c trnh by l 1 s
Z - i lng chuyn ng trn trc Z, c trnh by l 1 s
Timestamp mc thi gian lc to ra, c trnh by trong mili giy
i tng ny c to ra v c c tr trong phongegap v n tr v 1 phng thc

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
function onSuccess(acceleration) {
alert(Acceleration X: + acceleration.x + \n +
Acceleration Y: + acceleration.y + \n +
Acceleration Z: + acceleration.z + \n +
Timestamp: + acceleration.timestamp + \n);
};
36

function onError() {
alert(Sorry! Error!);
};
3.5.Cch s dng cc phng thc ACCELEROMETER

METHODS
3.5.1.Phng thc getCurrentAcceleration
ly v gia tc k hin ti theo trc XYZ th ta phi s dng phng thc
accelerometer.getCurrentAcceleration nh sau :
navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess,
accelerometerError);
d liu acceleration data c tr v thng qua hm accelerometerSuccess callback :

Timestamp: + acceleration.timestamp + \n)
};
alert(ooooops!);
};
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
Ch : trn cc thit b IOS, th vic gi phng thc getCurrentAcceleration() s

khng lm vic nh cch m ta ngh,dng thay th cho current acceleration th n s bo
co v gi tr cui cng c bo co t li gi PhoneGap accelerometer. thay th, ta s
cn s dng phng thc watchAcceleration()
37
3.5.2.Phng thc watchAcceleration

Phng thc watchAcceleration cho php ta ly v d liu gia tc k 1 khong thi gian
chnh xc.nu ta thit lp 1 bin cha li gi phng thc v chuyn tip vo trong 1 tham
s tn sut nh l 1 trong nhng la chn, th ta s ly v d liu gia tc k da trn 1 chu
k chun nh sau :
Timestamp: + acceleration.timestamp + \n);
};
alert(onError!);
};
var options = { frequency: 1000 }; // Update every second
var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError,
options);
on code trn s to ra 1 thng bo alert theo chu k tng giy mt.1 hm hu dng c
th l 1 vi th ging nh di m trong cc phn t DOM lun c lm mi bn
trong HTML, v do vy n cho ta bit s in d liu ra mn hnh hu dng 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);
myX.innerHTML(acceleration.x);
myY.innerHTML(acceleration.y);
myZ.innerHTML(acceleration.z);
myT.innerHTML(acceleration.timestamp);
}
alert(oooops!);
38

};
var options = { frequency: 1000 }; // Update every second
var
watchID = navigator.accelerometer.watchAcceleration(onSuccess,
onError,
options);
on code trn hot ng, ta phi chc chn l to ra cc phn t DOM tng ng thch
hp nh sau :
<div id=my_x></div>
<div id=my_y></div>
<div id=my_z></div>
<div id=my_timestamp></div>
Ch : trong iOS th gia tc k c quan tm c bit, do vy phonegap s b gii

hn mc chu k nh nht l 40 mili giy v ln nht l 1000 mili giy.do vy nu ta yu cu
1 cp nht c chu k l 3000 mili giy(hay l 3 giy) th phonegap s yu cu 1 chu k l
1000 mili giy trn thit b nhng s gi hm callback thnh cng li da vo yu cu l chu
k 3000 mili giy
3.5.3.Phng thc clearWatch

ngng vic xem cc d liu gia tc k c to bi phng thc watchAcceleration(),
th ta phi s dng phng thc clearWatch() v tham chiu ti bin m ta va to ra t
trc nh sau :
watchID);
navigator.accelerometer.clearWatch(
thng thng, ta s kch hot s kin ny thng qua 1 nt click nh sau :

<button onclick=stopWatch();>Stop Watching</button>
Tt nhin, ta cng c th gn s kin ny ti 1 vi loi chu k nh sau : thu thp d liu
trong 30 giy ri ngng li
39
3.6.La chn cu hnh ACCELEROMETER OPTION

thit lp tn s l 5 giy, ta lm nh sau :
var options = { frequency: 5000 }; // Update every 5 seconds
options);
thit lp tn s thnh na giy th ta s dng nh sau :
var options = { frequency: 500 }; // Update every .5 seconds

options);
3.7.V d v cch s dng gia tc k ACCELEROMETER
<!DOCTYPE html>
<html>
<head>
<title>Acceleration Example</title>
var watchID = null;
// Wait for PhoneGap to load
// PhoneGap is ready, start watching
startWatch();
}
// Start watching the acceleration
function startWatch() {
// Update acceleration every 3 seconds
var options = { frequency: 3000 };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError,
options);
}
40

// Stop watching the acceleration
function stopWatch() {
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
}
// onSuccess: Get a snapshot of the current acceleration
function onSuccess(acceleration)
var element = document.getElementById(accelerometer);

element.innerHTML = Acceleration X: + acceleration.x + <br /> +
Acceleration Y: + acceleration.y + <br /> +
Acceleration Z: + acceleration.z + <br /> +
Timestamp: + acceleration.timestamp + <br />;
}
// onError: Failed to get the acceleration
//
alert(oooops!);
}
</script>
</head>
<body>
<div id=accelerometer>Waiting for accelerometer...</div>
<button onclick=stopWatch();>Stop Watching</button>
</body>
</html>
Cch thc v d hot ng

Khi ng dng va load xong th hm startWatch() c kch hot.hm ny s dng phng
thc watchAcceleration() khi to vic xem d liu gia tc k v bo co li thng tin v
ta trc XYZ v timestamp ri in ra hin th HTML
41
IV.V tr a l Geolocation
4.1.Th no l v tr a l Geolocation ?
Geolocation bao hm cch xc nh v tr a l tht ca 1 thit b - trong trng hp ny l
in thoi smartphone m ta s dng.cch thng thng nht xc nh v tr a l ca 1
thit b l s dng tnh nng GPS cha bn trong smartphone dng xc nh kinh v
v
Tuy nhin, 1 vi thit b c th s dng nhng dch v khc suy lun ra 1 v tr v d
nh : 1 a ch IP, xc nh tn s radio (RFID), a ch truy cp wifi (MAC), hay trm pht
sng.bi v c rt nhiu phng thc khc nhau c s dng thu thp cc ta v tr,
do vy khng ai c th m bo rng phonegap API s tr v v tr tht s ca thit b
4.2.Cch s dng Geolocation

L do hin nhin nht s dng Geolocation gn y l xu hng dng xc nh ni
m c 1 vi th xy ra.v d nh d liu Geolocation c thm vo cc bc nh hay trn
cc mng x hi,
Tuy nhin cc ng dng Geolocation ch yu ch r cc v tr th gii tht ( ging nh nh
hng, qun bar, ) v kt hp chng vi thit b trn tay ngi s dng
Theo c 3 cch sng to m ta c th thm d liu geolocation vo bt c ng dng no
:
Khng ch thm kinh v v m cn thm vo tiu v cao vo cc bc nh
Cho php ngi dng tch vo bt c ta do h c th lu gi c du vt

qung ng mnh i
4.3.Cc mu ng dng v Geolocation

Cc ng dng v Geolocation ni ting l foursquare (hnh 8-1) v Gowalla (hnh 8-2).c
2 ng dng u l min ph v tng thch vi cc nn tng thit b khc nhau.ta c th
ng k v bt u s dng chng.nu ta ang trong 1 nh hng n hay 1 qun bar th ta
c th s dng chng tch vo v s dng facebook hay twitter thng bo cho bn b
bit ni ta ang c mt
42
C 2 ng dng Gowalla v foursquare u hng ti mi trng mng x hi nhng

ngi s dng khng ch tch vo v tr ca mnh m cn truy cp c vo cc cuc hn v
cc li ngh c to bi v tr ca cc nh bn l.
43

Tt nhin, nu ta l ngi dng facebook hay google+, th ta c th tham gia vo trong cc
games lin quan n geolocation.nh hnh 8-3, cc a im trong facebook cho php ta
ng k 1 v tr v sau ni cho nhng ngi bn khc ni m ta c mt
Trn google+, ta c th d dng ng k 1 a im bng cch tch vo checkbox gc

pha trn bn phi ca trang nh hnh 8-4.sau ta c th la chn 1 v tr t danh sch
cc a im ln cn v thm 1 bn ghi ch v 1 bc nh v ng n ln
44
4.4.Cc i tng POSITION, POSITIONERROR, v

COORDINATES
PhoneGap Geolocation API s dng 3 i tng ch c cha cc thng tin geolocation :
Position
PositionError
Coordinates
Mi i tng trong cc i tng trn c to ra v tnh ton khi ta s dng cc phng

thc khc nhau, v d liu c tr v ging nh 1 phn ca cc hm gi li callback
4.4.1.i tng Position Object

i tng Position Object cha cc ta c to ra bi geolocation API v n gm 2
thuc tinh sau :
Coords y l 1 tp cc ta a l (nh kinh , v , cao,..)
Timestamp thi im c to tnh bng mili giy
V d gi hm geolocation.getCurrentPosition() nh v d di th kt qu tr v gm c
kinh , v , cao, chnh xc, chnh xc cao, tiu , tc , v timestamp,
c truyn vo hm onSuccess :
var onSuccess = function(position)
alert(Latitude: + position.coords.latitude + \n +
Longitude: + position.coords.longitude + \n +
Altitude: + position.coords.altitude + \n +
Accuracy: + position.coords.accuracy + \n +
Altitude Accuracy: + position.coords.altitudeAccuracy + \n +
Heading: + position.coords.heading + \n +
Speed: + position.coords.speed + \n +
Timestamp: + new Date(position.timestamp) + \n);
}
function onError(error) {
alert(code: + error.code + \n +
message: + error.message + \n);
}
45

navigator.geolocation.getCurrentPosition(onSuccess, onError);
4.4.2.i tng PositionError

nh ta nhn thy trong v d trc th ta cng c kh nng truy cp vo 1 hm onError
callback.hm ny tr v 2 thuc tnh ca vn l error code v error message
error code s l 1 trong nhng li c nh ngha trc nh sau :
PositionError.PERMISSION_DENIED
PositionError.POSITION_UNAVAILABLE
PositionError.TIMEOUT
V error message s c miu t chi tit li gp phi
4.4.3.i tng Coordinates Object

i tng Coordinates Object bao gm 1 tp cc thuc tnh ch c.ta gp chng trong
v d trc nh l 1 phn ca i tng Position object.trong thc t, th d liu
Coordinates c nh thm vo i tng Position object v sau c tr v thng qua
hm onSuccess
Cc thuc tnh ca i tng Coordinates object:
V latitude l kim s thc
Kinh longitude - l kim s thc
D cao altitude cao tnh bng m so vi mc nc bin
D chnh xc accuracy l chnh xc ca vic c v /kinh
D chnh xc altitudeAccuracy l chnh xc ca cao
Tiu heading l hng di chuyn
Tc speed l tc so vi mt t (m/s)
4.5.V d minh ha v geolocation
<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
46

var watchID = null;
// Update every 3 seconds
var options = { frequency: 3000 };
watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
}
// onSuccess Geolocation
//
function onSuccess(position) {
var element = document.getElementById(geolocation);
element.innerHTML =Latitude: + position.coords.latitude + <br /> +
Longitude: + position.coords.longitude + <br /> +
<hr /> + element.innerHTML;
}
// onError Callback receives a PositionError object
//
}
</script>
</head>
<body>
<p id=geolocation>Watching geolocation...</p>
</body>
</html>
Cch v d hot ng
Khi ng dng c ti xong th phng thc watchPosition() c kch hot v c mi 3
giy th thit b li nhn c 1 cp nht mi v kinh v v
47
4.6.Cch ci thin giao din v tri nghim ca ngi dng

Nu ta nhn vo giao din ca ng dng geolocation m ta to ra trn th ta s nhn
thy n khng c p v n trng ging nh hnh 8-5.thc t th, tt c nhng g n thc
hin l thm lin tc cc thng tin v geolocation vo trong mn hnh cho ti khi ta tt n
tin hnh giao din UI, u tin ta phi chc chn rng project ca ta c cc th mc
jQTouch cn thit bn trong n nh c m t trong chng trc.lu t ln u
on code sau on script ti phonegap.js:
<style type=text/css media=screen>@import jqtouch/jqtouch.css;</style>
<style type=text/css media=screen>@import themes/jqt/theme.css;</style>
<script src=jqtouch/jquery-1.4.2.js type=text/javascript charset=utf-8></script>
<script src=jqtouch/jqtouch.js type=application/x-javascript charset=utf-8></script>
var jQT = new $.jQTouch({
icon: jqtouch.png,
48

icon4: jqtouch4.png,
addGlossToIcon: false,
startupScreen: jqt_startup.png,
statusBar: black,
preloadImages: [
themes/jqt/img/activeButton.png,
themes/jqt/img/back_button.png,
themes/jqt/img/back_button_clicked.png,
themes/jqt/img/blueButton.png,
themes/jqt/img/button.png,
themes/jqt/img/button_clicked.png,
themes/jqt/img/grayButton.png,
themes/jqt/img/greenButton.png,
themes/jqt/img/redButton.png,
themes/jqt/img/whiteButton.png,
themes/jqt/img/loading.gif
]
});
</script>
Tip theo, ta cn 1 on HTML t trong th <body> nh sau :
<div id=home class=current>
<div class=toolbar>
<h1>Geolocation</h1>
</div>
<p id=geolocation>Watching geolocation...</p>
</div>
Kt qu c lm p s trng nh hnh 8-6
49
y vn cha phi l giao din UI p, nhng n nhn p hn v d gc.lm cch no ta

c th ci tin n ? n gin lm c iu ny, ta c th n gin ha d liu tr v t
hm onSuccess function. thay th vic in lan man ton b thng tin, ta c th lm nh
sau :
function onSuccess(position) {
var element = document.getElementById(geolocation);
element.innerHTML =Position: + position.coords.latitude + , +
+ position.coords.longitude + <br /> +
<br/> + element.innerHTML;
}
Kt qu s ging nh hnh 8-7.thng tin s tr nn gn gng hn
50
51
V.Media
5.1.Cc Media Files l g ?
Media API cho php ta ghi li v chi cc file m thanh audio trn 1 thit b.c bit l ta c
th chy cc files audio c load trc tip trn thit b hay chi cc files audio ti v thng
qua internet
Ch : 1 iu quan trng cn phi nh rng l thc thi PhoneGap hin ti khng

theo chun ca W3C ginh cho media, v bt c cc thc thi trong tng lai c th
xung t vi cc APIs hin ti.xa hn na th cc Media API ch tng thc vi cc thit
b Android v iOS
5.2.Cch s dng cc Media Files

C kh nng chi music hat cc audio files khc t trong smartphone 1 cch kh thun
tin.v d, nu ta ang trn 1 hnh trnh di v khng c 1 quyn sch no trn tay, khng
thnh vn , ta c th nghe 1 cun sch audio
Xa hn, kh nng ghi li audio cng tr nn thun tin.nu ta ang ch cho 1 cuc hn no
v cn ghi li 1 vi li nhc nh sau th ta c th s dng thit b ging nh 1 my ghi
ch.cht lng ca audio c ghi li kh n, file xut ra l theo nh dng mp3, nn tht
d dng kt hp cht ch vi cc cng c chnh sa audio
Theo c 3 cch thm vic chy/ghi m li media vo ng dng :
To ra 1 trnh ghi m n gin gip ch cho vic nh nh
Kt hp cht ch vi cc tnh nng recording/playback vi 1 ng dng ghi ch ging

nh Evernote
To ra 1 trnh chi audio n gin chy cc files trn web
5.3.Cc ng dng mu s dng media API

Cc ng dng tiu chun trn iOS nh Voice Memos v iPod (nh hnh 9-1) cho php ta
ghi m li cc ghi ch bng audio v chi cc audio files
52
Tt nhin, ch v apple cung cp nhng app ny min ph th khng c ngha l nhng app
khc ging nh vy khng tn ti.hnh 9-2 ch ra rng c v s cc app nh vy trn app
store.v tt c chng cung cp cng nhng tnh nng c bn nh nhau - record, pause,
play, v stop recording.1 vi c thm kh nng chia s cc file ghi m qua e-mail, cc dch
v chia s media
Nu ta tm kim cc ng dng music apps, th ta cng c kha kh 1 danh sch cc apps

nh hnh 9-3
53
1 la chn ph bin l Pandora nh hnh 9-4, ng dng ny hng ti dch v music trn
web.v dch v Pandora a ra 1 cch th v ti cng 1 bn nhc.iu ny c ngha l khi
ta mun nghe music ca nhm nhc Creedence Clearwater Revival (CCR).th ta to ra 1
trm station dnh cho ban nhc ny v sau Pandora s tm kim m nhc ch khng
ch chn la cc bn ghi m ca CCR m cn tm kim cc bi ht khc t cc ban nhc
khc cng th loi nhc m ta mun tm.sau ta c th chia s trm radio station mi
ny cho nhng ngi khc
a s (khng phi tt c ) cc ng dng m nhc ph bin u c mt trn android.ch

rng, nh trong hnh 9-5 th giao din ca Pandora rt trc quan v p
54
5.4.i tng MEDIA OBJECT

var media = new Media(src, mediaSuccess, [mediaError], [mediaStatus]);
i tng PhoneGap Media object gm 4 tham s, 3 trong s l ty chn :
src l 1 URL (l URL dn ti 1 file trn internet) cha ni dng audio
mediaSuccess (tham s ty chn) y l 1 hm callback c gi sau khi 1 i

tng Media object c hon thnh xong thao tc hin ti nh play, record, v
stop (v d nh ta ang play 1 bn nhc th phi khi chi xong ht bn nhc y
th cc lnh trong hm mediaSuccess mi c thc hin )
mediaError (tham s ty chn) y l 1 hm callback c gi khi xy ra li
mediaStatus - (tham s ty chn) y l 1 hm callback c gi xc nh

nhng thay i trng thi
cc tham s ch c :
position : l v tr trong phm v pht audio.ch rng n khng c cp

nhp trong sut qu trnh chy m phi gi phng thc getCurrentPosition() cp
nhp
duration : l tng s thi gian ca file media tnh theo giy
55
5.5.Cch s dng cc phng thc methods

trong phn ny th ta hc cch s dng cc phng thc chnh trong media API.cc
phng thc ny cho php ta thao tc play, record, v pause,
Ch : nu ta lm vic vi phin bn Phonegap 0.9.4 tr v trc th ta phi chc

chn rng cc hm callback phi trong phm vi ton cc
5.5.1.phng thc media.getCurrentPosition

ly v v tr hin ti trong phm vi 1 audio file, ta s dng phng thc
media.getCurrentPosition nh sau :
media.getCurrentPosition(mediaSuccess,[mediaError]);
tham s th 1 l hm mediaSuccess l 1 hm callback c gi vi v tr
position hin ti (c tnh bng giy) v tham s th 2 ty chn l mediaError

l 1 hm callback c gi trong trng hp xy ra li
phng thc getCurrentPosition() l 1 hm khng ng b (ngha l n khng t gi li
lin tc theo chu k m mun nh vy ta phi thit lp bng tay) dng tr v v tr hin ti
ca audio file nm di 1 i tng Media object, v n cng cp nht tham s
position trong phm vi i tng Media object.

Phng thc ny h tr cc nn tng :
Android
BlackBerry WebWorks (OS 5.0 and higher)
iOS
Windows Phone 7 ( Mango )
V d mu :
// Audio player
//
var my_media = new Media(src, onSuccess, onError);
setInterval(function,mi
llisec,lang)hm ny
// Update media position every second
c tc dng gi lp i
lp li 1 hm function
no theo 1 chu k
Ng Quang Trung email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 56
thi gian millisec
var mediaTimer = setInterval(function()
// get media position

my_media.getCurrentPosition(
// success callback
position) {
function(
position > -1) {
if (
console.log((
position) + " sec");
}
},
// error callback
function(e) {
console.log("Error getting pos=" + e);
}
);
}, 1000);
5.5.2.Phng thc media.getDuration
media.getDuration();
Phng thc getDuration() l 1 hm khng ng b (ngha l n khng t gi li lin tc
theo chu k m mun nh vy ta phi thit lp bng tay) dng tr v khong thi gian ca
audio file c tnh theo giy nu bit.cn nu khong thi gian l cha xc nh th n
tr v gi tr l -1
Phng thc ny h tr cc nn tng :
Android
iOS
57

V d mu :
// Audio player
//
// Get duration
var counter = 0;
var timerDur = setInterval(function() {
counter = counter + 100;
clearInterval(id_of_setinterval)
xa b i s lp li ca hm
function c lp bi
setInterval vi
var id_of_setinterval =
setInterval(function,milisec)
if (counter > 2000) {

clearInterval(timerDur);
}
var dur = my_media.getDuration();
if (dur > 0) {
clearInterval(timerDur);
document.getElementById('audio_duration').innerHTML = (dur) + " sec";
}
}, 100);
5.5.3.Phng thc media.pause

Phng thc ny dng tm dng vic chy 1 audio file
media.pause();
hm media.pause() l 1 hm khng ng b dng tm dng 1 audio file
phng thc ny h tr cc nn tng :
Android
iOS
58

V d mu v tm dng chy audio file sau khi chy c 10 giy :
// Play audio
//
function playAudio(url) {
// Play the audio file at url
var my_media = new Media url,

// success callback
function() {
console.log("playAudio():Audio Success");
},
// error callback
function(err) {
console.log("playAudio():Audio Error: "+err);
} ;
// Play audio
my_media.play();
// Pause after 10 seconds

setTimeout(function() {
media.pause();
}, 10000);
setTimeout(code,millisec,lang)
hm hn gi gi hm
(khng thc hin lp li theo
chu k)
5.5.4.Phng thc media.play

Phng thc ny dng khi chy hay tip tc chy 1 audio file
media.play();
hm media.play() l 1 hm khng ng b. thc s chy c 1 file th ta cn chuyn
tip vo 1 URL hay 1 ng dn path ti ni cha file nh sau :
59

// Play audio
//
var my_media = new Media(url,
// success callback
function() {
},
// error callback
function(err) {
});
// Play audio
my_media.play();
}
Ch :
Trong BlackBerry WebWorks :
Cc thit b blackberry h tr gii hn cc knh audio cng lc.cc thit b CDMA ch

h tr 1 knh audio.nhng thit b khc h tr 2 knh audio cng lc.do vy vic c
gng chi nhiu hn 2 audio files cng lc th kt qu l audio file bt trc s b
ngng li
Trong iOS :
numberOfLoops
c chuyn tip vo trong la chn options ca phng thc play nh ngha s ln m

ta mun media file c chi :
var myMedia = new Media("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3")
myMedia.play({ numberOfLoops: 2 })
60
5.5.5.Phng thc media.release

ta c th gii phng cc ngun audio nm bn di h iu hnh bng cch s dng
phng thc release().y l 1 iu c bit quan trng bi v c 1 s hu hn cc thc th
opencore c dnh cho trnh chy media.cc th vin OpenCore h tr pht media nh
audio,video, cc nh dng nh image.ta lun lun gi hm gii phng ny khi ta khng cn
cn ti 1 ngun media.nh v d sau :
media.release();
do vy khi x l hon thnh th ta nn lm nh sau :
var my_file = new Media(src, onSuccess, onError);
my_file.play();
my_file.stop();
my_file.release();
5.5.6.Phng thc media.seekTo

dng thit lp v tr hin ti trong phm vi 1 audio file
media.seekTo(milliseconds);
tham s :
milliseconds: l v tr c thit lp lm v tr pht trong phm vi audio tnh bng mili

giy
hm media.seekTo l 1 hm khng ng b dng cp nht v tr hin ti ca audio file

nm di 1 i tng media object.cng cp nht tham s _position trong phm vi i
tng media object
phng thc ny h tr cc nn tng :
Android
iOS
V d mu :
61

// Audio player
//
my_media.play();
// SeekTo to 10 seconds after 5 seconds
my_media.seekTo(10000);
}, 5000);
5.5.7.Phng thc media.startRecord

Dng ghi m li 1 audio file :
media.startRecord();
hm media.startRecord() l 1 hm khng ng b
v d mu :
// Record audio
//
function recordAudio() {
var src = "myrecording.mp3";
var mediaRec = new Media(src,
// success callback
function() {
console.log("recordAudio():Audio Success");
},
// error callback
function(err) {
console.log("recordAudio():Audio Error: "+ err.code);
});
// Record audio
mediaRec.startRecord();
}
62
Ch :
Trong BlackBerry WebWorks :
Cc thit b blackberry ghi li audio trong nhiu nh dng c cht lng khc
nhau.cc file ny phi kt thc vi ui m rng l .amr
Trong iOS :
File ghi m phi tn ti ri v phi c dng l .wav v file API c th c s

dng to ra file ny
5.5.8.Phng thc media.stop

Dng dng pht 1 audio file
media.stop();
hm media.stop l 1 hm khng ng b dng ngng pht 1 audio file :
phng thc ny h tr cc nn tng sau :
Android
iOS
V d mu :
/ Play audio
//
var my_media = new Media(url,
// success callback
function() {
},
// error callback
63

function(err) {
});
// Play audio
my_media.play();
// Stop after 10 seconds

my_media.stop();
}, 10000);
}
5.5.9.Phng thc media.stopRecord

Dng dng vic ghi m li 1 audio file
media.stopRecord();
hm media.stopRecord l 1 hm khng ng b dng ngng vic ghi m 1 audio file
phng thc sau h tr cc nn tng sau :
Android
iOS
V d mu :
// Record audio
//
var src = "myrecording.mp3";
var mediaRec = new Media(src,
// success callback
function() {
console.log("recordAudio():Audio Success");
},
64
// error callback
function(err) {
console.log("recordAudio():Audio Error: "+ err.code);
});
// Record audio
// Stop recording after 10 seconds

mediaRec.stopRecord();
}, 10000);
}
5.5.10.Kim sot li MediaError

1 i tng MediaError c t v trong hm mediaError callback khi xy ra li
Cc thuc tnh ca i tng :
Code : 1 trong nhng m code thng bo li error codes c nh ngha t trc

s c lit k ra
Message : thng tin v li Error message m t chi tit v li
Cc m error codes bao gm :
MediaError.MEDIA_ERR_ABORTED
MediaError.MEDIA_ERR_NETWORK
MediaError.MEDIA_ERR_DECODE
MediaError.MEDIA_ERR_NONE_SUPPORTED
Cch tip cn thn thin cho vn kim sot li ny l thit lp 1 mng array cha cc
trng thi li s dng cc constants ging nh l cc ch mc key, v tng ng vi n l
cc thng bo li t nh ngha.theo cch ny ta c th hin th nhng thng bo li d hiu
ti ngi dng nh sau :
funciton onError(error){
var errors = {};
65

errors[MediaError.MEDIA_ERR_ABORTED]= Stopped playing!;
errors[MediaError.MEDIA_ERR_NETWORK]= Network error!;
errors[MediaError.MEDIA_ERR_DECODE] = Could not decode file!;
errors[MediaError.MEDIA_ERR_NONE_SUPPORTED] = Format not supported!;
alert(Media error: + errors[error]);
5.5.11.V d v vic s dng media api

5.5.11.1.V d xy dng 1 trnh chi audio n gin
<html>
<head>
<title>Media Example</title>
playAudio(http://example.com/audio.mp3); //change me!
}
var my_media = null;
var mediaTimer = null;
// Play audio
//
function playAudio(src) {
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
// Play audio
my_media.play();
// Update my_media position every second
if (mediaTimer == null) {
mediaTimer = setInterval(function() {
// get my_media position
my_media.getCurrentPosition(
66

// success callback
function(position) {
if (position > -1) {
setAudioPosition((position/1000) + sec);
}
},
// error callback
function(e) {
console.log(Error getting pos= + e);
setAudioPosition(Error: + e);
}
);
}, 1000);
}
}
function pauseAudio() {
if (my_media) {
my_media.pause();
}
}
function stopAudio() {
if (my_media) {
my_media.stop();
}
clearInterval(mediaTimer);
mediaTimer = null;
}
function onSuccess() {
console.log(playAudio():Audio Success);
}
}
function setAudioPosition(position) {
document.getElementById(audio_position).innerHTML = position;
}
67

</script>
</head>
<body>
<a href=# onclick=playAudio(http://example.com/audio.mp3);>
Play Audio</a>
<a href=# onclick=pauseAudio();>Pause Playing Audio</a>
<a href=# onclick=stopAudio();>Stop Playing Audio</a>
<p id=audio_position></p>
</body>
</html>
5.5.11.2.Cch xy dng 1 ng dng ghi m audio n gin

<html>
<head>
<title>Device Properties Example</title>
var src = myrecording.mp3;
var mediaRec = new Media(src, onSuccess, onError);
}
startRecording();
}
function startRecording() {
recordAudio();
}
function stopRecording(){
mediaRec.stopRecord();
}
function onSuccess() {
console.log(recordAudio():Audio Success);
}
68

}
function setAudioPosition(position) {
document.getElementById(audio_position).innerHTML = position;
}
</script>
</head>
<body>
<a href=# onClick=startRecording()>Start Recording</a><br/><br/>
<a href=# onClick=stopRecording()>Stop Recording</a>
</body>
</html>
5.5.11.3.Ci thin giao din v tri nghim

Vi d trn n gin ch l cc ng links s si v trng khng trc quan v kh s dng
nh hnh 9-7
69
ci thin giao din ngi dng, u tin ta phi m bo rng project ca ta cn thit
phi c cc th mc jQTouch folders trong n, nh ni n trong cc chng
trc.t on code ny vo trc on load phonegap.js:
<style type=text/css media=screen>@import jqtouch/jqtouch.css;</style>
<style type=text/css media=screen>@import themes/jqt/theme.css;</style>
<script src=jqtouch/jquery-1.4.2.js type=text/javascript charset=utf-8></script>
<script src=jqtouch/jqtouch.js type=application/x-javascript charset=utf-8></script>
var jQT = new $.jQTouch({
icon: jqtouch.png,
icon4: jqtouch4.png,
addGlossToIcon: false,
startupScreen: jqt_startup.png,
70

statusBar: black,
preloadImages: [
themes/jqt/img/activeButton.png,
themes/jqt/img/back_button.png,
themes/jqt/img/back_button_clicked.png,
themes/jqt/img/blueButton.png,
themes/jqt/img/button.png,
themes/jqt/img/button_clicked.png,
themes/jqt/img/grayButton.png,
themes/jqt/img/greenButton.png,
themes/jqt/img/redButton.png,
themes/jqt/img/whiteButton.png,
themes/jqt/img/loading.gif
]
});
</script>
V sau thm on HTML sau vo th <body> :

div id=home class=current>
<div class=toolbar>
<h1>Audio Player</h1>
</div>
<ul class=rounded>
<li id=play class=whitebutton onclick=playAudio
(http://example.com/audio.mp3);>Play</li>
<li id=pause class=graybutton onclick=pauseAudio();>Pause</li>
<li id=stop class=graybutton onclick=stopAudio();>Stop</li>
</ul>
</div>
Ch rng on code ny c gn cc lp classes vo cc phn t <li>.nt Play c class tn

l whitebutton v 2 nt khc c tn class l graybutton.cc lp class ny l nhng phn
c thit lp trong jQTouch bng css.kt qu s ging nh hnh 9-8
71
72
VI.Lu tr Storage
Ta ang l nh pht trin HTML5, th hu nh ta chy ng dng trong cc thit lp cu hnh
nm pha client.
V d : nu ta s dng trnh duyt Chrome or Safari v vo trang
html5demos.com/database, th ta s nhn thy trang page ny c lm y bi cc dng
tweets.nhn thong qua th ta cm tng trang page ny xut hin bi c h tr bi 1
database nh thng l ging kiu MySQL.tuy nhin khi ta n chut phi vo trang page
n vo Inspect Element.ta s thy nh trong hnh 11-1
Khi ta n vo Resources tab v sau ln chut xung v tr databases, ta s nhn thy 1

html5demos database c sn v bn trong n c 1 bng tn l tweets.
Nu ta n vo bn phi pane v y l kt qu ca lnh SQL : select * from tweets, ta ly
c 1 danh sch ging vi nh ci trong hnh 11-1
73

Nh ta c th thy, cc trng fields cng tng t vi nhng g ta s dng trong
MySQL hay 1 SQL database khc.tt nhin, ta c th ch cn n vo biu tng icon ca
bng tweets xem mi th c lu trong bng ny
Web Database ( v bn cht l 1 h thng ca Sqlite3 ) rt ph hp vi cc lu tr d liu
phc tp ( theo cch khc, khi ta mun gi vt ca rt nhiu cc ct thng tin trn tng
phn t ), nhng thnh thong cc yu cu d liu khng qu phc tp
Hin ti, ta ch c th mun lu tr 1 vi thng tin rt n gin ( nh trong 1 dng 1 cp
key/value ), v ch gi n xung quanh 1 khong thi gian ngn ( theo cch hiu khc, cho
ti khi ngi dng ng trnh duyt hay ng dng ).nu yu cu ra l cn thit hn v
tc , th phng thc lu gi session v local l nhng g ta cn
C 1 v d nm html5demos.com/storage nh hnh 11-2 ch ra kt qu khi nh thm
vo 1 gi tr hello cho bin sessionStorage, v 1 gi tr ca goodbye cho bin localStorage
Nu ta vn m Resources tab, th di chuyn xung phn Session Storage nhn thy gi

tr value ca hello c lu tr nh hnh 11-3.v trong hnh 11-4, ta c th thy gi tr
ca goodbye c lu tr Local Storage
74
6.1.im khc bit gia Session Storage v Local Storage ?

Cc i tng Session Storage s c xa khi ta ng trnh ca s trnh duyt nhng
cc i tng Local Storage th vn c tn ti
1 iu cn phi nh rng cc i tng Storage thng tt nht nn t 5MB n 10MB d
liu, ph thuc vo trnh duyt c s dng.bi v ta s xy dng cc ng dng apps trn
1 phone, ta nn gi cc i tng Storage nh hn 4MB cho an ton.nu ta ang xy dng
web databases, th gi gii hn l 5MB, nhng ta c th gi n nh hn nu ta mun
Cu hi t ra tip l nu HTML5 h tr c cc la chn database v local storage, th ti
sao ta li phi ti h thng lu tr ca phonegap ?
Cu tr li l 1 vi thit b s h tr cc tnh nng ny v trong trng hp th PhoneGap
API s tr hon trn h thng x l ca thit b .cc thit b khc khng h tr iu ny th
trong trng hp , h thng ca phonegap s nhy vo
75
6.2.Cch s dng local storage

D liu c lu tr bng cch s dng local storage c lu di dng cc cp
key/value. ghi 1 value vo trong bng local storage th ta s dng m code nh sau:
window.localStorage.setItem("key_name", value);
// v d: window.localStorage.setItem(Lp,ton tin 2-k52);
ly v 1 gi tr t bng local storage, ta s dng m code nh sau:
window.localStorage.getItem("key_name");
// v d: window.localStorage.getItem(Lp);
ly v tn ca kha key ca 1 gi tr local storage ti 1 v tr no trong bng
window.localStorage.key(0) // ly v tn ca kha key ca dng gi tr local storage v tri 0
(hay v tr u tin)
window.localStorage.key(0) // kt qu l Lp
window.localStorage.key(1) // kt qu l ho v tn
window.localStorage.key(2) // kt qu l sinh ngy
xa 1 dng gi tr trong bng local storage, ta xa da vo t kha key ca dng gi tr

window.localStorage.removeItem("key");
// v d: window.localStorage.removeItem("Lp");
xa ton b d liu trong bng gi tr local storage, ta lm nh sau:
76
window.localStorage.clear();
6.3.Cch s dng i tng DATABASE OBJECT

6.3.1.Cch to v Cch m 1 database
Phng thc ny c nhim v m mt database c sn hoc to mi nu n cha tn ti.
Phng thc ny c m t nh sau:
Database openDatabase(
in DOMString name,
in DOMString version,
in DOMString displayName,
in unsigned long estimatedSize,
in optional DatabaseCallback creationCallback
);
Tham s:
-
name: tn ca database.
version: phin bn. (Hai database trng tn nhng khc phin bn th khc nhau)
displayname: m t.
estimatedSize: dung lng c tnh theo n v byte.
creationCallback: phng thc callback c thc thi sau khi database m/to.
V d to mt database vi tn mydb v dung lng l 5 MB:

var db = openDatabase("mydb", "1.0", "My First DB", 5 * 1024 * 1024);
Trong th gii ca SQlite, ta to ra 1 database bng cch m n. m ra 1 database, ta s
dng phng thc window.openDatabase() nh sau :
var myDB = window.openDatabase(name, version, displayname,size);
lnh sau c 4 tham s :
77
Name y l tn ca database m ta mun to ra
Version y l phin bn ca database
Displayname y l tn hin th ca database
Size - y l kch thc ca database ( c tnh theo bytes)
V d, ta c th chy dng lnh sau :

var myDB = window.openDatabase(photos, 1.0, Photos DB, 1000000);
dng lnh ny to ra 1 MB database c gi l photos v gn n vo 1 bin myDB.c
bit l ta s nhn thy dng ny c nh km vo 1 hm function hay l trn
onDeviceReady() listener nh sau :
var myDB = window.openDatabase(photos, 1.0, Photos DB, 1000000);
}
6.3.2.Cch chy 1 sql Query
Ch : khng th thc hin c truy vn SQL Query, khi truy vn ny t ngoi 1

giao dch Transactions.
Khi ta chy 1 chui truy vn SQL query, th nhng g m ta thc s lm l s dng i
tng SQLTransaction object.i tng ny bao hm cc phng thc cho php ta thc
thi cc cu lnh SQL da vo 1 database c m t trc
y l dng c bn ca phng thc executeSql() :
myDB.executeSql(SELECT * FROM table1);
nh ngha tng qut ca i tng SQLTransaction i tng ny khng c s
dng 1 cch c lp m n phi c nhng trong cc phng thc
nh transaction(), readTransaction(), v changeVersion()
78
typedef sequence<any> ObjectArray;
interface SQLTransaction {
void executeSql(in DOMString sqlStatement, in optional ObjectArray arguments, in
optional SQLStatementCallback callback, in optional SQLStatementErrorCallback
errorCallback);
};
[Callback=FunctionOnly, NoInterfaceObject]
interface SQLStatementCallback {
void handleEvent(in SQLTransaction transaction, in SQLResultSet resultSet);
};
[Callback=FunctionOnly, NoInterfaceObject]
interface SQLStatementErrorCallback {
boolean handleEvent(in SQLTransaction transaction, in SQLError error);
};
Khi phng thc executeSql(sqlStatement, arguments, callback, errorCallback) c

gi th tin trnh x l s chy theo thut ton sau ( thut ton ny tng i n gin v n
khng thc s x l bt k SQL no )
1. Nu phng thc khng c gi trong sut qu trnh thc th ca 1
SQLTransactionCallback,SQLStatementCallback, or SQLStatementErrorCallback th
n s vng ra 1 INVALID_STATE_ERR exception ( do phng thc ny c gi
bn trong 1 SQLTransactionErrorCallback do vy n vng ra 1 exception.iu khin
SQLTransactionErrorCallback ny ch c gi khi 1 giao dch transaction tht bi
v do khng c bt c lnh SQL no c th c thm vo(thc thi)
2. Cu trc tin x l SQL (y chnh l chui lnh query) nh bit s l tham s
u tin v l tham s bt buc trong phng thc sqlStatement, bng cch s
dng tham s th 2 l mng array, th thu v cu trc lnh query.nu tham s th 2
b b qua hay l rng, th x l lin quan n mng array tham s l rng
3. Xp hng lnh trong giao dch transaction, theo tham s th 3 nu c s l hm
callback ca tp cc kt qu ca cu lnh v tham s th 4 nu c s l hm
callback thng bo li
79
Ch : trong v d trn, th myDB c s dng ch v n c s dng t v d

trc.ta cng s s dng bt c bin no cng c v chc rng ta m n ln.ch
rng ta c th s dng bt c cu lnh SQL hp l no m ta mun.v d ny ch th hin 1
cu lnh select nhng ta c th chy nhng cu lnh khc
theo sau y l cu lnh drop dng xa 1 bng :
myDB.executeSql(DROP TABLE IF EXISTS table1));
y l cu lnh to ra 1 bng cu lnh create :
myDB.executeSql(CREATE TABLE IF NOT EXISTS table1 (id unique, firstname
varchar, lastname varchar));
theo sau l lnh insert :
myDB.executeSql(INSERT INTO TABLE (id, firstname, lastname) VALUES (1,
Thomas , Myer ));
y l cu lnh delete :
myDB.executeSql(DELETE FROM TABLE where id=1);
Ch : nh ta thy trn, phng thc executeSql vi nhng cu lnh truy vn

ny ta ch s dng 1 tham s duy nht (m theo nh ngha n c gm ti 4 tham s ) do
c th cc cu lnh DROP, CREATE, INSERT, DELETE ta khng quan tm ti kt qu tr
v
khng c g l ngc nhin y.nu ta bit SQL, th ta khng c vn g trong vic to
table, hay thm mi d liu, v nhn v d liu.tt nhin, ta s phi xem cch m ta phi
n xen cc du ngoc lng nhau nu ta ang s dng du ngoc n ngoi, th ta
buc phi s dng du ngoc lp trn cc gi tr bn trong cu lnh
80
6.3.3.Cch phn tch v tin x l cc cu lnh SQL (phng chng

SQL injection)
phng trng SQL injection ta nn s dng thm tham s mng array th 2 trong phng
thc executeSql() v khi cc gi tr c thm vo trong cu truy vn khng c thm
vo 1 cch trc tip ( ngn chn vic thot kiu k t ) m n phi c chuyn tip thng
qua 1 mng array ri mi c truyn vo.cch bc n thc thi nh sau :
1. Tin hnh phn tch cu trc SQL nh 1 cu trc SQL thng thng vi ngoi l l
du hi chm ? c th s dng t trong cu trc SQL ny, n l 1 k t i din
2. Kt hp mi im t du ? vi gi tr ca cc tham s trong tham s th 2 tng
ng cng 1 v tr ( o im t du hi ? u tin tng ng vi gi tr u tin
trong tham s th 2, v tng qut ln th im t du hi ? th n tng ng vi gi
tr th n trong tham s th 2 ) ( ch rng vic kt hp cc im t du hi ?
c thc hin mc chui k t, ch khng phi l s trng khp chui, do vy n
cung cp 1 cch linh hot thm vo cc tham s bn trong 1 cu lnh m khng
b nguy c tn cng bi SQL injection
3. Nu i tng database object m i
tng SQLTransaction or SQLTransactionSync object c to ra t n
4. Mc khc nu ng php ca cu lnh SQL l khng ng ( ngoi tr cho cch s
dng k t ? ), hay cu lnh s dng cc tnh nng khng c h tr hay 1 s phn
t trong tham s mng array khng bng vi s im t ? trong cu lnh hay cu
lnh khng th phn tch c v 1 vi l do no , th cu lnh b ng mc l li
(Error code 5.).Tc nhn cng phi xt ti cu lnh xem n c s dng cc tnh nng
BEGIN, COMMIT, v ROLLBACK ang khng c h tr hay khng ( nu c n s
ng mc cu lnh li ) do vy n khng cho php cc cu lnh ny lm nhiu lon
cc giao dch r rng c qun l bi database API ca chnh n
5. Mt khc, nu ch c s dng to ra i tng
SQLTransaction or SQLTransactionSync object l ch c nhng hnh ng ca cu
lnh li chnh sa database, th n nh mc cu lnh li (Error code 5.).ch
nhng hnh ng ca cu lnh li chnh sa database c xt ti y l
UPDATE, SELECT, DROP do vy 1 cu lnh nh "UPDATE test SET id=0 WHERE
0=1" vn s c x l
6. Tr v cu trc cu lnh
V d nh :
tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (
?,?)", [1,"peter"]);
81
tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES (
?,?)", [2,"paul"]);
6.3.4.Cc giao dch Transactions

ti sao ta s dng cc giao dch transactions thay th cho vic ch chy cu lnh SQL ?
bi v transactions mang ti cho ta kh nng rollback.iu ny c ngha l nu 1 giao dch
transaction ci m cha 1 hay nhiu cu lnh SQL m gp tht bi th s cp nht vo
database khng bao gi c thc hin ging nh l giao dch transaction cha bao gi
xy ra
cng c cc hm error v success callbacks trn giao dch transaction, do vy ta c th
qun l cc li ny nhng quan trng nht phi bit rng cc giao dch transactions c kh
nng khi phc rollback li thay i
Bn cn thc thi cc cu SQL trong ng cnh ca mt transaction. Mt transaction cung
cp kh nng rollback khi mt trong nhng cu lnh bn trong n thc thi tht bi. Ngha l
nu bt k mt lnh SQL no tht bi, mi thao tc thc hin trc trong transaction s b
hy b v database khng b nh hng g c.
Interface Database h tr hai phng thc gip thc hin iu ny l transaction() v
readTransaction(). im khc bit gia chng l transaction() h tr read/write, cn
readTransaction() l read-only. Nh vy s dng readTransaction() s cho hiu sut
cao hn nu nh bn ch cn c d liu.
Ch : ta s dng transaction() cho cc cu lnh SQL lin quan n vic c ghi

trong database nh INSERT, REPLACE, CREATE, DROP, DELETE v tng hiu sut
ta s dng readTransaction() cho cc cu lnh truy vn SQL ch lin quan ti c d liu
trong database nh SELECT
void transaction(
in SQLTransactionCallback callback,
in optional SQLTransactionErrorCallback errorCallback,
in optional SQLVoidCallback successCallback
);
giao dch transaction n gin l 1 hm function c cha 1 vi code nh sau :
82

var db = openDatabase('mydb', '1.0', 'my first database', 2 *1024 * 1024);
db.transaction(function (
tx) {
// here be the transaction

// do SQL magic here using the tx object
});
ch y TX l 1 i tng transaction object
nu ta cn chy ton b nhm cu lnh truy vn vo 1 thi im,, th ta c th to ra 1 gia

dch transaction, sau gi ra chui truy vn nh sau :
populateDB, errorDB, successDB);
myDB.transaction(
function
populateDB(tx) {
tx.executeSql(DROP TABLE IF EXISTS table1);

tx.executeSql(CREATE TABLE IF NOT EXISTS table1 (id unique, data varchar));
tx.executeSql(INSERT INTO table1 (id, data) VALUES (1, testing 1));
tx.executeSql(INSERT INTO table1 (id, data) VALUES (2, testing 2));
}
function errorDB(err) {
alert(Error processing SQL: +err);
}
function successDB() {
alert(success!);
}
Ch rng gi 1 hm JavaScript function thc thi cc cu lnh truy vn ring bit v bao
hm li gi cc hm success v error callback functions
83
6.4.Cch xem 1 tp kt qu
1 trong nhng th ta thng lm nhiu hn thng thng, l ta s lm vi database l lu
tr v cch nhn gi tr t n.
Phng thc giao dch transaction cung cp cho ta 1 hm success callback.phng thc
executeSql() cng cung cp cho ta cc hm success v error callbacks.trong hm
success callback ta s nhn thy tp kt qu.
Nu ta s dng v lm vic vi mySQL (hay 1 vi SQL database khc), th ta c th ngh
mi vic cn lm u ging nh vy. Nhng g m ta ly li t hm success callback l 1
i tng SQLResultSet object l i tng cha 3 thuc tnh sau :
insertId y l row ID m cu lnh SQL ca i tng SQLResultSet c thm

vo trong c s d liu (iu ny ch c p dng nu ta chy 1 cu lnh insert)
rowAffected y l s dng c thay i bi cu lnh SQL ( iu ny tr v 0

nu khng c dng no chu tc ng cng ging nh 1 cu lnh select )
rows y l 1 danh sch cc kt qu c lu di dng i tng

SQLResultSetRowList c biu din di cc dng v c tr v
nh ngha chung cho i tng SQLResultSet object c tr v bi lnh truy vn select :

interface SQLResultSet {
readonly attribute long insertId;
readonly attribute long rowsAffected;
readonly attribute SQLResultSetRowList
rows;
};
V nh ngha chung cho thuc tnh
rows thuc tnh ny l 1 kiu i tng
SQLResultSetRowList :
interface SQLResultSetRowList {
readonly attribute unsigned long length;
getter any item(in unsigned long index);

};
84
Nh thy trn
item y l 1 phng thc get ch khng phi 1 thuc tnh do
vy ta mi c cch vit results.rows.item()
trong v d sau, ta chy 1 truy vn SQL select n gin v bo co li nhng g s c

tr v :
function
queryDB(tx) {
tx.executeSql(SELECT * FROM test,
[], querySuccess, errorDB);
}
Theo nh ngha v SQLTransaction trn
SELECT * FROM test l tham s bt buc
function querySuccess(tx, results) {
u tin kiu DOMString, do cu lnh select
// this will be empty -- no rows were inserted.
ta cn phi nhn v kt qu nn ta phi s
alert(Insert ID = + results.insertId);
dng tham s th 3, do vy tham s th 2 l
// this will be 0 -- select statement
tham s mng array ta l rng nn vit l
alert(Rows Affected = + results.rowAffected);
[], v tham s th 3 l querySuccess c
// the number of rows returned by the select statement

alert(# of rows = + results.rows.length);
cha thng tin v kt qu tr v nn buc ta
phi truyn vo phng thc

executeSql.khng ging nh trn phng
function
errorDB(err) {
thc executeSql ch thc thi cc lnh

CREATE hay INSERT nn ta khng quan
alert(Error processing SQL: +err.code);
tm lm ti thng tin kt qu tr v, do vy ta
hay s dng n vi 1 tham s duy nht
db.transaction(
queryDB, errorDB);
ta c th truy cp cc gi tr c lu tr trong cc dng tr v ny bng cch s dng

phng thc item().mi lc ta s dng n, ta s ly v 1 dng row ca d liu c nh
ngha bi ch mc index m ta chuyn tip vo n.ta c th lm vi th vi 1 i tng
85

JavaScript object vi cc thuc tnh ny tng ng vi cc tn ct database t cu lnh
select
do vy vit li hm querySuccess() t v d trn, ta s s dng nh sau :
function querySuccess(tx,
results) {
//first get the number of rows in the result set

var len =
results.rows.length;
{
for (var i=0;i<len;i++)
alert(Row = + i + Firstname = +
Lastname = +
results.rows.item(i).firstname +
results.rows.item(i).lastname);
Vi firstname v lastname l
tn 2 ct trong database
}
}
V d trc s dng 1 vng lp for lp thng qua cc tp bng ghi.vng lp for l 1 khi
to tt y bi v ta khng bit c bao nhiu ln, ta phi lp thng qua 1 tp bn ghi, bi v
m tp bn ghi c 1 chiu di khc nhau, ph thuc vo cu truy vn v d liu c lu
tr
lp thng qua 1 tp bn ghi, ta phi bit di ca tp bn ghi ny (do ta s dng
results.rows.length ).khi ta c n, ta c th bt u bn ghi u tin c nhn v, v
x l tng dng bng cch s dng results.row.item(i).field_name , ti y field_name
tng ng vi tn 1 trng field trong database
6.5.iu chnh li
Nu c 1 li xy ra, th phonegap s vng ra 1 i tng SQLError object, n cha 2 thuc
tnh sau :
code l 1 trong cc m li c nh ngha t trc
message y l 1 thng tin m t v li
86

cc m li gm c cc loi sau :
SQLError.UNKNOWN_ERR
SQLError.DATABASE_ERR
SQLError.VERSION_ERR
SQLError.TOO_LARGE_ERR
SQLError.QUOTA_ERR
SQLError.SYNTAX_ERR
SQLError.CONSTRAINT_ERR
SQLError.TIMEOUT_ERR
Di tng SQLError c nh ngha nh sau :

interface SQLError {
const unsigned short UNKNOWN_ERR = 0;
const unsigned short DATABASE_ERR = 1;
const unsigned short VERSION_ERR = 2;
const unsigned short TOO_LARGE_ERR = 3;
const unsigned short QUOTA_ERR = 4;
const unsigned short SYNTAX_ERR = 5;
const unsigned short CONSTRAINT_ERR = 6;
const unsigned short TIMEOUT_ERR = 7;
readonly attribute unsigned short code;
readonly attribute DOMString message;
};
87

Li xy ra trong database API ng b c bo co bng cch s dng cc ngoi l
exceptions sau :
exception SQLException {
const unsigned short UNKNOWN_ERR = 0;
const unsigned short DATABASE_ERR = 1;
const unsigned short VERSION_ERR = 2;
const unsigned short TOO_LARGE_ERR = 3;
const unsigned short QUOTA_ERR = 4;
const unsigned short SYNTAX_ERR = 5;
const unsigned short CONSTRAINT_ERR = 6;
const unsigned short TIMEOUT_ERR = 7;
unsigned short code;
DOMString message;
};
Cc m li c lit k nh bng sau :
Constant
Code
Situation
UNKNOWN_ERR
giao dch transaction tht bi v nhng l do khng lin

quan ti database v khng b ph bi bt c m code li
no
DATABASE_ERR
Cu lnh tht bi v nhng l do v c s d liu v khng

c ph bi bt c m li no khc
VERSION_ERR
thao tc thc thi tht bi bi v phin bn database hin ti

khng thch hp.v d, 1 cu lnh tm thy phin bn
database thc t khng tng ng vi phin bn mong
i ca i tng Database or DatabaseSync hay
phng thc
the Database.changeVersion() or DatabaseSync.changeV
ersion() khng c chuyn tip 1 phin bn tng ng
vi phin bn database hin ti
TOO_LARGE_ERR 3
cu lnh tht bi bi v d liu c tr v t database

qu ln.s dng cu lnh vi "LIMIT" c th s hu dng
88

cho vic gim bt kch thc ca tp kt qu
QUOTA_ERR
cu lnh tht bi bi v khng c dung lng lu tr

hay nh mc lu tr b tri ra v ngi dng khng chu
cho thm dung lng cho database
SYNTAX_ERR
cu lnh tht bi bi v 1 li thuc v ng php hay s cc

tham s khng tng ng vi s cc im t du ? trong
cu lnh hay cu lnh c th s dng 1 cu trc khng
c cho php nh BEGIN, COMMIT, or ROLLBACK, hay
cu lnh c th s dng 1 thao tc m c th chnh sa
ti database nhng trong khi giao dch transaction li l
read-only
CONSTRAINT_ER
1 cu lnh INSERT, UPDATE, or REPLACE tht bi v 1

li rng buc.v d, bi vi 1 dng ang c insert v gi
tr ang thm vo trng vi kha chnh ca 1 dng tn

ti
TIMEOUT_ERR
1 kha cho giao dch transaction khng nhn c trong

thi gian hp l
6.6.V d v cch xy dng 1 database n gin :
<!DOCTYPE html>
<html>
<head>
<title>Database Example</title>
function populateDB(tx) {
tx.executeSql(DROP TABLE IF EXISTS test1);
tx.executeSql(CREATE TABLE IF NOT EXISTS test1 (id unique, name));
tx.executeSql(INSERT INTO test1 (id, name) VALUES (1, Tony));
tx.executeSql(INSERT INTO test1 (id, name) VALUES (2, Bill));
tx.executeSql(INSERT INTO test1 (id, name) VALUES (3, Thomas));
}
function queryDB(tx) {
tx.executeSql(SELECT * FROM test1, [], querySuccess, errorCB);
89

}
// Query the success callback
//
function querySuccess(tx, results) {
//first get the number of rows in the result set
var len = results.rows.length;
var status = document.getElementById(status);
var string = Rows: +len+<br/>;
for (var i=0;i<len;i++){
string += results.rows.item(i).name + <br/>;
}
status.innerHTML = string;
}
function errorDB(err) {
alert(Error processing SQL: +err.code);
}
function successDB() {
var db = window.openDatabase(Test, 1.0, Test, 200000);
db.transaction(queryDB, errorCB);
}
var db = window.openDatabase(Test, 1.0, Test, 200000);
db.transaction(populateDB, errorDB, successDB);
}
</script>
</head>
<body>
<h1>Names</h1>
<div id=status></div>
</body>
</html>
90
VII.Files
7.1.H thng FILESYSTEMS
Bt chp nh sn xut hay h iu hnh, mi smartphone hay thit b cn phi c 1 h
thng filesystem v Phonegap API cung cp cho ta 1 vi cch truy cp ti h thng
filesystem ny
Vo thi im hin ti, kh nng truy cp ny cn kh nhiu hn ch.v d, rt kh (hay c
l l khng th ) nhy ra ngoi hp ct sandbox m ng dng b cha bn trong.tuy
nhin, ta gi nh rng ta khng y hc v cch b kha in thoi ( v d nh b
kha cho in thoi c kh nng h tr b nh ln ti 16 GB )
Nhng g chng ny tp trung l cch truy cp vo h thng filesystem v vy m ta c
th c 1 file v ghi 1 vi d liu vo file
i tng PhoneGaps FileSystem object miu t thng tin v h thng filesystem, v n c
2 thuc tnh sau :
Name y l tn ca h thng filesystem (DOMString)
Root y l th mc gc ca h thng filesystem (DirectoryEntry)
Tn ca h thng filesystem phi l c nht trong danh sch cc h thng file c l

ra.thuc tnh root cha 1 i tng DirectoryEntry object din t th mc gc ca h
thng filesystem
Cc nn tng h tr :
Android
iOS
i tng ny c tr v trong hm success callback ca phng thc

requestFileSystem().theo v d sau :
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
onSuccess,
onFail);
91
function
onSuccess(fileSystem){
alert(fileSystem.
name);
alert(fileSystem.
root.name);
}
function
onFail(event){
target.error.code);
alert(event.
}
Thuc tnh
root cha 1 i tng DirectoryEntry
7.2.Tm hiu v cc th mc dn DIRECTORIES v cc files

C 2 loi phn t c tm thy trong filesystems : l th mc dn directories v cc
files.cc th mc dn Directories c din t bi cc i tng DirectoryEntry objects v
cc files c biu din bi i tng FileEntry objects
phn ny ta hc v cc phn sau :
Cch s dng i tng DirectoryEntry object
Cch s dng FileEntry object
Cch s dng cc nh du flags
Cch s dng LocalFileSystem
7.2.1.Cch s dng i tng DirectoryEntry Object

i tng ny miu t 1 th mc dn directory trn 1 h thng filesystem.v n c cc
thuc tnh sau :
isFile lun lun l false (boolean)
isDirectory lun lun l true (boolean)
name y l tn ca DirectoryEntry khng bao gm ng dn dn ti n

(DOMString)
92
fullPath y l ng dn tuyt i t gc root ca i tng DirectoryEntry

object (DOMString)
Ch : thuc tnh sau c nh ngha trong W3C, nhng n khng c h tr

bi Cordova
filesystem l h thng filesystem m n cha i tng DirectoryEntry trong n

(FileSystem)
hn th, i tng DirectoryEntry cn h tr cc phng thc sau :
getMetadata : tm kim thng tin metadata v 1 th mc dn directory
setMetadata : thit lp thng tin metadata trn 1 th mc dn directory
moveTo : chuyn 1 th mc dn directory ti 1 v tr khc trn h thng filesystem
copyTo : sao chp 1 th mc dn ti 1 v tr khc trn h thng filesystem
toURI : tr v 1 URL m c th dng xc nh v tr 1 th mc dn
remove : xa 1 th mc dn.v th mc dn ny phi trng rng
getParent : tm kim th mc dn cha
createReader : to ra 1 i tng DirectoryReader mi m c th c cc thc th

t 1 th mc dn
getDirectory : to ra hay tm kim 1 th mc dn
getFile : to ra hay tm kim 1 file
removeRecursively : xa 1 th mc dn v tt c phn t cha trong n
nn tng h tr :
Android
iOS
7.2.2.getMetadata
phng thc s dng tm kim thng tin metadata v 1 th mc dn directory.n c 2
tham s l 2 hm callback :
successCallback - y l 1 hm callback c gi vi 1 Metadata object (Function)
93
errorCallback y l 1 hm callback c gi nu c 1 li xy ra trong qu trnh ly

v i tng Metadata object.
y l 1 v d :
function onSuccess(metadata) {
alert(Last Modified: + metadata.modificationTime);
}
function onFail(error) {
alert(error.code);
}
// Request the metadata object for this entry
entry.getMetadata(onSuccess, onFail);
7.2.3.setMetadata
phng thc thit lp thng tin metadata trn 1 th mc dn directory, hin ti ch hot
ng trn iOS
cc tham s truyn vo :
successCallback 1 hm callback c gi khi thng tin metadata c thit lp

thnh cng (Function)
errorCallback 1 hm callback c gi khi thng tin metadata khng c thit

lp thnh cng (Function)
metadataObject 1 i tng m cha cc keys v values ca metadata (Object)
v d nh :
function success() {
console.log("The metadata was successfully set.");
}
function fail() {
alert("There was an error in setting the metadata");
}
// Set the metadata

entry.setMetadata(success, fail,
{ "com.apple.MobileBackup": 1});
94
{key : value}
Ch : trong iOS th ch thuc tnh m rng "com.apple.MobileBackup" c h

tr.thit lp gi tr l 1 khng bt tnh nng file c backup ln iCloud.thit lp l 0
bt tnh nng file c backup ln iCloud
7.2.4.moveTo
phng thc ny c s dng chuyn 1 th mc dn directory ti 1 v tr khc trn h
thng filesystem.s xy ra li khi ta c thc hin cc thao tc sau :
di chuyn 1 th mc dn bn trong th mc cha ca n vi 1 tn l khc vi tn hin

ti ca n th khng c cho php
di chuyn 1 th mc dn bn trong chnh n hay bn trong bt c cp con no ca

n
di chuyn 1 th mc dn ti 1 path m c s dng bi 1 file
di chuyn th mc dn ti 1 path m c s dng bi 1 th mc dn rng
cc tham s dnh cho phng thc ny :
parent y l th mc cha di chuyn th mc dn ny (DirectoryEntry)
newName y l 1 tn mi ca th mc dn.nu tn ny khng c nh ngha

th n mc nh l tn hin ti (DOMString)
successCallback - l 1 hm callback m c gi vi i tng DirectoryEntry

object ca th mc dn mi (Function)
errorCallback - l 1 hm callback m c gi nu c 1 li xy ra khi c gng di

chuyn th mc dn, hm ny c gi vi 1 i tng FileError object (Function).
V d :
function success(entry) {
alert(New Path: + entry.fullPath);
}
function fail(error) {
alert(error.code);
}
function moveDirectory(entry) {
95
var
parent = document.getElementById(parent).value,
newName = document.getElementById(newName).value,
parentEntry = new DirectoryEntry({fullPath: parent});

// move the directory to a new directory and rename it
parentEntry, newName, success, fail);
entry.moveTo(
}
7.2.5.copyTo
phng thc ny c s dng sao chp 1 th mc dn ti 1 v tr khc trn h thng
filesystem.bt k thao tc no sau y cng gy ra li :
nu ta c gng sao chp 1 th mc dn vo bn trong chnh n bt c cp no
nu ta c gng sao chp 1 th mc dn vo bn trong th mc cha ca n vi 1 tn

m khc vi tn hin ti th khng c cho php
Ch : sao chp th mc lun lun l qui v s s thc hin sao chp ton b
ni dung c trong th mc
cc tham s cho phng thc ny :
parent y l th mc cha m thc hin sao chp th mc dn (DirectoryEntry)
newName l tn mi ca th mc dn.nu n khng c nh ngha th mc nh

n l tn hin ti (DOMString)
successCallback - l 1 hm callback m c gi vi i tng DirectoryEntry

object ca th mc dn mi (Function)
errorCallback - l 1 hm callback m c gi nu c 1 li xy ra khi c gng di

chuyn th mc dn, hm ny c gi vi 1 i tng FileError object (Function).
V d :
}
96

alert(error.code);
}
function copyDirectory(entry) {
var
parent = document.getElementById(parent).value,
newName = document.getElementById(newName).value,

// copy the directory to a new directory and rename it
parentEntry, newName, success, fail);
entry.copyTo(
}
7.2.6.toURI
phng thc ny dng tr v 1 URL m c th dng xc nh v tr 1 th mc dn
v d :
// Get the URI for this directory
var uri = entry.toURI();
alert(uri);
7.2.7.remove
phng thc ny dng xa 1 th mc dn.v th mc dn ny phi trng rng
1 trong cc thao tc sau s gy li :
nu ta c th xa 1 th mc dn m n khng rng
Nu ta c th xa th mc gc root ca 1 h thng filesystem
Cc tham s dnh cho phng thc ny :
successCallback y l 1 hm callback m c gi sau khi th mc dn c

xa thnh cng.n c gi vi khng cha tham s no (Function)
errorCallback - y l 1 hm callback m c gi nu 1 li xy ra khi ta c xa 1

th mc dn.c gi vi 1 i tng FileError object. (Function)
v d :
97

alert(Removal succeeded);
}
alert(Error removing directory: + error.code);
}
// remove this directory
entry.remove(success, fail);
7.2.8.getParent
phng thc ny c s dng tm kim th mc dn cha m ang cha th mc dn
hin ti.phng thc ny gm 2 tham s :
successCallback - y l 1 hm callback m c gi vi i tng DirectoryEntry

object cha ca th mc dn ny
errorCallback - y l 1 hm callback m c gi khi c li xy ra v c gi vi

i tng FileError object
v d :
function success(parent) {
alert(Parent: + parent.name);
}
alert(Failed to get parent: + error.code);
}
// Get the parent DirectoryEntry
entry.getParent(success, fail);
7.2.9.createReader
phng ny c s dng to ra 1 i tng DirectoryReader mi m c th c cc
thc th t 1 th mc dn
v d :
// create a directory reader
var directoryReader = entry.createReader();
98
7.2.10.getDirectory
phng ny c s dng to ra hay tm kim 1 th mc dn.s c li xy ra nu ta c
gng thc hin :
to ra 1 th mc dn m th mc cha tc thi ca n vn cha tn ti
cc tham s truyn vo phng thc ny :
path y l 1 path ch ti th mc dn c tm thy hay c to ra.n c th

l ng dn path tng i hay tuyt i t i tng DirectoryEntry. (DOMString)
ny
options y l cc cu hnh dng nh ngha th mc dn c to ra nu n

khng tn ti (Flags)
successCallback - y l 1 hm callback m c gi vi i tng DirectoryEntry

object (Function)

i tng FileError object (Function)
v d :
}
alert(Unable to create new directory: + error.code);
}
// Retrieve an existing directory, or create it if it does not already exist
entry.getDirectory(sampleFiles, {create: true, exclusive: false}, success, fail);
7.2.11.getFile
phng thc ny c s dng to ra hay tm kim 1 file .nu ta c gng to ra 1 file m
th mc cha ca n cha tn ti th s gy ra li
path - y l 1 path ch ti file dn c tm thy hay c to ra.n c th l

ng dn path tng i hay tuyt i t i tng DirectoryEntry. (DOMString)
options y l cc cu hnh dng nh ngha file c to ra nu n khng tn

ti (Flags)
99
successCallback - y l 1 hm callback m c gi vi i tng FileEntry object

(Function)

v d :
}
alert(Failed to retrieve file: + error.code);
}
// Retrieve an existing file, or create it if it does not exist
entry.getFile(sample_data.txt, {create: true, exclusive: false}, success, fail);
7.2.12.removeRecursively
phng thc ny c s dng xa 1 th mc dn v tt c phn t cha trong
n.trong trng hp li v d nh ta c xa 1 th mc dn m c cha 1 file khng th b
xa th 1 vi ni dung ca th mc dn c th b xa.nu ta c gng xa th mc gc root
ca filesystem th cng s gy ra li
successCallback 1 hm callback s c gi sau khi i tng DirectoryEntry

c xa, v c gi vi khng tham s no c (Function)

v d :
alert(Delete succeeded!);
}
alert(Failed tod elete directory or its contents: + error.code);
}
// remove the directory and all its contents
100

entry.removeRecursively(success, fail);
7.3.metadata
i tng ny cung cp thng tin v trng thi ca 1 file hay ca 1 th mc dn
thuc tnh :
modificationTime y l thi im gn nht m file hay th mc dn b chnh sa

(Date)
thng tin chi tit :

i tng Metadata object miu t thng tin v trng thi ca 1 file hay 1 th mc dn.ta c
th ly v 1 thc th ca i tng Metadata object bng cch gi phng thc
getMetadata ca 1 i tng DirectoryEntry or FileEntry object.
Nn tng h tr :
Android
iOS
V d :
function win(
metadata) {
console.log("Last Modified: " +
metadata.modificationTime);

entry.getMetadata(win, null);
101
7.4.FileError
1 i tng FileError c thit lp khi 1 li xy ra trong bt c phng thc File API no
Cc thuc tnh :
Code l 1 m code li c nh ngha trc lit k nh di
Cc hng s :
FileError.NOT_FOUND_ERR
FileError.SECURITY_ERR
FileError.ABORT_ERR
FileError.NOT_READABLE_ERR
FileError.ENCODING_ERR
FileError.NO_MODIFICATION_ALLOWED_ERR
FileError.INVALID_STATE_ERR
FileError.SYNTAX_ERR
FileError.INVALID_MODIFICATION_ERR
FileError.QUOTA_EXCEEDED_ERR
FileError.TYPE_MISMATCH_ERR
FileError.PATH_EXISTS_ERR
Thng tin m t :
i tng FileError object ch l 1 tham s duy nht trong bt k hm File API's error
callbacks no.cc nh pht trin phi c thuc tnh code xc nh dng li
7.5.Flags
i tng ny c s dng cung cp cc tham s cho phng thc getFile v
getDirectory ca i tng DirectoryEntry cc phng thc ny dng tm kim hay
to ra cc files v th mc 1 cch tng ng
Cc thuc tnh :
Create c s dng xc nh file hay th mc c c to hay khng nu n

khng tn ti (boolean)
102
Exclusive c s dng km vi vic to ra, n s gy ra li trong vic to file or

directory nu ng dn path mc tiu tn ti (boolean)
Cc nn tng h tr :
Android
iOS
V d :
// Get the data directory, creating it if it doesn't exist.
dataDir = fileSystem.root.getDirectory("data",
{create: true});
// Create the lock file, if and only if it doesn't exist.
lockFile = dataDir.getFile("lockfile.txt", create: true, exclusive: true );
7.6.LocalFileSystem
i tng ny cho bit 1 cch ly v th mc gc root ca file systems
Cc phng thc :
requestFileSystem yu cu 1 filesystem (Function)
resolveLocalFileSystemURI ly v 1 i tng DirectoryEntry or FileEntry bng

cch s dng URI a phng (Function)
cc hng s :
LocalFileSystem.PERSISTENT c s dng cho lu tr m khng b xa b bi

tc nhn ngi dng
LocalFileSystem.TEMPORARY c s dng cho lu tr m khng m bo tnh

bn vng
Thng tin chi tit :
103
Cc phng thc ca i tng LocalFileSystem object c nh ngha trn i

tng window object
Cc nn tng h tr :
Android
iOS
V d :
function onSuccess(fileSystem) {
console.log(fileSystem.name);
}
// request the persistent file system

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, onError);
window.resolveLocalFileSystemURI("file:///example.txt", onSuccess, onError);
7.7.DirectoryReader
1 i tng m lit k cc files v cc th mc dn trong 1 th mc
Cc phng thc :
readEntries c cc thc th bn trong 1 th mc dn
cc nn tng h tr :
Android
iOS
Cc tham s cho phng thc ny :
successCallback l 1 hm callback m c chuyn tip 1 mng ca cc i

tng FileEntry v DirectoryEntry objects (Function)
104
errorCallback - l 1 hm callback m c gi nu 1 li xy ra khi nhn v danh

sch cc th mc lit k.c vi 1 i tng FileError object. (Function)
v d :
function success(
entries) {
var i;
for (i=0; i<
entries.length; i++) {
console.log(
entries[i].name);
}
}
alert("Failed to list directory contents: " + error.code);
}
// Get a directory reader

var directoryReader = dirEntry.createReader();
// Get a list of all the entries in the directory

directoryReader.readEntries(success,fail);
7.8.Cch s dng i tng FileEntry Object

i tng ny biu din 1 file trn 1 h thng filesystem.v n c cc thuc tnh sau :
isFile lun lun l true (boolean)
isDirectory lun lun l false (boolean)
name y l tn ca i tng FileEntry object, khng bao gm ng dn ch

ti n (DOMString)
fullPath y l ng dn y tuyt i ch t gc root ca i tng FileEntry

object (DOMString)
cc phng thc :
getMetadata tm km thng tin metadata v 1 file
105
setMetadata thit lp metadata trn 1 file
moveTo di chuyn 1 file vo 1 v tr khc trn h thng filesystem
copyTo sao chp 1 file ti 1 v tr khc trn h thng filesystem
toURL tr v 1 URL m c th c s dng xc nh v tr 1 file
remove xa 1 file
getParent tm kim th mc cha
createWriter to ra 1 i tng FileWriter object m c th c s dng vit

vo 1 file
file to ra 1 i tng File object cha cc thuc tnh ca file
cc nn tng h tr :
Android
iOS
7.8.1.getMetadata
y l phng thc c s dng tm kim metadata v 1 file.nh rng metadata ca
file nm tch bit vi data tht s ca n v metadata c th l cc thng tin v thi im
to file, kch thc ca file hay hn th
cc tham s ca phng thc ny chnh l 2 hm callback :
successCallback 1 hm callback c gi vi 1 i tng Metadata object
errorCallback 1 hm callback c gi nu c 1 li xy ra , n c gi vi i
tng FileError object.
V d :
function success(metadata) {
alert(Last Modified: + metadata.modificationTime);
}
alert(error.code);
}
entry.getMetadata(success, fail);
106
7.8.2.moveTo
phng thc ny c s dng chuyn 1 file ti 1 v tr khc trn h thng filesystem.s
xy ra li khi ta c thc hin cc thao tc sau :
c th di chuyn 1 file vo trong th mc cha ca n vi 1 tn khc vi tn hin ti
c th di chuyn 1 file vo path c dng bi 1 th mc dn
c th di chuyn 1 file ln trn u ca 1 file tn ti m khng thc hin xa file

tn ti trc tin
cc tham s :
parent tn th mc cha m dng di chuyn file (DirectoryEntry)
newName tn mi ca file.nu khng c thit lp mc nh n l tn hin ti

(DOMString)
successCallback 1 hm callback s c gi vi i tng FileEntry object mi

(Function)
errorCallback - 1 hm callback c gi nu c 1 li xy ra , n c gi vi i
tng FileError object. (Function)
v d :
}
alert(error.code);
}
function moveFile(entry) {
var parent = document.getElementById(parent).value,
// move the file to a new directory and rename it
entry.moveTo(parentEntry, new_file.txt, success, fail);
}
107
7.8.3.copyTo
sao chp 1 file ti 1 v tr khc trn h thng filesystem .s xy ra li khi ta c thc hin cc
thao tc sau :
sao chp 1 file vo bn trong th mc cha ca n vi tn khc vi tn hin ti
cc tham s :
parent th mc cha m dng sao chp file (DirectoryEntry)
newName - tn mi ca file.nu khng c thit lp mc nh n l tn hin ti

(DOMString)
successCallback 1 hm callback s c gi vi i tng FileEntry object mi

(Function)
v d :
}
alert(error.code);
}
function copyFile(entry) {
var parent = document.getElementById(parent).value,
// copy the file to a new directory and rename it
entry.copyTo(parentEntry, file.copy.txt, success, fail);
}
108
7.8.4.toURI
tr v 1 URL m c th c s dng xc nh v tr 1 file
v d :
var uri = entry.toURI();
console.log(uri);
7.8.5.remove
phng thc ny c s dng xa 1 file
cc tham s l 2 hm callback :
successCallback y l 1 hm callback c gi nu file c xa thnh cng, n

c gi khng cng vi tham s no
v d :
alert(Removal succeeded);
}
alert(Error removing file: + error.code);
}
// remove the file
entry.remove(success, fail);
7.8.6.getParent
tm kim th mc cha DirectoryEntry ang cha file
cc tham s :
successCallback 1 hm callback c gi vi i tng cha DirectoryEntry ca

file
109
v d :
console.log("Parent Name: " + parent.name);
}
alert(error.code);
}
// Get the parent DirectoryEntry

entry.getParent(success, fail);
7.8.7.createWriter
ta c th vit 1 file vo 1 th mc dn bng cch s dng phng thc createWriter.n to
ra 1 i tng FileWriter object c lin kt vi file ny
cc tham s :
successCallback 1 hm callback c gi vi 1 i tng FileWriter object

(Function)
v d :
function success(writer) {
writer.write("Some text to the file");
}
alert(error.code);
}
// create a FileWriter to write to the file

entry.createWriter(success, fail);
110
7.8.8.file
tr v 1 i tng File object dng miu t trng thi hin ti ca file
cc tham s :
successCallback 1 hm callback c gi vi 1 i tng File object. (Function)
v d :
function success(file) {
console.log("File size: " + file.size);
}
alert("Unable to retrieve file properties: " + error.code);
}
// obtain properties of a file

entry.file(success, fail);
7.9.Cch c cc files - FileReader

ta s dng i tng FileReader object c 1 file.i tng FileReader object l 1 cch
c cc files t h thng filesystem ca thit b.cc files c th c c ging nh l
cc k t text, hay d liu chui string da vo m ha Base64-encoded
i tng ny s c cc thuc tnh sau :
readyState y l 1 trong 3 trng thi (EMPTY, LOADING, or DONE) m tin trnh

c c th ang trng thi nh vy
result c s dng ly cc ni dung ca file m ta ang c
error c s dng cho 1 i tng c cha li
onloadstart c gi khi tin trnh c va bt u
onload c gi khi tin trnh c hon thnh
111
onabort c gi khi tin trnh c t ngt b ngng li ( v d nh bng cch gi

phng thc abort() )
onerror c gi khi tin trnh c tht bi
onloadend c gi khi yu cu c hon thnh ( c th yu cu ny thnh cng

hoc tht bi )
onprogress c gi trong khi ang c file, bo co v tin trnh x l

(progess.loaded/progress.total). (Function)
cc phng thc :
abort : dng li vic c file
readAsDataURL: c file v tr v d liu nh d liu URL m ha base64 encoded
readAsText : c cc text file
nhng ngi dng ng k cc event listners nhn v cc s kin loadstart, progress,

load, loadend, error and abort events
cc nn tng h tr :
Android
iOS
7.9.1.readAsDataURL
ta c th c 1 file v tr v d liu nh l d liu c m ha Base64-encoded, phng
thc ny thng dng c cc nh images v cc files nh phn khc.
Tham s truyn vo l file l i tng file object c
V d :
file) {
function win(
var reader = new FileReader();

reader.onloadend = function(evt)
console.log("read success");
console.log(evt.target.result);
112
};
file);
reader.readAsDataURL(
};
var fail = function(evt) {

console.log(error.code);
};
entry.file(win, fail);
7.9.2.abort
ta c th dng vic c 1 file bng cch s dng phng thc abort nh v d sau :
file) {
function success(

reader.onloadend = function(event) {
alert(read success);
alert(event.target.result);
};
file);
reader.readAsText(
reader.abort();
}
}
entry.file(success, fail);
113
7.9.3.readAsText
cc tham s :
File l i tng file object c
Encoding phng thc gii m s dng gii m ni dung ca file.mc nh l

UTF8
ta cng c th c 1 file v tr v dng text, y l phng thc tt nht cho vic c cc

TXT files nh v d sau :
function success(file) {
reader.onloadend = function(evt) {
alert(read success);
alert(evt.target.result);
};
reader.readAsText(file);
}
var fail = function(event) {
}
entry.file(sucess, fail);
v d y :
<!DOCTYPE html>
<html>
<head>
<title>FileReader Example</title>
<script type="text/javascript" charset="utf-8" src="cordova1.9.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
114

// Cordova is ready
//
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS,
fail);
}
function gotFS(fileSystem) {
fileSystem.root.getFile("readme.txt", null, gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.file(gotFile, fail);
}
function gotFile(file){
readDataUrl(file);
readAsText(file);
}
function readDataUrl(file) {
console.log("Read as data URL");
};
reader.readAsDataURL(file);
}
function readAsText(file) {
console.log("Read as text");
};
reader.readAsText(file);
}
function fail(evt) {
console.log(evt.target.error.code);
}
115
</script>
</head>
<body>
<h1>Example</h1>
<p>Read File</p>
</body>
</html>
7.10.Cch c cc files FileWriter

Ta c th s dng i tng FileWriter object ghi ln cc files. 1 i tng FileWriter
object s to ra 1 file v khi c to, file ny c th c s dng ghi li nhiu ln vo
nhiu thi im.
i tng FileWriter object c cc thuc tnh position v length, do vy ta c th tm kim
v ghi ti bt c v tr no trn file. Theo mc nh, th i tng FileWriter object s ghi ln
ti v tr bt u ca file, v s ghi ln d liu tn ti. ta c th thit lp append (khng
bt buc c gi tr kiu Boolean) thnh true khi to vic bt u ghi vo v tr cui ca
file (khng ghi ln v tr d liu tn ti)
FileWriter object c cc thuc tnh sau:
readyState y l 1 trong 3 trng thi m reader c th l (INIT, WRITING, hay

DONE)
fileName y l tn ca file s c ghi (DOMString)
length l di ca file s c ghi (long)
position y l v tr hin ti ca con tr file (long)
error y l 1 i tng object cha ng li nu c (FileError)
onwritestart c gi khi tin trnh thc hin ghi bt u (Function)
onwrite c gi khi yu cu hon ton c hon thnh (Function)
onprogress c trong khi vn thc hin ghi file, bo co li tin trnh thc hin
(progess.loaded/progress.total). (Function)
onabort c gi khi tin trnh thc hin ghi b ngng li (Function)
onerror c gi khi tin trnh thc hin ghi tht bi (Function)
onwriteend c gi khi yu cu c hon thnh (c th thnh cng hay tht bi)

(Function)
i tng FileWriter object c cc phng thc sau:

116
abort dng ngng tin trnh thc hin ghi
seek dng di chuyn con tr file ti v tr no
truncate dng rt ngn file li theo 1 chiu di no
write dng ghi d liu vo file vi UTF-8 encoding.
Cc nn tng h tr:
Android
iOS
V d:
Seek
function win(writer) {
// fast forwards file pointer to end of file
writer.seek(writer.length);
};
};
entry.createWriter(win, fail);
Truncate
writer.truncate(10);
};
};
Write
117

writer.onwrite = function(evt) {
console.log("write success");
};
writer.write("some sample text");
};
};
Append
};
writer.seek(writer.length);
writer.write("appended text");
};
};
Abort
};
writer.abort();
};
};
118

v d y :
<!DOCTYPE html>
<html>
<head>
<title>FileWriter Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
//
// Cordova is ready
//
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
fileSystem.root.getFile("readme.txt", {create: true, exclusive: false},
gotFileEntry, fail);
}
function gotFileEntry(fileEntry) {
fileEntry.createWriter(gotFileWriter, fail);
}
function gotFileWriter(writer) {
writer.onwriteend = function(evt) {
console.log("contents of file now 'some sample text'");
writer.truncate(11);
writer.onwriteend = function(evt) {
console.log("contents of file now 'some sample'");
writer.seek(4);
writer.write(" different text");
writer.onwriteend = function(evt){
console.log("contents of file now 'some different text'");
}
};
};
}
}
119
</script>
</head>
<body>
<h1>Example</h1>
<p>Write File</p>
</body>
</html>
7.11.Cch truyn dn files FileTransfer

i tng FileTransfer object mang li cho ta 1 cch ti files ln 1 server t xa bng
cch s dng 1 yu cu HTTP multi-part POST request. C 2 giao thc HTTP v HTTPS
u c h tr. Cc tham s ty chn c th c nh ngha bng cch chuyn tip 1 i
tng FileUploadOptions object ti phng thc upload. Khi upload thnh cng, th hm
success callback s c gi vi 1 tham s c truyn vo l i tng
FileUploadResult object. Nu c 1 li xy ra, th hm error callback s c gi vi 1 tham
s c truyn vo l i tng FileTransferError object. Hn th, ta cng c th ti v 1
file t server v lu tr n trn thit b (ch h tr iOS v Android)
Cc nn tng h tr:
Android
iOS
7.11.1.upload
var ft = new FileTransfer();
ft.upload(fileURI, serverURL, onUploadSuccess, onUploadError,
fileUploadOptions);
vi :
fileURI l ng dn y ca file trn thit b
serverURL l URL ca server ma file s c ti ln (phi c m ha bng cch

s dng encodeURI())
120
onUploadSuccess l 1 hm callback s c gi vi 1 tham s truyn vo l 1 i

tng Metadata object. (Function)
onUploadError l 1 hm callback s c gi khi 1 li xy ra khi nhn v i tng

Metadata, c truyn vo tham s l 1 i tng FileError object. (Function)
fileUploadOptions l 1 i tng nh ngha cc thit lp cu hnh :

o
chunkedMode: c kiu Boolean dng iu khin c hay khng s truyn

dn ca yu cu HTTP request c thc thi m khng cn b nh m.
nu gi tr ny khng c thit lp, th n mc nh l true. (Boolean)
fileKey: nh ngha tn ca phn t form m file s c ti ln server. Nu

khng c thit lp th n mc nh l file (DOMString)
fileName: tn file m c ti ln server. Nu khng c thit lp, n s

mc nh tn l image.jpg. (DOMString)
mimeType: l kiu MIME type ca d liu m ta ang ti ln. Nu khng

c thit lp, n mc nh s l image/jpeg. (DOMString)
params: l 1 tp ty chn cc cp key/value m c nhng vo trong phn

header ca yu cu HTTP request (Object)
headers: 1 tp nh x ca header name => header value, dng nh ngha

nhiu gi tr cho phn header, s dng 1 mng array ca cc gi tr (Object)
hm onUploadSuccess c chuyn tip vo 1 i tng result object i tng ny c

th c s dng xc nh trng thi ca tin trnh upload. i tng result object c
cc thuc tnh sau:
bytesSent: s bytes c gi ln server
responseCode: m phn hi HTTP response c tr v t pha server
response: phn hi HTTP response c tr v t pha server
Ch : iOS khng h tr cc thuc tnh responseCode v bytesSent trong i tng

result object
v d:
// !! Assumes variable fileURI contains a valid URI to a text file on the device
var win = function(r) {
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
console.log("Sent = " + r.bytesSent);
}
121
var fail = function(error) {

alert("An error has occurred: Code = " + error.code);
console.log("upload error source " + error.source);
console.log("upload error target " + error.target);
}
var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=fileURI.substr(fileURI.lastIndexOf('/')+1);
options.mimeType="text/plain";
var params = {}; params.value1 = "test"; params.value2 = "param";

options.params = params;
ft.upload(fileURI, encodeURI("http://some.server.com/upload.php"), win, fail, options);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>File Transfer Example</title>
//
// Cordova is ready
//
// Retrieve image file location from specified source
navigator.camera.getPicture(uploadPhoto,
function(message) { alert('get picture failed');
},
{ quality: 50,
destinationType:
navigator.camera.DestinationType.FILE_URI,
sourceType:
navigator.camera.PictureSourceType.PHOTOLIBRARY }
122

);
}
function uploadPhoto(imageURI) {
options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
var params = {};
params.value1 = "test";
params.value2 = "param";
ft.upload(imageURI, encodeURI("http://some.server.com/upload.php"), win,
fail, options);
}
function win(r) {
}
}
</script>
</head>
<body>
<h1>Example</h1>
<p>Upload File</p>
</body>
</html>
Cch thit lp Upload Headers (ch h tr iOS v Android)

function win(r) {
123

}
}
var uri = encodeURI("http://some.server.com/upload.php");
options.fileName=fileURI.substr(fileURI.lastIndexOf('/')+1);
options.mimeType="text/plain";
var params = {};
params.headers={'headerParam':'headerValue'};
ft.upload(fileURI, uri, win, fail, options);
Ch : khi upload ln 1 Nginx server th ta phi chc chn rng ta thit lp cu

hnh chunkedMode thnh false
7.11.2.download
ft.download(source, target, successCallback, errorCallback);
vi :
source l URL ca server m ta ti file t v thit b (URL ny phi c m

ha bng cch s dng encodeURI())
target ng dn y ca file trn thit b
successCallback 1 hm callback c gi vi 1 tham s c truyn vo l i

tng FileEntry object. (Function)
errorCallback 1 hm callback c gi khi c 1 li xy ra trong qu trnh nhn v

Metadata. c truyn vo tham s l 1 i tng FileError object. (Function)
124

v d:
// !! Assumes filePath is a valid path on the device

var fileTransfer = new FileTransfer();
var uri = encodeURI("http://some.server.com/download.php");
fileTransfer.download(
uri,
filePath,
function(entry) {
console.log("download complete: " + entry.fullPath);
},
function(error) {
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log("upload error code" + error.code);
}
);
7.11.3.abort
Dng hy b 1 tin trnh truyn dn file ang c thc hin. hm onerror callback s
c gi vi 1 tham s truyn vo l i tng FileTransferError object
Cc nn tng h tr:
Android
iOS
7.11.4.onprogress
c gi vi 1 s kin ProgressEvent bt c khi no 1 khc d liu mi c truyn i.
Cc nn tng h tr:
Android
iOS
125

v d:
fileTransfer.onprogress = function(progressEvent) {
if (progressEvent.lengthComputable) {
loadingStatus.setPercentage(progressEvent.loaded / progressEvent.total);
} else {
loadingStatus.increment();
}
};
fileTransfer.download(...); // or fileTransfer.upload(...);
7.12.FileTransferError
1 i tng FileTransferError object c tr v thng ua 1 hm error callback khi c 1 li
xy ra trong tin trnh ti ln hay ti xung 1 file
Cc thuc tnh:
code 1 trong cc m li c nh ngha trc (Number)
source URL dn ti ngun (String)
target URL dn ti ch (String)
http_status m trng thi HTTP status code. Thuc tnh ny s ch xut hin khi 1
m phn hi c nhn v t kt ni HTTP connection. (Number)
cc hng s:
FileTransferError.FILE_NOT_FOUND_ERR
FileTransferError.INVALID_URL_ERR
FileTransferError.CONNECTION_ERR
FileTransferError.ABORT_ERR
126
VIII.Camera
PhoneGap Camera API cung cp cho 1 ng dng kh nng lm vic vi cc images hay
kh nng chp nh t camera hay nhn file nh t kho nh trong thit b.khi ly v 1 nh
image th API c th tr v 1 URL ch ti image file trn thit b hay chui base64-encoded
string dng biu din ni dung bn trong 1 image
API cung cp 1 phng thc n l navigator.camera.getPicture dng ly v 1 nh
image v 1 i tng cameraOptions object c s dng nh ngha cc tham s
xung quanh vic nh image c nhn v nh th no, cch n c nh dng nh th
no ,
Cc ng dng Apps cng c th s dng PhoneGap Capture API chp nh bng cch
s dng camera. Camera v Capture APIs l khc nhau do vy n s nh hng ti
nh gi ca ta trc khi la chn ci no l cn thit cho ng dng
8.1.Cch truy cp 1 nh Picture

nhn v 1 nh picture t thit b th 1 ng dng nn thc thi cc chc nng sau :
navigator.camera.getPicture( onCameraSuccess, onCameraError,cameraOptions );
ging nh cc th vin PhoneGap APIs khc th li gi getPicture i hi rng ta phi
chuyn vo 2 hm functions m c thc thi trn li gi success v failure.trong trng
hp ny, y l cc hm onCameraSuccess v onCameraErrorfunctions.hm
onCameraSuccess function c thc thi khi 1 nh image c nhn v ( ta s lm r
hn v ni m images c cha v cch m ta cu hnh API trong chng cch
thit lp cc cu hnh trong Camera phn sau ).hm onCameraError function c
thc thi khi ngi dng hy b tin trnh nhn v 1 nh image ngay khi bt u hay khi 1 li
xy ra trong tin trnh
v d 11-1 ch ra hm Camera API ang c s dng vi cc cu hnh mc nh.theo nh
ti liu trn trang ch ca Phonegap th tham s cameraOptions l khng bt buc nhng
n s l true hoc false trn 1 vi thit b.
<!DOCTYPE html>
<html>
<head>
<title>Example 11-1</title>
<meta http-equiv="Content-type" content="text/html;
charset=utf-8">
127

<meta name="viewport" id="viewport"
content="width=device-width, height=device-height,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no;"
/>
<script type="text/javascript" charset="utf-8"
src="phonegap.js"></script>
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady,
false);
}
navigator.notification.alert("onDeviceReady");
}
function takePhoto() {
navigator.camera.getPicture(onCameraSuccess,
onCameraError,
{});
}
function onCameraSuccess(imageURL)
navigator.notification.alert("onCameraSuccess: " +
imageURL);
}
function onCameraError(e) {
navigator.notification.alert("onCameraError: " + e);
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>Example 11-1</h1>
<p>Using the PhoneGap Camera API<br />
<input type="button" value="Take a Picture"
onclick="takePhoto();">
</p>
</body>
128

</html>
Trong ng dng ny, y ch l 1 trang page n gin vi 1 nt button m ngi dng c
th nhn vo chp 1 bc nh bng camera.khi nt button c nhn vo th hm take
Photofunction c thc thi n n gin gi phng thc getPicture v chuyn tip
vo trong 2 hm onCameraSuccess v onCameraErrorfunctions
Trong v d ny th ta chuyn tip vo 1 i tng cameraOptions object rng do
phng thc getPicture s ch s dng cc cu hnh mc nh ly image t camera v
tr v 1 file URI ch ti ni m image c lu gi sau khi n c chp.khi 1 image c
ly v t camera th hm onCameraSuccess function c gi v chuyn tip vo URI
ch ti image file m va mi c to ra.trong ng dng, ta hu nh s lm 1 vi iu g
vi image URI, nhng trong trng hp ny th tt c nhng g ng dng lm l hin th
ra 1 thng bo v ch ra file URI c chuyn tip vo hm function
Hnh 11-1 ch ra v d 1-11 chy trn 1 Apple iPhone
129
Khi ta n vo nt Take a Picture th s xut hin 1 nhy chp mn hnh v sau ng

dng camera c sn trong thit b s c m v cho php ta chp 1 bc nh.s chp
nhy ny c th s kh lu, do vy ng dng ca ta cn hin th 1 mn hnh please wait
screen sau khi gi ra API ny.khi 1 bc hnh c chp th iOS s hin th 1 mn hnh xem
trc nh trong hnh 11-2.ti y ta c th chp li bc hnh hay n vo nt button tr li
ng dng Phonegap
130
Ch trn hnh l khng c cch no hy b tin trnh x l.nu ngi dng khi to 1
tin trnh chp nh trong ng dng phonegap ang chy trn IOS th khng c cch no
hy b tin trnh ny m khng phi chp 1 bc hnh
Trn thit b IOS, sau khi chp xong hnh th ng dng s hin th ra 1 thng bo hin th
ra file URI cho image file va mi c to ra nh hnh 11-3
131
1 trong nhng th m ta phi ch v phin bn IOS ca ng dng l file URI tr v ng

dng mt tham chiu ti 1 v tr lu tm.nu ta nhn vo hnh 11-3, ta s nhn thy file URL
nh sau : file://localhost/var/mobile/Applications/169DF9CB-25D0-4EC8-85B2380A6342E08D/tmp/photo_001.jpg
Trong file URI ny th file://localhost/var/mobile/Applications/location l vng h thng file
system c cp pht cho d liu ca ng dng. 169DF9CB-25D0-4EC8-85B2380A6342E08D l 1 nh du duy nht c kt hp vi mi ng dng IOS.th mc tmp
l v tr lu tr tm v khi ng dng ng th v tr lu tr tm ny s b xa v ta s mt truy
132

cp vo image file.nu ng dng ca ta cn truy cp vo image file sau th n s cn to
ra 1 bn copy ca image file trc khi ng dng ng
Khi chy v d 1-11 trn thit b Android hay BlackBerry th ta s c vn .trong bi test th
trn Android th n chp 1 bc hnh nhng sau lm treo ng dng phonegap v tr v
thng tin v bc nh cho ng dng.trn BlackBerry th n khng c chp nh v khi ta n
vo nt button th khng c chuyn g xy ra.nhn bn ngoi th gi tr mc nh ca
Camera.DestinationType trong cameraOptions trong c 2 nn tng u l DATA_URL.do
n s l nguyn nhn gy ra treo ng dng khi 1 bc hnh c chp phn gii ti
a.li ln ny c xc nh v c sa li trong PhoneGap 1.4.
khin ng dng hot ng trn thit b Android v BlackBerry th ta phi sa li li gi
trong phng thc getPicture bng cch nhng vo 1 i tng cameraOptions object
n gin nh sau :
navigator.camera.getPicture(onCameraSuccess, onCameraError,
{quality: 50,
destinationType: Camera.DestinationType.FILE_URI }
);
}
Vi s ci t ny th ta c th chy ng dng trn BlackBerry v sau n vo nt Take a

Picture nhn ging hnh sau :
133
Khi n vo nt camera gia y mn hnh th nh chp s c tr v cho ng dng

PhoneGap nh hnh 11-5.ch hnh trn th image file c lu tr ti v tr lu tr
BlackBerry photo mc nh, khng ging vi IOS, th bt k nh no c chp bi ng
dng s c lu tr sn lun khi ng dng b tt
134
Nu ta khng mun nh c lu tr sau khi ng dng tt th ta s cn xa n bng tay

bng cch s dng PhoneGap File API
Hnh 11-6 ch ra cch v d 11-1 chy trn 1 thit b android.trong trng hp ny th nh s
c chp v hin th xem trc .
135
Ta c th t cu hi li chnh mnh l ta lm ci g vi image file URI ny khi ta ly n t

camera ? cu tr li l, n l 1 con tr ch ti 1 image file, do khi ng dng bit c ni
cha file th n c th c file hay copy file ti 1 ch khc ( bng cch s dng PhoneGap
File API ) hay chuyn tip file URI ti UI ca ng dng phonegap hin th nh trong
phm vi ng dng
136

V d 11-2 l 1 phin bn c chnh sa i cht so vi v d 11-1.trong phin bn ny khi
image URI c tr v cho ng dng th 1 th HTML image c vit vo trong trang
index.html page v vy nh c chp s xut hin trn mn hnh
Example 11-2
<!DOCTYPE html>
<html>
<head>
<title>Example 11-2</title>
<meta http-equiv="Content-type"
content="text/html; charset=utf-8">
<meta name="viewport" id="viewport"
174 CHApter 11 CAmerA
content="width=device-width, height=device-height,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no;"
/>
<script type="text/javascript" charset="utf-8"
src="phonegap.js"></script>
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady,
false);
}
navigator.notification.alert("onDeviceReady");
}
navigator.camera.getPicture(onCameraSuccess,
onCameraError,
{quality : 50,
}
destinationType : Camera.DestinationType.FILE_URI );
}
function onCameraSuccess(
imageURL) {
//Get a handle to the image container div

137

ic = document.getElementById('imageContainer');
//Then write an image tag out to the div using the
//URL we received from the camera application.
ic.innerHTML = '<img src="' +
imageURL +
'" width="50%" />';

}
function onCameraError(e) {
console.log(e);
navigator.notification.alert("onCameraError: " + e +
" (" + e.code + ")");
}
</script>
</head>
<body onload="onBodyLoad()">
<h1>Example 11-2</h1>
<p>
Using the PhoneGap Camera API
<br />
<input type="button" value="Take a Picture"
onclick="takePhoto();">
<div id="imageContainer"></div>
</p>
</body>
</html>
Nhng s thay i chnh l trong hm onCameraSuccess function nh sau :

function onCameraSuccess(imageURL) {
//Get a handle to the image container div
ic = document.getElementById('imageContainer');
//Then write an image tag out to the div using the
//URL we received from the camera application.
ic.innerHTML = '<img src="' + imageURL + '" width="50%" />';
}
138
8.2.Cch thit lp cc cu hnh trong Camera Options

Gi ta bit c cch chp nh bng camera, gi ta ni v cc cu hnh m ta c th s
dng thit lp cch m tin trnh ny hot ng.nh ta ni ti t trc th khi gi
phng thc getPicture th ngi lp trnh c th chuyn tip vo trong 1 i tng
cameraOptions object dng nh ngha cc tham s iu khin cch m bc hnh c
ly v.i tng cameraOptions object c cc thuc tnh sau :
139
quality
destinationType
sourceType
allowEdit
encodingType
targetWidth
targetHeight
mediaType
mi mt thuc tnh cu hnh trn s c m t chi tit hn trong phn ngay sau
y.ging vi nhiu tnh nng khc ca PhoneGap APIs th cc cu hnh ca API no (
ging nh allowEdit trong Camera API ) ch p dng c trn gii hn 1 s cc nn tng
mobile
y l 1 v d mu v 1 i tng cameraOptions object y m ta c th s dng :
var cameraOptions = { quality : 75,
sourceType : Camera.PictureSourceType.CAMERA,
destinationType : Camera.DestinationType.FILE_URI,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 1024,
targetHeight: 768 };
khi chuyn tip vo hm getPicture function,th i tng cameraOptions object ny ni
cho getPicture, phng thc ny ly nh v t camera (sourceType), v tr v file URI
dng ch ti image file c chp (destinationType), cho php ngi dng chnh
sa li bc hnh trc khi tr n v chng trnh (allowEdit), tr v 1 nh dng .jpeg file
(encodingType), thit lp image file c m ha s dng 75% cht lng nh
(quality) v thit lp phn gii ca nh l 1024 by 768 pixels (targetWidth v
targetHeight).
8.2.1.Quality
Khi lm vic vi smartphone cameras th phn gii quang hc cao trong thu knh
camera s cng dn, thm vo b nh lu tr gii hn v bng thng truyn dn trn thit
b, do vy cn thit phi c cch nn cc nh images ny chng chim t b nh lu tr
hn v gim ti bng thng truyn dn.ging nh l 1 phn ca tin trnh nn ny , cc tiu
chun nh nh ngha JPEG c h tr bng cch s dng cht lng nh kim sot
140

nn nh khi 1 nh image file c lu tr.bng cch s dng cc thit lp cht lng nh
khc nhau, nh ngha theo % th ta c th tc ng 1 cch rt linh hot ti kch thc vt l
ca 1 image file
1 nh c cht lng 100% th hin th y nguyn nh chp m khng gim i cht lng nh
v a cho ta bc nh cht lng tt nht
Trong nhiu trng hp ta c th s dng gi tr 50% ti 100% cho cht lng nh.nh ta
c th thy phn pha sau, cc nh lp trnh c th c 1 image file URI c tr v t li
gi getPicture hay d liu raw thc s ca bc nh da vo base64-encoded image file
data.cch s dng image file URI l rt d dng v n ch l 1 con tr file v ta xem xt
cc v d trc.khi ly v d liu gc raw image data t getPicture th ta phi i mt vi
thc t l thit b v b chuyn i JS trn thit b b gii hn v b nh.khi x l d liu gc
raw data t 1 nh c phn gii cao cht lng 100% th ta s phi x l trn 1 chui
string cc ln v ng dng rt c th b treo m khng bo cho ta bit ti sao.khi ta gim
thiu cht lng nh th ta gim thiu lng d liu m ng dng phi x l
Khng may mn l khng c hng dn chnh xc no v s % cht lng nh m ta phi
gim thiu m bo thit b khng b treo.ta phi c chng v kim tra th bit cc
gi tr ny rt c th khc nhau trn cc nn tng khc nhau v ngay trn cc thit b khc
nhau c cng nn tng.theo i a s nhng ngi lm vic trn phonegap th khuyn s
dng cht lng nh 50% ( hay thp hn ) khi ta lm vic vi d liu gc raw image data.
thit lp cameraOptions object s dng cht lng nh 50% th ta s dng :
quality : 50
Ch : theo ti liu phonegap th cu hnh ny khng p dng c trn nn tng

Black-Berry
8.2.2.destinationType
khi chp 1 bc hnh bng cch s dng getPicture th ng dng s s dng
destinationType iu khin kiu d liu no v image, s c tr v ging nh 1 file
URI dng ch ti image file c lu tr trong b nh ca thit b :
destinationType: Camera.DestinationType.FILE_URI
Hay ly v d liu nh theo gi tr kiu chui base64-encoded string th ta s dng nh
sau :
141

destinationType: Camera.DestinationType.DATA_URL
cch lm vic vi file URIs l rt d dng nh v d 11-2.ng dng c 1 con tr file pointer.
ng dng c th s dng con tr ny, nhng n vo bn trong 1 th HTML img ph bin
(trong phm vi ng dng), hay khi s dng File API copy file ny ti 1 v tr khc (da
vo con tr).khi ta bit file ny u th vic truy cp vo image file x l l ht sc
n gin
hnh 11-8 ch ra output ca v d 11-1 khi cu hnh destinationType l
Camera.DestinationType.DATA_URL c s dng.nh ta c th thy, th nhng g ta phi
lm, thc cht l lm vic vi 1 chui string rt ln, nh bit n l nguyn nhn gy ra
trn b nh v lm treo chng trnh nu chui string l qu ln
Cch s dng d liu gc raw image data th ta vn c th biu din c hnh nh

trong UI nhng hn th, ta c th s dng n lu tr trong database hay upload d liu
ny ln 1 server
142
8.2.3.sourceType
tham s sourceType c s dng nh ngha ni m phng thc getPicture ly nh
v.khi sourceType b b qua th phng thc getPicture s n gin s dng
Camera.SourceType.CAMERA ly nh v.ng dng c th nh ngha s dng th vin
nh trong thit b bng cch sau :
sourceType : Camera.SourceType.PHOTOLIBRARY
ly v cc nh t 1 album nh lu, bng cch s dng sau :
sourceType : Camera.SourceType.SAVEDPHOTOALBUM
trn hu ht cc nn tng, cch nh ngha sourceType l SAVEDPHOTOALBUM hay
PHOTOLIBRARY thc cht l ging nhau.nh hnh 11-9, khi ng dng to ra 1 li gi
getPicture th thit b s m ng dng th vin nh v cho php ngi dng u tin l la
chn 1 album nh v sau la chn 1 bc nh trc khi tr v 1 nh c chn ti
ng dng Phonegap
143
Trn thit b IOS th 2 thao tc ny hi khc bit 1 cht.khi 1 sourceType c nh ngha

l PHOTOLIBRARY th ng dng s thc thi tng t vi nhng g trong hnh 11-9.khi nh
ngha sourceType l SAVEDPHOTOALBUM th ng dng s m 1 th vin nh iOS
Camera Roll photo library cho php ngi dng la chn 1 nh t
Ch : Camera.PictureSourceType.PHOTOLIBRARY v
Camera.PictureSourceType.SAVEDPHOTOALBUM c tnh nng ging ht nhau trong
Android v cu hnh sourceType khng c h tr trong BlackBerry
144
8.2.4.allowEdit
1 ng dng IOS c th s dng cu hnh allowEdit ch dn phng thc getPicture cho
php ngi dng chnh sa nh c chn, trc khi tr v cho ng dng Phonegap.
thit lp 1 i tng cameraOptions object cho cu hnh ny ta s dng nh sau :
allowEdit : true
khi c kch hot trong ng dng th sau khi camera chp nh th thit b s hin th 1 mn
hnh tng t vi hnh 11-10.ti y, ngi dng c th chnh sa li bc nh.khi ngi
dng n vo nt Choose button th nh c chnh sa s c tr v cho ng dng
PhoneGap
145
Ch : cu hnh allowEdit khng h tr trong android, blackberry

8.2.5.encodingType
1 ng dng Phonegap s dng encodingType cameraOption ni cho phng thc
getPicture bit nh dng nh no c chp.cu hnh c h tr l JPEG v PNG, vi
JPEG l cu hnh mc nh trn hu ht cc thit b. thit lp phng thc getPicture tr
v 1 JPEG file th ta s dng nh sau :
encodingType: Camera.EncodingType.JPEG
hay s dng PNG files, ta s dng nh sau Camera.EncodingType.PNG
Ch : c thm ti ca phonegap bit thm

8.2.6.targetHeight v targetWidth
tham s targetHeight v targetWidth iu khin chiu rng v chiu cao ca nh c
nhn v bng phng thc getPicture.ta c th thit lp 1 trong 2 targetHeight v
targetWidth v sau bc nh s c t ng c t l da theo 1 trong 2 tham s
ny.nu ta nh ngha c 2 tham s trn th nh s c t l da theo tham s m kt qu
ca n trong t l nh nht.
khng c cch no theo lp trnh xc nh c phn gii camera hay t l c h
tr trc khi chp 1 bc hnh
nh ngha i tng cameraOptions object m nh ngha targetHeight v
targetWidth cho nh, ta s dng m code sau :
targetHeight: 100, targetWidth: 100
8.2.7.mediaType
trong nhiu smartphones hin i ngy nay, chng c th cha nhiu loi media types
trong 1 photo library th PhoneGap Camera API h tr b sung 1 gi tr mediaType trong
cameraOptions object trong trng hp m sourceType thit lp l PHOTOLIBRARY
hay SAVEDPHOTOALBUM.tham s ny h tr cc cu hnh sau :
DEFAULT : tr v thng tin nh bng cch s dng nh dng c nh ngha trong

gi tr destinationType
ALLMEDIA : cho php la chn tt c cc dng media
146
PICTURE : cho php la chn ch cc nh
VIDEO : cho php ch la chn video
Khi cu hnh l video th ch file URI c tr v cho chng trnh v l do gii hn b nh
8.2.8.saveToPhotoAlbum
dng lu nh vo photo album trn thit b sau khi chp xong
saveToPhotoAlbum : true
8.3.Lm vic vi cc vn xy ra vi camera

vi bt c mi trng lp trnh no th cng tn ti 1 vi ch m mi th c th hot ng
khng nh mong i hoc b li.mc ch ca phn ny l lm ni bt cch m ta x l khi
Camera API gp li
khi hm onCameraError function c kch hot th Camera API chuyn tip 1 i tng
error object m cn truy vn xc nh nguyn nhn gy ra li.nh hnh 11-11 th li l 1
thng bo n gin.trong trng hp ny th ngi dng n vo nt Cancel button trn
hnh 11-10, do khng c thng tin v nh c tr li ng dng phonegap
147
Khi ng dng chy trn thit b m khng c camera th ta s nhn thy li ging nh hnh
11-12 sau :
148
Nu ng dng ang chy trn thit b khng c camera th n khng m bo hm

onCamera Errorfunction s c thc thi bi Camera API.nu ng dng li v ta khng
chc ti sao th ng qun rng lnh console log c th cha cc thng tin tr gip.hnh
11-13 ch ra 1 on trong iOS console vi vic chy v d 11-1.ch rng khi ta n vo nt
Take a Picture button th console logs ghi li 1 li dng xc nh rng source type 1 (
camera ) khng sn sng
y l 1 trong cc v d kh hiu mc d trn thit b c h tr 1 camera th Apple quyt

nh rng n khng quan trng nhng vo cc chc nng c trong bn gi lp.trong
149

trng hp ny c th test trn gi lp IOS th ng dng ca ta s cn kim tra xem thit
b no ang chy v ang s dng 1 photo library
Nu ng dng ca ta dng nh ang chy ng nhng khi ta chp 1 bc hnh th chng
c chuyn g xy ra hay ng dng b treo, y hu nh chc chn l c gy ra bi vic
ng dng tr v d liu gc raw camera data ch khng phi l file URI v thit b khng
c kh nng x l 1 chui string qu ln nh vy.khi chuyn xy ra th hy th lm
gim cht lng hnh nh xung 50% hay nh hn xem n c sa c vn ny
khng.nu n sa c th ta s phi lm 1 vi vic dng xc nh xem thit lp cu hnh
cht lng hnh nh no l ti u cho ng dng v thit b c th x l c n
150
IX.Splashscreen
Cho php lp trnh vin hin th hay n i mn hnh splash screen ca ng dng
Cc phng thc:
Show
Hide
10.1.Cch phn quyn Permissions

Android
app/res/xml/config.xml
<plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
iOS
Cordova.plist
Add an entry under the Plugins dictionary - with the key "SplashScreen" and value
"CDVSplashScreen".
New projects should already have this key.
10.2.Cch thit lp
Android:
Sao chp nh mn hnh splash screen vo trong cc th mc res/drawable ca

Android project. V cc kch thc ca file nh s l:
a. xlarge (xhdpi): nh nht l 960x720
b. large (hdpi): nh nht l 640x480
c. medium (mdpi): nh nht l 470x320
d. small (ldpi): nh nht l 426 x 320
trong phng thc onCreate method ca lp class k tha (extends) DroidGap

thm vo 2 dng sau:
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html", 10000);
151

dng u tin 'super.setIntegerProperty' thit lp nh hin th cho mn hnh
splashscreen. Nu ta t tn bc nh l bt c th g khc splash.png th ta phi sa li
dng ny. Dng th 2 vn gi khng thay i v ch ti tham s th 2 l gi tr
tr timeout dnh cho mn hnh splash screen. Trong v d trn, mn hnh splash screen s
c hin th trong 10 giy. Nu ta mun tt mn hnh splash screen khi ta nhn c s
kin "deviceready" event th ta nn s dng phng thc navigator.splashscreen.hide()
iOS:
sao chp nh mn hnh splash screen vo trong th mc Resources/splash ca

iOS project. Ta ch thm nh dnh cho thit b m ta mun h tr (iPad hay iPhone).
Cc kch thc ca nh nn l:
o
Default-568h@2x~iphone.png (640x1136 pixels)
Default-Landscape@2x~ipad.png (2048x1496 pixels)
Default-Landscape~ipad.png (1024x768 pixels)
Default-Portrait@2x~ipad.png (1536x2008 pixels)
Default-Portrait~ipad.png (768x1024 pixels)
Default@2x~iphone.png (640x960 pixels)
Default~iphone.png (320x240 pixels)
10.3.show
Hin th mn hnh splash screen.
navigator.splashscreen.show();
cc nn tng h tr:
Android
iOS
152

v d:
<!DOCTYPE html>
<html>
<head>
<title>Splashscreen Example</title>
//
// Cordova is ready
//
navigator.splashscreen.show();
}
</script>
</head>
<body>
<h1>Example</h1>
</body>
</html>
10.4.hide
n i mn hnh splash screen.
navigator.splashscreen.hide();
cc nn tng h tr:
Android
iOS
153

v d:
<!DOCTYPE html>
<html>
<head>
<title>Splashscreen Example</title>
//
// Cordova is ready
//
}
</script>
</head>
<body>
<h1>Example</h1>
</body>
</html>
Ch : 1 vi mo cho iOS:
1. trong Cordova.plist, ta cn hiu chnh gi tr "AutoHideSplashScreen thnh false
2. sau , nu ta mun n i mn hnh splash screen khong 2 giy, th ta c th lm
nh sau trong hm hiu chnh event deviceready
}, 2000);
154
155

lập trình phonegap cho người mới học

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

lập trình phonegap cho người mới học

Uploaded by

Copyright:

Available Formats

Phonegap cho ngi mi hc

Phonegap cho ngi mi hc

Phonegap cho ngi mi hc

Phonegap cho ngi mi hc

Phonegap cho ngi mi hc

Ng Quang Trung email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum

Phonegap cho ngi mi hc

Cc ti liu lin quan

Lp trnh hng i tng trong Javascript v cc kiu mu thit k:

Cch ti u ha mi trng lp trnh ng dng cho Android:

Hoc n gin truy cp vo th mc chia s sau: http://sdrv.ms/VoAXBi (rt c

Ng Quang Trung email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum

Phonegap cho ngi mi hc

1.1.Hiu thm v events

Ng Quang Trung email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum

Phonegap cho ngi mi hc

1.2.Cch s dng EVENTS LISTENER

Phonegap cho ngi mi hc

1.3.Hiu thm v cc dng s kin EVENT TYPES

// Register the event listener

Phonegap cho ngi mi hc

Ng Quang Trung email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum

Phonegap cho ngi mi hc

// Register the event listener

Ng Quang Trung email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum

Phonegap cho ngi mi hc

Ng Quang Trung email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum

Phonegap cho ngi mi hc

Ng Quang Trung email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum

Phonegap cho ngi mi hc

Ng Quang Trung email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum

Phonegap cho ngi mi hc

Ng Quang Trung email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum

Phonegap cho ngi mi hc

Cng ging nh cc events khc, ta khng nn ng k kiu nh th ny cho ti khi ta xc

Ng Quang Trung email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum

Phonegap cho ngi mi hc

1.3.9.Mt v d n gin v s phn hi li cc s kin events

// Register the event listeners

Ng Quang Trung email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum

Phonegap cho ngi mi hc

Chng trnh chy nh th no

1.3.10.Mt v d n gin v vic phn hi li cc s kin Button

// Register the event listeners

Phonegap cho ngi mi hc

Chng trnh chy nh th no

Ng Quang Trung email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum

Phonegap cho ngi mi hc

II.Cch lm vic vi thit b, mng network, v cc thng

device.name l tn ca thit b (v d nh my iphone)

device.phonegap phin bn ca phonegap

device.platform loi ca thit b (v d nh iphone)

device.Version phin bn h iu hnh OS ang chy

quan trng phi ch rng : device c gn thnh i tng window object, do vy n

ID quc t dng xc nh thit b duy nht (UUID)

Phin bn h iu hnh ca thit b

2.1.2.Cch ly v tn ca thit b Device Name

Android Nexus One tr v l Passion ( y l tn m sn phm)

Android Motorola Droid tr v l voles

Ng Quang Trung email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum

Phonegap cho ngi mi hc

BlackBerry Bold 8900 tr v l 8900

iPhone tr v l tn c thit lp trong iTunes( v d nh Toms phone )

thuc tnh device.name c h tr trong cc thit b Android, BlackBerry, v iPhone