PhoneGap and jQuery Mobile

PhoneGap PhoneGap is an open-source mobile development framework developed by Nitobi Software. PhoneGap lets developers use web technologies to develop apps for iOS, Android, Blackberry, WebOS ,Symbian and Bada. PhoneGap doesnt require knowledge in Objective-C/Java, it allows developers to develop applications in Javascript, HTML and CSS. What PhoneGap does is “bridge the gap” (hence the name) between the smartphone and the web browser by exposing smartphone services using JavaScript. UI development on phonegap can be done with Sencha Touch, jQuery Mobile and GWT. UI development with jQuery Mobile is described in this article. jQuery Mobile jQuery Mobile is a framework built on top of JQuery that provides a range of user interface elements and features to use in mobile apps. It takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS, the jQuery Mobile framework will allow you to design a single highly branded and customized web application that will work on all popular smartphone and tablet platforms. jQuery Mobile is supported in iOS, Android, Balckberry, Bada, Windows Phone, Palm webOS, Symbian and Meego. Features of jQuery Mobile :-

• Built on jQuery core for familiar and consistent jQuery syntax and minimal learning curve and leverages jQuery UI code and patterns.
• Compatible with all major mobile, tablet, e-reader & desktop platforms – iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, and all modern browsers with graded levels of support.
• Lightweight size and minimal image dependencies for speed.
• Modular architecture for creating custom builds that are optimized to only the features needed for a particular application.
• HTML5 Markup-driven configuration of pages and behavior for fast development and minimal required scripting.
• Progressive enhancement approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.
• Responsive design techniques and tools allow the same underlying codebase to automatically scale from smartphone to desktop-sized screens.
• Powerful Ajax-powered navigation system to enable animated page transitions while maintaining back button, bookmarking and and clean URLs though pushState.
• Accessibility features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.
• Touch and mouse event support streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API.
• Unified UI widgets for common controls enhance native controls with touch-optimized, themable controls that are platform-agnostic and easy to use.
• Unified UI widgets for common controls enhance native controls with touch-optimized, themable controls that are platform-agnostic and easy to use.

Android App Using PhoneGap and jQuery Mobile To develop an Android App Using PhoneGap and jQuery Mobile with Eclipse, Download and install eclipse Download and install Android SDK Download and install ADT Plugin Download latest copy of PhoneGap Lets try to build a sample project in android using PhoneGap

