tài liệu tổng quát về phonegap

Phonegap cho người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 1

MỤC LỤC
LỜI NÓI ĐẦU 5
Các tài liệu liên quan 6
I.Events 7
1.1.Hiểu thêm về events 7
1.2.Cách sử dụng EVENTS LISTENER 8
1.3.Hiểu thêm về các dạng sự kiện EVENT TYPES 9
1.3.1.Backbutton 9
1.3.2.Deviceready 10
1.3.3.Menubutton 11
1.3.4.Pause 12
1.3.5.Resume 13
1.3.6.Searchbutton 14
1.3.7.Online 15
1.3.8.Offline 16
1.3.9.Một ví dụ đơn giản về sự phản hồi lại các sự kiện events 17
1.3.10.Một ví dụ đơn giản về việc phản hồi lại các sự kiện Button Events 18
II.Cách làm việc với thiết bị, mạng network, và các thông báo notifications 20
2.1.Cách lấy thông tin từ thiết bị 20
2.1.2.Cách lấy về tên của thiết bị Device Name 20
2.1.3.Cách lấy về thông tin phiên bản phonegap 21
2.1.4.Cách lấy về nền tảng thiết bị Device Platform 21
2.1.5.Cách lấy về ID quốc tế của thiết bị UUID 21
2.1.6.Cách lấy về thông tin phiên bản hệ điều hành 22
2.1.7.Ví dụ về cách lấy thông tin của thiết bị 22
2.2.Cách kiểm tra 1 mạng network 23
Cách xác định dạng kết nối 24
2.3.Cách sử dụng các thông báo NOTIFICATIONS 26

2.3.1.Cách sử dụng Alerts 26
2.3.2.Cách sử dụng hộp thoại tương tác Confirmation Dialogs 27
2.3.3.Cách sử dụng Beeps 28
2.3.4.Cách sử dụng chế độ rung Vibrations 29
2.3.5.Ví dụ về cách sử dụng tất cả 4 loại thông báo Notifications 29
III.Gia tốc kế Accelerometer 32
Phonegap cho người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 2

3.1.Thế nào là gia tốc kế Accelerometer ? 32
3.2.Cách sử dụng gia tốc kế Accelerometer 32
3.3.Các ứng dụng dùng gia tốc kế Accelerometer 33
3.4.Cách sử dụng đối tượng gia tốc kế ACCELERATION OBJECT 36
3.5.Cách sử dụng các phương thức ACCELEROMETER METHODS 37
3.5.1.Phương thức getCurrentAcceleration 37
3.5.2.Phương thức watchAcceleration 38
3.5.3.Phương thức clearWatch 39
3.6.Lựa chọn cấu hình ACCELEROMETER OPTION 40
3.7.Ví dụ về cách sử dụng gia tốc kế ACCELEROMETER 40
Cách thức ví dụ hoạt động 41
IV.Ví trí địa lý Geolocation 42
4.1.Thế nào là vị trí địa lý Geolocation ? 42
4.2.Cách sử dụng Geolocation 42
4.3.Các mẫu ứng dụng về Geolocation 42
4.4.Các đối tượng POSITION, POSITIONERROR, và COORDINATES 45
4.4.1.Đối tượng Position Object 45
4.4.2.Đối tượng PositionError 46
4.4.3.Đối tượng Coordinates Object 46
4.5.Ví dụ minh họa về geolocation 46
Cách ví dụ hoạt động 47

4.6.Cách cải thiện giao diện và trải nghiệm của người dùng 48
V.Media 52
5.1.Các Media Files là gì ? 52
5.2.Cách sử dụng các Media Files 52
5.3.Các ứng dụng mẫu sử dụng media API 52
5.4.Đối tượng MEDIA OBJECT 55
5.5.Cách sừ dụng các phương thức methods 56
5.5.1.phương thức media.getCurrentPosition 56
5.5.2.Phương thức media.getDuration 57
5.5.3.Phương thức media.pause 58
5.5.4.Phương thức media.play 59
5.5.5.Phương thức media.release 61
5.5.6.Phương thức media.seekTo 61
5.5.7.Phương thức media.startRecord 62
5.5.8.Phương thức media.stop 63
Phonegap cho người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 3

