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

16,142 views

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 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
22 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
16,142
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2,356
Comments
0
Likes
22
Embeds 0
No embeds

No notes for slide

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

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 35. Phonegap cho người mới họcNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 35
  36. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 51. Phonegap cho người mới họcNgô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 51
  52. 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. 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. 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. 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. 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. 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. 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

×