• Launch Eclipse, then under the File menu select New-> Android Project
• In the root directory of the project, create two files /libs /assets/www
• Copy phonegap.js from your PhoneGap download earlier to /assets/www
• Copy phonegap.jar from your PhoneGap download earlier to /libs
• Copy xml folder from your PhoneGap download earlier to /res
• Make few adjustments in the main java file in the src folder. In this case, it is ExampleActivity.java. package com.example; import android.os.Bundle; import com.phonegap.*; public class ExampleActivity extends DroidGap { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //setContentView(R.layout.main); super.loadUrl("file:///android_asset/www/index.html"); } } Replace the package name with your package name and activity with your activity name. 
• If you experience any error here, right click on the libs/phonegap.jar and go to BuildPath-> Add BuildPath
• Now we need to edit the AndroidManifest.xml, For that right click on the file and choose Open With -> Text Editor Copy the below content to the AndroidManifest.xml under the versionName. <supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true"/> <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission

  android:name=”android.permission.RECEIVE_SMS” /> <uses-permission android:name=”android.permission.RECORD_AUDIO” /> <uses-permission android:name=”android.permission.MODIFY_AUDIO_SETTINGS” /> <uses-permission android:name=”android.permission.READ_CONTACTS” /> <uses-permission android:name=”android.permission.WRITE_CONTACTS” /> <uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE”/> <uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE” /> <uses-permission android:name=”android.permission.GET_ACCOUNTS” />

  Add android:configChanges=”orientation|keyboardHidden” to the activity tag in AndroidManifest. Add a second activity under you appliction tag in AndroidManifest. <activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter> </intent-filter> </activity> Now the AndroidManifest.xml looks like

• Now create and open file named index.html in /assets/www folder. Paste the following code<!DOCTYPE HTML> <html> <head> <title>PhoneGap </title> <script type="text/javascript" charset="utf-8" src="phonegap.js"> </script> </head> <body> <h1>Hello World</h1> </body> </html>

Now Right click the project and go to Run As and click Android Application. You will get an output like this. jQuery Mobile and PhoneGap The main thing when using Javascript library is to be handle the library boot strap event . A Boot strap event is when js library hells that its ok to start using its api. Boot strap event handling in jquery is $(document).ready(function(){ }): Boot strap event handling in jQuery Mobile is $(document).bind("deviceready", function(){ }); These bootstraps need to be chained, in order to properly bootstrap JQuery/jQuery Mobile and phonegap. $(document).ready(function() { $(document).bind("deviceready", function(){ }); }); UI Development Using jQuery Mobile jQuery Mobile uses html 5 parameter “data-role” for all its functionalities which makes the mobile app development easy. Lets build a project with PhoneGap and jQueryMobile Include jQuery Files <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://agileblaze.com/wp-content/uploads/2011/11/jquery.mobile-1.0rc1.min.css" /> <script type="text/javascript" src="http://agileblaze.com/wp-content/uploads/2011/11/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://agileblaze.com/wp-content/uploads/2011/11/jquery.mobile-1.0rc1.min.js"></script> </head> <body> ...content goes here... </body> </html> Each page on the mobile device is identified with an element with data-role=”page” <div data-role="page"> .............. </div> We can include header, footer and content inside the page like <div data-role="page"> <div data-role="header"> ......... </div> <div data-role="content"> ........ </div> <div data-role="footer"> ........ </div> </div> To fix the footer in position, we can add data-position=”fixed” to the footer div <div data-role="footer" data-position="fixed">..........</div> We

can add links in these pages like <a id="list_books" href="#books">List Books</a> When we click the link “List Books”, It will display the page with id “books”. <div data-role="page" id="home"> <div data-role="header"> <h1>Test App</h1> </div> <div data-role="content"> <a href="#books" id="list_books">List Books</a> <a href="#authors" id="list_authors">List Authors</a> </div> <div data-role="footer"> </div> </div> <div data-role="page" id="books"> <div data-role="header"> <h1>Test App</h1> </div> <div data-role="content"> <ul> <li>The Lord of the Rings</li> <li>Dream of the Red Chamber</li> <li>And Then There Were None</li> <li>The Lion, The Witch and the Wardrobe</li> <li>The Da Vinci Code</li> </ul> </div> <div data-role="footer"> </div> </div> <div data-role="page" id="authors"> <div data-role="header"> <h1>Test App</h1> </div> <div data-role="content"> <ul> <li>J. R. R. Tolkien</li> <li>Cao Xueqin</li> <li>Agatha Christie</li> <li>C. S. Lewis</li> <li>Dan Brown</li> </ul> <div data-role="footer"> </div> </div> </div> Theming of Pages Using jQuery Mobile Theming of jQuery Mobile is very simple as it provides a default theme which includes 5 swatches that are given letters a,b,c,d and e. To make mapping of colors swatches consistent across widgets, they have followed the convention that swatch “a” has the highest level of visual priority (black in theme), swatch “b” has secondary level (blue color), “c” has the baseline level (gray), “d” has the alternate secondary and “e” as an accent swatch. Theme can be appiled by using the attribute “data-theme”. For eg: <a href="#books" id="list_books" data-theme="a">List Books</a> Customising Themes Its simple to manually edit the default swatches or add additional swatches by editing the theme CSS file. Copy a block of swatch styles, rename the classes with new swatch name and tweak colors. It is better to add an external stylesheet to the head, placed after structure and theme stylesheet references. This allows us to easily update to the newer versions of the library as overrides are kept away from the library code. More detailed jQuery Mobile Tutorial can be found here Demo App Following is the Demo App, with complete index.html <!DOCTYPE HTML> <html> <head> <title>PhoneGap</title> <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> <link rel="stylesheet" href="jquery.mobile-1.0b3.css" /> <script type=" text/javascript" src="jquery-1.6.3.min.js"></script> <script type=" text/javascript" src="jquery.mobile-1.0b3.min.js"></script> </head> <body> <div data-role="page" id="home"> <div data-role="header" data-theme="b"> <h1>Test App</h1> </div> <div data-role="content"> <a href="#books" id="list_books">List Books</a> <br ></br> <a href="#authors" id="list_authors">List Authors</a> </div> <div data-role="footer" data-position="fixed" data-theme="b"> <a data-rel="back">Back</a> </div> </div> <div data-role="page" id="books"> <div data-role="header" data-theme="b"> <h1>Test App</h1> </div> <div data-role="content"> <ul data-theme="b" data-role="listview"> <li data-theme="b">The Lord of the Rings</li> <li data-theme="b">Dream of the Red Chamber</li> <li data-theme="b" >And Then There Were None</li> <li data-theme="b">The Lion, The Witch and the Wardrobe</li> <li data-theme="b">The Da Vinci Code</li> </ul> </div> <div data-role="footer" data-position="fixed" data-theme="b"> <a data-rel="back">Back</a> </div> </div> <div data-role="page" id="authors"> <div data-role="header" data-theme="b"> <h1>Test App</h1> </div> <div data-role="content"> <ul data-theme="b" data-role="listview"> <li data-theme="b">J. R. R. Tolkien</li> <li data-theme="b">Cao Xueqin</li> <li data-theme="b">Agatha Christie</li> <li data-theme="b">C. S. Lewis</li> <li data-theme="b">Dan Brown</li> </ul> </div> <div data-role="footer" data-position="fixed" data-theme="b"> <a data-rel="back">Back</a> </div> </div> </body> </html> Issues Faced and Solutions 1. Page flickers after form submission solution :- Add the below code to CSS file .ui-page {-webkit-backface-visibility: hidden;}