WebSphere Notes: Using JQuery Mobile in PhoneGap/Cordova application

JQuery Mobile is one of the most popular Mobile UI frameworks, i wanted to figure out how to use it in Cordova application so i built a sample application that uses JQuery Mobile and also the Cordova device API to display device related properties in JQuery Mobile UI. You can download the sample application from here. I followed these steps to build this application

I followed the instructions in Getting Started with Android to build application that points to index.html inside the application, i tried it once to make sure that it works
I did download the jquery.mobile-1.1.0.zip from JQuery Mobile Download page
I did unzip the jquery.mobile-1.1.0.zip in c:\software folder
Next i copied the css, docs and js folder from C:\software\jquery.mobile-1.1.0\demos into assets/www folder of my web application.
If your just starting with JQuery mobile or playing around then you can even directly point to the CDN URL of JQuery Mobile without actually downloading it in your application, in that case you can skip step 2 and 3. You can simply add these lines in your HTML page
```
<link rel="stylesheet"
 href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script
 src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
```

Next change your index.html page to look like this


<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<!--  
<link rel="stylesheet"
 href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script
 src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
-->
<link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.1.0.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8">
 document.addEventListener("deviceready", onDeviceReady, false);
 function onDeviceReady() {
  console.log("Entering index.html.onDeviceReady");
  //var element = document.getElementById('deviceProperties');
  var html = "";
  html = html + "<li>" + 'Device Name: ' + device.name + "</li>";
  html = html + "<li>" + 'Device Cordova: ' + device.cordova + "</li>";
  html = html + "<li>" + 'Device Platform: ' + device.platform + "</li>";
  html = html + "<li>" + 'Device UUID: ' + device.uuid + "</li>";
  console.log(html);

  $("#deviceProperties").html(html);
  $("#deviceProperties").listview('refresh');
  console.log("Exiting index.html.onDeviceReady");
 } 
</script>
</head>
<body>

 <div data-role="page" id="page1">
  <div data-theme="a" data-role="header">
   <h3>Hello JQuery Mobile</h3>
  </div>
  <div data-role="content">
   Device Properties
   <ul data-role="listview" data-inset="true" 
    id="deviceProperties">

   </ul>
  </div>
  <div data-theme="a" data-role="footer">
   <h3>Copyright stuff</h3>
  </div>
 </div>
 
</body>
</html>

My application has one JQuery Mobile page whose content is defined using div with id equal to page1. The div with data-role equal to content defines the content of the page. By default it only has empty ul element, i am using onDeviceReady() JavaScript function to read device property and add them to the list.

This is screen shot of application once its loaded

Using JQuery Mobile in PhoneGap/Cordova application

No comments: