Your SlideShare is downloading. ×
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Phonegap cho người mới học
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Phonegap cho người mới học

13,247

Published on

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 …

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.

Published in: Technology
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
13,247
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2,066
Comments
0
Likes
16
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Phonegap cho người mới học MỤC LỤCLỜI NÓI ĐẦU ........................................................................................................................ 5Các tài liệu liên quan ............................................................................................................. 6I.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 ................... 18II.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 ................................ 29III.Gia tốc kế Accelerometer ................................................................................................ 32Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 1
  • 2. Phonegap cho người mới học 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 ........................................................................................... 41IV.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 ........................................... 48V.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 .................................................................................... 63Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 2
  • 3. Phonegap cho người mới học 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 ....................................................................... 66VI.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 : .......................................................... 89VII.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 ...................................................................................................... 106Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 3
  • 4. Phonegap cho người mới học 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 ................................................................................................... 126VIII.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 ............................................................. 147IX.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 ...................................................................................................................... 152Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 4
  • 5. Phonegap cho người mới học 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ư 1vài framework PHP mà mình đã từng học, với những framework PHP này, nó định nghĩa lạihoà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ànhphầ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ạnchỉ 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ềntảng (Android, iOS, Blackberry, Windowphone, …) mà bạn vẫn có thể tạo ra được các ứngdụ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ềntả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ácebook 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ôngtheo 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ắtgặ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ĩavề 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 đànwww.phonegap.vn/forum để đặt câu hỏi trực tiếp, các MOD và ADMIN sẽ trả lời câu hỏicủa bạn trong thời gian sớm nhất.Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 5
  • 6. Phonegap cho người mới họcCá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ế”: http://www.slideshare.net/myloveforyounqt/lap-trinh-huong-doi-tuong-trong- 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”: http://www.slideshare.net/myloveforyounqt/cch-ti-u-ha-mi-trng-lp-trnh-ng-dng- cho-android-tng-tc-my-o-android  Hoặc đơn giản truy cập vào thư mục chia sẻ sau: http://sdrv.ms/VoAXBi (rất có thể trong 1 thời gian nữa, mình sẽ viết 1 ebook liên quan đến Jquery Mobile, nếu có thì các bạn sẽ thấy nó xuất hiện trong thư mục chia sẻ này)Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 6
  • 7. Phonegap cho người mới họcI.Events1 sự kiện events trong phonegap tương đối giống sự kiện trong javascript.1 hành động (thaotác) được thực hiện trên thiết bị - ví dụ như document object model (DOM) đã được tải xongvà 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àithứ để trả lời(đáp ứng) lại sự kiện này1.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ậnbiế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 trangpage 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ướcTó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, submitting1 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ệnevents 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.tuynhiê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  startcallbuttonNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 7
  • 8. Phonegap cho người mới học  endcallbutton  volumedownbutton  volumeupbuttontrong 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ảixem 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 loadhoà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 PhoneGapfunction nào và do đó có thể lần lượt truy cập an toàn vào các API bản địakhi 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 API1.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 apidocument.addEventListener(“pause”, onPause, false);document.addEventListener(“resume”, onResume, false);}function onPause(){}function onResume(){}</script></head><body></body>Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 8
  • 9. Phonegap cho người mới học</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 tathử 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ạt1.3.Hiểu thêm về các dạng sự kiện EVENT TYPES1.3.1.BackbuttonSự 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ớikhi 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 listenerdocument.addEventListener(“backbutton”, onBackButton, false);}// Handle the back button//function onBackButton() {Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 9
  • 10. Phonegap cho người mới học}</script></head><body></body></html>1.3.2.DevicereadyNhư đã 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ácPhoneGap APIdocument.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ônghỗ 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!}Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 10
  • 11. Phonegap cho người mới học1.3.3.MenubuttonSự 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 listenerdocument.addEventListener(“menubutton”, onMenuButton, false);}// Handle the menu button//function onMenuButton() {}</script></head><body></body></html>Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 11
  • 12. Phonegap cho người mới học1.3.4.PauseKhi 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 listenerdocument.addEventListener(“pause”, onPause, false);}// Handle the pause//function onPause() {}</script></head><body></body></html>Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 12
  • 13. Phonegap cho người mới học1.3.5.ResumeSự 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 listenerdocument.addEventListener(“resume”, onResume, false);}// Handle the resume//function onResume() {}</script></head><body></body></html>Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 13
  • 14. Phonegap cho người mới học1.3.6.SearchbuttonSự 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 listenerdocument.addEventListener(“searchbutton”, onSearchButton, false);}// Handle the search button//function onSearchButton() {}</script></head><body></body></html>Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 14
  • 15. Phonegap cho người mới học1.3.7.OnlineSự 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 listenerdocument.addEventListener(“online”, isOnline, false);}// Handle the online event//function isOnline() {}</script></head><body></body></html>Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 15
  • 16. Phonegap cho người mới học1.3.8.OfflineSự 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 listenerdocument.addEventListener(“offline”, isOffline, false);}// Handle the offline event//function isOffline() {}</script></head><body></body></html>Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 16
  • 17. Phonegap cho người mới học1.3.9.Một ví dụ đơn giản về sự phản hồi lại các sự kiện eventsTa 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 listenersdocument.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>Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 17
  • 18. Phonegap cho người mới họcChương trình chạy như thế nàoevent listener là 1 khóa quan trọng, nó dùng để xác định khi nào sự kiện devicereadyevent đượ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 1cách an toàn các API còn lại của phonegapkhi 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 pauseevent và cái thứ 2 cho sự kiện resume event1.3.10.Một ví dụ đơn giản về việc phản hồi lại các sự kiện ButtonEvents<!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 listenersdocument.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//Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 18
  • 19. Phonegap cho người mới họcfunction 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àoChươ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ụngphonegap đã sẵn sàng hay chưa, và sau đó đăng ký 3 event listeners, từng cái 1 dành chocác nút của thiết bị như Search, Menu, và Back buttonsNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 19
  • 20. Phonegap cho người mới họcII.Cách làm việc với thiết bị, mạng network, và các thôngbáo notifications2.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ạyquan 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ùngthiết bị device ://both of these reference the same devicevar 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à 1danh 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à volesNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 20
  • 21. Phonegap cho người mới học  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à iPhone2.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ínhdevice.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à iPhone2.1.4.Cách lấy về nền tảng thiết bị Device Platformcá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  webOSChú ý: theo kinh nghiệm của lập trình viên thì các thiết bị iphone trả về là ios và 1và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 blackberry2.1.5.Cách lấy về ID quốc tế của thiết bị UUIDmọ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 địnhnghĩ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ẫunhiê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 hashcá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à iPhoneNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 21
  • 22. Phonegap cho người mới học2.1.6.Cách lấy về thông tin phiên bản hệ điều hànhcá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 Bold9000 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.2thuộc tính device.version được hỗ trợ trên các thiết bị Android (2.1 and higher), BlackBerry,and iPhone2.1.7.Ví dụ về cách lấy thông tin của thiết bịta tạo ra 1 đoạn mã đơn giản dùng để cho phép ta sử dụng các phần tử device để lấy vềcác thông tin về thiết bị :<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”“http://www.w3.org/TR/html4/strict.dtd”><html><head><title>My Device</title><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 />‟;Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 22
  • 23. Phonegap cho người mới học}</script></head><body onload=”onLoad()”><p id=”props”>Loading device properties...</p></body></html>Cách thức chương trình hoạt độngTrong 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ếptheo ta viết 1 hàm onLoad() function dùng để đăng ký 1 event handler bằng cách sử dụngaddEventListener.đặc biệt, ta muốn tuân theo sự kiện deviceready event, và khi nó đượckí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 trongdocument DOM có id là “props” bằng cách sử dụng getElementById, sau đó nó in rathô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 networkVớ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 networkluô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àmviệ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ạiMay mắn cho ta là phonegap API có chứa 1 đối tượng là Connection object, đối tượng nàycho phép ta truy cập vào thông tin kết nối cellular và WiFi của thiết bịNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 23
  • 24. Phonegap cho người mới họcCá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  NONE1 ý 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àmnhư 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]);}Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 24
  • 25. Phonegap cho người mới họcở 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 networkconnection‟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>Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 25
  • 26. Phonegap cho người mới họcCách thức ví dụ hoạt độngĐầu tiên ta load thư viện phonegap và sau đó đăng ký 1 event handler là sự kiệndevicereadyKhi thiết bị đã ở trạng thái sẵn sàng thì ta chạy navigator.network.isReachable trêngoogle.com.website này luôn luôn sống và nó là công cụ tốt để kiểm tra kết nối mạngnetwork (hay theo cách khác, ta có thể không muốn kiểm tra trên 1 server vì nó có thể chếtbất cứ lúc nào khi vào lúc ta tiến hành kiểm tra)Tiếp theo, ta thiết lập 1 đối tượng đơn giản có chứa thông báo trạng thái network status từphonegap giống như các chỉ mục keys, với các thông điệp ta tùy chỉnh giống như các giá trịvalues – đây là cách ta tránh khỏi bất cứ thông điệp khó hiểu nào được gửi tới người sửdụng thiết bịTiếp theo, ta chạy 1 hàm JavaScript alert() chứa thông điệp về kết nối.nó sẽ được pop-uptrên thiết bị và người dùng có thể tắt nóCuối cùng, để chắc chắn ta tiến hành chạy hàm onLoad() tử thẻ <body>2.3.Cách sử dụng các thông báo NOTIFICATIONSTrong những ví dụ mà ta đã làm từ trước, ta đã sử dụng 1 hàm tiêu chuẩn của javascript làalert() để hiện thị thông tin tới người sử dụng( đặc biệt nhất là thông tin về trạng thái của kếtnối mạng network).mặc dù ta có thể sử dụng loại hệ thống thông báo này trên thiết bị, tuynhiên phonegap mang tới tận 4 loại thông báo notifications khác nhau mà ta có thể tậndụng :  Alerts  Confirmation dialogs  Beeps  Vibrations2.3.1.Cách sử dụng AlertsĐể hiện thị ra 1 thông báo alert tùy chỉnh hay 1 hộp tương tác dialog box, ta sử dụng hàmnotification.alert như sau :navigator.notification.alert(message,callback,[title],[button]);hàm này cần bắt buộc phải có 2 tham số truyền vào và 2 tham số tùy chọn :Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 26
  • 27. Phonegap cho người mới học  Message – 1 chuỗi string chứa thông điệp (ví dụ như “The network status is WIFI only”  Callback – là hàm function gọi lại được gọi khi thông báo alert bị bỏ qua  Title – 1 chuỗi string chứa tên tiêu đề của hộp alert (tùy chọn)  Button – 1 chuỗi string chứa tên của nút button (ví dụ như OK) (tùy chọn)Hàm notification.alert có hỗ trợ trên các thiết bị Android, BlackBerry OS 4.6,webOS,iphoneĐây là 1 ví dụ hơi phức tạp bao gồm chứa 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!‟, // messagegameOverDismissed, // callback„Game Over‟, // title„Done‟ // buttonName);Nếu ta đang làm việc trên blackberry hay webOS thì chú ý rằng ta sẽ chỉ có thể gửi đi 1thông điệp (không tùy chỉnh được tiêu đề titles, tên của nút button, hay khả năng sử dụnghàm callback) như sau ://BlackBerry 4.6 / webOSnavigator.notification.alert(„Game Over! „);2.3.2.Cách sử dụng hộp thoại tương tác Confirmation Dialogs1 hộp thoại confirmation dialog cũng giống với 1 alert, ngoại trừ rằng nó chứa nhiều nútbuttons.ví dụ như 1 hộp thoại confirmation dialog đưa ra câu hỏi “Do you wish to continue?”Thì có 2 button là Yes và NoNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 27
  • 28. Phonegap cho người mới họcĐể tạo ra 1 hộp thoại confirmation dialog, ta sử dụng hàm notification.confirm.ta sẽ cầnđóng gói nó trong 1 hàm function, bởi vì nó thường được gọi từ 1 link hay 1 button trên giaodiện HTML như sau :// process the confirmation dialog resultfunction onConfirm(button) {alert(„You selected button „ + button);}// Show a custom confirmation dialog//function showConfirm() {navigator.notification.confirm(„Game Over!‟, // messageonConfirm, // callback to invoke with index of button pressed„Game Over‟, // title„Restart,Exit‟ // buttonLabels);}2.3.3.Cách sử dụng BeepsThỉnh thoảng ta không cần tới 1 hiện thị thông báo – mà đơn giản chỉ cần 1 tiếng beep để rahiệu thông báo khi người dùng làm gì đó.để tạo ra tiếng beep, ta sử dụng hàmnotification.beep như sau :navigator.notification.beep(2);hàm này cần 1 tham số truyền vào, nó là 1 kiểu int dùng để xác định số tiếng beep mà tamuốn pháthàm này được hỗ trợ trong các thiết bị Android, BlackBerry, webOS, và iPhoneChú ý: android sẽ chơi bản nhạc thông báo Notification mặc định được thiết lập ởSettings ➪Sound and Display panel.còn iphone cũng sẽ từ chối tham số tiếng beep truyềnvàoNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 28
  • 29. Phonegap cho người mới học2.3.4.Cách sử dụng chế độ rung Vibrationsthỉnh thoảng không phải lúc nào cũng thích hợp để thiết bị phát ra tiếng, do đó phonegapcung cấp 1 hàm sử dụng chế độ rung là notification.vibrate, hàm này cần 1 tham số đểtruyền vào là thời gian tính bằng mili giây như sau :navigator.notification.vibrate(2000);hàm này được hỗ trợ trong các thiết bị Android, BlackBerry, webOS, và iPhoneChú ý: iphone sẽ từ chối tham số truyền vào và nó sẽ rung theo thời gian được thiếtlập sẵn2.3.5.Ví dụ về cách sử dụng tất cả 4 loại thông báo Notifications<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”“http://www.w3.org/TR/html4/strict.dtd”><html><head><title>Notifications</title><script type=”text/javascript” charset=”utf-8” src=”phonegap.js”></script><script type=”text/javascript” charset=”utf-8”>// Wait for PhoneGap to load//function onLoad() {document.addEventListener(“deviceready”, onDeviceReady, false);}// PhoneGap is ready//function onDeviceReady() {// Empty}// Show a custom alert//function showAlert() {navigator.notification.alert(„Game Over!‟, // messageNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 29
  • 30. Phonegap cho người mới họcalertCallback, //callback„Game Over‟, // titleAvailable fordownload onWrox.comAvailable fordownload onWrox.comUsing Notifications ❘ 69„Done‟ // buttonName);}//alert call backfunction alertCallback(){//do something... like calculate final score}// process the confirmation dialog resultfunction onConfirm(button) {alert(„You selected button „ + button);}// Show a custom confirmation dialog//function showConfirm() {navigator.notification.confirm(„Game Over!‟, // messageonConfirm, // 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 secondsNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 30
  • 31. Phonegap cho người mới học//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>Cách thức ví dụ hoạt độngở ví dụ này, trong hàm onDeviceReady(), ta để nó trống rỗng bởi vì tài liệu document chínhđã chứa 1 dãy các link dùng để gọi các hàm function và lần lượt chúng sẽ kích hoạt cácthông báo khác nhauví dụ, bằng cách ấn vào link đầu tiên hàm showAlert() sẽ được kích hoạt và nó sẽ hiện thị 1thông báo alert tùy chỉnh.link thứ 2 sẽ kích hoạt hàm showConfirm() hiện thị ra 1 hộp thoạiconfirmation boxNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 31
  • 32. Phonegap cho người mới họcIII.Gia tốc kế Accelerometer3.1.Thế nào là gia tốc kế Accelerometer ?gia tốc kế Accelerometer là 1 thiết bị dùng để ghi lại chuyển động trong không gian 3 chiềuXYZđể hình dung được 3 chiều XYZ, thì ta đặt thiết bị lên trên 1 bề mặt phẳng giống như trênmặt bàn.ta giả sử rằng bề mặt này có rất ít ma sát và ví dụ như ta có thể đặt thiết bị sangtrái và sang phải mà không cần phải nâng nó lên.mục đích của ví dụ này là giúp ta hìnhdung được nơi ta đặt thiết bị tại vị trí (0,0,0) trong không gian tọa độ.bất cứ cách nào mà tadùng để di chuyển thiết bị thì sẽ dẫn đến 1 sự thay đổi trong hệ tọa độnếu thiết bị là mỏng nằm trên mặt bàn và khi ta di chuyển nó sang trái hay sang phải thìchính là ta di chuyển nó dọc theo trục X.ta di chuyển nó sang trái là ta cho nó 1 kết quả âm,và ta di chuyển nó sang phải thì ta cho nó kết quả dương.nếu ta di chuyển thiết bị ra xa bànhay tới gần chỗ ta thì chính là ta đang di chuyên nó trên trục Y.nếu di chuyển nó ra xa thì tađược kết quả dương theo trục Y, và nếu di chuyển nó lại gần thì ta được kết quả âmtrục Z được miêu tả là chiều lên xuống và được thêm vào làm chiều thứ 3 của hệ trục tọađộ.nếu ta cầm lấy thiết bị và cầm nó tiến đến mặt thì ta được kết quả dương theo trục Z.nếuta cho thiết bị xuống dưới mặt bàn thì ta được kết quả âm theo trục Ztất nhiên rất là khó khăn khi ta dịch chuyển 1 thiết bị theo chỉ 1 trục mà không gây ảnhhưởng tới các trục khác.nếu ta cầm thiết bị lên ( ví như di chuyển nó tới gần mặt) thì ta nhậnđược kết quả dương đối với trục Z, nhưng cũng giống như vậy khi ta mang nó gần cơ thểhơn thì thu được kết quả âm theo trục Y……giờ hình dung xem, chuyện gì sẽ xảy ra nếu ta tung thiết bị quay trở lại bề mặt bàn - nhớđùng tung quá mạnh ta có thể làm vỡ nó.khi đó gia tốc kế accelerometer bên trong thiết bịsẽ xác định tất cả chuyển động dọc theo trục XYZ3.2.Cách sử dụng gia tốc kế Accelerometernhớ rằng gia tốc kế có thể xác định được chuyển động, độ nghiêng, và gia tốc do đó nódùng để tạo ra các ứng dụng sáng tạo  Làm thế nòa để tạo ra 1 ứng dụng dùng để xác định chuyển động của người và giữ các vết của chúng trong lúc người sử dụng đang thực hiện? tất cả những gì người dùng phải làm là bật ứng dụng lên và đặt thiết bị vào trong túiNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 32
  • 33. Phonegap cho người mới học  Dành cho các vị trí có ánh sáng thấp, thì ta có thể tự động chụp 1 bức ảnh với camera của thiết bị nếu thiết bị vẫn hoạt động tốt  Ta có thể xây dựng 1 game mà trong đó ta điều khiển các bộ phận có tương tác với độ nghiêng hay chuyển động của thiết bị3.3.Các ứng dụng dùng gia tốc kế Accelerometernếu ta có 1 chiếc iphone, và ta hầu như chắc chắn biết đến hay đã từng chơi “DoodleJump”như trong hình dưới. “DoodleJump” là 1 game dễ gây nghiện nó cho phép nhân vật của tanhảy từ mức này tới mức khác bằng cách sử dụng gia tốc kế để xác định chuyển động sangtrái/phải1 game khá phổ biến khác là “Super Monkey Ball” như trong hình 6-2. Ý tưởng nằm đằngsau game này là hướng dẫn 1 chú khỉ nhỏ dễ thương vượt qua các chướng ngại vật khácnhau bằng cách nghiêng hay lắc iphoneNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 33
  • 34. Phonegap cho người mới họcTrên thiết bị android, ta cũng có “Hyperspace” như trong hình 6-3, trong đó ta sử dụngnghiêng hay chuyển động để điều khiển 1 trái bóng để đi xuyên qua các chướng ngại vật.tất nhiên, có vô số các ứng dụng sử dụng gia tốc kế accelerometerNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 34
  • 35. Phonegap cho người mới họcNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 35
  • 36. Phonegap cho người mới học3.4.Cách sử dụng đối tượng gia tốc kế ACCELERATIONOBJECTđối tượng gia tốc kế ACCELERATION OBJECT là 1 đối tượng chỉ có thể đọc và nó chứa dữliệu gia tốc kế được chụp lại tại 1 điểm xác định trong 1 thời điểm.và đối tượng này có cácthuộc tính :  X - đại lương chuyển động trên trục X, được trình bày là 1 số  Y - đại lương chuyển động trên trục Y, được trình bày là 1 số  Z - đại lương chuyển động trên trục Z, được trình bày là 1 số  Timestamp – mốc thời gian lúc tạo ra, được trình bày trong mili giâyĐối tượng này được tạo ra và được cư trú trong phongegap và nó trả về 1 phương thứcaccelerometer 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 datafunction onSuccess(acceleration) {alert(„Acceleration X: „ + acceleration.x + „n‟ +„Acceleration Y: „ + acceleration.y + „n‟ +„Acceleration Z: „ + acceleration.z + „n‟ +„Timestamp: „ + acceleration.timestamp + „n‟);};Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 36
  • 37. Phonegap cho người mới họcfunction onError() {alert(„Sorry! Error!‟);};3.5.Cách sử dụng các phương thức ACCELEROMETERMETHODS3.5.1.Phương thức getCurrentAccelerationĐể lấy về gia tốc kế hiện tại theo trục XYZ thì ta phải sử dụng phương thứcaccelerometer.getCurrentAcceleration như sau :navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess,accelerometerError);dữ liệu acceleration data được trả về thông qua hàm accelerometerSuccess callback :function onSuccess(acceleration) {alert(„Acceleration X: „ + acceleration.x + „n‟ +„Acceleration Y: „ + acceleration.y + „n‟ +„Acceleration Z: „ + acceleration.z + „n‟ +„Timestamp: „ + acceleration.timestamp + „n‟)};function onError() {alert(„ooooops!‟);};navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);Chú ý: trên các thiết bị IOS, thì việc gọi phương thức getCurrentAcceleration() sẽkhông làm việc như cách mà ta nghĩ,dùng để thay thế cho current acceleration thì nó sẽ báocáo về giá trị cuối cùng được báo cáo từ lời gọi PhoneGap accelerometer.để thay thế, ta sẽcần sử dụng phương thức watchAcceleration()Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 37
  • 38. Phonegap cho người mới học3.5.2.Phương thức watchAccelerationPhương thức watchAcceleration cho phép ta lấy về dữ liệu gia tốc kế ở 1 khoảng thời gianchính xác.nếu ta thiết lập 1 biến chứa lời gọi phương thức và chuyển tiếp vào trong 1 thamsố tần suất như là 1 trong những lựa chọn, thì ta sẽ lấy về dữ liệu gia tốc kế dựa trên 1 chukì chuẩn như sau :function onSuccess(acceleration) {alert(„Acceleration X: „ + acceleration.x + „n‟ +„Acceleration Y: „ + acceleration.y + „n‟ +„Acceleration Z: „ + acceleration.z + „n‟ +„Timestamp: „ + acceleration.timestamp + „n‟);};function onError() {alert(„onError!‟);};var options = { frequency: 1000 }; // Update every secondvar watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError,options);đoạn code ở trên sẽ tạo ra 1 thông báo alert theo chu kì từng giây một.1 hàm hữu dụng cóthể là 1 vài thứ giống như ở dưới mà trong đó các phần tử DOM luôn được làm mới bêntrong HTML, và do vậy nó cho ta biết sự in dữ liệu ra màn hình hữu dụng như sau :function onSuccess(acceleration) {var myX = document.getElementById(„my_x‟);var myY = document.getElementById(„my_y‟);var myZ = document.getElementById(„my_z‟);var myT = document.getElementById(„my_timestamp‟);myX.innerHTML(acceleration.x);myY.innerHTML(acceleration.y);myZ.innerHTML(acceleration.z);myT.innerHTML(acceleration.timestamp);}function onError() {alert(„oooops!‟);Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 38
  • 39. Phonegap cho người mới học};var options = { frequency: 1000 }; // Update every secondvar watchID = navigator.accelerometer.watchAcceleration(onSuccess,onError,options);để đoạn code trên hoạt đọng, ta phải chắc chắn là tạo ra các phần tử DOM tương ứng thíchhợp 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 tốc kế được quan tâm đặc biệt, do vậy phonegap sẽ bị giớihạn mức chu kỳ nhỏ nhất là 40 mili giây và lớn nhất là 1000 mili giây.do vậy nếu ta yêu cầu1 cập nhật có chu kỳ là 3000 mili giây(hay là 3 giây) thì phonegap sẽ yêu cầu 1 chu kỳ là1000 mili giây trên thiết bị nhưng sẽ gọi hàm callback thành công lại dựa vào yêu cầu là chukỳ 3000 mili giây3.5.3.Phương thức clearWatchĐể ngừng việc xem các dữ liệu gia tốc kế được tạo bởi phương thức watchAcceleration(),thì ta phải sử dụng phương thức clearWatch() và tham chiếu tới biến mà ta vừa tạo ra từtrước như sau :navigator.accelerometer.clearWatch( watchID);thông thường, ta sẽ kích hoạt sự kiện này thông qua 1 nút click như sau :<button onclick=”stopWatch();”>Stop Watching</button>Tất nhiên, ta cũng có thể gán sự kiện này tới 1 vài loại chu kỳ như sau : thu thập dữ liệutrong 30 giây rồi ngừng lạiNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 39
  • 40. Phonegap cho người mới học3.6.Lựa chọn cấu hình ACCELEROMETER OPTIONĐể thiết lập tần số là 5 giây, ta làm như sau :var options = { frequency: 5000 }; // Update every 5 secondsvar watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError,options);để thiết lập tần số thành nửa giây thì ta sử dụng như sau :var options = { frequency: 500 }; // Update every .5 secondsvar watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError,options);3.7.Ví dụ về cách sử dụng gia tốc kế ACCELEROMETER<!DOCTYPE html><html><head><title>Acceleration Example</title><script type=”text/javascript” charset=”utf-8” src=”phonegap.js”></script><script type=”text/javascript” charset=”utf-8”>var watchID = null;// Wait for PhoneGap to loaddocument.addEventListener(“deviceready”, onDeviceReady, false);// PhoneGap is ready, start watchingfunction onDeviceReady() {startWatch();}// Start watching the accelerationfunction startWatch() {// Update acceleration every 3 secondsvar options = { frequency: 3000 };watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError,options);}Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 40
  • 41. Phonegap cho người mới học// Stop watching the accelerationfunction stopWatch() {if (watchID) {navigator.accelerometer.clearWatch(watchID);watchID = null;}}// onSuccess: Get a snapshot of the current accelerationfunction 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//function onError() {alert(„oooops!‟);}</script></head><body><div id=”accelerometer”>Waiting for accelerometer...</div><button onclick=”stopWatch();”>Stop Watching</button></body></html>Cách thức ví dụ hoạt độngKhi ứng dụng vừa load xong thì hàm startWatch() được kích hoạt.hàm này sử dụng phươngthức watchAcceleration() để khởi tạo việc xem dữ liệu gia tốc kế và báo cáo lại thông tin vềtọa độ trục XYZ và timestamp rồi in ra hiện thị HTMLNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 41
  • 42. Phonegap cho người mới họcIV.Ví trí địa lý Geolocation4.1.Thế nào là vị trí địa lý Geolocation ?Geolocation bao hàm cách xác định vị trí địa lý thật của 1 thiết bị - trong trường hợp này làđiện thoại smartphone mà ta sử dụng.cách thông thường nhất để xác định vị trí địa lý của 1thiết bị là sử dụng tính năng GPS chứa bên trong smartphone – dùng để xác định kinh độ vàvĩ độTuy nhiên, 1 vài thiết bị có thể sử dụng những dịch vụ khác để suy luận ra 1 ví trí – ví dụnhư : 1 địa chỉ IP, xác định tần số radio (RFID), địa chỉ truy cập wifi (MAC), hay trạm phátsóng.bởi vì có rất nhiều phương thức khác nhau được sử dụng để thu thập các tọa độ ví trí,do vậy không ai có thể đảm bảo rằng phonegap API sẽ trả về vị trí thật sự của thiết bị4.2.Cách sử dụng GeolocationLí do hiển nhiên nhất để sử dụng Geolocation gần đây là xu hướng dùng để xác định nơimà có 1 vài thứ xảy ra.ví dụ như dữ liệu Geolocation được thêm vào các bức ảnh hay trêncác mạng xã hội, …Tuy nhiên các ứng dụng Geolocation chử yếu chỉ rõ các vị trí ở thế giới thật ( giống như nhàhàng, quán bar, …) và kết hợp chúng với thiết bị trên tay người sử dụngTheo đó có 3 cách sáng tạo mà ta có thể thêm dữ liệu geolocation vào bất cứ ứng dụng nào:  Không chỉ thêm kinh độ và vĩ độ mà còn thêm vào tiêu đề và độ cao vào các bức ảnh  Cho phép người dùng tích vào bất cứ tọa độ do đó họ có thể lưu giữ được dấu vết quãng đường mình đã đi4.3.Các mẫu ứng dụng về GeolocationCác ứng dụng về Geolocation nổi tiếng là “foursquare” (hình 8-1) và “Gowalla” (hình 8-2).cả2 ứng dụng đều là miễn phí và tương thích với các nền tảng thiết bị khác nhau.ta có thểđăng ký và bắt đầu sử dụng chúng.nếu ta đang ở trong 1 nhà hàng ăn hay 1 quán bar thì tacó thể sử dụng chúng để tích vào và sử dụng facebook hay twitter để thông báo cho bạn bèbiết nơi ta đang có mặtNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 42
  • 43. Phonegap cho người mới họcCả 2 ứng dụng “Gowalla” và “foursquare” đều hướng tới mỗi trường mạng xã hội – nhữngngười sử dụng không chỉ tích vào vị trí của mình mà còn truy cập được vào các cuộc hẹn vàcác lời đề nghị được tạo bởi vị trí của các nhà bán lẻ.Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 43
  • 44. Phonegap cho người mới họcTất nhiên, nếu ta là người dùng facebook hay google+, thì ta có thể tham gia vào trong cácgames liên quan đến geolocation.như hình 8-3, các địa điểm trong facebook cho phép tađăng ký 1 vị trí và sau đó nói cho những người bạn khác nơi mà ta có mặtTrên google+, ta có thể dễ dàng đăng ký 1 địa điểm bằng cách tích vào ô checkbox ở gócphía trên bên phải của trang như hình 8-4.sau đó ta có thể lựa chọn 1 ví trí từ danh sáchcác địa điểm lân cận và thêm 1 bản ghi chú và 1 bức ảnh và đăng nó lênNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 44
  • 45. Phonegap cho người mới học4.4.Các đối tượng POSITION, POSITIONERROR, vàCOORDINATESPhoneGap Geolocation API sử dụng 3 đối tượng chỉ đọc chứa các thông tin geolocation :  Position  PositionError  CoordinatesMỗi đối tượng trong các đối tượng trên được tạo ra và tính toán khi ta sử dụng các phươngthức khác nhau, và dữ liệu được trả về giống như 1 phần của các hàm gọi lại callback4.4.1.Đối tượng Position ObjectĐối tượng Position Object chứa các tọa độ được tạo ra bởi geolocation API và nó gồm 2thuộc tinh sau :  Coords – đây là 1 tập các tọa độ địa lý (như kinh độ, vĩ độ, độ cao,..)  Timestamp – thời điểm được tạo tính bằng mili giâyVí dụ gọi hàm geolocation.getCurrentPosition() như ở ví dụ dưới thì kết quả trả về gồm cókinh độ, vĩ độ, độ cao, độ chính xác, độ chính xác độ cao, tiêu đề, tấc độ, và timestamp,được truyền vào hàm 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‟);}Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 45
  • 46. Phonegap cho người mới họcnavigator.geolocation.getCurrentPosition(onSuccess, onError);4.4.2.Đối tượng PositionErrornhư ta nhìn thấy trong ví dụ trước thì ta cũng có khả năng truy cập vào 1 hàm onErrorcallback.hàm này trả về 2 thuộc tính của vấn đề là error code và error messageerror code sẽ là 1 trong những lỗi đã được định nghĩa trước như sau :  PositionError.PERMISSION_DENIED  PositionError.POSITION_UNAVAILABLE  PositionError.TIMEOUTVà error message sẽ được miêu tả chi tiết lỗi gặp phải4.4.3.Đối tượng Coordinates ObjectĐối tượng Coordinates Object bao gồm 1 tập các thuộc tính chỉ đọc.ta đã gặp chúng trongví dụ trước như là 1 phần của đối tượng Position object.trong thực tế, thì dữ liệuCoordinates được đính thêm vào đối tượng Position object và sau đó được trả về thông quahàm onSuccessCác thuộc tính của đối tượng Coordinates object:  Vĩ độ latitude – là kiểm số thực  Kinh độ longitude - là kiểm số thực  Dộ cao altitude – độ cao tính bằng m so với mực nước biển  Dộ chính xác accuracy – là độ chính xác của việc đọc vĩ độ/kinh độ  Dộ chính xác altitudeAccuracy – là độ chính xác của độ cao  Tiêu đề heading – là hướng di chuyển  Tấc độ speed – là tấc độ so với mặt đất (m/s)4.5.Ví dụ minh họa về geolocation<!DOCTYPE html><html><head><title>Device Properties Example</title><script type=”text/javascript” charset=”utf-8” src=”phonegap.js”></script><script type=”text/javascript” charset=”utf-8”>Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 46
  • 47. Phonegap cho người mới họcdocument.addEventListener(“deviceready”, onDeviceReady, false);var watchID = null;function onDeviceReady() {// Update every 3 secondsvar 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//function onError(error) {alert(„code: „ + error.code + „n‟ +„message: „ + error.message + „n‟);}</script></head><body><p id=”geolocation”>Watching geolocation...</p></body></html>Cách ví dụ hoạt độngKhi ứng dụng được tải xong thì phương thức watchPosition() được kích hoạt và cứ mỗi 3giây thì thiết bị lại nhận được 1 cập nhật mới về kinh độ và vĩ độNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 47
  • 48. Phonegap cho người mới học4.6.Cách cải thiện giao diện và trải nghiệm của người dùngNếu ta nhìn vào giao diện của ứng dụng geolocation mà ta đã tạo ra ở trên thì ta sẽ nhậnthấy nó không được đẹp và nó trông giống như hình 8-5.thực tế thì, tất cả những gì nó thựchiện là thêm liên tục các thông tin về geolocation vào trong màn hình cho tới khi ta tắt nóĐể tiến hành giao diện UI, đầu tiên ta phải chắc chắn rằng project của ta có các thư mụcjQTouch cần thiết ở bên trong nó như đã được mô tả trong chương trước.lưu ý đặt lên đầuđoạn code sau đoạn script tải 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><script type=”text/javascript” charset=”utf-8”>var jQT = new $.jQTouch({icon: „jqtouch.png‟,Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 48
  • 49. Phonegap cho người mới họcicon4: „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>Tiếp theo, ta cần 1 đoạn 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>Kết quả được làm đẹp sẽ trông như hình 8-6Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 49
  • 50. Phonegap cho người mới họcĐây vẫn chưa phải là giao diện UI đẹp, nhưng nó nhìn đẹp hơn ví dụ gốc.làm cách nào tacó thể cải tiến nó ? đơn giản để làm được điều này, ta có thể đơn giản hóa dữ liệu trả về từhàm onSuccess function.để thay thế việc in lan man toàn bộ thông tin, ta có thể làm nhưsau :function onSuccess(position) {var element = document.getElementById(„geolocation‟);element.innerHTML =‟Position: „ + position.coords.latitude + „, „ ++ position.coords.longitude + „<br />‟ +„<br/>‟ + element.innerHTML;}Kết quả sẽ giống như hình 8-7.thông tin sẽ trở nên gọn gàng hơnNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 50
  • 51. Phonegap cho người mới họcNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 51
  • 52. Phonegap cho người mới họcV.Media5.1.Các Media Files là gì ?Media API cho phép ta ghi lại và chơi các file âm thanh audio trên 1 thiết bị.đặc biệt là ta cóthể chạy các files audio được load trực tiếp trên thiết bị hay chơi các files audio tải về thôngqua internetChú ý: 1 điều quan trọng cần phải nhớ rằng là thực thi PhoneGap hiện tại khôngtheo chuẩn của W3C giành cho media, và bất cứ các thực thi trong tương lai có thểxung đột với các APIs hiện tại.xa hơn nữa thì các Media API chỉ tương thức với các thiếtbị Android và iOS5.2.Cách sử dụng các Media FilesCó khả năng chơi music hat các audio files khác từ trong smartphone 1 cách khá thuậntiện.ví dụ, nếu ta đang trên 1 hành trình dài và không có 1 quyển sách nào trên tay, khôngthành vấn đề, ta có thể nghe 1 cuốn sách audioXa hơn, khả năng ghi lại audio cũng trở nên thuận tiện.nếu ta đang chờ cho 1 cuộc hẹn nàođó và cần ghi lại 1 vài lời nhắc nhở sau đó thì ta có thể sử dụng thiết bị giống như 1 máy ghichú.chất lương của audio được ghi lại khá ổn, file xuất ra là theo định dạng mp3, nên thậtdễ dàng kết hợp chặt chẽ với các công cụ chỉnh sửa audioTheo đó có 3 cách để thêm việc chạy/ghi âm lại media vào ứng dụng :  Tạo ra 1 trình ghi âm đơn giản giúp ích cho việc nhớ nhở  Kết hợp chặt chẽ với các tính năng recording/playback với 1 ứng dụng ghi chú giống như Evernote  Tạo ra 1 trình chơi audio đơn giản để chạy các files trên web5.3.Các ứng dụng mẫu sử dụng media APICác ứng dụng tiêu chuẩn trên iOS như “Voice Memos” và “iPod” (như hình 9-1) cho phép taghi âm lại các ghi chú bằng audio và chơi các audio filesNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 52
  • 53. Phonegap cho người mới họcTất nhiên, chỉ vì apple cung cấp những app này miễn phí thì không có nghĩa là những appkhác giống như vậy không tồn tại.hình 9-2 chỉ ra rằng có vô số các app như vậy trên appstore.và tất cả chúng cung cấp cùng những tính năng cơ bản như nhau - record, pause,play, và stop recording.1 vài có thêm khả năng chia sẻ các file ghi âm qua e-mail, các dịchvụ chia sẻ mediaNếu ta tìm kiếm các ứng dụng music apps, thì ta cũng có kha khá 1 danh sách các appsnhư hình 9-3Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 53
  • 54. Phonegap cho người mới học1 lựa chọn phổ biến là “Pandora” như hình 9-4, ứng dụng này hướng tới dịch vụ music trênweb.và dịch vụ “Pandora” đưa ra 1 cách thú vị tới cùng 1 bản nhạc.điều này có nghĩa là khita muốn nghe music của nhóm nhạc Creedence Clearwater Revival (CCR).thì ta tạo ra 1trạm “station” dành cho ban nhạc này và sau đó “Pandora” sẽ tìm kiếm âm nhạc chứ khôngchỉ chọn lựa các bản ghi âm của CCR mà còn tìm kiếm các bài hát khác từ các ban nhạckhác cùng thể loại nhạc mà ta muốn tìm.sau đó ta có thể chia sẻ trạm “radio station” mớinày cho những người khácĐa số (không phải tất cả ) các ứng dụng âm nhạc phổ biến đều có mặt trên android.chú ýrằng, như trong hình 9-5 thì giao diện của “Pandora” rất trực quan và đẹpNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 54
  • 55. Phonegap cho người mới học5.4.Đối tượng MEDIA OBJECTvar media = new Media(src, mediaSuccess, [mediaError], [mediaStatus]);Đối tượng PhoneGap Media object gồm 4 tham số, 3 trong số đó là tùy chọn :  src – là 1 URL (là URL dẫn tới 1 file trên internet) chứa nội dụng audio  mediaSuccess – (tham số tùy chọn) đây là 1 hàm callback được gọi sau khi 1 đối tượng Media object được hoàn thành xong thao tác hiện tại như play, record, và stop (ví dụ như ta đang play 1 bản nhạc thì phải khi chơi xong hết bản nhạc ấy thì các lệnh trong hàm mediaSuccess mới được thực hiện )  mediaError – (tham số tùy chọn) đây là 1 hàm callback được gọi khi xảy ra lỗi  mediaStatus - (tham số tùy chọn) đây là 1 hàm callback được gọi để xác định những thay đổi trạng tháicác tham số chỉ đọc :  position : là vị trí trong phạm vị phát audio.chú ý rằng nó không được cập nhập trong suốt quá trình chạy mà phải gọi phương thức getCurrentPosition() để cập nhập  duration : là tổng số thời gian của file media tính theo giâyNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 55
  • 56. Phonegap cho người mới học5.5.Cách sừ dụng các phương thức methodstrong phần này thì ta học cách sử dụng các phương thức chính trong media API.cácphương thức này cho phép ta thao tác play, record, và pause,…Chú ý: nếu ta làm việc với phiên bản Phonegap 0.9.4 trở về trước thì ta phải chắcchắn rằng các hàm callback phải trong phạm vi toàn cục5.5.1.phương thức media.getCurrentPositionđể lấy về vị trí hiện tại trong phạm vi 1 audio file, ta sử dụng phương thứcmedia.getCurrentPosition như sau :media.getCurrentPosition(mediaSuccess,[mediaError]);tham số thứ 1 là hàm mediaSuccess là 1 hàm callback được gọi với vị tríposition hiện tại (được tính bằng giây) và tham số thứ 2 tùy chọn là mediaErrorlà 1 hàm callback được gọi trong trường hợp xảy ra lỗiphương thức getCurrentPosition() là 1 hàm không đồng bộ (nghĩa là nó không tự gọi lạiliên tục theo chu kì mà muốn như vậy ta phải thiết lập bằng tay) dùng để trả về vị trí hiện tạicủa audio file nằm dưới 1 đối tượng Media object, và nó cũng cập nhật tham sốposition trong phạm vi đối tượng Media object.Phương thức này hỗ trợ các nền tảng :  Android  BlackBerry WebWorks (OS 5.0 and higher)  iOS  Windows Phone 7 ( Mango )Ví dụ mẫu : // Audio player // var my_media = new Media(src, onSuccess, onError); setInterval(function,mi llisec,lang)hàm này // Update media position every second có tác dụng gọi lặp đi lặp lại 1 hàm function nào đó theo 1 chu kỳNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 56 thời gian millisec
  • 57. Phonegap cho người mới học var mediaTimer = setInterval(function() { // get media position my_media.getCurrentPosition( // success callback function( position) { if (position > -1) { console.log(( position) + " sec"); } }, // error callback function(e) { console.log("Error getting pos=" + e); } ); }, 1000);5.5.2.Phương thức media.getDurationmedia.getDuration();Phương thức getDuration() là 1 hàm không đồng bộ (nghĩa là nó không tự gọi lại liên tụctheo chu kì mà muốn như vậy ta phải thiết lập bằng tay) dùng để trả về khoảng thời gian củaaudio file được tính theo giây nếu đã biết.còn nếu khoảng thời gian là chưa xác định thì nótrả về giá trị là -1Phương thức này hỗ trợ các nền tảng :  Android  BlackBerry WebWorks (OS 5.0 and higher)  iOS  Windows Phone 7 ( Mango )Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 57
  • 58. Phonegap cho người mới họcVí dụ mẫu : // Audio player // var my_media = new Media(src, onSuccess, onError); clearInterval(id_of_setinterval) xóa bỏ đi sự lặp lại của hàm // Get duration function được lặp bởi setInterval với var counter = 0; var timerDur = setInterval(function() { var id_of_setinterval = setInterval(function,milisec) counter = counter + 100; 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.Phương thức media.pausePhương thức này dùng để tạm dừng việc chạy 1 audio filemedia.pause();hàm media.pause() là 1 hàm không đồng bộ dùng để tạm dừng 1 audio filephương thức này hỗ trợ các nền tảng :  Android  BlackBerry WebWorks (OS 5.0 and higher)  iOS  Windows Phone 7 ( Mango )Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 58
  • 59. Phonegap cho người mới họcVí dụ mẫu về tạm dừng chạy audio file sau khi chạy được 10 giây :// 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(code,millisec,lang) setTimeout(function() {  hàm hẹn giờ gọi hàm media.pause(); (không thực hiện lặp lại theo }, 10000); chu kì)}5.5.4.Phương thức media.playPhương thức này dùng để khởi chạy hay tiếp tục chạy 1 audio filemedia.play();hàm media.play() là 1 hàm không đồng bộ.để thực sự chạy được 1 file thì ta cần chuyểntiếp vào 1 URL hay 1 đường dẫn path tới nơi chứa file như sau :Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 59
  • 60. Phonegap cho người mới học// 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();}Chú ý :Trong BlackBerry WebWorks :  Các thiết bị blackberry hỗ trợ giới hạn các kênh audio cùng lúc.các thiết bị CDMA chỉ hỗ trợ 1 kênh audio.những thiết bị khác hỗ trợ 2 kênh audio cùng lúc.do vậy việc cố gắng chơi nhiều hơn 2 audio files cùng lúc thì kết quả là audio file bật trước đó sẽ bị ngừng lạiTrong iOS :  numberOfLoopsđược chuyển tiếp vào trong lựa chọn options của phương thức play để định nghĩa số lần màta muốn media file được chơi :var myMedia = new Media("http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3")myMedia.play({ numberOfLoops: 2 })Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 60
  • 61. Phonegap cho người mới học5.5.5.Phương thức media.releaseta có thể giải phóng các nguồn audio nằm bên dưới hệ điều hành bằng cách sử dụngphương thức release().đây là 1 điều đặc biệt quan trọng bởi vì có 1 số hữu hạn các thực thểopencore được dành cho trình chạy media.các thư viện OpenCore hỗ trợ phát media nhưaudio,video, các định dạng ảnh image.ta luôn luôn gọi hàm giải phóng này khi ta không còncần tới 1 nguồn media.như ví dụ sau :media.release();do vậy khi xử lý hoàn thành thì ta nên làm như sau :var my_file = new Media(src, onSuccess, onError);my_file.play();my_file.stop();my_file.release();5.5.6.Phương thức media.seekTodùng để thiết lập vị trí hiện tại trong phạm vi 1 audio filemedia.seekTo(milliseconds);tham sô :  milliseconds: là vị trí được thiết lập làm vị trí phát trong phạm vi audio tính bằng mili giâyhàm media.seekTo là 1 hàm không đồng bộ dùng để cập nhật vị trí hiện tại của audio filenằm dưới 1 đối tượng media object.cũng cập nhật tham số _position trong phạm vi đốitượng media objectphương thức này hỗ trợ các nền tảng :  Android  BlackBerry WebWorks (OS 6.0 and higher)  iOS  Windows Phone 7 ( Mango )Ví dụ mẫu :Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 61
  • 62. Phonegap cho người mới học // Audio player // var my_media = new Media(src, onSuccess, onError); my_media.play(); // SeekTo to 10 seconds after 5 seconds setTimeout(function() { my_media.seekTo(10000); }, 5000);5.5.7.Phương thức media.startRecordDùng để ghi âm lại 1 audio file :media.startRecord();hàm media.startRecord() là 1 hàm không đồng bộví dụ mẫu :// 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();}Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 62
  • 63. Phonegap cho người mới họcChú ý :Trong BlackBerry WebWorks :  Các thiết bị blackberry ghi lại audio trong nhiều định dạng có chất lượng khác nhau.các file này phải kết thúc với đuôi mở rộng là .amrTrong iOS :  File để ghi âm phải tồn tại rồi và phải có dạng là .wav và file API có thể được sử dụng để tạo ra file này5.5.8.Phương thức media.stopDùng để dừng phát 1 audio filemedia.stop();hàm media.stop là 1 hàm không đồng bộ dùng để ngừng phát 1 audio file :phương thức này hỗ trợ các nền tảng sau :  Android  BlackBerry WebWorks (OS 5.0 and higher)  iOS  Windows Phone 7 ( Mango )Ví dụ mẫu :/ 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 callbackNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 63
  • 64. Phonegap cho người mới học function(err) { console.log("playAudio():Audio Error: "+err); }); // Play audio my_media.play(); // Stop after 10 seconds setTimeout(function() { my_media.stop(); }, 10000);}5.5.9.Phương thức media.stopRecordDùng để dừng việc ghi âm lại 1 audio filemedia.stopRecord();hàm media.stopRecord là 1 hàm không đồng bộ dùng để ngừng việc ghi âm 1 audio filephương thức sau hỗ trợ các nền tảng sau :  Android  BlackBerry WebWorks (OS 5.0 and higher)  iOS  Windows Phone 7 ( Mango )Ví dụ mẫu :// Record audio//function recordAudio() { var src = "myrecording.mp3"; var mediaRec = new Media(src, // success callback function() { console.log("recordAudio():Audio Success"); },Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 64
  • 65. Phonegap cho người mới học // error callback function(err) { console.log("recordAudio():Audio Error: "+ err.code); }); // Record audio mediaRec.startRecord(); // Stop recording after 10 seconds setTimeout(function() { mediaRec.stopRecord(); }, 10000);}5.5.10.Kiểm soát lỗi MediaError1 đối tượng MediaError được tả về trong hàm mediaError callback khi xảy ra lỗiCác thuộc tính của đối tượng :  Code : 1 trong những mã code thông báo lỗi error codes được định nghĩa từ trước sẽ được liệt kê ra  Message : thông tin về lỗi Error message mô tả chi tiết về lỗiCác mã error codes bao gồm :  MediaError.MEDIA_ERR_ABORTED  MediaError.MEDIA_ERR_NETWORK  MediaError.MEDIA_ERR_DECODE  MediaError.MEDIA_ERR_NONE_SUPPORTEDCách tiếp cận thân thiện cho vấn đề kiểm soát lỗi này là thiết lập 1 mảng array chứa cáctrạng thái lỗi sử dụng các constants giống như là các chỉ mục key, và tương ứng với nó làcác thông báo lỗi tự định nghĩa.theo cách này ta có thể hiện thị những thông báo lỗi dễ hiểutới người dùng như sau :funciton onError(error){var errors = {};Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 65
  • 66. Phonegap cho người mới họcerrors[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]);alert(„code: „ + error.code + „n‟ +„message: „ + error.message + „n‟);}5.5.11.Ví dụ về việc sử dụng media api5.5.11.1.Ví dụ xây dựng 1 trình chơi audio đơn giản<html><head><title>Media 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() {playAudio(“http://example.com/audio.mp3”); //change me!}var my_media = null;var mediaTimer = null;// Play audio//function playAudio(src) {// Create Media object from srcmy_media = new Media(src, onSuccess, onError);// Play audiomy_media.play();// Update my_media position every secondif (mediaTimer == null) {mediaTimer = setInterval(function() {// get my_media positionmy_media.getCurrentPosition(Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 66
  • 67. Phonegap cho người mới học// success callbackfunction(position) {if (position > -1) {setAudioPosition((position/1000) + “ sec”);}},// error callbackfunction(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 onError(error) {alert(„code: „ + error.code + „n‟ +„message: „ + error.message + „n‟);}function setAudioPosition(position) {document.getElementById(„audio_position‟).innerHTML = position;}Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 67
  • 68. Phonegap cho người mới học</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.Cách xây dựng 1 ứng dụng ghi âm audio đơn giản<html><head><title>Device Properties 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 recordAudio() {var src = “myrecording.mp3”;var mediaRec = new Media(src, onSuccess, onError);mediaRec.startRecord();}function onDeviceReady() {startRecording();}function startRecording() {recordAudio();}function stopRecording(){mediaRec.stopRecord();}function onSuccess() {console.log(“recordAudio():Audio Success”);}Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 68
  • 69. Phonegap cho người mới họcfunction onError(error) {alert(„code: „ + error.code + „n‟ +„message: „ + error.message + „n‟);}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><p id=”audio_position”></p></body></html>5.5.11.3.Cải thiện giao diện và trải nghiệmVi dụ trên đơn giản chỉ là các đường links sơ sài và trông không trực quan và khó sử dụngnhư hình 9-7Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 69
  • 70. Phonegap cho người mới họcĐể cải thiện giao diện người dùng, đầu tiên ta phải đảm bảo rằng project của ta cần thiếtphải có các thư mục jQTouch folders ở trong nó, như đã nói đến ở trong các chươngtrước.đặt đoạn code này vào trước đoạn 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><script type=”text/javascript” charset=”utf-8”>var jQT = new $.jQTouch({icon: „jqtouch.png‟,icon4: „jqtouch4.png‟,addGlossToIcon: false,startupScreen: „jqt_startup.png‟,Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 70
  • 71. Phonegap cho người mới họcstatusBar: „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 đó thêm đoạn HTML sau vào 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><p id=”audio_position”></p></div>Chú ý rằng đoạn code này có gán các lớp classes vào các phần tử <li>.nút Play có class tênlà whitebutton và 2 nút khác có tên class là graybutton.các lớp class này là những phầnđược thiết lập trong jQTouch bằng css.kết quả sẽ giống như hình 9-8Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 71
  • 72. Phonegap cho người mới họcNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 72
  • 73. Phonegap cho người mới họcVI.Lưu trữ StorageTa đang là nhà phát triển HTML5, thì hầu như ta chạy ứng dụng trong các thiết lập cấu hìnhnằm ở phía client.Ví dụ : nếu ta sử dụng trình duyệt Chrome or Safari và vào tranghtml5demos.com/database, thì ta sẽ nhìn thấy trang page này được làm đầy bởi các dòngtweets.nhìn thoáng qua thì ta cảm tưởng trang page này xuất hiện bởi được hỗ trợ bởi 1database như thông lệ giống kiểu MySQL.tuy nhiên khi ta ấn chuột phải vào trang page ấn vào Inspect Element.ta sẽ thấy như trong hình 11-1Khi ta ấn vào Resources tab và sau đó lăn chuột xuống vị trí databases, ta sẽ nhìn thấy 1html5demos database có sẵn và bên trong nó có 1 bảng tên là tweets.Nếu ta ấn vào bên phải pane và đây là kết quả của lệnh SQL : select * from tweets, ta lấyđược 1 danh sách giống với như cái trong hình 11-1Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 73
  • 74. Phonegap cho người mới họcNhư ta có thể thấy, các trường fields cũng tương tự với những gì ta đã sử dụng trongMySQL hay 1 SQL database khác.tất nhiên, ta có thể chỉ cần ấn vào biểu tượng icon củabảng tweets đề xem mọi thứ được lưu trong bảng nàyWeb Database ( về bản chất là 1 hệ thống của Sqlite3 ) rất phù hợp với các lưu trữ dữ liệuphức tạp ( theo cách khác, khi ta muốn giữ vết của rất nhiều các cột thông tin trên từngphần tử ), nhưng thỉnh thoảng các yêu cầu dữ liệu không quá phức tạpHiện tại, ta chỉ có thể muốn lưu trữ 1 vài thông tin rất đơn giản ( như trong 1 dạng 1 cặpkey/value ), và chỉ giữ nó xung quanh 1 khoảng thời gian ngắn ( theo cách hiểu khác, chotới khi người dùng đóng trình duyệt hay ứng dụng ).nếu yêu cầu đề ra là cần thiết hơn vềtấc độ, thì phương thức lưu giữ session và local là những gì ta cầnCó 1 ví dụ nằm ở html5demos.com/storage như hình 11-2 chỉ ra kết quả khi đánh thêmvào 1 giá trị hello cho biến sessionStorage, và 1 giá trị của goodbye cho biến localStorageNếu ta vẫn mở Resources tab, thì di chuyển xuống phần Session Storage để nhìn thấy giátrị value của hello được lưu trữ ở đó như hình 11-3.và trong hình 11-4, ta có thể thấy giá trịcủa goodbye được lưu trữ ở Local StorageNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 74
  • 75. Phonegap cho người mới học6.1.Điểm khác biệt giữa Session Storage và Local Storage ?Các đối tượng Session Storage sẽ được xóa khi ta đóng trình cửa sổ trình duyệt nhưngcác đối tượng Local Storage thì vẫn được tồn tại1 điều cần phải nhớ rằng các đối tượng Storage thường tốt nhất nên từ 5MB đến 10MB dữliệu, phụ thuộc vào trình duyệt được sử dụng.bởi vì ta sẽ xây dựng các ứng dụng apps trên1 phone, ta nên giữ các đối tượng Storage nhỏ hơn 4MB cho an toàn.nếu ta đang xây dựngweb databases, thì giữ giới hạn là 5MB, nhưng ta có thể giữ nó nhỏ hơn nếu ta muốnCâu hỏi đặt ra tiếp là nếu HTML5 hỗ trợ cả các lựa chọn database và local storage, thì tạisao ta lại phải để ý tới hệ thống lưu trữ của phonegap ?Câu trả lời là 1 vài thiết bị sẽ hỗ trợ các tính năng này và trong trường hợp đó thì PhoneGapAPI sẽ trì hoãn trên hệ thống xử lý của thiết bị đó.các thiết bị khác không hỗ trợ điều này thìtrong trường hợp đó, hệ thống của phonegap sẽ nhảy vàoNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 75
  • 76. Phonegap cho người mới học6.2.Cách sử dụng local storageDữ liệu được lưu trữ bằng cách sử dụng local storage được lưu dưới dạng các cặpkey/value. Để ghi 1 value vào trong bảng local storage thì ta sử dụng mã code như sau:window.localStorage.setItem("key_name", value);// ví dụ: window.localStorage.setItem(„Lớp‟,‟toán tin 2-k52‟);để lấy về 1 giá trị từ bảng local storage, ta sử dụng mã code như sau:window.localStorage.getItem("key_name");// ví dụ: window.localStorage.getItem(„Lớp‟);để lấy về tên của khóa key của 1 giá trị local storage tại 1 vị trí nào đó trong bảngwindow.localStorage.key(0) // lấy về tên của khóa key của dòng giá trị local storage ở vị tri 0(hay vị trí đầu tiên)window.localStorage.key(0) // kết quả là „Lớp‟window.localStorage.key(1) // kết quả là „ho và tên‟window.localStorage.key(2) // kết quả là „sinh ngày‟Để xóa 1 dòng giá trị trong bảng local storage, ta xóa dựa vào từ khóa key của dòng giá trịwindow.localStorage.removeItem("key");// ví dụ: window.localStorage.removeItem("Lớp");Để xóa toàn bộ dữ liệu trong bảng giá trị local storage, ta làm như sau:Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 76
  • 77. Phonegap cho người mới họcwindow.localStorage.clear();6.3.Cách sử dụng đối tượng DATABASE OBJECT6.3.1.Cách tạo và Cách mở 1 databasePhương thức này có nhiệm vụ mở một database có sẵn hoặc tạo mới nếu nó chưa tồn tại.Phương thức này đượ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: tên của database.- version: phiên bản. (Hai database trùng tên nhưng khác phiên bản thì khác nhau)- displayname: mô tả.- estimatedSize: dung lượng được tính theo đơn vị byte.- creationCallback: phương thức callback được thực thi sau khi database mở/tạo.Ví dụ tạo một database với tên “mydb” và dung lượng là 5 MB:var db = openDatabase("mydb", "1.0", "My First DB", 5 * 1024 * 1024);Trong thế giới của SQlite, ta tạo ra 1 database bằng cách mở nó.để mở ra 1 database, ta sửdụng phương thức window.openDatabase() như sau :var myDB = window.openDatabase(name, version, displayname,size);lệnh sau có 4 tham số :Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 77
  • 78. Phonegap cho người mới học  Name – đây là tên của database mà ta muốn tạo ra  Version – đây là phiên bản của database  Displayname – đây là tên hiện thị của database  Size - đây là kích thước của database ( được tính theo bytes)Ví dụ, ta có thể chạy dòng lệnh sau :var myDB = window.openDatabase(“photos”, “1.0”, “Photos DB”, 1000000);dòng lệnh này tạo ra 1 MB database được gọi là photos và gán nó vào 1 biến myDB.đặcbiệt là ta sẽ nhìn thấy dạng này được đính kèm vào 1 hàm function hay là trênonDeviceReady() listener như sau :document.addEventListener(“deviceready”, onDeviceReady, false);function onDeviceReady() {var myDB = window.openDatabase(“photos”, “1.0”, “Photos DB”, 1000000);}6.3.2.Cách chạy 1 sql QueryChú ý: không thể thực hiện được truy vấn SQL Query, khi truy vấn này đặt ngoài 1giao dịch Transactions.Khi ta chạy 1 chuỗi truy vấn SQL query, thì những gì mà ta thực sự làm là sử dụng đốitượng SQLTransaction object.đối tượng này bao hàm các phương thức cho phép ta thựcthi các câu lệnh SQL dựa vào 1 database đã được mở từ trướcĐây là dạng cơ bản của phương thức executeSql() :myDB.executeSql(„SELECT * FROM table1‟);định nghĩa tổng quát của đối tượng SQLTransaction – đối tượng này không được sửdụng 1 cách độc lập mà nó phải được nhúng trong các phương thứcnhư transaction(), readTransaction(), và changeVersion()Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 78
  • 79. Phonegap cho người mới học 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 phương thức executeSql(sqlStatement, arguments, callback, errorCallback) đượcgọi thì tiến trình xử lý sẽ chạy theo thuật toán sau ( thuật toán này tương đối đơn giản và nókhông thực sự xử lý bất kì SQL nào ) 1. Nếu phương thức không được gọi trong suốt quá trình thực thị của 1 SQLTransactionCallback,SQLStatementCallback, or SQLStatementErrorCallback thì nó sẽ văng ra 1 INVALID_STATE_ERR exception ( do phương thức này được gọi bên trong 1 SQLTransactionErrorCallback do vậy nó văng ra 1 exception.điều khiển SQLTransactionErrorCallback này chỉ được gọi khi 1 giao dịch transaction thất bại và do đó không có bất cứ lệnh SQL nào có thể được thêm vào(thực thi) 2. Cấu trúc tiến xử lý SQL (đây chính là chuỗi lệnh query) như đã biết sẽ là tham số đầu tiên và là tham số bắt buộc trong phương thức sqlStatement, bằng cách sử dụng tham số thứ 2 là mảng array, thể thu về cấu trúc lệnh query.nếu tham số thứ 2 bị bỏ qua hay là rỗng, thì xử lý liên quan đến mảng array tham số là rỗng 3. Xếp hàng lệnh trong giao dịch transaction, theo đó tham số thư 3 nếu có sẽ là hàm callback của tập các kết quả của câu lệnh và tham số thứ 4 nếu có sẽ là hàm callback thông báo lỗiNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 79
  • 80. Phonegap cho người mới họcChú ý: trong ví dụ trên, thì myDB được sử dụng chỉ vì nó đã được sử dụng từ ví dụtrước.ta cũng sẽ sử dụng bất cứ biến nào cũng được và chắc rằng ta đã mở nó lên.chú ýrằng ta có thể sử dụng bất cứ câu lệnh SQL hợp lệ nào mà ta muốn.ví dụ này chỉ thể hiện 1câu lệnh select nhưng ta có thể chạy những câu lệnh kháctheo sau đây là câu lệnh drop dùng để xóa 1 bảng :myDB.executeSql(„DROP TABLE IF EXISTS table1)‟);đây là câu lệnh tạo ra 1 bảng – câu lệnh create :myDB.executeSql(„CREATE TABLE IF NOT EXISTS table1 (id unique, firstnamevarchar, lastname varchar)‟);theo sau là lệnh insert :myDB.executeSql(„INSERT INTO TABLE (id, firstname, lastname) VALUES (1,“Thomas “, “Myer “)‟);Đây là câu lệnh delete :myDB.executeSql(„DELETE FROM TABLE where id=1‟);Chú ý: như ta đã thấy ở trên, phương thức executeSql với những câu lệnh truy vấnnày ta chỉ sử dụng 1 tham số duy nhất (mà theo định nghĩa nó có gồm tới 4 tham số ) dođặc thù các câu lệnh DROP, CREATE, INSERT, DELETE ta không quan tâm tới kết quả trảvềkhông có gì là ngạc nhiên ở đây.nếu ta biết SQL, thì ta không có vấn đề gì trong việc để tạotable, hay thêm mới dữ liệu, và nhận về dữ liệu.tất nhiên, ta sẽ phải xem cách mà ta phảiđơn xen các dấu ngoặc lồng nhau – nếu ta đang sử dụng dấu ngoặc đơn ở ngoài, thì tabuộc phải sử dụng dấu ngoặc lép trên các giá trị ở bên trong câu lệnhNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 80
  • 81. Phonegap cho người mới học6.3.3.Cách phân tích và tiền xử lý các câu lệnh SQL (phòng chốngSQL injection)để phòng trống SQL injection ta nên sử dụng thêm tham số mảng array thứ 2 trong phươngthức executeSql() vì khi đó các giá trị được thêm vào trong câu truy vấn không được thêmvào 1 cách trực tiếp ( ngăn chặn việc thoát kiểu kí tự ) mà nó phải được chuyển tiếp thôngqua 1 mảng array rồi mới được truyền vào.cách bước nó thực thi như sau : 1. Tiến hành phân tích cấu trúc SQL như 1 cấu trúc SQL thông thường với ngoại lệ là dấu hỏi chấm ? có thể sử dụng đặt trong cấu trúc SQL này, nó là 1 kí tự đại diện 2. Kết hợp mỗi điểm đặt dấu ? với giá trị của các tham số trong tham số thứ 2 tương ứng cùng 1 vị trí ( đo đó điểm đặt dấu hỏi ? đầu tiên tương ứng với giá trị đầu tiên trong tham số thứ 2, và tổng quát lên thì điểm đặt dấu hỏi ? thứ n tương ứng với giá trị thứ n trong tham số thứ 2 ) – ( chú ý rằng việc kết hợp các điểm đặt dấu hỏi ? được thực hiện ở mức chuỗi kí tự, chứ không phải là sự trùng khớp chuỗi, do vậy nớ cung cấp 1 cách linh hoạt để thêm vào các tham số bên trong 1 câu lệnh mà không bị nguy cơ tấn công bởi SQL injection 3. Nếu đối tượng database object mà đối tượng SQLTransaction or SQLTransactionSync object được tạo ra từ nó 4. Mặc khác nếu ngữ pháp của câu lệnh SQL là không đúng ( ngoại trừ cho cách sử dụng kí tự ? ), hay câu lệnh sử dụng các tính năng không được hỗ trợ hay 1 số phần tử trong tham số mảng array không bằng với số điểm đặt ? trong câu lệnh hay câu lênh không thể phân tích được vì 1 vài lí do nào đó, thì câu lệnh bị đóng mác là lỗi (Error code 5.).Tác nhân cũng phải xét tới câu lệnh xem nó có sử dụng các tính năng BEGIN, COMMIT, và ROLLBACK đang không được hỗ trợ hay không ( nếu có nó sẽ đóng mác câu lệnh lỗi ) do vậy nó không cho phép các câu lệnh này làm nhiễu loạn các giao dịch rõ ràng được quản lý bởi database API của chính nó 5. Mặt khác, nếu chế độ được sử dụng tạo ra đối tượng SQLTransaction or SQLTransactionSync object là chỉ đọc nhưng hành động của câu lệnh lại chỉnh sửa database, thì nó đánh mác câu lệnh lỗi (Error code 5.).chú ý nhưng hành động của câu lệnh lại chỉnh sửa database được xét tới ở đây là UPDATE, SELECT, DROP do vậy 1 câu lệnh như "UPDATE test SET id=0 WHERE 0=1" vẫn sẽ được xử lý 6. Trả về cấu trúc câu lệnhVí dụ như :tx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES ( ?,?)", [1,"peter"]);Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 81
  • 82. Phonegap cho người mới họctx.executeSql("INSERT INTO CUSTOMERS (id, name) VALUES ( ?,?)", [2,"paul"]);6.3.4.Các giao dịch Transactionstại sao ta sử dụng các giao dịch transactions để thay thế cho việc chỉ chạy câu lệnh SQL ?bởi vì transactions mang tới cho ta khả năng rollback.điều này có nghĩa là nếu 1 giao dịchtransaction – cái mà chứa 1 hay nhiều câu lệnh SQL mà gặp thất bại thì sự cập nhật vàodatabase không bao giờ được thực hiện giống như là giao dịch transaction đó chưa bao giờxảy racũng có các hàm error và success callbacks trên giao dịch transaction, do vậy ta có thểquản lý các lỗi này nhưng quan trọng nhất phải biết rằng các giao dịch transactions có khảnăng khôi phục rollback lại thay đổiBạn cần thực thi các câu SQL trong ngữ cảnh của một transaction. Một transaction cungcấp khả năng rollback khi một trong những câu lệnh bên trong nó thực thi thất bại. Nghĩa lànếu bất kì một lệnh SQL nào thất bại, mọi thao tác thực hiện trước đó trong transaction sẽ bịhủy bỏ và database không bị ảnh hưởng gì cả.Interface Database hỗ trợ hai phương thức giúp thực hiện điều này là transaction() vàreadTransaction(). Điểm khác biệt giữa chúng là transaction() hỗ trợ read/write, cònreadTransaction() là read-only. Như vậy sử dụng readTransaction() sẽ cho hiệu suấtcao hơn nếu như bạn chỉ cần đọc dữ liệu.Chú ý: ta sử dụng transaction() cho các câu lệnh SQL liên quan đến việc đọc ghitrong database như INSERT, REPLACE, CREATE, DROP, DELETE và để tăng hiệu suấtta sử dụng readTransaction() cho các câu lệnh truy vấn SQL chỉ liên quan tới đọc dữ liêutrong database như SELECTvoid transaction( in SQLTransactionCallback callback, in optional SQLTransactionErrorCallback errorCallback, in optional SQLVoidCallback successCallback);giao dịch transaction đơn giản là 1 hàm function có chứa 1 vài code như sau :Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 82
  • 83. Phonegap cho người mới họcvar db = openDatabase(mydb, 1.0, my first database, 2 *1024 * 1024);db.transaction(function ( tx) {&nbsp; // here be the transaction // do SQL magic here using the tx object});chú ý ở đây TX là 1 đối tượng transaction objectnếu ta cần chạy toàn bộ nhóm câu lệnh truy vấn vào 1 thời điểm,, thì ta có thể tạo ra 1 giadịch transaction, sau đó gọi ra chuỗi truy vấn như sau :myDB.transaction( populateDB, errorDB, successDB);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ú ý rằng gọi 1 hàm JavaScript function để thực thi các câu lệnh truy vấn riêng biệt và baohàm lời gọi các hàm success và error callback functionsNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 83
  • 84. Phonegap cho người mới học6.4.Cách xem 1 tập kết quả1 trong những thứ ta thường làm nhiều hơn thông thường, là ta sẽ làm với database là lưutrữ và cách nhận giá trị từ nó.Phương thức giao dịch transaction cung cấp cho ta 1 hàm success callback.phương thứcexecuteSql() cũng cung cấp cho ta các hàm success và error callbacks.trong hàmsuccess callback ta sẽ nhìn thấy tập kết quả.Nếu ta đã sử dụng và làm việc với mySQL (hay 1 vài SQL database khác), thì ta có thể nghĩmọi việc cần làm đều giống như vậy. Những gì mà ta lấy lại từ hàm success callback là 1đối tượng SQLResultSet object – là đối tượng chứa 3 thuộc tính sau :  insertId – đây là row ID mà câu lệnh SQL của đối tượng SQLResultSet được thêm vào trong cơ sở dữ liệu (điều này chỉ được áp dụng nếu ta đã chạy 1 câu lệnh insert)  rowAffected – đây là số dòng được thay đổi bởi câu lệnh SQL ( điều này trả về 0 nếu không có dòng nào chịu tác động cũng giống như 1 câu lệnh select )  rows – đây là 1 danh sách các kết quả được lưu dưới dạng đối tượng SQLResultSetRowList được biểu diễn dưới các dòng và được trả vềđịnh nghĩa chung cho đối tượng SQLResultSet object được trả về bởi lệnh truy vấn select : interface SQLResultSet { readonly attribute long insertId; readonly attribute long rowsAffected; readonly attribute SQLResultSetRowList rows; };Và định nghĩa chung cho thuộc tính rows – thuộc tính này là 1 kiểu đối tượngSQLResultSetRowList : interface SQLResultSetRowList { readonly attribute unsigned long length; getter any item(in unsigned long index); };Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 84
  • 85. Phonegap cho người mới họcNhư đã thấy ở trên item ở đây là 1 phương thức get chứ không phải 1 thuộc tính dovậy ta mới có cách viết results.rows.item()trong ví dụ sau, ta chạy 1 truy vấn SQL select đơn giản và báo cáo lại những gì sẽ đượctrả về :function queryDB(tx) {tx.executeSql(„SELECT * FROM test‟, [], querySuccess, errorDB);} Theo định nghĩa về SQLTransaction ở trên SELECT * FROM test‟ là tham số bắt buộcfunction querySuccess(tx, results) { đầu tiên kiểu DOMString, do câu lệnh select// this will be empty -- no rows were inserted. ta cần phải nhận về kết quả nên ta phải sửalert(“Insert ID = “ + results.insertId); dụng tham số thứ 3, do vậy tham số thứ 2 là// this will be 0 -- select statement tham số mảng array ta để là rỗng nên viết làalert(“Rows Affected = “ + results.rowAffected); [], và tham số thứ 3 là querySuccess có// the number of rows returned by the select statementalert(“# of rows = “ + results.rows.length); chứa thông tin về kết quả trả về nên buộc ta} phải truyền vào phương thức executeSql.không giống như ở trên phươngfunction errorDB(err) { thức executeSql chỉ thực thi các lệnh CREATE hay INSERT nên ta không quanalert(“Error processing SQL: “+err.code); tâm lắm tới thông tin kết quả trả về, do vậy ta hay sử dụng nó với 1 tham số duy nhất}db.transaction( queryDB, errorDB);ta có thể truy cập các giá trị được lưu trữ trong các dòng trả về này bằng cách sử dụngphương thức item().mỗi lúc ta sử dụng nó, ta sẽ lấy về 1 dòng row của dữ liệu được địnhnghĩa bởi chỉ mục index mà ta chuyển tiếp vào nó.ta có thể làm vài thứ với 1 đối tượngNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 85
  • 86. Phonegap cho người mới họcJavaScript object với các thuộc tính này tương ứng với các tên cột database từ câu lệnhselectdo vậy để viết lại hàm querySuccess() từ ví dụ trên, ta sẽ sử dụng như sau :function querySuccess(tx, results) {//first get the number of rows in the result setvar len = results.rows.length;for (var i=0;i<len;i++){alert(“Row = “ + i + “ Firstname = “ + results.rows.item(i).firstname + “Lastname = “ + results.rows.item(i).lastname); Với firstname và lastname là tên 2 cột trong database}}Ví dụ trước sử dụng 1 vòng lặp for để lặp thông qua các tập bảng ghi.vòng lặp for là 1 khởitạo tốt ở đây bởi vì ta không biết có bao nhiều lần, ta phải lặp thông qua 1 tập bản ghi, bởi vìmỗ tập bản ghi có 1 chiều dài khác nhau, phụ thuộc vào câu truy vấn và dữ liệu được lưutrữĐể lập thông qua 1 tập bản ghi, ta phải biết độ dài của tập bản ghi này (do đó ta sử dụngresults.rows.length ).khi ta có nó, ta có thể bắt đầu ở bản ghi đầu tiên được nhận về, vàxử lý từng dòng bằng cách sử dụng results.row.item(i).field_name , tại đây field_nametương ứng với tên 1 trường field trong database6.5.Điều chỉnh lỗiNếu có 1 lỗi xảy ra, thì phonegap sẽ văng ra 1 đối tượng SQLError object, nó chứa 2 thuộctính sau :  code – là 1 trong các mã lỗi đã được định nghĩa từ trước  message – đây là 1 thông tin mô tả về lỗiNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 86
  • 87. Phonegap cho người mới họccác mã lỗi gồm có các loại 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_ERRDối tượng SQLError được định nghĩa 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; };Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 87
  • 88. Phonegap cho người mới họcLỗi xảy ra trong database API đồng bộ được báo cáo bằng cách sử dụng các ngoại 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; };Các mã lỗi được liệt kê như bảng sau :Constant Code SituationUNKNOWN_ERR 0 giao dịch transaction thất bại vì những lí do không liển quan tới database và không bị phủ bởi bất cứ mã code lỗi nàoDATABASE_ERR 1 Câu lệnh thất bại vì những lí do về cơ sở dữ liệu và không được phủ bởi bất cứ mã lỗi nào khácVERSION_ERR 2 thao tác thực thi thất bại bởi vì phiên bản database hiện tại không thích hợp.ví dụ, 1 câu lệnh tìm thấy phiên bản database thực tế không tương ứng với phiên bản mong đợi của đối tượng Database or DatabaseSync hay phương thức the Database.changeVersion() or DatabaseSync.changeV ersion() không được chuyển tiếp 1 phiên bản tương ứng với phiên bản database hiện tạiTOO_LARGE_ERR 3 câu lệnh thất bại bởi vì dữ liệu được trả về từ database quá lớn.sử dụng câu lệnh với "LIMIT" có thể sẽ hữu dụngNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 88
  • 89. Phonegap cho người mới học cho việc giảm bớt kích thước của tập kết quảQUOTA_ERR 4 câu lệnh thất bại bởi vì không có đủ dung lượng lưu trữ hay định mức lưu trữ bị trải ra và người dùng không chịu cho thêm dung lượng cho databaseSYNTAX_ERR 5 câu lệnh thất bại bởi vì 1 lỗi thuộc về ngữ pháp hay số các tham số không tương ứng với số các điểm đặt dấu ? trong câu lệnh hay câu lệnh cố thử sử dụng 1 cấu trúc không được cho phép như BEGIN, COMMIT, or ROLLBACK, hay câu lệnh có thử sử dụng 1 thao tác mà có thể chỉnh sửa tới database nhưng trong khi giao dịch transaction lại là read-onlyCONSTRAINT_ER 6 1 câu lệnh INSERT, UPDATE, or REPLACE thất bại vì 1R lỗi ràng buộc.ví dụ, bởi vi 1 dòng đang được insert và giá trị đang thêm vào trùng với khóa chính của 1 dòng đã tồn tạiTIMEOUT_ERR 7 1 khóa cho giao dịch transaction không nhận được trong thời gian hợp lệ6.6.Ví dụ về cách xây dựng 1 database đơn giản :<!DOCTYPE html><html><head><title>Database 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 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);Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 89
  • 90. Phonegap cho người mới học}// Query the success callback//function querySuccess(tx, results) {//first get the number of rows in the result setvar 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);}function onDeviceReady() {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>Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 90
  • 91. Phonegap cho người mới họcVII.Files7.1.Hệ thống FILESYSTEMSBất chấp nhà sản xuất hay hệ điều hành, mọi smartphone hay thiết bị cần phải có 1 hệthống filesystem và Phonegap API cung cấp cho ta 1 vài cách để truy cập tới hệ thốngfilesystem nàyVào thời điểm hiện tại, khả năng truy cập này còn khá nhiều hạn chế.ví dụ, rất khó (hay cólẽ là không thể ) để nhảy ra ngoài hộp cát sandbox mà ứng dụng bị chứa ở bên trong.tuynhiên, ta giả định rằng ta không ở đây để học về cách bẻ khóa điện thoại ( ví dụ như bẻkhóa để cho điện thoại có khả năng hỗ trợ bộ nhớ lên tới 16 GB )Những gì chương này tập trung là cách để truy cập vào hệ thống filesystem vì vậy mà ta cóthể đọc 1 file và ghi 1 vài dữ liệu vào file đóĐối tượng PhoneGap‟s FileSystem object miêu tả thông tin về hệ thống filesystem, và nó có2 thuộc tính sau :  Name – đây là tên của hệ thống filesystem (DOMString)  Root – đây là thư mục gốc của hệ thống filesystem (DirectoryEntry)Tên của hệ thống filesystem phải là độc nhất trong danh sách các hệ thống file được lộra.thuộc tính root chứa 1 đối tượng DirectoryEntry object – diễn tả thư mục gốc của hệthống filesystemCác nền tảng hỗ trợ :  Android  BlackBerry WebWorks (OS 5.0 and higher)  iOS  Windows Phone 7 ( Mango )Đối tượng này được trả về trong hàm success callback của phương thứcrequestFileSystem().theo ví dụ sau :window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess,onFail);Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 91
  • 92. Phonegap cho người mới họcfunction onSuccess(fileSystem){alert(fileSystem. name);alert(fileSystem. root.name);}function onFail(event){alert(event. target.error.code);}Thuộc tính root chứa 1 đối tượng DirectoryEntry7.2.Tìm hiểu về các thư mục dẫn DIRECTORIES và các filesCó 2 loại phần tử được tìm thấy trong filesystems : đó là thư mục dẫn directories và cácfiles.các thư mục dẫn Directories đươc diễn tả bởi các đối tượng DirectoryEntry objects vàcác files được biểu diễn bởi đối tượng FileEntry objectsở phần này ta học về các phần sau :  Cách sử dụng đối tượng DirectoryEntry object  Cách sử dụng FileEntry object  Cách sử dụng các đánh dấu flags  Cách sử dụng LocalFileSystem7.2.1.Cách sử dụng đối tượng DirectoryEntry ObjectĐối tượng này miêu tả 1 thư mục dẫn directory trên 1 hệ thống filesystem.và nó có cácthuộc tính sau :  isFile – luôn luôn là false (boolean)  isDirectory – luôn luôn là true (boolean)  name – đây là tên của DirectoryEntry không bao gồm đường dẫn dẫn tới nó (DOMString)Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 92
  • 93. Phonegap cho người mới học  fullPath – đây là đường dẫn tuyệt đối từ gốc root của đối tượng DirectoryEntry object (DOMString)Chú ý: thuộc tính sau đã được định nghĩa trong W3C, nhưng nó không được hỗ trợbởi Cordova  filesystem – là hệ thống filesystem mà nó chứa đối tượng DirectoryEntry ở trong nó (FileSystem)hơn thế, đối tượng DirectoryEntry còn hỗ trợ các phương thức sau :  getMetadata : tìm kiếm thông tin metadata về 1 thư mục dẫn directory  setMetadata : thiết lập thông tin metadata trên 1 thư mục dẫn directory  moveTo : chuyển 1 thư mục dẫn directory tới 1 vị trí khác trên hệ thống filesystem  copyTo : sao chép 1 thư mục dẫn tới 1 vị trí khác trên hệ thống filesystem  toURI : trả về 1 URL mà có thể dùng để xác định vị trí 1 thư mục dẫn  remove : xóa 1 thư mục dẫn.và thư mục dẫn này phải trống rỗng  getParent : tìm kiếm thư mục dẫn cha  createReader : tạo ra 1 đối tượng DirectoryReader mới mà có thể đọc các thực thể từ 1 thư mục dẫn  getDirectory : tạo ra hay tìm kiếm 1 thư mục dẫn  getFile : tạo ra hay tìm kiếm 1 file  removeRecursively : xóa 1 thư mục dẫn và tất cả phần tử chứa trong nónền tảng hỗ trợ :  Android  BlackBerry WebWorks (OS 5.0 and higher)  iOS  Windows Phone 7 ( Mango )7.2.2.getMetadataphương thức sử dụng để tìm kiếm thông tin metadata về 1 thư mục dẫn directory.nó có 2tham số là 2 hàm callback :  successCallback - đây là 1 hàm callback được gọi với 1 Metadata object (Function)Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 93
  • 94. Phonegap cho người mới học  errorCallback – đây là 1 hàm callback được gọi nếu có 1 lỗi xảy ra trong quá trình lấy về đối tượng 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 entryentry.getMetadata(onSuccess, onFail);7.2.3.setMetadataphương thức thiết lập thông tin metadata trên 1 thư mục dẫn directory, hiện tại chỉ hoạtđộng trên iOScác tham số truyền vào :  successCallback – 1 hàm callback được gọi khi thông tin metadata được thiết lập thành công (Function)  errorCallback – 1 hàm callback được gọi khi thông tin metadata không được thiết lập thành công (Function)  metadataObject – 1 đối tượng mà chứa các keys và values của 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 metadataentry.setMetadata(success, fail, { "com.apple.MobileBackup": 1});Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 94
  • 95. {„key‟ : value}Phonegap cho người mới họcChú ý : trong iOS thì chỉ thuộc tính mở rộng "com.apple.MobileBackup" được hỗtrợ.thiết lập giá trị là 1 để không bật tính năng file được backup lên iCloud.thiết lập là 0 đểbật tính năng file được backup lên iCloud7.2.4.moveTophương thức này được sử dụng để chuyển 1 thư mục dẫn directory tới 1 vị trí khác trên hệthống filesystem.sẽ xảy ra lỗi khi ta cố thực hiện các thao tác sau :  di chuyển 1 thư mục dẫn bên trong thư mục cha của nó với 1 tên là khác với tên hiện tại của nó thì không được cho phép  di chuyển 1 thư mục dẫn bên trong chính nó hay bên trong bất cứ cấp con nào của nó  di chuyển 1 thư mục dẫn tới 1 path mà đã được sử dụng bởi 1 file  di chuyển thư mục dẫn tới 1 path mà đã được sử dụng bởi 1 thư mục dẫn rỗngcác tham số dành cho phương thức này :  parent – đây là thư mục cha để di chuyển thư mục dẫn này (DirectoryEntry)  newName – đây là 1 tên mới của thư mục dẫn.nếu tên này không được định nghĩa thì nó mặc định là tên hiện tại (DOMString)  successCallback - là 1 hàm callback mà được gọi với đối tượng DirectoryEntry object của thư mục dẫn mới (Function)  errorCallback - là 1 hàm callback mà được gọi nếu có 1 lỗi xảy ra khi cố gắng di chuyển thư mục dẫn, hàm này được gọi với 1 đối tượng FileError object (Function).Ví dụ :function success(entry) {alert(“New Path: “ + entry.fullPath);}function fail(error) {alert(error.code);}function moveDirectory(entry) {Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 95
  • 96. Phonegap cho người mới họcvar parent = document.getElementById(„parent‟).value,newName = document.getElementById(„newName‟).value,parentEntry = new DirectoryEntry({fullPath: parent});// move the directory to a new directory and rename itentry.moveTo( parentEntry, newName, success, fail);}7.2.5.copyTophương thức này được sử dụng để sao chép 1 thư mục dẫn tới 1 vị trí khác trên hệ thốngfilesystem.bất kì thao tác nào sau đây cũng gây ra lỗi :  nếu ta cố gắng sao chép 1 thư mục dẫn vào bên trong chính nó ở bất cứ cấp nào  nếu ta cố gắng sao chép 1 thư mục dẫn vào bên trong thư mục cha của nó với 1 tên mà khác với tên hiện tại thì không được cho phépChú ý: sao chép thư mục luôn luôn là đệ qui và só sẽ thực hiện sao chép toàn bộnội dung có trong thư mụccác tham số cho phương thức này :  parent – đây là thư mục cha mà thực hiện sao chép thư mục dẫn (DirectoryEntry)  newName – là tên mới của thư mục dẫn.nếu nó không được định nghĩa thì mặc định nó là tên hiện tại (DOMString)  successCallback - là 1 hàm callback mà được gọi với đối tượng DirectoryEntry object của thư mục dẫn mới (Function)  errorCallback - là 1 hàm callback mà được gọi nếu có 1 lỗi xảy ra khi cố gắng di chuyển thư mục dẫn, hàm này được gọi với 1 đối tượng FileError object (Function).Ví dụ :function success(entry) {alert(“New Path: “ + entry.fullPath);}function fail(error) {Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 96
  • 97. Phonegap cho người mới họcalert(error.code);}function copyDirectory(entry) {var parent = document.getElementById(„parent‟).value,newName = document.getElementById(„newName‟).value,parentEntry = new DirectoryEntry({fullPath: parent});// copy the directory to a new directory and rename itentry.copyTo( parentEntry, newName, success, fail);}7.2.6.toURIphương thức này dùng để trả về 1 URL mà có thể dùng để xác định vị trí 1 thư mục dẫnví dụ :// Get the URI for this directoryvar uri = entry.toURI();alert(uri);7.2.7.removephương thức này dùng để xóa 1 thư mục dẫn.và thư mục dẫn này phải trống rỗng1 trong các thao tác sau sẽ gây lỗi :  nếu ta cố thử xóa 1 thư mục dẫn mà nó không rỗng  Nếu ta cố thử xóa thư mục gốc root của 1 hệ thống filesystemCác tham số dành cho phương thức này :  successCallback – đây là 1 hàm callback mà được gọi sau khi thư mục dẫn được xóa thành công.nó được gọi với không chứa tham số nào (Function)  errorCallback - đây là 1 hàm callback mà được gọi nếu 1 lỗi xảy ra khi ta cố xóa 1 thư mục dẫn.đươc gói với 1 đối tượng FileError object. (Function)ví dụ :Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 97
  • 98. Phonegap cho người mới họcfunction success(entry) {alert(“Removal succeeded”);}function fail(error) {alert(„Error removing directory: „ + error.code);}// remove this directoryentry.remove(success, fail);7.2.8.getParentphương thức này được sử dụng để tìm kiếm thư mục dẫn cha mà đang chứa thư mục dẫnhiện tại.phương thức này gồm 2 tham số :  successCallback - đây là 1 hàm callback mà được gọi với đối tượng DirectoryEntry object cha của thư mục dẫn này  errorCallback - đây là 1 hàm callback mà được gọi khi có lỗi xảy ra và được gọi với đối tượng FileError objectví dụ :function success(parent) {alert(“Parent: “ + parent.name);}function fail(error) {alert(„Failed to get parent: „ + error.code);}// Get the parent DirectoryEntryentry.getParent(success, fail);7.2.9.createReaderphương này được sử dụng để tạo ra 1 đối tượng DirectoryReader mới mà có thể đọc cácthực thể từ 1 thư mục dẫnví dụ :// create a directory readervar directoryReader = entry.createReader();Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 98
  • 99. Phonegap cho người mới học7.2.10.getDirectoryphương này được sử dụng để tạo ra hay tìm kiếm 1 thư mục dẫn.sẽ có lỗi xảy ra nếu ta cốgắng thực hiện :  tạo ra 1 thư mục dẫn mà thư mục cha tức thời của nó vẫn chưa tồn tạicác tham số truyền vào phương thức này :  path – đây là 1 path chỉ tới thư mục dẫn để được tìm thấy hay được tạo ra.nó có thể là đường dẫn path tương đối hay tuyệt đối từ đối tượng DirectoryEntry. (DOMString) này  options – đây là các cấu hình dùng để định nghĩa thư mục dẫn được tạo ra nếu nó không tồn tại (Flags)  successCallback - đây là 1 hàm callback mà được gọi với đối tượng DirectoryEntry object (Function)  errorCallback - đây là 1 hàm callback mà được gọi khi có lỗi xảy ra và được gọi với đối tượng FileError object (Function)ví dụ :function success(parent) {alert(“Parent: “ + parent.name);}function fail(error) {alert(“Unable to create new directory: “ + error.code);}// Retrieve an existing directory, or create it if it does not already existentry.getDirectory(“sampleFiles”, {create: true, exclusive: false}, success, fail);7.2.11.getFilephương thức này được sử dụng để tạo ra hay tìm kiếm 1 file .nếu ta cố gắng tạo ra 1 file màthư mục cha của nó chưa tồn tại thì sẽ gây ra lỗicác tham số dành cho phương thức này :  path - đây là 1 path chỉ tới file dẫn để được tìm thấy hay được tạo ra.nó có thể là đường dẫn path tương đối hay tuyệt đối từ đối tượng DirectoryEntry. (DOMString)  options – đây là các cấu hình dùng để định nghĩa file được tạo ra nếu nó không tồn tại (Flags)Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 99
  • 100. Phonegap cho người mới học  successCallback - đây là 1 hàm callback mà được gọi với đối tượng FileEntry object (Function)  errorCallback - đây là 1 hàm callback mà được gọi khi có lỗi xảy ra và được gọi với đối tượng FileError object (Function)ví dụ :function success(parent) {alert(“Parent: “ + parent.name);}function fail(error) {alert(“Failed to retrieve file: “ + error.code);}// Retrieve an existing file, or create it if it does not existentry.getFile(“sample_data.txt”, {create: true, exclusive: false}, success, fail);7.2.12.removeRecursivelyphương thức này được sử dụng để xóa 1 thư mục dẫn và tất cả phần tử chứa trongnó.trong trường hợp lỗi ví dụ như ta cố xóa 1 thư mục dẫn mà có chứa 1 file không thể bịxóa thì 1 vài nội dung của thư mục dẫn có thể bị xóa.nếu ta cố gắng xóa thư mục gốc rootcủa filesystem thì cũng sẽ gây ra lỗicác tham số dành cho phương thức này :  successCallback – 1 hàm callback sẽ được gọi sau khi đối tượng DirectoryEntry được xóa, và được gọi với không tham số nào cả (Function)  errorCallback - đây là 1 hàm callback mà được gọi khi có lỗi xảy ra và được gọi với đối tượng FileError object (Function)ví dụ :function success(parent) {alert(“Delete succeeded!”);}function fail(error) {alert(“Failed tod elete directory or it‟s contents: “ + error.code);}// remove the directory and all it‟s contentsNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 100
  • 101. Phonegap cho người mới họcentry.removeRecursively(success, fail);7.3.metadatađối tượng này cung cấp thông tin về trạng thái của 1 file hay của 1 thư mục dẫnthuộc tính :  modificationTime – đây là thời điểm gần nhất mà file hay thư mục dẫn bị chỉnh sửa (Date)thông tin chi tiết :đối tượng Metadata object miêu tả thông tin về trạng thái của 1 file hay 1 thư mục dẫn.ta cóthể lấy về 1 thực thể của đối tượng Metadata object bằng cách gọi phương thứcgetMetadata của 1 đối tượng DirectoryEntry or FileEntry object.Nền tảng hỗ trợ :  Android  BlackBerry WebWorks (OS 5.0 and higher)  iOS  Windows Phone 7 ( Mango )Ví dụ :function win( metadata) { console.log("Last Modified: " + metadata.modificationTime);}// Request the metadata object for this entryentry.getMetadata(win, null);Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 101
  • 102. Phonegap cho người mới học7.4.FileError1 đối tượng FileError được thiết lập khi 1 lỗi xảy ra trong bất cứ phương thức File API nàoCác thuộc tính :  Code – là 1 mã code lỗi được định nghĩa trước liệt kê như ở dướiCác hằng 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_ERRThông tin mô tả :Đối tượng FileError object chỉ là 1 tham số duy nhất trong bất kì hàm File APIs errorcallbacks nào.các nhà phát triển phải đọc thuộc tính code để xác định dạng lỗi7.5.FlagsĐối tượng này được sử dụng để cung cấp các tham số cho phương thức getFile vàgetDirectory của đối tượng DirectoryEntry – các phương thức này dùng để tìm kiếm haytạo ra các files và thư mục 1 cách tương ứngCác thuộc tính :  Create – được sử dụng để xác định file hay thư mục có được tạo hay không nếu nó không tồn tại (boolean)Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 102
  • 103. Phonegap cho người mới học  Exclusive – được sử dụng kèm với việc tạo ra, nó sẽ gây ra lỗi trong việc tạo file or directory nếu đường dẫn path mục tiêu đã tồn tại (boolean)Các nền tảng hỗ trợ :  Android  BlackBerry WebWorks (OS 5.0 and higher)  iOS  Windows Phone 7 ( Mango )Ví dụ :// Get the data directory, creating it if it doesnt exist.dataDir = fileSystem.root.getDirectory("data", {create: true});// Create the lock file, if and only if it doesnt exist. { }lockFile = dataDir.getFile("lockfile.txt", create: true, exclusive: true );7.6.LocalFileSystemĐối tượng này cho biết 1 cách để lấy về thư mục gốc root của file systemsCác phương thức :  requestFileSystem – yêu cầu 1 filesystem (Function)  resolveLocalFileSystemURI – lấy về 1 đối tượng DirectoryEntry or FileEntry bằng cách sử dụng URI địa phương (Function)các hằng số :  LocalFileSystem.PERSISTENT – được sử dụng cho lưu trữ mà không bị xóa bỏ bởi tác nhân người dùng  LocalFileSystem.TEMPORARY – được sử dụng cho lưu trữ mà không đảm bảo tính bền vữngThông tin chi tiết :Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 103
  • 104. Phonegap cho người mới học  Các phương thức của đối tượng LocalFileSystem object được định nghĩa trên đối tượng window objectCác nền tảng hỗ trợ :  Android  BlackBerry WebWorks (OS 5.0 and higher)  iOS  Windows Phone 7 ( Mango )Ví dụ :function onSuccess(fileSystem) { console.log(fileSystem.name);}// request the persistent file systemwindow.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onSuccess, onError);window.resolveLocalFileSystemURI("file:///example.txt", onSuccess, onError);7.7.DirectoryReader1 đối tượng mà liệt kê các files và các thư mục dẫn trong 1 thư mụcCác phương thức :  readEntries – đọc các thực thể bên trong 1 thư mục dẫncác nền tảng hỗ trợ :  Android  BlackBerry WebWorks (OS 5.0 and higher)  iOS  Windows Phone 7 ( Mango )Các tham số cho phương thức này :  successCallback – là 1 hàm callback mà được chuyển tiếp 1 mảng của các đối tượng FileEntry và DirectoryEntry objects (Function)Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 104
  • 105. Phonegap cho người mới học  errorCallback - là 1 hàm callback mà được gọi nếu 1 lỗi xảy ra khi nhận về danh sách các thư mục liệt kê.được với 1 đối tượng FileError object. (Function)ví dụ :function success( entries) { var i; for (i=0; i< entries.length; i++) { console.log( entries[i].name); }}function fail(error) { alert("Failed to list directory contents: " + error.code);}// Get a directory readervar directoryReader = dirEntry.createReader();// Get a list of all the entries in the directorydirectoryReader.readEntries(success,fail);7.8.Cách sử dụng đối tượng FileEntry Objectđối tượng này biểu diễn 1 file trên 1 hệ thống filesystem.và nó có các thuộc tính sau :  isFile – luôn luôn là true (boolean)  isDirectory – luôn luôn là false (boolean)  name – đây là tên của đối tượng FileEntry object, không bao gồm đường dẫn chỉ tới nó (DOMString)  fullPath – đây là đường dẫn đầy đủ tuyệt đối chỉ từ gốc root của đối tượng FileEntry object (DOMString)các phương thức :  getMetadata – tìm kếm thông tin metadata về 1 fileNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 105
  • 106. Phonegap cho người mới học  setMetadata – thiết lập metadata trên 1 file  moveTo – di chuyển 1 file vào 1 vị trí khác trên hệ thống filesystem  copyTo – sao chép 1 file tới 1 vị trí khác trên hệ thống filesystem  toURL – trả về 1 URL mà có thể được sử dụng để xác định vị trí 1 file  remove – xóa 1 file  getParent – tìm kiếm thư mục cha  createWriter – tạo ra 1 đối tượng FileWriter object mà có thể được sử dụng để viết vào 1 file  file – tạo ra 1 đối tượng File object chứa các thuộc tính của filecác nền tảng hỗ trợ :  Android  BlackBerry WebWorks (OS 5.0 and higher)  iOS  Windows Phone 7 ( Mango )7.8.1.getMetadatađây là phương thức được sử dụng để tìm kiếm metadata về 1 file.nhớ rằng metadata củafile nằm tách biệt với data thật sự của nó và metadata có thể là các thông tin về thời điểmtạo file, kích thước của file hay hơn thếcác tham số của phương thức này chính là 2 hàm callback :  successCallback – 1 hàm callback được gọi với 1 đối tượng Metadata object  errorCallback – 1 hàm callback được gọi nếu có 1 lỗi xảy ra , nó được gọi với đối tượng FileError object.Ví dụ :function success(metadata) {alert(“Last Modified: “ + metadata.modificationTime);}function fail(error) {alert(error.code);}// Request the metadata object for this entryentry.getMetadata(success, fail);Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 106
  • 107. Phonegap cho người mới học7.8.2.moveTophương thức này được sử dụng để chuyển 1 file tới 1 vị trí khác trên hệ thống filesystem.sẽxảy ra lỗi khi ta cố thực hiện các thao tác sau :  cố thử di chuyển 1 file vào trong thư mục cha của nó với 1 tên khác với tên hiện tại  cố thử di chuyển 1 file vào path được dùng bởi 1 thư mục dẫn  cố thử di chuyển 1 file lên trên đầu của 1 file đã tồn tại mà không thực hiện xóa file đã tồn tại đó trước tiêncác tham số :  parent – tên thư mục cha mà dùng để di chuyển file (DirectoryEntry)  newName – tên mới của file.nếu không được thiết lập mặc định nó là tên hiện tại (DOMString)  successCallback – 1 hàm callback sẽ được gọi với đối tượng FileEntry object mới (Function)  errorCallback - 1 hàm callback được gọi nếu có 1 lỗi xảy ra , nó được gọi với đối tượng FileError object. (Function)ví dụ :function success(entry) {alert(“New Path: “ + entry.fullPath);}function fail(error) {alert(error.code);}function moveFile(entry) {var parent = document.getElementById(„parent‟).value,parentEntry = new DirectoryEntry({fullPath: parent});// move the file to a new directory and rename itentry.moveTo(parentEntry, “new_file.txt”, success, fail);}Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 107
  • 108. Phonegap cho người mới học7.8.3.copyTosao chép 1 file tới 1 vị trí khác trên hệ thống filesystem .sẽ xảy ra lỗi khi ta cố thực hiện cácthao tác sau :  sao chép 1 file vào bên trong thư mục cha của nó với tên khác với tên hiện tạicác tham số :  parent – thư mục cha mà dùng để sao chép file (DirectoryEntry)  newName - tên mới của file.nếu không được thiết lập mặc định nó là tên hiện tại (DOMString)  successCallback – 1 hàm callback sẽ được gọi với đối tượng FileEntry object mới (Function)  errorCallback - 1 hàm callback được gọi nếu có 1 lỗi xảy ra , nó được gọi với đối tượng FileError object. (Function)ví dụ :function success(entry) {alert(“New Path: “ + entry.fullPath);}function fail(error) {alert(error.code);}function copyFile(entry) {var parent = document.getElementById(„parent‟).value,parentEntry = new DirectoryEntry({fullPath: parent});// copy the file to a new directory and rename itentry.copyTo(parentEntry, “file.copy.txt”, success, fail);}Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 108
  • 109. Phonegap cho người mới học7.8.4.toURItrả về 1 URL mà có thể được sử dụng để xác định vị trí 1 fileví dụ :// Request the metadata object for this entryvar uri = entry.toURI();console.log(uri);7.8.5.removephương thức này được sử dụng để xóa 1 filecác tham số là 2 hàm callback :  successCallback – đây là 1 hàm callback được gọi nếu file được xóa thành công, nó được gọi không cùng với tham số nào  errorCallback - 1 hàm callback được gọi nếu có 1 lỗi xảy ra , nó được gọi với đối tượng FileError object. (Function)ví dụ :function success(entry) {alert(“Removal succeeded”);}function fail(error) {alert(„Error removing file: „ + error.code);}// remove the fileentry.remove(success, fail);7.8.6.getParenttìm kiếm thư mục cha DirectoryEntry đang chứa filecác tham số :  successCallback – 1 hàm callback được gọi với đối tượng cha DirectoryEntry của fileNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 109
  • 110. Phonegap cho người mới học  errorCallback - 1 hàm callback được gọi nếu có 1 lỗi xảy ra , nó được gọi với đối tượng FileError object. (Function)ví dụ :function success(parent) { console.log("Parent Name: " + parent.name);}function fail(error) { alert(error.code);}// Get the parent DirectoryEntryentry.getParent(success, fail);7.8.7.createWriterta có thể viết 1 file vào 1 thư mục dẫn bằng cách sử dụng phương thức createWriter.nó tạora 1 đối tượng FileWriter object được liên kết với file nàycác tham số :  successCallback – 1 hàm callback được gọi với 1 đối tượng FileWriter object (Function)  errorCallback - 1 hàm callback được gọi nếu có 1 lỗi xảy ra , nó được gọi với đối tượng FileError object. (Function)ví dụ :function success(writer) { writer.write("Some text to the file");}function fail(error) { alert(error.code);}// create a FileWriter to write to the fileentry.createWriter(success, fail);Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 110
  • 111. Phonegap cho người mới học7.8.8.filetrả về 1 đối tượng File object dùng để miêu tả trạng thái hiện tại của filecác tham số :  successCallback – 1 hàm callback được gọi với 1 đối tượng File object. (Function)  errorCallback - 1 hàm callback được gọi nếu có 1 lỗi xảy ra , nó được gọi với đối tượng FileError object. (Function)ví dụ :function success(file) { console.log("File size: " + file.size);}function fail(error) { alert("Unable to retrieve file properties: " + error.code);}// obtain properties of a fileentry.file(success, fail);7.9.Cách đọc các files - FileReaderta sử dụng đối tượng FileReader object để đọc 1 file.đối tượng FileReader object là 1 cáchđể đọc các files từ hệ thống filesystem của thiết bị.các files có thể được đọc giống như làcác kí tự text, hay dữ liệu chuỗi string dựa vào mã hóa Base64-encodedđối tượng này sẽ có các thuộc tính sau :  readyState – đây là 1 trong 3 trạng thái (EMPTY, LOADING, or DONE) mà tiến trình đọc có thể đang ở trạng thái như vậy  result – được sử dụng để lấy các nội dung của file mà ta đang đọc  error – được sử dụng cho 1 đối tượng có chứa lỗi  onloadstart – được gọi khi tiến trình đọc vừa bắt đầu  onload – được gọi khi tiến trình đọc đã hoàn thànhNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 111
  • 112. Phonegap cho người mới học  onabort – được gọi khi tiến trình đọc đột ngột bị ngưng lại ( ví dụ như bằng cách gọi phương thức abort() )  onerror – được gọi khi tiến trình đọc thất bại  onloadend – được gọi khi yêu cầu được hoàn thành ( có thể yêu cầu này thành công hoặc thất bại )  onprogress – được gọi trong khi đang đọc file, báo cáo về tiến trình xử lý (progess.loaded/progress.total). (Function)các phương thức :  abort : dừng lại việc đọc file  readAsDataURL: đọc file và trả về dữ liệu như dữ liệu URL mã hóa base64 encoded  readAsText : đọc các text filenhững người dùng đăng ký các event listners để nhận về các sự kiện loadstart, progress,load, loadend, error and abort eventscác nền tảng hỗ trợ :  Android  BlackBerry WebWorks (OS 5.0 and higher)  iOS  Windows Phone 7 ( Mango )7.9.1.readAsDataURLta có thể đọc 1 file và trả về dữ liệu như là dữ liệu được mã hóa Base64-encoded, phươngthức này thường dùng để đọc các ảnh images và các files nhị phân khác.Tham số truyền vào là file là đối tượng file object để đọcVí dụ :function win( file) { var reader = new FileReader(); reader.onloadend = function(evt) { console.log("read success"); console.log(evt.target.result);Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 112
  • 113. Phonegap cho người mới học }; reader.readAsDataURL( file);};var fail = function(evt) { console.log(error.code);};entry.file(win, fail);7.9.2.abortta có thể dừng việc đọc 1 file bằng cách sử dụng phương thức abort như ví dụ sau :function success( file) {var reader = new FileReader();reader.onloadend = function(event) {alert(“read success”);alert(event.target.result);};reader.readAsText( file);reader.abort();}function fail(error) {console.log(error.code);}entry.file(success, fail);Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 113
  • 114. Phonegap cho người mới học7.9.3.readAsTextcác tham số :  File – là đối tượng file object để đọc  Encoding – phương thức giải mã sử dụng giải mã nội dung của file.mặc định là UTF8ta cũng có thể đọc 1 file và trả về dạng text, đây là phương thức tốt nhất cho việc đọc cácTXT files như ví dụ sau :function success(file) {var reader = new FileReader();reader.onloadend = function(evt) {alert(“read success”);alert(evt.target.result);};reader.readAsText(file);}var fail = function(event) {console.log(error.code);}entry.file(sucess, fail);ví dụ đầy đủ :<!DOCTYPE html><html> <head> <title>FileReader Example</title> <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script> <script type="text/javascript" charset="utf-8"> // Wait for Cordova to load // function onLoad() { document.addEventListener("deviceready", onDeviceReady, false); }Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 114
  • 115. Phonegap cho người mới học // Cordova is ready // function onDeviceReady() { 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) { var reader = new FileReader(); reader.onloadend = function(evt) { console.log("Read as data URL"); console.log(evt.target.result); }; reader.readAsDataURL(file); } function readAsText(file) { var reader = new FileReader(); reader.onloadend = function(evt) { console.log("Read as text"); console.log(evt.target.result); }; reader.readAsText(file); } function fail(evt) { console.log(evt.target.error.code); }Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 115
  • 116. Phonegap cho người mới học </script> </head> <body> <h1>Example</h1> <p>Read File</p> </body></html>7.10.Cách đọc các files – FileWriterTa có thể sử dụng đối tượng FileWriter object để ghi lên các files. 1 đối tượng FileWriterobject sẽ tạo ra 1 file và khi được tạo, file này có thể được sử dụng để ghi lại nhiều lần vàonhiều thời điểm.Đối tượng FileWriter object có các thuộc tính position và length, do vậy ta có thể tìm kiếmvà ghi tới bất cứ vị trí nào trên file. Theo mặc định, thì đối tượng FileWriter object sẽ ghi lêntại vị trí bắt đầu của file, và sẽ ghi đè lên dữ liệu đã tồn tại. ta có thể thiết lập append (khôngbắt buộc – có giá trị kiểu Boolean) thành true để khởi tạo việc bắt đầu ghi vào vị trí cuối củafile (không ghi đè lên vị trí dữ liệu đã tồn tại)FileWriter object có các thuộc tính sau:  readyState – đây là 1 trong 3 trạng thái mà reader có thể là (INIT, WRITING, hay DONE)  fileName – đây là tên cùa file sẽ được ghi (DOMString)  length – là độ dài của file sẽ được ghi (long)  position – đây là vị trí hiện tại của con trỏ file (long)  error – đây là 1 đối tượng object chứa đựng lỗi nếu có (FileError)  onwritestart – được gọi khi tiến trình thực hiện ghi bắt đầu (Function)  onwrite – được gọi khi yêu cầu hoàn toàn được hoàn thành (Function)  onprogress – được trong khi vẫn thực hiện ghi file, báo cáo lại tiến trình thực hiện (progess.loaded/progress.total). (Function)  onabort – được gọi khi tiến trình thực hiện ghi bị ngừng lại (Function)  onerror – được gọi khi tiến trình thực hiện ghi thất bại (Function)  onwriteend – được gọi khi yêu cầu được hoàn thành (có thể thành công hay thất bại) (Function)đối tượng FileWriter object có các phương thức sau:Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 116
  • 117. Phonegap cho người mới học  abort – dùng để ngừng tiến trình thực hiện ghi  seek – dùng để di chuyển con trỏ file tới vị trí nào đó  truncate – dùng để rút ngắn file lại theo 1 chiều dài nào đó  write – dùng để ghi dữ liệu vào file với UTF-8 encoding.Các nền tảng hỗ trợ:  Android  BlackBerry WebWorks (OS 5.0 and higher)  iOS  Windows Phone 7 ( Mango )Ví dụ:Seekfunction win(writer) { // fast forwards file pointer to end of file writer.seek(writer.length);};var fail = function(evt) { console.log(error.code);};entry.createWriter(win, fail);Truncatefunction win(writer) { writer.truncate(10);};var fail = function(evt) { console.log(error.code);};entry.createWriter(win, fail);WriteNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 117
  • 118. Phonegap cho người mới họcfunction win(writer) { writer.onwrite = function(evt) { console.log("write success"); }; writer.write("some sample text");};var fail = function(evt) { console.log(error.code);};entry.createWriter(win, fail);Appendfunction win(writer) { writer.onwrite = function(evt) { console.log("write success"); }; writer.seek(writer.length); writer.write("appended text");};var fail = function(evt) { console.log(error.code);};entry.createWriter(win, fail);Abortfunction win(writer) { writer.onwrite = function(evt) { console.log("write success"); }; writer.write("some sample text"); writer.abort();};var fail = function(evt) { console.log(error.code);};entry.createWriter(win, fail);Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 118
  • 119. Phonegap cho người mới họcví dụ đầy đủ:<!DOCTYPE html><html> <head> <title>FileWriter Example</title> <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script> <script type="text/javascript" charset="utf-8"> // Wait for Cordova to load // document.addEventListener("deviceready", onDeviceReady, false); // Cordova is ready // function onDeviceReady() { 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"); } }; }; writer.write("some sample text"); } function fail(error) { console.log(error.code); }Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 119
  • 120. Phonegap cho người mới học </script> </head> <body> <h1>Example</h1> <p>Write File</p> </body></html>7.11.Cách truyền dẫn files – FileTransferĐối tượng FileTransfer object mang lại cho ta 1 cách để tải files lên 1 server từ xa bằngcách sử dụng 1 yêu cầu HTTP multi-part POST request. Cả 2 giao thức HTTP và HTTPSđều được hỗ trợ. Các tham số tùy chọn có thể được định nghĩa bằng cách chuyển tiếp 1 đốitượng FileUploadOptions object tới phương thức upload. Khi upload thành công, thì hàmsuccess callback sẽ được gọi với 1 tham số được truyền vào là đối tượngFileUploadResult object. Nếu có 1 lỗi xảy ra, thì hàm error callback sẽ được gọi với 1 thamsố được truyền vào là đối tượng FileTransferError object. Hơn thế, ta cũng có thể tải về 1file từ server và lưu trữ nó trên thiết bị (chỉ hỗ trợ iOS và Android)Các nền tảng hỗ trợ:  Android  BlackBerry WebWorks (OS 5.0 and higher)  iOS  Windows Phone 7 ( Mango )7.11.1.uploadvar ft = new FileTransfer();ft.upload(fileURI, serverURL, onUploadSuccess, onUploadError,fileUploadOptions);với :  fileURI – là đường dẫn đầy đủ của file trên thiết bị  serverURL – là URL của server ma file sẽ được tải lên (phải được mã hóa bằng cách sử dụng encodeURI())Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 120
  • 121. Phonegap cho người mới học  onUploadSuccess – là 1 hàm callback sẽ được gọi với 1 tham số truyền vào là 1 đối tượng Metadata object. (Function)  onUploadError – là 1 hàm callback sẽ được gọi khi 1 lỗi xảy ra khi nhận về đối tượng Metadata, được truyền vào tham số là 1 đối tượng FileError object. (Function)  fileUploadOptions – là 1 đối tượng định nghĩa các thiết lập cấu hình : o chunkedMode: có kiểu Boolean dùng để điều khiển có hay không sự truyền dẫn của yêu cầu HTTP request được thực thi mà không cần bộ nhớ đệm. nếu giá trị này không được thiết lập, thì nó mặc định là true. (Boolean) o fileKey: định nghĩa tên của phần tử form mà file sẽ được tải lên server. Nếu không được thiết lập thì nó mặc định là file (DOMString) o fileName: tên file mà được tải lên server. Nếu không được thiết lập, nó sẽ mặc định tên là image.jpg. (DOMString) o mimeType: là kiểu MIME type của dữ liệu mà ta đang tải lên. Nếu không được thiết lập, nó mặc định sẽ là image/jpeg. (DOMString) o params: là 1 tập tùy chọn các cặp key/value mà được nhúng vào trong phần header của yêu cầu HTTP request (Object) o headers: 1 tập ánh xạ của header name => header value, dùng để định nghĩa nhiều giá trị cho phần header, sử dụng 1 mảng array của các giá trị (Object)hàm onUploadSuccess được chuyển tiếp vào 1 đối tượng result object – đối tượng này cóthể được sử dụng để xác định trạng thái của tiến trình upload. Đối tượng result object cócác thuộc tính sau:  bytesSent: số bytes đã được gửi lên server  responseCode: mã phản hồi HTTP response được trả về từ phía server  response: phản hồi HTTP response được trả về từ phía serverChú ý: iOS không hỗ trợ các thuộc tính responseCode và bytesSent trong đối tượngresult objectví dụ:// !! Assumes variable fileURI contains a valid URI to a text file on the devicevar win = function(r) { console.log("Code = " + r.responseCode); console.log("Response = " + r.response); console.log("Sent = " + r.bytesSent);}Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 121
  • 122. Phonegap cho người mới họcvar 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;var ft = new FileTransfer();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> <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script> <script type="text/javascript" charset="utf-8"> // Wait for Cordova to load // document.addEventListener("deviceready", onDeviceReady, false); // Cordova is ready // function onDeviceReady() { // 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 }Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 122
  • 123. Phonegap cho người mới học ); } function uploadPhoto(imageURI) { var options = new FileUploadOptions(); options.fileKey="file"; options.fileName=imageURI.substr(imageURI.lastIndexOf(/)+1); options.mimeType="image/jpeg"; var params = {}; params.value1 = "test"; params.value2 = "param"; options.params = params; var ft = new FileTransfer(); ft.upload(imageURI, encodeURI("http://some.server.com/upload.php"), win,fail, options); } function win(r) { console.log("Code = " + r.responseCode); console.log("Response = " + r.response); console.log("Sent = " + r.bytesSent); } function fail(error) { alert("An error has occurred: Code = " + error.code); console.log("upload error source " + error.source); console.log("upload error target " + error.target); } </script></head><body> <h1>Example</h1> <p>Upload File</p></body></html>Cách thiết lập Upload Headers (chỉ hỗ trợ iOS và Android)function win(r) { console.log("Code = " + r.responseCode); console.log("Response = " + r.response);Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 123
  • 124. Phonegap cho người mới học console.log("Sent = " + r.bytesSent);}function fail(error) { alert("An error has occurred: Code = " + error.code); console.log("upload error source " + error.source); console.log("upload error target " + error.target);}var uri = encodeURI("http://some.server.com/upload.php");var options = new FileUploadOptions();options.fileKey="file";options.fileName=fileURI.substr(fileURI.lastIndexOf(/)+1);options.mimeType="text/plain";var params = {};params.headers={headerParam:headerValue};options.params = params;var ft = new FileTransfer();ft.upload(fileURI, uri, win, fail, options);Chú ý: khi upload lên 1 Nginx server thì ta phải chắc chắn rằng ta đã thiết lập cấuhình chunkedMode thành false7.11.2.downloadvar ft = new FileTransfer();ft.download(source, target, successCallback, errorCallback);với :  source – là URL của server mà ta tải file từ đó về thiết bị (URL này phải được mã hóa bằng cách sử dụng encodeURI())  target – đường dẫn đầy đủ của file trên thiết bị  successCallback – 1 hàm callback được gọi với 1 tham số được truyền vào là đối tượng FileEntry object. (Function)  errorCallback – 1 hàm callback được gọi khi có 1 lỗi xảy ra trong quá trình nhận về Metadata. Được truyền vào tham số là 1 đối tượng FileError object. (Function)Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 124
  • 125. Phonegap cho người mới họcví dụ:// !! Assumes filePath is a valid path on the devicevar 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.abortDùng để hủy bỏ 1 tiến trình truyền dẫn file đang được thực hiện. hàm onerror callback sẽđược gọi với 1 tham số truyền vào là đối tượng FileTransferError objectCác nền tảng hỗ trợ:  Android  iOS7.11.4.onprogressĐược gọi với 1 sự kiện ProgressEvent bất cứ khi nào 1 khúc dữ liệu mới được truyền đi.Các nền tảng hỗ trợ:  Android  iOSNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 125
  • 126. Phonegap cho người mới họcví dụ:fileTransfer.onprogress = function(progressEvent) { if (progressEvent.lengthComputable) { loadingStatus.setPercentage(progressEvent.loaded / progressEvent.total); } else { loadingStatus.increment(); }};fileTransfer.download(...); // or fileTransfer.upload(...);7.12.FileTransferError1 đối tượng FileTransferError object được trả về thông ưua 1 hàm error callback khi có 1 lỗixảy ra trong tiến trình tải lên hay tải xuống 1 fileCác thuộc tính:  code – 1 trong các mã lỗi được định nghĩa trước (Number)  source – URL dẫn tới nguồn (String)  target – URL dẫn tới đích (String)  http_status – mã trạng thái HTTP status code. Thuộc tính này sẽ chỉ xuất hiện khi 1 mã phản hồi được nhận về từ kết nối HTTP connection. (Number)các hằng số:  FileTransferError.FILE_NOT_FOUND_ERR  FileTransferError.INVALID_URL_ERR  FileTransferError.CONNECTION_ERR  FileTransferError.ABORT_ERRNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 126
  • 127. Phonegap cho người mới họcVIII.CameraPhoneGap Camera API cung cấp cho 1 ứng dụng khả năng làm việc với các images haykhả năng chụp ảnh từ camera hay nhận file ảnh từ kho ảnh trong thiết bị.khi lấy về 1 ảnhimage thì API có thể trả về 1 URL chỉ tới image file trên thiết bị hay chuỗi base64-encodedstring dùng để biểu diễn nội dung bên trong 1 imageAPI cung cấp 1 phương thức đơn là navigator.camera.getPicture – dùng để lấy về 1 ảnhimage và 1 đối tượng cameraOptions object được sử dụng để định nghĩa các tham sốxung quanh việc ảnh image được nhận về như thế nào, cách nó được định dạng như thếnào , …Các ứng dụng Apps cũng có thể sử dụng PhoneGap Capture API để chụp ảnh bằng cáchsử dụng camera. Camera và Capture APIs là khác nhau  do vậy nó sẽ ảnh hưởng tớiđánh giá của ta trước khi lựa chọn cái nào là cần thiết cho ứng dụng8.1.Cách truy cập 1 ảnh PictureĐể nhận về 1 ảnh picture từ thiết bị thì 1 ứng dụng nên thực thi các chức năng sau :navigator.camera.getPicture( onCameraSuccess, onCameraError,cameraOptions );giống như các thư viện PhoneGap APIs khác thì lời gọi getPicture đòi hỏi rằng ta phảichuyển vào 2 hàm functions mà được thực thi trên lời gọi success và failure.trong trườnghợp này, đây là các hàm onCameraSuccess và onCameraErrorfunctions.hàmonCameraSuccess function được thực thi khi 1 ảnh image được nhận về ( ta sẽ làm rõhơn về nơi mà images được chứa ở đó và cách mà ta cấu hình API trong chương “cáchthiết lập các cấu hình trong Camera” ở phần sau ).hàm onCameraError function đượcthực thi khi người dùng hủy bỏ tiến trình nhận về 1 ảnh image ngay khi bắt đầu hay khi 1 lỗixảy ra trong tiến trìnhví dụ 11-1 chỉ ra hàm Camera API đang được sử dụng với các cấu hình mặc định.theo nhưtài liệu trên trang chủ của Phonegap thì tham số cameraOptions là không bắt buộc nhưngnó sẽ là true hoặc false trên 1 vài thiết bị.<!DOCTYPE html><html><head><title>Example 11-1</title><meta http-equiv="Content-type" content="text/html;charset=utf-8">Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 127
  • 128. Phonegap cho người mới học<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><script type="text/javascript" charset="utf-8">function onBodyLoad() {document.addEventListener("deviceready", onDeviceReady,false);}function onDeviceReady() {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>Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 128
  • 129. Phonegap cho người mới học</html>Trong ứng dụng này, đây chỉ là 1 trang page đơn giản với 1 nút button mà người dùng cóthể nhấn vào để chụp 1 bức ảnh bằng camera.khi nút button được nhấn vào thì hàm takePhotofunction được thực thi – nó đơn giản gọi phương thức getPicture và chuyển tiếpvào trong đó 2 hàm onCameraSuccess và onCameraErrorfunctionsTrong ví dụ này thì ta chuyển tiếp vào 1 đối tượng cameraOptions object rỗng do đóphương thức getPicture sẽ chỉ sử dụng các cấu hình mặc định để lấy image từ camera vàtrả về 1 file URI chỉ tới nơi mà image được lưu giữ sau khi nó được chụp.khi 1 image đượclấy về từ camera thì hàm onCameraSuccess function được gọi và chuyển tiếp vào URIchỉ tới image file mà vừa mới được tạo ra.trong ứng dụng, ta hầu như sẽ làm 1 vài điều gìđó với image URI, nhưng trong trường hợp này thì tất cả những gì ứng dụng làm là hiện thịra 1 thông báo và chỉ ra file URI được chuyển tiếp vào hàm functionHình 11-1 chỉ ra ví dụ 1-11 chạy trên 1 Apple iPhoneNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 129
  • 130. Phonegap cho người mới họcKhi ta ấn vào nút Take a Picture thì sẽ xuất hiện 1 nháy chớp màn hình và sau đó ứngdụng camera có sẵn trong thiết bị sẽ được mở và cho phép ta chụp 1 bức ảnh.sự chớpnháy này có thể sẽ khá lâu, do vậy ứng dụng của ta cần hiện thị 1 màn hình “please wait”screen sau khi gọi ra API này.khi 1 bức hính được chụp thì iOS sẽ hiện thị 1 màn hình xemtrước như trong hình 11-2.tại đây ta có thể chụp lại bức hình hay ấn vào nút button để trả lạiứng dụng PhonegapNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 130
  • 131. Phonegap cho người mới họcChú ý trên hình là không có cách nào để hủy bỏ tiến trình xử lý.nếu người dùng khởi tạo 1tiến trình chụp ảnh trong ứng dụng phonegap đang chạy trên IOS thì không có cách nào đểhủy bỏ tiến trình này mà không phải chụp 1 bức hìnhTrên thiết bị IOS, sau khi đã chụp xong hình thì ứng dụng sẽ hiện thị ra 1 thông báo hiện thịra file URI cho image file vừa mới được tạo ra như hình 11-3Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 131
  • 132. Phonegap cho người mới học1 trong những thứ mà ta phải chú ý về phiên bản IOS của ứng dụng là file URI trả về ứngdụng một tham chiếu tới 1 vị trí lưu tạm.nếu ta nhìn vào hình 11-3, ta sẽ nhìn thấy file URLnhư sau : file://localhost/var/mobile/Applications/169DF9CB-25D0-4EC8-85B2-380A6342E08D/tmp/photo_001.jpgTrong file URI này thì file://localhost/var/mobile/Applications/location là vùng hệ thống filesystem được cấp phát cho dữ liệu của ứng dụng. 169DF9CB-25D0-4EC8-85B2-380A6342E08D là 1 đánh dấu duy nhất được kết hợp với mỗi ứng dụng IOS.thư mục tmplà vị trí lưu trữ tạm và khi ứng dụng đóng thì vị trí lưu trữ tạm này sẽ bị xóa và ta sẽ mất truyNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 132
  • 133. Phonegap cho người mới họccập vào image file.nếu ứng dụng của ta cần truy cập vào image file sau đó thì nó sẽ cần tạora 1 bản copy của image file trước khi ứng dụng đóngKhi chạy ví dụ 1-11 trên thiết bị Android hay BlackBerry thì ta sẽ có vấn đề.trong bài test thìtrên Android thì nó chụp 1 bức hình nhưng sau đó làm treo ứng dụng phonegap và trả vềthông tin về bức ảnh cho ứng dụng.trên BlackBerry thì nó không được chụp ảnh và khi ta ấnvào nút button thì không có chuyện gì xảy ra.nhìn bên ngoài thì giá trị mặc định củaCamera.DestinationType trong cameraOptions trong cả 2 nền tảng đều là DATA_URL.dođó nó sẽ là nguyên nhân gây ra treo ứng dụng khi 1 bức hình được chụp ở độ phân giải tốiđa.lỗi lớn này đã được xác định và được sửa lại trong PhoneGap 1.4.Để khiến ứng dụng hoạt động trên thiết bị Android và BlackBerry thì ta phải sửa lại lời gọitrong phương thức getPicture bằng cách nhúng vào 1 đối tượng cameraOptions objectđơn giản như sau :function takePhoto() {navigator.camera.getPicture(onCameraSuccess, onCameraError,{quality: 50,destinationType: Camera.DestinationType.FILE_URI });}Với sự cài đặt này thì ta có thể chạy ứng dụng trên BlackBerry và sau đó ấn vào nút Take aPicture nhìn giống hình sau :Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 133
  • 134. Phonegap cho người mới họcKhi ấn vào nút camera ở giữa đáy màn hính thì ảnh chụp sẽ được trả về cho ứng dụngPhoneGap như hình 11-5.chú ý ở hình trên thì image file được lưu trữ tại vị trí lưu trữBlackBerry photo mặc định, không giống với IOS, thì bất kì ảnh nào được chụp bởi ứngdụng sẽ được lưu trữ sẵn luôn khi ứng dụng bị tắtNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 134
  • 135. Phonegap cho người mới họcNếu ta không muốn ảnh được lưu trữ sau khi ứng dụng tắt thì ta sẽ cần xóa nó bằng taybằng cách sử dụng PhoneGap File APIHình 11-6 chỉ ra cách ví dụ 11-1 chạy trên 1 thiết bị android.trong trường hợp này thì ảnh sẽđược chụp và hiện thị xem trước .Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 135
  • 136. Phonegap cho người mới họcTa có thể đặt câu hỏi lại chính mình là ta làm cái gì với image file URI này khi ta lấy nó từcamera ? câu trả lời là, nó là 1 con trỏ chỉ tới 1 image file, do đó khi ứng dụng biết được nơichứa file thì nó có thể đọc file hay copy file tới 1 chỗ khác ( bằng cách sử dụng PhoneGapFile API ) hay chuyển tiếp file URI tới UI của ứng dụng phonegap để hiện thị ảnh trongphạm vi ứng dụngNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 136
  • 137. Phonegap cho người mới họcVí dụ 11-2 là 1 phiên bản có chỉnh sửa đôi chút so với ví dụ 11-1.trong phiên bản này khiimage URI được trả về cho ứng dụng thì 1 thẻ HTML image được viết vào trong trangindex.html page vì vậy ảnh được chụp sẽ xuất hiện trên màn hìnhExample 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 CAmerAcontent="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><script type="text/javascript" charset="utf-8">function onBodyLoad() {document.addEventListener("deviceready", onDeviceReady,false);}function onDeviceReady() {navigator.notification.alert("onDeviceReady");}function takePhoto() {navigator.camera.getPicture(onCameraSuccess,onCameraError,{quality : 50,destinationType : Camera.DestinationType.FILE_URI ); }}function onCameraSuccess( imageURL) {//Get a handle to the image container divNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 137
  • 138. Phonegap cho người mới họcic = 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>Những sự thay đổi chính là ở trong hàm onCameraSuccess function như sau :function onCameraSuccess(imageURL) {//Get a handle to the image container divic = 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%" />;}Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 138
  • 139. Phonegap cho người mới học8.2.Cách thiết lập các cấu hình trong Camera OptionsGiờ ta biết được cách chụp ảnh bằng camera, giờ ta nói về các cấu hình mà ta có thể sửdụng để thiết lập cách mà tiến trình này hoạt động.như ta đã nói tới từ trước thì khi gọiphương thức getPicture thì người lập trình có thể chuyển tiếp vào trong 1 đối tượngcameraOptions object dùng để định nghĩa các tham số điều khiển cách mà bức hình đượclấy về.đối tượng cameraOptions object có các thuộc tính sau :Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 139
  • 140. Phonegap cho người mới học  quality  destinationType  sourceType  allowEdit  encodingType  targetWidth  targetHeight  mediaTypemỗi một thuộc tính cấu hình ở trên sẽ được mô tả chi tiết hơn trong phần ngay sauđây.giống với nhiều tính năng khác của PhoneGap APIs thì các cấu hình của API nào đó (giống như allowEdit trong Camera API ) chỉ áp dụng được trên giới hạn 1 số các nền tảngmobileđây là 1 ví dụ mẫu về 1 đối tượng cameraOptions object đầy đủ mà ta có thể sử dụng :var cameraOptions = { quality : 75,sourceType : Camera.PictureSourceType.CAMERA,destinationType : Camera.DestinationType.FILE_URI,allowEdit : true,encodingType: Camera.EncodingType.JPEG,targetWidth: 1024,targetHeight: 768 };khi chuyển tiếp vào hàm getPicture function,thì đối tượng cameraOptions object này nóicho getPicture, để phương thức này lấy ảnh về từ camera (sourceType), và trả về file URIdùng để chỉ tới image file đã được chụp (destinationType), cho phép người dùng chỉnhsửa lại bức hình trước khi trả nó về chương trình (allowEdit), trả về 1 ảnh dạng .jpeg file(encodingType), thiết lập image file đã được mã hóa sử dụng 75% chất lượng ảnh(quality) và thiết lập độ phân giải của ảnh là 1024 by 768 pixels (targetWidth vàtargetHeight).8.2.1.QualityKhi làm việc với smartphone cameras thì độ phân giải quang học cao trong thấu kínhcamera sẽ cộng dồn, thêm vào bộ nhớ lưu trữ giới hạn và băng thông truyền dẫn trên thiếtbị, do vậy cần thiết phải có cách nén các ảnh images này để chúng chiếm ít bộ nhớ lưu trữhơn và giảm tải băng thông truyền dẫn.giống như là 1 phần của tiến trình nén này , các tiêuchuẩn như định nghĩa JPEG có hỗ trợ bằng cách sử dụng chất lượng ảnh để kiểm soát độNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 140
  • 141. Phonegap cho người mới họcnén ảnh khi 1 ảnh image file được lưu trữ.bằng cách sử dụng các thiết lập chất lương ảnhkhác nhau, định nghĩa theo % thì ta có thể tác động 1 cách rất linh hoạt tới kích thước vật lýcủa 1 image file1 ảnh có chất lượng 100% thì hiện thị y nguyên ảnh chụp mà không giảm đi chất lượng ảnhvà đưa cho ta bức ảnh chất lượng tốt nhấtTrong nhiều trường hợp ta có thể sử dụng giá trị 50% tới 100% cho chất lượng ảnh.như tacó thể thấy ở phần phía sau, các nhà lập trình có thể có 1 image file URI được trả về từ lờigọi getPicture hay dữ liệu raw thực sự của bức ảnh dựa vào base64-encoded image filedata.cách sử dụng image file URI là rất dễ dàng và nó chỉ là 1 con trỏ file và ta đã xem xét ởcác ví dụ trước.khi lấy về dữ liệu gốc raw image data từ getPicture thì ta phải đối mặt vớithực tế là thiết bị và bộ chuyển đổi JS trên thiết bị bị giới hạn về bộ nhớ.khi xử lý dữ liệu gốcraw data từ 1 ảnh có độ phân giải cao ở chất lượng 100% thì ta sẽ phải xử lý trên 1 chuỗistring cực lớn và ứng dụng rất có thể bị treo mà không báo cho ta biết tại sao.khi ta giảmthiểu chất lượng ảnh thì ta giảm thiểu lượng dữ liệu mà ứng dụng phải xử lýKhông may mắn là không có hướng dẫn chính xác nào về số % chất lượng ảnh mà ta phảigiảm thiểu để đảm bảo thiết bị không bị treo.ta phải ước chừng và kiểm tra thử để biết cácgiá trị này rất có thể khác nhau trên các nền tảng khác nhau và ngay trên các thiết bị khácnhau có cùng nền tảng.theo đại đa số những người làm việc trên phonegap thì khuyên sửdụng chất lượng ảnh 50% ( hay thấp hơn ) khi ta làm việc với dữ liệu gốc raw image data.Để thiết lập cameraOptions object sử dụng chất lượng ảnh 50% thì ta sử dụng :quality : 50Chú ý: theo tài liệu phonegap thì cấu hình này không áp dụng được trên nền tảngBlack-Berry8.2.2.destinationTypekhi chụp 1 bức hình bằng cách sử dụng getPicture thì ứng dụng sẽ sử dụngdestinationType để điều khiển kiểu dữ liệu nào về image, sẽ được trả về giống như 1 fileURI dùng để chỉ tới image file được lưu trữ trong bộ nhớ của thiết bị :destinationType: Camera.DestinationType.FILE_URIHay để lấy về dữ liệu ảnh theo giá trị kiểu chuỗi base64-encoded string thì ta sử dụng nhưsau :Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 141
  • 142. Phonegap cho người mới họcdestinationType: Camera.DestinationType.DATA_URLcách làm việc với file URIs là rất dễ dàng như ví dụ 11-2.ứng dụng có 1 con trỏ file pointer.Ứng dụng có thể sử dụng con trỏ này, để nhúng nó vào bên trong 1 thẻ HTML img phổ biến(trong phạm vi ứng dụng), hay khi sử dụng File API để copy file này tới 1 vị trí khác (dựavào con trỏ).khi ta đã biết file này ở đâu thì việc truy cập vào image file để xử lý là hết sứcđơn giảnhình 11-8 chỉ ra output của ví dụ 11-1 khi cấu hính destinationType làCamera.DestinationType.DATA_URL được sử dụng.như ta có thể thấy, thì những gì ta phảilàm, thực chất là làm việc với 1 chuỗi string rất lớn, như đã biết nó là nguyên nhân gây ratràn bộ nhớ và làm treo chương trình nễu chuỗi string là quá lớnCách sử dụng dữ liệu gốc raw image data thì ta vẫn có thể biểu diễn được hình ảnh ởtrong UI nhưng hơn thế, ta có thể sẽ dùng nó để lưu trữ trong database hay upload dữ liệunày lên 1 serverNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 142
  • 143. Phonegap cho người mới học8.2.3.sourceTypetham số sourceType được sử dụng để định nghĩa nơi mà phương thức getPicture lấy ảnhvề.khi sourceType bị bỏ qua thì phương thức getPicture sẽ đơn giản sử dụngCamera.SourceType.CAMERA để lấy ảnh về.ứng dụng có thể định nghĩa sử dụng thư việnảnh trong thiết bị bằng cách sau :sourceType : Camera.SourceType.PHOTOLIBRARYlấy về các ảnh từ 1 album ảnh đã lưu, bằng cách sử dụng sau :sourceType : Camera.SourceType.SAVEDPHOTOALBUMtrên hầu hết các nền tảng, cách định nghĩa sourceType là SAVEDPHOTOALBUM hayPHOTOLIBRARY thực chất là giống nhau.như hình 11-9, khi ứng dụng tạo ra 1 lời gọigetPicture thì thiết bị sẽ mở ứng dụng thư viện ảnh và cho phép người dùng đầu tiên là lựachọn 1 album ảnh và sau đó lựa chọn 1 bức ảnh trước khi trả về 1 ảnh đã được chọn tớiứng dụng PhonegapNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 143
  • 144. Phonegap cho người mới họcTrên thiết bị IOS thì 2 thao tác này hơi khác biệt 1 chút.khi 1 sourceType được định nghĩalà PHOTOLIBRARY thì ứng dụng sẽ thực thi tương tự với những gì trong hình 11-9.khi địnhnghĩa sourceType là SAVEDPHOTOALBUM thì ứng dụng sẽ mở 1 thư viện ảnh iOSCamera Roll photo library cho phép người dùng lựa chọn 1 ảnh từ đóChú ý: Camera.PictureSourceType.PHOTOLIBRARY vàCamera.PictureSourceType.SAVEDPHOTOALBUM có tính năng giống hệt nhau trongAndroid và cấu hình sourceType không được hỗ trợ trong BlackBerryNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 144
  • 145. Phonegap cho người mới học8.2.4.allowEdit1 ứng dụng IOS có thể sử dụng cấu hình allowEdit để chỉ dẫn phương thức getPicture chophép người dùng chỉnh sửa ảnh đã được chọn, trước khi trả về cho ứng dụng Phonegap.đểthiết lập 1 đối tượng cameraOptions object cho cấu hình này ta sử dụng như sau :allowEdit : truekhi được kích hoạt trong ứng dụng thì sau khi camera chụp ảnh thì thiết bị sẽ hiện thị 1 mànhình tương tự với hình 11-10.tại đây, người dùng có thể chỉnh sửa lại bức ảnh.khi ngườidùng ấn vào nút Choose button thì ảnh đã được chỉnh sửa sẽ được trả về cho ứng dụngPhoneGapNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 145
  • 146. Phonegap cho người mới họcChú ý: cấu hình allowEdit không hỗ trợ trong android, blackberry8.2.5.encodingType1 ứng dụng Phonegap sử dụng encodingType cameraOption để nói cho phương thứcgetPicture biết định dạng ảnh nào được chụp.cấu hình được hỗ trợ là JPEG và PNG, vớiJPEG là cấu hình mặc định trên hầu hết các thiết bị.để thiết lập phương thức getPicture trảvề 1 JPEG file thì ta sử dụng như sau :encodingType: Camera.EncodingType.JPEGhay sử dụng PNG files, ta sử dụng như sau Camera.EncodingType.PNGChú ý: đọc thêm tài của phonegap để biết thêm8.2.6.targetHeight và targetWidththam số targetHeight và targetWidth điều khiển chiều rộng và chiều cao của ảnh đượcnhận về bằng phương thức getPicture.ta có thể thiết lập 1 trong 2 targetHeight vàtargetWidth và sau đó bức ảnh sẽ được tự động được tỷ lệ dựa theo 1 trong 2 tham sốnày.nếu ta định nghĩa cả 2 tham số trên thì ảnh sẽ được tỷ lệ dựa theo tham số mà kết quảcủa nó ở trong tỷ lệ nhỏ nhất.không có cách nào để theo lập trình xác định được độ phân giải camera hay tỉ lệ được hỗtrợ trước khi chụp 1 bức hìnhđể định nghĩa đối tượng cameraOptions object mà định nghĩa targetHeight vàtargetWidth cho ảnh, ta sử dụng mã code sau :targetHeight: 100, targetWidth: 1008.2.7.mediaTypetrong nhiều smartphones hiện đại ngày nay, chúng có thể chứa nhiều loại media typestrong 1 photo library thì PhoneGap Camera API hỗ trợ bổ sung 1 giá trị mediaType trongcameraOptions object trong trường hợp mà sourceType đã thiết lập là PHOTOLIBRARYhay SAVEDPHOTOALBUM.tham số này hỗ trợ các cấu hình sau :  DEFAULT : trả về thông tin ảnh bằng cách sử dụng định dạng được định nghĩa trong giá trị destinationType  ALLMEDIA : cho phép lựa chọn tất cả các dạng mediaNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 146
  • 147. Phonegap cho người mới học  PICTURE : cho phép lựa chọn chỉ các ảnh  VIDEO : cho phép chỉ lựa chọn videoKhi cấu hình là video thì chỉ file URI được trả về cho chương trình vì lí do giới hạn bộ nhớ8.2.8.saveToPhotoAlbumdùng để lưu ảnh vào photo album trên thiết bị sau khi chụp xongsaveToPhotoAlbum : true8.3.Làm việc với các vấn đề xảy ra với cameravới bất cứ môi trường lập trình nào thì cũng tồn tại 1 vài chỗ mà mọi thứ có thể hoạt độngkhông như mong đợi hoặc bị lỗi.mục đích của phần này là làm nổi bật cách mà ta xử lý khiCamera API gặp lỗikhi hàm onCameraError function được kích hoạt thì Camera API chuyển tiếp 1 đối tượngerror object mà cần để truy vấn xác định nguyên nhân gây ra lỗi.như hình 11-11 thì lỗi là 1thông báo đơn giản.trong trường hợp này thì người dùng ấn vào nút Cancel button trênhình 11-10, do đó không có thông tin về ảnh được trả lại ứng dụng phonegapNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 147
  • 148. Phonegap cho người mới họcKhi ứng dụng chạy trên thiết bị mà không có camera thì ta sẽ nhìn thấy lỗi giống như hình11-12 sau :Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 148
  • 149. Phonegap cho người mới họcNếu ứng dụng đang chạy trên thiết bị không có camera thì nó không đảm bảo hàmonCamera Errorfunction sẽ được thực thi bởi Camera API.nếu ứng dụng lỗi và ta khôngchắc tại sao thì đừng quên rằng lệnh console log có thể chứa các thông tin trợ giúp.hình11-13 chỉ ra 1 đoạn trong iOS console với việc chạy ví dụ 11-1.chú ý rằng khi ta ấn vào nútTake a Picture button thì console logs ghi lại 1 lỗi dùng để xác định rằng source type 1 (camera ) không sẵn sàngĐây là 1 trong các ví dụ khó hiểu mặc dù trên thiết bị có hỗ trợ 1 camera thì Apple đã quyếtđịnh rằng nó không đủ quan trọng để nhúng vào các chức năng có trong bản giả lập.trongNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 149
  • 150. Phonegap cho người mới họctrường hợp này để có thể test trên giả lập IOS thì ứng dụng của ta sẽ cần kiểm tra xem thiếtbị nào đang chạy và đang sử dụng 1 photo libraryNếu ứng dụng của ta dường như đang chạy đúng nhưng khi ta chụp 1 bức hình thì chẳngcó chuyện gì xảy ra hay ứng dụng bị treo, đây hầu như chắc chắn là được gây ra bởi việcứng dụng trả về dữ liệu gốc raw camera data chứ không phải là file URI và thiết bị khôngcó khả năng để xử lý 1 chuỗi string quá lớn như vậy.khi chuyện đó xảy ra thì hãy thử làmgiảm chất lượng hình ảnh xuống 50% hay nhỏ hơn để xem nó có sửa được vấn đề nàykhông.nếu nó sửa được thì ta sẽ phải làm 1 vài việc dùng để xác định xem thiết lập cấu hìnhchất lương hình ảnh nào là tối ưu cho ứng dụng và thiết bị có thể xử lý được nóNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 150
  • 151. Phonegap cho người mới họcIX.SplashscreenCho phép lập trình viên hiện thị hay ẩn đi màn hình splash screen của ứng dụngCác phương thức:  Show  Hide10.1.Cách phần quyền PermissionsAndroidapp/res/xml/config.xml<plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>iOSCordova.plist Add an entry under the Plugins dictionary - with the key "SplashScreen" and value"CDVSplashScreen". New projects should already have this key.10.2.Cách thiết lậpAndroid:  Sao chép ảnh màn hình splash screen vào trong các thư mục res/drawable của Android project. Và các kích thước của file ảnh sẽ là: a. xlarge (xhdpi): nhỏ nhất là 960x720 b. large (hdpi): nhỏ nhất là 640x480 c. medium (mdpi): nhỏ nhất là 470x320 d. small (ldpi): nhỏ nhất là 426 x 320  trong phương thức onCreate method của lớp class kế thừa (extends) DroidGap thêm vào 2 dòng sau:super.setIntegerProperty("splashscreen", R.drawable.splash);super.loadUrl("file:///android_asset/www/index.html", 10000);Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 151
  • 152. Phonegap cho người mới họcdòng đầu tiên super.setIntegerProperty thiết lập ảnh để hiện thị cho màn hìnhsplashscreen. Nếu ta đã đặt tên bức ảnh là bất cứ thứ gì khác splash.png thì ta phải sửa lạidòng này. Dòng thứ 2 vẫn giữ không thay đổi và chú ý tới tham số thứ 2 là giá trị độtrễ timeout dành cho màn hình splash screen. Trong ví dụ trên, màn hình splash screen sẽđược hiện thị trong 10 giây. Nếu ta muốn tắt màn hình splash screen khi ta nhận được sựkiện "deviceready" event thì ta nên sử dụng phương thức navigator.splashscreen.hide()iOS:  sao chép ảnh màn hình splash screen vào trong thư mục Resources/splash của iOS project. Ta chỉ thêm ảnh dành cho thiết bị mà ta muốn hỗ trợ (iPad hay iPhone). Các kích thước của ảnh nên là: o Default-568h@2x~iphone.png (640x1136 pixels) o Default-Landscape@2x~ipad.png (2048x1496 pixels) o Default-Landscape~ipad.png (1024x768 pixels) o Default-Portrait@2x~ipad.png (1536x2008 pixels) o Default-Portrait~ipad.png (768x1024 pixels) o Default@2x~iphone.png (640x960 pixels) o Default~iphone.png (320x240 pixels)10.3.showHiện thị màn hình splash screen.navigator.splashscreen.show();các nền tảng hỗ trợ:  Android  iOS„Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 152
  • 153. Phonegap cho người mới họcví dụ:<!DOCTYPE html><html> <head> <title>Splashscreen Example</title> <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script> <script type="text/javascript" charset="utf-8"> // Wait for Cordova to load // document.addEventListener("deviceready", onDeviceReady, false); // Cordova is ready // function onDeviceReady() { navigator.splashscreen.show(); } </script> </head> <body> <h1>Example</h1> </body></html>10.4.hideẩn đi màn hình splash screen.navigator.splashscreen.hide();các nền tảng hỗ trợ:  Android  iOSNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 153
  • 154. Phonegap cho người mới họcví dụ:<!DOCTYPE html><html> <head> <title>Splashscreen Example</title> <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script> <script type="text/javascript" charset="utf-8"> // Wait for Cordova to load // document.addEventListener("deviceready", onDeviceReady, false); // Cordova is ready // function onDeviceReady() { navigator.splashscreen.hide(); } </script> </head> <body> <h1>Example</h1> </body></html>Chú ý: 1 vài mẹo cho iOS: 1. trong Cordova.plist, ta cần hiệu chỉnh giá trị "AutoHideSplashScreen” thành false 2. sau đó, nếu ta muốn ẩn đi màn hình splash screen khoảng 2 giây, thì ta có thể làm như sau trong hàm hiệu chỉnh event devicereadysetTimeout(function() { navigator.splashscreen.hide();}, 2000);Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 154
  • 155. Phonegap cho người mới họcNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 155

×