5.5.9.Phương thức media.stopRecord 64
5.5.10.Kiểm soát lỗi MediaError 65
5.5.11.Ví dụ về việc sử dụng media api 66
VI.Lưu trữ Storage 73
6.1.Điểm khác biệt giữa Session Storage và Local Storage ? 75
6.2.Cách sử dụng local storage 76
6.3.Cách sử dụng đối tượng DATABASE OBJECT 77
6.3.1.Cách tạo và Cách mở 1 database 77
6.3.2.Cách chạy 1 sql Query 78
6.3.3.Cách phân tích và tiền xử lý các câu lệnh SQL (phòng chống SQL injection) 81
6.3.4.Các giao dịch Transactions 82
6.4.Cách xem 1 tập kết quả 84

6.5.Điều chỉnh lỗi 86
6.6.Ví dụ về cách xây dựng 1 database đơn giản : 89
VII.Files 91
7.1.Hệ thống FILESYSTEMS 91
7.2.Tìm hiểu về các thư mục dẫn DIRECTORIES và các files 92
7.2.1.Cách sử dụng đối tượng DirectoryEntry Object 92
7.2.2.getMetadata 93
7.2.3.setMetadata 94
7.2.4.moveTo 95
7.2.5.copyTo 96
7.2.6.toURI 97
7.2.7.remove 97
7.2.8.getParent 98
7.2.9.createReader 98
7.2.10.getDirectory 99
7.2.11.getFile 99
7.2.12.removeRecursively 100
7.3.metadata 101
7.4.FileError 102
7.5.Flags 102
7.6.LocalFileSystem 103
7.7.DirectoryReader 104
7.8.Cách sử dụng đối tượng FileEntry Object 105
7.8.1.getMetadata 106
Phonegap cho người mới học
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 truyền dẫn files – FileTransfer 120
7.11.1.upload 120
7.11.2.download 124
7.11.3.abort 125
7.11.4.onprogress 125
7.12.FileTransferError 126
VIII.Camera 127
8.1.Cách truy cập 1 ảnh Picture 127
8.2.Cách thiết lập các cấu hình trong Camera Options 139
8.2.1.Quality 140
8.2.2.destinationType 141
8.2.3.sourceType 143
8.2.4.allowEdit 145
8.2.5.encodingType 146
8.2.6.targetHeight và targetWidth 146
8.2.7.mediaType 146
8.2.8.saveToPhotoAlbum 147
8.3.Làm việc với các vấn đề xảy ra với camera 147
IX.Splashscreen 151
10.1.Cách phần quyền Permissions 151
Android 151

iOS 151
10.2.Cách thiết lập 151
10.3.show 152
Phonegap cho người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 5

10.4.hide 153

LỜI NÓI ĐẦU
1 điểm cá nhân mình rất thích ở Phonegap, đó chính là tính đơn giản và hầu như
không có tính ràng buộc. Phonegap được gọi là framework tuy nhiên nó không giống như 1
vài framework PHP mà mình đã từng học, với những framework PHP này, nó định nghĩa lại
hoàn toàn cách bạn viết mã code, và nó đòi hỏi bạn phải hiểu rõ sâu rộng về các thành
phần hệ thống bên trong, thì bạn mới có thể lập trình thông thạo được. Với Phonegap, nó
không kìm kẹp bạn vào trong 1 hệ thống có 1 quy chuẩn riêng rối rắm nào cả, bạn có thể tự
do thoải mái lập trình theo cách mà bạn muốn (tuy nhiên cái gì cũng có 2 mặt của nó), bạn
chỉ cần nắm bắt 1 công nghệ duy nhất - công nghệ nền Web(bao gồm HTML5, Javascript,
CSS), bỏ qua gánh nặng cần phải nắm bắt và hiểu rõ về các công nghệ bên trong mỗi nền
tảng (Android, iOS, Blackberry, Windowphone, …) mà bạn vẫn có thể tạo ra được các ứng
dụng “viết một lần, biên dịch qua cloud và chạy khắp nơi – tương thích với hầu hết các nền
tảng hệ điều hành di động hiện tại”.
Tài liệu được viết giống như 1 bản ghi chép, ghi lại những thứ mà mình đã đọc được từ các
ebook tiếng anh, do vậy bố cục sắp xếp của nó có thể chưa chính xác, cách trình bày không
theo chuẩn 1 ebook nào cả và nhiều chỗ viết chưa rõ nghĩa và không mạch lạc do hạn chế
về ngoại ngữ của bản thân mình. Tài liệu mang đậm tính chất cá nhân do vậy bạn sẽ bắt
gặp trong tài liệu này nhiều đoạn kí tự in đậm, in màu, cỡ chữ lớn bất thường và được tô
màu khác nhau - đó là các đoạn có liên quan đến nhau hay là những ghi chú quan trọng mà
bạn cần phải đọc kĩ.
Nội dung trong tài liệu này được dựa trên các cuốn ebook: “Beginning Phonegap -
Thomas Myer”, “PhoneGap Essentials - John M. Wargo”,

