Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 1
MC LC
LI NÓI U 5
Các tài liu liên quan 6
I.Events 7
1.1.Hiu thêm v events 7
1.2.Cách s dng EVENTS LISTENER 8
1.3.Hiu thêm v các 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 các s kin events 17
1.3.10.Mt ví d đn gin v vic phn hi li các s kin Button Events 18
II.Cách làm vic vi thit b, mng network, và các thông báo notifications 20
2.1.Cách ly thông tin t thit b 20
2.1.2.Cách ly v tên ca thit b Device Name 20
2.1.3.Cách ly v thông tin phiên bn phonegap 21
2.1.4.Cách ly v nn tng thit b Device Platform 21
2.1.5.Cách ly v ID quc t ca thit b UUID 21
2.1.6.Cách ly v thông tin phiên bn h điu hành 22
2.1.7.Ví d v cách ly thông tin ca thit b 22
2.2.Cách kim tra 1 mng network 23
Cách xác đnh dng kt ni 24
2.3.Cách s dng các thông báo NOTIFICATIONS 26
2.3.1.Cách s dng Alerts 26
2.3.2.Cách s dng hp thoi tng tác Confirmation Dialogs 27
2.3.3.Cách s dng Beeps 28
2.3.4.Cách s dng ch đ rung Vibrations 29
2.3.5.Ví d v cách s dng tt c 4 loi thông báo Notifications 29
III.Gia tc k Accelerometer 32
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 2
3.1.Th nào là gia tc k Accelerometer ? 32
3.2.Cách s dng gia tc k Accelerometer 32
3.3.Các ng dng dùng gia tc k Accelerometer 33
3.4.Cách s dng đi tng gia tc k ACCELERATION OBJECT 36
3.5.Cách s dng các 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 hình ACCELEROMETER OPTION 40
3.7.Ví d v cách s dng gia tc k ACCELEROMETER 40
Cách thc ví d hot đng 41
IV.Ví trí đa lý Geolocation 42
4.1.Th nào là v trí đa lý Geolocation ? 42
4.2.Cách s dng Geolocation 42
4.3.Các mu ng dng v Geolocation 42
4.4.Các đ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
Cách ví d hot đng 47
4.6.Cách ci thin giao din và tri nghim ca ngi dùng 48
V.Media 52
5.1.Các Media Files là gì ? 52
5.2.Cách s dng các Media Files 52
5.3.Các ng dng mu s dng media API 52
5.4.i tng MEDIA OBJECT 55
5.5.Cách s dng các 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
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 3
5.5.9.Phng thc media.stopRecord 64
5.5.10.Kim soát li MediaError 65
5.5.11.Ví d v vic s dng media api 66
VI.Lu tr Storage 73
6.1.im khác bit gia Session Storage và Local Storage ? 75
6.2.Cách s dng local storage 76
6.3.Cách s dng đi tng DATABASE OBJECT 77
6.3.1.Cách to và Cách m 1 database 77
6.3.2.Cách chy 1 sql Query 78
6.3.3.Cách phân tích và tin x lý các câu lnh SQL (phòng chng SQL injection) 81
6.3.4.Các giao dch Transactions 82
6.4.Cách xem 1 tp kt qu 84
6.5.iu chnh li 86
6.6.Ví d v cách xây dng 1 database đn gin : 89
VII.Files 91
7.1.H thng FILESYSTEMS 91
7.2.Tìm hiu v các th mc dn DIRECTORIES và các files 92
7.2.1.Cách 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.Cách s dng đi tng FileEntry Object 105
7.8.1.getMetadata 106
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 4
7.8.2.moveTo 107
7.8.3.copyTo 108
7.8.4.toURI 109
7.8.5.remove 109
7.8.6.getParent 109
7.8.7.createWriter 110
7.8.8.file 111
7.9.Cách đc các files - FileReader 111
7.9.1.readAsDataURL 112
7.9.2.abort 113
7.9.3.readAsText 114
7.10.Cách đc các files – FileWriter 116
7.11.Cách 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.Cách truy cp 1 nh Picture 127
8.2.Cách thit lp các cu hình trong Camera Options 139
8.2.1.Quality 140
8.2.2.destinationType 141
8.2.3.sourceType 143
8.2.4.allowEdit 145
8.2.5.encodingType 146
8.2.6.targetHeight và targetWidth 146
8.2.7.mediaType 146
8.2.8.saveToPhotoAlbum 147
8.3.Làm vic vi các vn đ xy ra vi camera 147
IX.Splashscreen 151
10.1.Cách phn quyn Permissions 151
Android 151
iOS 151
10.2.Cách thit lp 151
10.3.show 152
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 5
10.4.hide 153
LI NÓI U
1 đim cá nhân mình rt thích Phonegap, đó chính là tính đn gin và hu nh
không có tính ràng buc. Phonegap đc gi là framework tuy nhiên nó không ging nh 1
vài framework PHP mà mình đã tng hc, vi nhng framework PHP này, nó đnh ngha li
hoàn toàn cách bn vit mã code, và nó đòi hi bn phi hiu rõ sâu rng v các thành
phn h thng bên trong, thì bn mi có th lp trình thông tho đc. Vi Phonegap, nó
không kìm kp bn vào trong 1 h thng có 1 quy chun riêng ri rm nào c, bn có th t
do thoi mái lp trình theo cách mà bn mun (tuy nhiên cái gì cng có 2 mt ca nó), bn
ch cn nm bt 1 công ngh duy nht - công ngh nn Web(bao gm HTML5, Javascript,
CSS), b qua gánh nng cn phi nm bt và hiu rõ v các công ngh bên trong mi nn
tng (Android, iOS, Blackberry, Windowphone, ầ) mà bn vn có th to ra đc các ng
dng “vit mt ln, biên dch qua cloud và chy khp ni – tng thích vi hu ht các nn
tng h điu hành di đng hin ti”.
Tài liu đc vit ging nh 1 bn ghi chép, ghi li nhng th mà mình đã đc đc t các
ebook ting anh, do vy b cc sp xp ca nó có th cha chính xác, cách trình bày không
theo chun 1 ebook nào c và nhiu ch vit cha rõ ngha và không mch lc do hn ch
v ngoi ng ca bn thân mình. Tài liu mang đm tính cht cá nhân do vy bn s bt
gp trong tài liu này nhiu đon kí t in đm, in màu, c ch ln bt thng và đc tô
màu khác nhau - đó là các đon có liên quan đn nhau hay là nhng ghi chú quan trng mà
bn cn phi đc k.
Ni dung trong tài liu này đc da trên các cun ebook: “Beginning Phonegap -
Thomas Myer”, “PhoneGap Essentials - John M. Wargo”,
“Apache Cordova Documentation 2.2.0 – Phonegap team”, và 1 s gii thích, đnh ngha
v kin trúc ca HTML5 t W3C.org. Tài liu này không đ cp ti đy đ các hàm APIs
đc Phonegap h tr. C th, các phn sau b lc b: Capture, Compass, Contacts,
Globalization, Guides (do mình không có thi gian đ vit nt, và mình cng không s
dng đn các phn b lc b này)
Nu có thc mc hay góp ý gì, các bn có th đng ký ngay 1 nick vào din đàn
www.phonegap.vn/forum đ đt câu hi trc tip, các MOD và ADMIN s tr li câu hi
ca bn trong thi gian sm nht.
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 6
Các tài liu liên quan
“Lp trình hng đi tng trong Javascript và các kiu mu thit k”:
/>javascript-va-cac-kieu-mau-thiet-ke
“Cách ti u hóa môi trng lp trình ng dng cho Android”:
/>cho-android-tng-tc-my-o-android
Hoc đn gin truy cp vào th mc chia s sau: (rt có
th trong 1 thi gian na, mình s vit 1 ebook liên quan đn Jquery Mobile, nu có
thì các bn s thy nó xut hin trong th mc chia s này)
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 7
I.Events
1 s kin events trong phonegap tng đi ging s kin trong javascript.1 hành đng (thao
tác) đc thc hin trên thit b - ví d nh document object model (DOM) đã đc ti xong
và do đó thit b trng thái sn sàng “ready” - và hin ti phonegap có th thc hin 1 vài
th đ tr li(đáp ng) li s kin này
1.1.Hiu thêm v events
đn gin hóa, ta hiu 1 event là bt c hành đng nào mà có th đc xác đnh (nhn
bit) bi phonegap.trong lp trình javascript truyn thng, bt c phn t nào trên 1 trang
page cng có th có các s kin event nào đó, và nó có th đc kích hot bi 1 vài mã
javascript.ví d nh 1 s kin onrollover trên 1 link có th gây ra xut hin 1 bng pop-up,
hay s kin onclick có th gây ra 1 bng hp thoi xem trc
Tóm li, s kin events có th là click chut, 1 image loading, rolling over trên 1 link nào đó
hay nhng đi tng DOM khác, vic la chn 1 trng input field trong 1 form, submitting
1 form, hay s kin gõ 1 phím bt kì trên bàn phím.v đa s thì tt c các dng s kin
events trên cng có th đc s dng khi ta phát trin các ng dng s dng phonegap.tuy
nhiên có nhng s kin ch đc đnh ngha bên trong phonegap nh sau :
deviceready
pause
resume
online
offline
backbutton
batterycritical
batterylow
batterystatus
menubutton
searchbutton
startcallbutton
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 8
endcallbutton
volumedownbutton
volumeupbutton
trong tt c các s kin events trên thì s kin deviceready là quan trng nht mà ta phi
xem xét ti.không có nó thì ng dng ca ta s không bit khi nào phonegap đã đc load
hoàn toàn.khi nó đc kích hot, ta có th gi 1 cách an toàn bt c các hàm PhoneGap
function nào và do đó có th ln lt truy cp an toàn vào các API bn đa
khi s kin deviceready event đc kích hot, thì ta bit đc 2 điu : DOM đã đc load,
và do vy đã có PhoneGap API
1.2.Cách s dng EVENTS LISTENER
đ s dng bt c s kin event nào, thì ta s cn phi s dng 1 event listener.nh ví d
sau : dùng đ xác đnh s kin deviceready.ta phi làm 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>
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 9
</html>
Ví d trên nhc nh ta rng deviceready có th là 1 s kin nhng nó li không phi là s
kin chun tc trong trình duyt, nó ch hot đng và nhn bit bi trong phonegap.nu ta
th chy s kin này trong 1 trình duyt thông thng thì nó không bao gi đc kích hot
1.3.Hiu thêm v các dng s kin EVENT TYPES
1.3.1.Backbutton
S kin backbutton đc kích hot khi ngi dùng n vào nút Back trên thit b Android
xác đnh s kin event này, thì ta cn đng ký 1 event listener nh sau :
document.addEventListener(“backbutton”, onBackButton, false);
function onBackButton(){
//handle the back button
}
Cng ging nh các s kin event khác thì ta không nên đng ký ging nh th này cho ti
khi ta đã xác đnh đc s kin deviceready event:
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap backbutton 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() {
// Register the event listener
document.addEventListener(“backbutton”, onBackButton, false);
}
// Handle the back button
//
function
onBackButton() {
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 10
}
</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
xác đnh.theo đó ta cn phi xác đnh s kin này đu tiên trc khi ta làm bt c nhng gì
khác bi vì khi nó đc kích hot thì đng ngha vi vic ta chc chn gi đc các
PhoneGap API
document.addEventListener(“deviceready”, onDeviceReady, false);
function
onDeviceReady(){
//ready!
}
dành cho nhng ngi phát trin trên BlackBerry OS 4.6, thì RIM Browserfield không
h tr hàm s kin event này, nên 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
);
}
function
onDeviceReady() {
// use the phonegap api!
}
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 11
1.3.3.Menubutton
S kin menubutton đc kích hot khi ngi dung n vào nút Menu trên thit b android
xác đnh s kin này, thì ta cn đng ký 1 event listener nh sau :
document.addEventListener(“menubutton”, onMenuButton, false);
function
onMenuButton(){
//handle the menu button
}
Cng ging nh các events khác, ta không nên đng ký kiu nh th này cho ti khi ta xác
đnh đc s kin deviceready
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap menubutton 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() {
// Register the event listener
document.addEventListener(“menubutton”, onMenuButton, false);
}
// Handle the menu button
//
function
onMenuButton() {
}
</script>
</head>
<body>
</body>
</html>
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 12
1.3.4.Pause
Khi s kin pause đc kích hot là khi 1 ng dng đc đt vào ch đ chy nn
xác đnh s ki này, ta đng kí 1 event listener nh sau :
document.addEventListener(“pause”, onPause, false);
function onPause(){
//handle the pause event
}
Hay ta làm theo nh đúng tiêu chun ging nh trên nh sau :
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap pause 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() {
// Register the event listener
document.addEventListener(“pause”, onPause, false);
}
// Handle the pause
//
function onPause() {
}
</script>
</head>
<body>
</body>
</html>
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 13
1.3.5.Resume
S kin resume đc kích hot khi 1 ng dng đang trng thái tm dng (chy nn)
đc kích hot tr li làm vic
xác đnh s ki này, ta đng kí 1 event listener nh sau :
document.addEventListener(“resume”, onResume, false);
function onResume(){
//handle the resume event
}
Cng ging nh các events khác, ta không nên đng ký kiu nh th này cho ti khi ta xác
đnh đc s kin deviceready
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap resume 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() {
// Register the event listener
document.addEventListener(“resume”, onResume, false);
}
// Handle the resume
//
function onResume() {
}
</script>
</head>
<body>
</body>
</html>
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 14
1.3.6.Searchbutton
S kin searchbutton đc kích hot khi ngi dùng n vào nút Search trên thit b android
xác đnh s ki này, ta đng kí 1 event listener nh sau :
document.addEventListener(“searchbutton”, onSearchButton, false);
function onSearchButton(){
//handle the search button
}
Cng ging nh các events khác, ta không nên đng ký kiu nh th này cho ti khi ta xác
đnh đc s kin deviceready
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap searchbutton 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() {
// Register the event listener
document.addEventListener(“searchbutton”, onSearchButton, false);
}
// Handle the search button
//
function onSearchButton() {
}
</script>
</head>
<body>
</body>
</html>
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 15
1.3.7.Online
S kin online đc kích hot khi 1 ng dng phonegap đang online (điu này có ngha là
nó đang đc kt ni internet).đây là 1 s kin mi đc thêm vào trong phiên bn 0.9.6 và
nó ch đc h tr trên các thit b iOS, Android, and BlackBerry
xác đnh s ki này, ta đng kí 1 event listener nh sau :
document.addEventListener(“online”, isOnline, false);
function isOnline(){
//handle the online event
}
Cng ging nh các events khác, ta không nên đng ký kiu nh th này cho ti khi ta xác
đnh đc s kin deviceready
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap online 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() {
// Register the event listener
document.addEventListener(“online”, isOnline, false);
}
// Handle the online event
//
function isOnline() {
}
</script>
</head>
<body>
</body>
</html>
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 16
1.3.8.Offline
S kin offline đc kích hot khi 1 ng dng phonegap đang offline (điu này có ngha là
nó không kt ni internet).đây là 1 s kin mi đc thêm vào trong phiên bn 0.9.6 và nó
ch đc h tr trên các thit b iOS, Android, and BlackBerry
xác đnh s ki này, ta đng kí 1 event listener nh sau :
document.addEventListener(“offline”, isOffline, false);
function isOffline(){
//handle the offline event
}
Cng ging nh các events khác, ta không nên đng ký kiu nh th này cho ti khi ta xác
đnh đc s kin deviceready
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap offline 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() {
// Register the event listener
document.addEventListener(“offline”, isOffline, false);
}
// Handle the offline event
//
function isOffline() {
}
</script>
</head>
<body>
</body>
</html>
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 17
1.3.9.Mt ví d đn gin v s phn hi li các s kin events
Ta to ra ng dng đn gin, phn hi li các s kin pause và resume events :
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Event 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() {
// Register the event listeners
document.addEventListener(“pause”, onPause, false);
document.addEventListener(“resume”, onResume, false);
}
// Handle the pause
//
function
onPause() {
alert(“Paused!”);
}
// Handle the resume
//
function
onResume() {
alert(“Resumed!”);
}
</script>
</head>
<body>
</body>
</html>
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 18
Chng trình chy nh th nào
event listener là 1 khóa quan trng, nó dùng đ xác đnh khi nào s kin deviceready
event đc kích hot và khi s kin này đc kích hot thì ta bit đc rng ta có th gi 1
cách an toàn các API còn li ca phonegap
khi nó đc kích hot, thì s kin deviceready event làm chy hàm onDeviceReady()
function và ln lt trong hàm này đng ký 2 event listener mi, 1 cái cho s kin pause
event và cái th 2 cho s kin resume event
1.3.10.Mt ví d đn gin v vic phn hi li các s kin Button
Events
<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Button 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() {
// Register the event listeners
document.addEventListener(“searchbutton”, onSearch, false);
document.addEventListener(“menubutton”, onMenuButton, false);
document.addEventListener(“backbutton”, onBackButton, false);
}
// Handle the backbutton
//
function
onBackButton() {
alert(“You hit the back button!”);
}
// Handle the menubutton
//
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 19
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 trình chy nh th nào
Chng trình đn gin là đu tiên tin hành kim tra đ chc chn rng ng dng
phonegap đã sn sàng hay cha, và sau đó đng ký 3 event listeners, tng cái 1 dành cho
các nút ca thit b nh Search, Menu, và Back buttons
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 20
II.Cách làm vic vi thit b, mng network, và các thông
báo notifications
2.1.Cách ly thông tin t thit b
Phonegap có 1 runtime object đc gi là đi tng thit b device, đ lu gi thông tin có
ích v thit b.sau đây là nhng thuc tính ca đi tng device :
device.name – là tên ca thit b (ví d nh my iphone)
device.phonegap – phiên bn ca phonegap
device.platform – loi ca thit b (ví d nh iphone)
device.uuid – s id ca thit b
device.Version – phiên bn h điu hành OS đang chy
quan trng phi chú ý rng : device đc gán thành đi tng window object, do vy nó
hoàn toàn có phm vi toàn cc.hiu theo cách khác, c 2 bin sau đu tham chiu ti cùng
thit b device :
//both of these reference the same device
var myPhoneName = window.device.name;
var myPhoneName = device.name;
trong phn này ta s hc ly v các thông tin sau :
tên ca thit b device
phiên bn phonegap
ID quc t dùng đ xác đnh thit b duy nht (UUID)
Phiên bn h điu hành ca thit b
2.1.2.Cách ly v tên ca thit b Device Name
ly v tên ca thit b ta s dng device.name nh sau:
var myPhoneName = device.name;
giá tr này đc tr v đc thit lp bi nhà sn xut và có th bin đi t sn phm này
đn sn phm khác và bin đi ngay c trên cùng 1 phiên bn sn phm.ví d, đây là 1
danh sách ca các giá tr tr v cho các loi đin thoi khác nhau :
Android Nexus One tr v là Passion ( đây là tên mã sn phm)
Android Motorola Droid tr v là voles
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 21
BlackBerry Bold 8900 tr v là 8900
iPhone tr v là tên đc thit lp trong iTunes( ví d nh Tom‟s phone )
thuc tính device.name đc h tr trong các thit b Android, BlackBerry, và iPhone
2.1.3.Cách ly v thông tin phiên bn phonegap
đ ly v thông tin phiên bn phonegap trên thit b, ta s dng thuc tính
device.phonegap nh sau :
var myDevicePhoneGap = device.phonegap;
thuc tính device.phonegap đc h tr trên các thit b Android, Blackberry, và iPhone
2.1.4.Cách ly v nn tng thit b Device Platform
cách ly v tên ca h điu hành trên thit b, ta s dng device.platform nh sau:
var myDevicePlatform = device.platform;
ph thuc vào thit b device, câu lnh này tr v các th sau :
android
blackberry
iphone
webOS
Chú ý: theo kinh nghim ca lp trình viên thì các thit b iphone tr v là ios và 1
vài thit b blackberry tr v phiên bn h điu hành đ thay th cho tên ca h điu hành.ví
d nó có th tr v 1.10.3.5 thay cho blackberry
2.1.5.Cách ly v ID quc t ca thit b UUID
mi thit b điu phi có s UUID, s này đc thêm vào thit b bi nhà sn xut. UUID có
th có nhng chiu dài khác nhau ph thuc vào thit b, nó có th luôn luôn đc đnh
ngha nh là 1 mu model và nn tng platform.ví d, android s dng 1 s kiu int ngu
nhiên 64-bit; blackberry s dng mã PIN 9 kí t; và iphone s dng 1 chui string là giá tr
ca hàm bm hash
cách ly UUID ca thit b, ta s dng device.uuid nh sau :
var myDeviceID = device.uuid;
thuc tính device.uuid đc h tr trên các thit b Android, BlackBerry, và iPhone
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 22
2.1.6.Cách ly v thông tin phiên bn h điu hành
cách ly v tên phiên bn h điu hành ca thit b, ta s dng device.version nh sau :
var myDeviceOS = device.version;
ph thuc vào h điu hành, ta s ly đc v các giá tr khác nhau.ví d trên android, h
điu hành Froyo OS tr v là 2.2 và Éclair OS tr v là 2.1, 2.0.1 hay 2.0. BlackBerry Bold
9000 s 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 tính device.version đc h tr trên các thit b Android (2.1 and higher), BlackBerry,
and iPhone
2.1.7.Ví d v cách ly thông tin ca thit b
ta to ra 1 đon mã đn gin dùng đ cho phép ta s dng các phn t device đ ly v
các thông tin v thit b :
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“
<html>
<head>
<title>My Device</title>
<script type=”text/javascript” charset=”utf-8” src=”phonegap.js”></script>
<script type=”text/javascript” charset=”utf-8”>
// Use an event listener to detect if PhoneGap is ready
//
function onLoad() {
document.addEventListener(“deviceready”, onDeviceReady, false);
}
// okay, PhoneGap is ready
//
function
onDeviceReady() {
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 />‟;
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 23
}
</script>
</head>
<body onload=”onLoad()”>
<p id=”props”>Loading device properties </p>
</body>
</html>
Cách thc chng trình hot đng
Trong ví d này, ta to ra 1 tài liu HTM đn gin, đu tiên ti v th vin phonegap.js.tip
theo ta vit 1 hàm onLoad() function dùng đ đng ký 1 event handler bng cách s dng
addEventListener.đc bit, ta mun tuân theo s kin deviceready event, và khi nó đc
kích hot thì nó s chy hàm onDeviceReady() function.
Hàm onDeviceReady() function làm 2 th : th nht là nó đin vào 1 đon vn vào trong
document DOM có id là “props” bng cách s dng getElementById, sau đó nó in ra
thông tin v thit b vào trong phn t DOM đó
Nu ta s dng JQuery, thì ta có th đn gin vit nh sau :
function onDeviceReady() {
$(“#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.Cách kim tra 1 mng network
Vi 1 ngi lp trình nn web hay destop, thì ta thng gi đnh rng kt ni mng network
luôn luôn đc bt thông qua kt ni có dây hoc không dây.tuy nhiên khi ta bt đu làm
vic vi các thit b di đng, ta không th luôn luôn gi đnh nh vy.tín hiu kt ni có th
không tn ti hoc có th rt yu không n đnh, hay ngi dùng 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 này
cho phép ta truy cp vào thông tin kt ni cellular và WiFi ca thit b
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 24
Cách xác đnh dng kt ni
xác đ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
}
Hàm connection.type s tr v 1 trong s danh sách các dng kt ni có th sau :
UNKNOWN
ETHERNET
WIFI
CELL_2G
CELL_3G
CELL_4G
NONE
1 ý tng tt đ làm vic vi các bng thông đip đ thông báo ti ngi dùng.ta s làm
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.CELL_3G] = „Cell 3G connection‟;
states[Connection.CELL_4G] = „Cell 4G connection‟;
states[Connection.NONE] = „No network connection‟;
alert(„Connection type: „ + states[networkState]);
}
Phonegap cho ngi mi hc
Ngô Quang Trung – email: / www.phonegap.vn/forum 25
ví d trên, nu dng kt ni là NONE thì thông báo s cha thông đip là „No network
connection‟
ví d v cách kim tra mng network kh dng
<!DOCTYPE html>
<html>
<head>
<title>Connectivity 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() {
checkConnection();
}
function
checkConnection() {
var networkState = navigator.network.connection.type;
var states = {};
states[
Connection.UNKNOWN] = „Unknown connection‟;
states[Connection.ETHERNET] = „Ethernet connection‟;
states[Connection.WIFI] = „WiFi connection‟;
states[Connection.CELL_2G] = „Cell 2G connection‟;
states[Connection.CELL_3G] = „Cell 3G connection‟;
states[Connection.CELL_4G] = „Cell 4G connection‟;
states[Connection.NONE] = „No network connection‟;
alert(„Connection type: „ + states[networkState]);
}
</script>
</head>
<body>
<p>A dialog box will report the network state.</p>
</body>
</html>