We use PhoneGap as a packaging framework integrating the native OS with the mobile web application. The mobile framework allows web developers to natively target all smartphones with a single codebase (JavaScript, HTML and CSS) by using its API and connecting to an embedded WebView or WebKit on the device. We use JQuery Mobile as a web application framework to build the web screens and logics.
After a few weeks of Android development, there are couple of advantages I found:
1. Great and easy integration with 3rd party plugins
2. Fast reloading both on simulators and on devices
3.
An example of PhoneGap and ChildBrowser plugin:
Step 1. Set up the ChildBrowser plugin following this page:
https://github.com/phonegap/phonegap-plugins/tree/master/Android/ChildBrowser
Step 2. Sample Codes in index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
-->
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>
<!-- <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> -->
<!-- <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> -->
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready",onDeviceReady,false);
}
/* When this function is called, PhoneGap has been initialized and is ready to roll */
/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
for more details -jm */
function onDeviceReady()
{
checkConnection();
}
function showPage()
{
var val = "http://www.google.com"
window.plugins.childBrowser.showWebPage(val, { showLocationBar: true });
}
</script>
</head>
<body onload="onBodyLoad()">
<br />
<ol>
<p> Show the web page </p>
<button onclick="showPage()">Go to web page</button>
</ol>
</body>
</html>
Enjoy Android Developing!