“Apache Cordova Documentation 2.2.0 – Phonegap team”, và 1 số giải thích, định nghĩa
về kiến trúc của HTML5 từ W3C.org. Tài liệu này không đề cập tới đầy đủ các hàm APIs
được Phonegap hỗ trợ. Cụ thể, các phần sau bị lược bỏ: Capture, Compass, Contacts,
Globalization, Guides (do mình không có thời gian để viết nốt, và mình cũng không sử
dụng đến các phần bị lược bỏ này)
Nếu có thắc mắc hay góp ý gì, các bạn có thể đăng ký ngay 1 nick vào diễn đàn
www.phonegap.vn/forum để đặt câu hỏi trực tiếp, các MOD và ADMIN sẽ trả lời câu hỏi
của bạn trong thời gian sớm nhất.

Phonegap cho người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 6

Các tài liệu liên quan
 “Lập trình hướng đối tượng trong Javascript và các kiểu mẫu thiết kế”:
/>javascript-va-cac-kieu-mau-thiet-ke
 “Cách tối ưu hóa môi trường lập trình ứng dụng cho Android”:
/>cho-android-tng-tc-my-o-android
 Hoặc đơn giản truy cập vào thư mục chia sẻ sau: (rất có
thể trong 1 thời gian nữa, mình sẽ viết 1 ebook liên quan đến Jquery Mobile, nếu có
thì các bạn sẽ thấy nó xuất hiện trong thư mục chia sẻ này)


Phonegap cho người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 7

I.Events
1 sự kiện events trong phonegap tương đối giống sự kiện trong javascript.1 hành động (thao
tác) được thực hiện trên thiết bị - ví dụ như document object model (DOM) đã được tải xong
và do đó thiết bị ở trạng thái sẵn sàng “ready” - và hiện tại phonegap có thể thực hiện 1 vài
thứ để trả lời(đáp ứng) lại sự kiện này

1.1.Hiểu thêm về events
Để đơn giản hóa, ta hiểu 1 event là bất cứ hành động nào mà có thể được xác định (nhận
biết) bởi phonegap.trong lập trình javascript truyền thống, bất cứ phần tử nào trên 1 trang
page cũng có thể có các sự kiện event nào đó, và nó có thể được kích hoạt bởi 1 vài mã
javascript.ví dụ như 1 sự kiện onrollover trên 1 link có thể gây ra xuất hiện 1 bảng pop-up,
hay sự kiện onclick có thể gây ra 1 bảng hộp thoại xem trước
Tóm lại, sự kiện events có thể là click chuột, 1 image loading, rolling over trên 1 link nào đó
hay những đối tượng DOM khác, việc lựa chọn 1 trường input field trong 1 form, submitting
1 form, hay sự kiện gõ 1 phím bất kì trên bàn phím.về đa số thì tất cả các dạng sự kiện
events trên cũng có thể được sử dụng khi ta phát triển các ứng dụng sử dụng phonegap.tuy
nhiên có những sự kiện chỉ được định nghĩa bên trong phonegap như sau :
 deviceready
 pause
 resume
 online
 offline
 backbutton
 batterycritical
 batterylow
 batterystatus
 menubutton
 searchbutton
 startcallbutton
Phonegap cho người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 8

 endcallbutton
 volumedownbutton
 volumeupbutton
trong tất cả các sự kiện events trên thì sự kiện deviceready là quan trọng nhất mà ta phải

xem xét tới.không có nó thì ứng dụng của ta sẽ không biết khi nào phonegap đã được load
hoàn toàn.khi nó được kích hoạt, ta có thể gọi 1 cách an toàn bất cứ các hàm PhoneGap
function nào và do đó có thể lần lượt truy cập an toàn vào các API bản địa
khi sự kiện deviceready event được kích hoạt, thì ta biết được 2 điều : DOM đã được load,
và do vậy đã có PhoneGap API
1.2.Cách sử dụng EVENTS LISTENER
để sử dụng bất cứ sự kiện event nào, thì ta sẽ cần phải sử dụng 1 event listener.như ví dụ
sau : dùng để xác định sự kiện deviceready.ta phải 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 người mới học

