Mô tả:
Tài liệu tổng quát về PhonegapLoading device properties...
Cách thức chương trình hoạt động Trong ví dụ này, ta tạo ra 1 tài liệu HTM đơn giản, đầu tiên tải về thư viện phonegap.js.tiếp theo ta viết 1 hàm onLoad() function dùng để đăng ký 1 event handler bằng cách sử dụng addEventListener.đặc biệt, ta muốn tuân theo sự kiện deviceready event, và khi nó được kích hoạt thì nó sẽ chạy hàm onDeviceReady() function. Hàm onDeviceReady() function làm 2 thứ : thứ nhất là nó điền vào 1 đoạn văn vào trong document DOM có id là “props” bằng cách sử dụng getElementById, sau đó nó in ra thông tin về thiết bị vào trong phần tử DOM đó Nếu ta sử dụng JQuery, thì ta có thể đơn giản viết như sau : function onDeviceReady() { $(“#props”).html(„Device Name: „ + device.name + „A dialog box will report the network state.
Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 25 Phonegap cho người mới học Cá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ện deviceready Khi thiết bị đã ở trạng thái sẵn sàng thì ta chạy navigator.network.isReachable trên google.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ạng network (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ết bấ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-up trê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ẻ 2.3.Cách sử dụng các thông báo NOTIFICATIONS Trong 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ết nố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ị, tuy nhiên phonegap mang tới tận 4 loại thông báo notifications khác nhau mà ta có thể tận dụng : Alerts Confirmation dialogs Beeps Vibrations 2.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àm notification.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 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!‟, // message gameOverDismissed, // 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 1 thô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ụng hàm callback) như sau : //BlackBerry 4.6 / webOS navigator.notification.alert(„Game Over! „); 2.3.2.Cách sử dụng hộp thoại tương tác Confirmation Dialogs 1 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út buttons.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à No Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 27 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 giao diện HTML như sau : // process the confirmation dialog result function onConfirm(button) { alert(„You selected button „ + button); } // Show a custom confirmation dialog // function showConfirm() { navigator.notification.confirm( „Game Over!‟, // message onConfirm, // callback to invoke with index of button pressed „Game Over‟, // title „Restart,Exit‟ // buttonLabels ); } 2.3.3.Cách sử dụng Beeps Thỉ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 để ra hiệu thông báo khi người dùng làm gì đó.để tạo ra tiếng beep, ta sử dụng hàm notification.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à ta muốn phát hàm này được hỗ trợ trong các thiết bị Android, BlackBerry, webOS, và iPhone Chú ý: 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ền vào Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 28 Phonegap cho người mới học 2.3.4.Cách sử dụng chế độ rung Vibrations thỉ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 đó phonegap cung 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à iPhone Chú ý: iphone sẽ từ chối tham số truyền vào và nó sẽ rung theo thời gian được thiết lập sẵn 2.3.5.Ví dụ về cách sử dụng tất cả 4 loại thông báo NotificationsWatching geolocation...
Cách ví dụ hoạt động Khi ứng dụng được tải xong thì phương thức watchPosition() được kích hoạt và cứ mỗi 3 giâ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 Phonegap cho người mới học 4.6.Cách cải thiện giao diện và trải nghiệm của người dùng Nế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ận thấ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ực hiệ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ục jQTouch 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: Tiếp theo, ta cần 1 đoạn HTML đặt trong thẻ như sau :Watching geolocation...
Read File
7.10.Cách đọc các files – FileWriter Ta có thể sử dụng đối tượng FileWriter object để ghi lên các files. 1 đối tượng FileWriter object 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ào nhiề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ếm và 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ên tạ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ông bắ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ủa file (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 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ụ: Seek function 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); Truncate function win(writer) { writer.truncate(10); }; var fail = function(evt) { console.log(error.code); }; entry.createWriter(win, fail); Write Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 117 Phonegap cho người mới học function 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); Append function 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); Abort function 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 Phonegap cho người mới học ví dụ đầy đủ:Write File
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ằng cá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 đối tượng FileUploadOptions object tới phương thức upload. Khi upload thành công, thì hàm success callback sẽ được gọi với 1 tham số được truyền vào là đối tượng FileUploadResult object. Nếu có 1 lỗi xảy ra, thì hàm error callback sẽ được gọi với 1 tham số được truyền vào là đối tượng FileTransferError object. Hơn thế, ta cũng có thể tải về 1 file 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.upload var 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 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 server Chú ý: iOS không hỗ trợ các thuộc tính responseCode và bytesSent trong đối tượng result object ví dụ: // !! Assumes variable fileURI contains a valid URI to a text file on the device var win = function(r) { console.log("Code = " + r.responseCode); console.log("Response = " + r.response); console.log("Sent = " + r.bytesSent); } Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 121 Phonegap cho người mới học var fail = function(error) { alert("An error has occurred: Code = " + error.code); console.log("upload error source " + error.source); console.log("upload error target " + error.target); } var options = new FileUploadOptions(); options.fileKey="file"; options.fileName=fileURI.substr(fileURI.lastIndexOf('/')+1); options.mimeType="text/plain"; var params = {}; params.value1 = "test"; params.value2 = "param"; options.params = params; var ft = new FileTransfer(); ft.upload(fileURI, encodeURI("http://some.server.com/upload.php"), win, fail, options);Upload File
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 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ấu hình chunkedMode thành false 7.11.2.download var 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 Phonegap cho người mới học ví dụ: // !! Assumes filePath is a valid path on the device var fileTransfer = new FileTransfer(); var uri = encodeURI("http://some.server.com/download.php"); fileTransfer.download( uri, filePath, function(entry) { console.log("download complete: " + entry.fullPath); }, function(error) { console.log("download error source " + error.source); console.log("download error target " + error.target); console.log("upload error code" + error.code); } ); 7.11.3.abort Dù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 object Các nền tảng hỗ trợ: Android iOS 7.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 iOS Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 125 Phonegap cho người mới học ví dụ: fileTransfer.onprogress = function(progressEvent) { if (progressEvent.lengthComputable) { loadingStatus.setPercentage(progressEvent.loaded / progressEvent.total); } else { loadingStatus.increment(); } }; fileTransfer.download(...); // or fileTransfer.upload(...); 7.12.FileTransferError 1 đối tượng FileTransferError object được trả về thông ưua 1 hàm error callback khi có 1 lỗi xảy ra trong tiến trình tải lên hay tải xuống 1 file Cá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_ERR Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 126 Phonegap cho người mới học VIII.Camera PhoneGap Camera API cung cấp cho 1 ứng dụng khả năng làm việc với các images hay khả năng chụp ảnh từ camera hay nhận file ảnh từ kho ảnh trong thiết bị.khi lấy về 1 ảnh image thì API có thể trả về 1 URL chỉ tới image file trên thiết bị hay chuỗi base64-encoded string dùng để biểu diễn nội dung bên trong 1 image API cung cấp 1 phương thức đơn là navigator.camera.getPicture – dùng để lấy về 1 ảnh image 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ách sử 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ụng 8.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ải chuyển vào 2 hàm functions mà được thực thi trên lời gọi success và failure.trong trường hợp này, đây là các hàm onCameraSuccess và onCameraErrorfunctions.hàm onCameraSuccess 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ách thiết lập các cấu hình trong Camera” ở phần sau ).hàm onCameraError function được thự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ỗi xảy ra trong tiến trình ví 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ưng nó sẽ là true hoặc false trên 1 vài thiết bị.Using the PhoneGap Camera API
Using the PhoneGap Camera API
548 22498 4
282 12942 1
21 9705 4
210 8407 63
487 8286 21
26 7846 4
167 6307 16
157 6184 34
90 6033 19
95 5579 85
95 5237 89
40 4874 0
49 4605 24
126 4247 15
70 4161 65