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:
<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 49 icon4: „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>
Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 50
Đâ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 ta có 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 tồ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; }
Ngô Quang Trung – email: ngotrung.poli.t@gmail.com / www.phonegap.vn/forum 52