Ngô Quang Trung – email: / www.phonegap.vn/forum 9

</html>

Ví dụ trên nhắc nhở ta rằng deviceready có thể là 1 sự kiện nhưng nó lại không phải là sự
kiện chuẩn tắc trong trình duyệt, nó chỉ hoạt động và nhận biết bởi trong phonegap.nếu ta
thử chạy sự kiện này trong 1 trình duyệt thông thường thì nó không bao giờ được kích hoạt
1.3.Hiểu thêm về các dạng sự kiện EVENT TYPES
1.3.1.Backbutton
Sự kiện backbutton được kích hoạt khi người dùng ấn vào nút Back trên thiết bị Android
Để xác định sự kiện event này, thì ta cần đăng ký 1 event listener như sau :
document.addEventListener(“backbutton”, onBackButton, false);
function onBackButton(){
//handle the back button
}

Cũng giống như các sự kiện event khác thì ta không nên đăng ký giống như thế này cho tới
khi ta đã xác định được sự kiện 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 người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 10

}
</script>
</head>
<body>
</body>
</html>

1.3.2.Deviceready
Như đã nhắc đến từ trước, sự kiện deviceready là sự kiện quan trọng nhất mà ta có thể
xác định.theo đó ta cần phải xác định sự kiện này đầu tiên trước khi ta làm bất cứ những gì
khác bởi vì khi nó được kích hoạt thì đồng nghĩa với việc ta chắc chắn gọi được các
PhoneGap API
document.addEventListener(“deviceready”, onDeviceReady, false);
function onDeviceReady(){
//ready!
}

Để dành cho những người phát triển trên BlackBerry OS 4.6, thì RIM Browserfield không
hỗ trợ hàm sự kiện event này, nên ta cần sử dụng PhoneGap.available để thay thế như
sau :
function onLoad() {
var intervalID = window.setInterval(
function() {
if (PhoneGap.available) {

window.clearInterval(intervalID);
onDeviceReady();
}
},
500
);
}
function onDeviceReady() {
// use the phonegap api!
}

Phonegap cho người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 11

1.3.3.Menubutton
Sự kiện menubutton được kích hạot khi người dung ấn vào nút Menu trên thiết bị android
Để xác định sự kiện này, thì ta cần đăng ký 1 event listener như sau :
document.addEventListener(“menubutton”, onMenuButton, false);
function onMenuButton(){
//handle the menu button
}

Cũng giống như các events khác, ta không nên đăng ký kiểu như thế này cho tới khi ta xác
định được sự kiện 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 người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 12

1.3.4.Pause
Khi sự kiện pause được kích hoạt là khi 1 ứng dụng được đặt vào chế độ chạy nền
Để xác định sự kiệ này, ta đăng kí 1 event listener như sau :
document.addEventListener(“pause”, onPause, false);
function onPause(){
//handle the pause event
}

Hay ta làm theo như đúng tiêu chuẩn giống 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 người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 13

1.3.5.Resume
Sự kiện resume được kích hoạt khi 1 ứng dụng đang ở trạng thái tạm dừng (chạy nền)
được kích hoạt trở lại làm việc
Để 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
}

Cũng giống như các events khác, ta không nên đăng ký kiểu như thế này cho tới khi ta xác
định được sự kiện 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 người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 14

1.3.6.Searchbutton
Sự kiện searchbutton được kích hoạt khi người dùng ấn vào nút Search trên thiết 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
}

Cũng giống như các events khác, ta không nên đăng ký kiểu như thế này cho tới khi ta xác
định được sự kiện 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 người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 15

1.3.7.Online
Sự kiện online được kích hoạt khi 1 ứng dụng phonegap đang online (điều này có nghĩa là
nó đang được kết nối internet).đây là 1 sự kiện mới được thêm vào trong phiên bản 0.9.6 và
nó chỉ được hỗ trợ trên các thiết bị iOS, Android, and BlackBerry
Để 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
}

Cũng giống như các events khác, ta không nên đăng ký kiểu như thế này cho tới khi ta xác
định được sự kiện 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 người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 16

1.3.8.Offline
Sự kiện offline được kích hoạt khi 1 ứng dụng phonegap đang offline (điều này có nghĩa là
nó không kết nối internet).đây là 1 sự kiện mới được thêm vào trong phiên bản 0.9.6 và nó
chỉ được hỗ trợ trên các thiết bị iOS, Android, and BlackBerry
Để 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
}


Cũng giống như các events khác, ta không nên đăng ký kiểu như thế này cho tới khi ta xác
định được sự kiện 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 người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 17

1.3.9.Một ví dụ đơn giản về sự phản hồi lại các sự kiện events
Ta tạo ra ứng dụng đơn giản, phản hồi lại các sự kiện 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 người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 18

Chương trình chạy như thế nào

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

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

1.3.10.Một ví dụ đơn giản về việc phản hồi lại các sự kiện Button
Events

<!DOCTYPE html>
<html>
<head>
<title>PhoneGap Button Example</title>
<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 người mới học
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>

Chương trình chạy như thế nào
Chương trình đơn giản là đầu tiên tiến hành kiểm tra để chắc chắn rằng ứng dụng
phonegap đã sẵn sàng hay chưa, và sau đó đăng ký 3 event listeners, từng cái 1 dành cho
các nút của thiết bị như Search, Menu, và Back buttons









Phonegap cho người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 20

II.Cách làm việc với thiết bị, mạng network, và các thông
báo notifications
2.1.Cách lấy thông tin từ thiết bị
Phonegap có 1 runtime object được gọi là đối tượng thiết bị device, để lưu giữ thông tin có
ích về thiết bị.sau đây là những thuộc tính của đối tượng device :
 device.name – là tên của thiết bị (ví dụ như my iphone)
 device.phonegap – phiên bản của phonegap
 device.platform – loại của thiết bị (ví dụ như iphone)
 device.uuid – số id của thiết bị
 device.Version – phiên bản hệ điều hành OS đang chạy
quan trọng phải chú ý rằng : device được gán thành đối tượng window object, do vậy nó
hoàn toàn có phạm vi toàn cục.hiểu theo cách khác, cả 2 biến sau đều tham chiếu tới cùng
thiết bị device :
//both of these reference the same device
var myPhoneName = window.device.name;
var myPhoneName = device.name;

trong phần này ta sẽ học lấy về các thông tin sau :
 tên của thiết bị device
 phiên bản phonegap
 ID quốc tế dùng để xác định thiết bị duy nhất (UUID)
 Phiên bản hệ điều hành của thiết bị
2.1.2.Cách lấy về tên của thiết bị Device Name
Để lấy về tên của thiết bị ta sử dụng device.name như sau:
var myPhoneName = device.name;
giá trị này được trả về được thiết lập bởi nhà sản xuất và có thể biến đổi từ sản phẩm này
đến sản phẩm khác và biến đổi ngay cả trên cùng 1 phiên bản sản phẩm.ví dụ, đây là 1
danh sách của các giá trị trả về cho các loại điện thoại khác nhau :
 Android Nexus One trả về là Passion ( đây là tên mã sản phẩm)
 Android Motorola Droid trả về là voles

Phonegap cho người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 21

 BlackBerry Bold 8900 trả về là 8900
 iPhone trả về là tên được thiết lập trong iTunes( ví dụ như Tom‟s phone )
thuộc tính device.name được hỗ trợ trong các thiết bị Android, BlackBerry, và iPhone
2.1.3.Cách lấy về thông tin phiên bản phonegap
để lấy về thông tin phiên bản phonegap trên thiết bị, ta sử dụng thuộc tính
device.phonegap như sau :
var myDevicePhoneGap = device.phonegap;
thuộc tính device.phonegap được hỗ trợ trên các thiết bị Android, Blackberry, và iPhone
2.1.4.Cách lấy về nền tảng thiết bị Device Platform
cách lấy về tên của hệ điều hành trên thiết bị, ta sử dụng device.platform như sau:
var myDevicePlatform = device.platform;
phụ thuộc vào thiết bị device, câu lệnh này trả về các thứ sau :
 android
 blackberry
 iphone
 webOS
Chú ý: theo kinh nghiệm của lập trình viên thì các thiết bị iphone trả về là ios và 1
vài thiết bị blackberry trả về phiên bản hệ điều hành để thay thế cho tên của hệ điều hành.ví
dụ nó có thể trả về 1.10.3.5 thay cho blackberry
2.1.5.Cách lấy về ID quốc tế của thiết bị UUID
mọi thiết bị điều phải có số UUID, số này được thêm vào thiết bị bởi nhà sản xuất. UUID có
thể có những chiều dài khác nhau phụ thuộc vào thiết bị, nó có thể luôn luôn được định
nghĩa như là 1 mẫu model và nền tảng platform.ví dụ, android sử dụng 1 số kiểu int ngẫu
nhiên 64-bit; blackberry sử dụng mã PIN 9 kí tự; và iphone sử dụng 1 chuỗi string là giá trị
của hàm băm hash
cách lấy UUID của thiết bị, ta sử dụng device.uuid như sau :
var myDeviceID = device.uuid;

thuộc tính device.uuid được hỗ trợ trên các thiết bị Android, BlackBerry, và iPhone
Phonegap cho người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 22

2.1.6.Cách lấy về thông tin phiên bản hệ điều hành
cách lấy về tên phiên bản hệ điều hành của thiết bị, ta sử dụng device.version như sau :
var myDeviceOS = device.version;
phụ thuộc vào hệ điều hành, ta sẽ lấy được về các giá trị khác nhau.ví dụ trên android, hệ
điều hành Froyo OS trả về là 2.2 và Éclair OS trả về là 2.1, 2.0.1 hay 2.0. BlackBerry Bold
9000 sử dụng OS 4.6 thì trả về là 4.6.0.282 và 1 iphone chạy IOS 3.2 trả về là 3.2
thuộc tính device.version được hỗ trợ trên các thiết bị Android (2.1 and higher), BlackBerry,
and iPhone
2.1.7.Ví dụ về cách lấy thông tin của thiết bị
ta tạo ra 1 đoạn mã đơn giản dùng để cho phép ta sử dụng các phần tử device để lấy về
các thông tin về thiết bị :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“
<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 người mới học
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 thức chương trình hoạt động
Trong ví dụ này, ta tạo ra 1 tài liệu HTM đơn giản, đầu tiên tải về thư viện phonegap.js.tiếp
theo ta viết 1 hàm onLoad() function dùng để đăng ký 1 event handler bằng cách sử dụng
addEventListener.đặc biệt, ta muốn tuân theo sự kiện deviceready event, và khi nó được
kích hoạt thì nó sẽ chạy hàm onDeviceReady() function.
Hàm onDeviceReady() function làm 2 thứ : thứ nhất là nó điền vào 1 đoạn văn vào trong
document DOM có id là “props” bằng cách sử dụng getElementById, sau đó nó in ra
thông tin về thiết bị vào trong phần tử DOM đó
Nếu ta sử dụng JQuery, thì ta có thể đơn giản viết như sau :
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 kiểm tra 1 mạng network
Với 1 người lập trình nền web hay destop, thì ta thường giả định rằng kết nối mạng network
luôn luôn được bật thông qua kết nối có dây hoặc không dây.tuy nhiên khi ta bắt đầu làm
việc với các thiết bị di động, ta không thể luôn luôn giả định như vậy.tín hiệu kết nối có thể
không tồn tại hoặc có thể rất yếu không ổn định, hay người dùng có thể chuyển đổi từ
cellular sang wifi hay ngược lại
May mắn cho ta là phonegap API có chứa 1 đối tượng là Connection object, đối tượng này
cho phép ta truy cập vào thông tin kết nối cellular và WiFi của thiết bị
Phonegap cho người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 24

Cách xác định dạng kết nối
Để xác định dạng của kết nối mạng network thì ta sẽ phải sử dụng connection.type như
sau :
function checkConnection(){
var myState = navigator.network.connection.type;
//return a specific state
}


Hàm connection.type sẽ trả về 1 trong số danh sách các dạng kết nối có thể sau :
 UNKNOWN
 ETHERNET
 WIFI
 CELL_2G

 CELL_3G
 CELL_4G
 NONE
1 ý tưởng tốt để làm việc với các bảng thông điệp để thông báo tới người 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 người mới học
Ngô Quang Trung – email: / www.phonegap.vn/forum 25

ở ví dụ trên, nếu dạng kết nối là NONE thì thông báo sẽ chứa thông điệp là „No network
connection‟
ví dụ về cách kiểm tra mạng network khả dụng

<!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>