PhoneGap : To build cross-platform mobile apps using HTML5, Javascript and CSS.


PhoneGap is an open source framework for quickly building cross-platform mobile apps using HTML5, Javascript and CSS.

Building applications for each device–iPhone, Android, Windows Mobile and more–requires different frameworks and languages. PhoneGap solves this by using standards-based web technologies to bridge web applications and mobile devices. Since PhoneGap apps are standards compliant, they’re future-proofed to work with browsers as they evolve.

The PhoneGap code was contributed to the Apache Software Foundation (ASF) under the name Apache Cordova and graduated to top-level project status in October 2012

Read more about PhoneGap’s beliefs, goals, and philosophy http://phonegap.com/2012/05/09/phonegap-beliefs-goals-and-philosophy

Apache Cordova:

Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. Combined with a UI framework such as jQuery Mobile or Dojo Mobile or Sencha Touch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript.

When using the Cordova APIs, an app can be built without any native code (Java, Objective-C, etc) from the app developer. Instead, web technologies are used, and they are hosted in the app itself locally (generally not on a remote http server).And because these JavaScript APIs are consistent across multiple device platforms and built on web standards, the app should be portable to other device platforms with minimal to no changes.

Apps using Cordova are still packaged as apps using the platform SDKs, and can be made available for installation from each device’s app store.

Cordova provides a set of uniform JavaScript libraries that can be invoked, with device-specific native backing code for those JavaScript libraries. Cordova is available for the following platforms: iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada, and Symbian.
Getting Started guide : http://docs.phonegap.com/guide_getting-started_index.md.html

After reading Getting Started guide, you will download the required packages according to platform, set PATH environment variable and setup new project.
Here all code is for android platform.

Set up new project :

/coradova/lib/android/bin $ create <project path>/demoPhonegap com.phonegap.app demo

Here we created project name demoPhonegap. After creating new project, you will find all HTML,CSS, images and js files in /demoPhonegap//assets/www. There will be a java file named demo.java in demoPhonegap/src/com/phonegap/app/demo.java.

In this file , you will find this code :

public void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    super.loadUrl("file:///android_asset/www/index.html");
}

when we deploy mob app into emulator then initially it will load the file whose path is given in loadUrl()

example code :
I created demo.html whose path is /demoPhonegap//assets/www/demo.html

demo.html

<html>
<head>
<script type="text/javascript">
function getTextValue(){
	var textValue=document.getElementById("t_1").value;
	alert(textValue);
}
</script>
</head>
<body>
<input type="text" id="t_1"/>
<input type="submit" value="click" onclick="getTextValue()"/>
</body>
</html>

In this code, I created a text box and a button.When user will click on button, then an alert will be appear containing text of textbox.

So now, We have to mention this file in loadUrl() method.

 super.loadUrl("file:///android_asset/www/demo.html");

When we launch emulator, it will look like as :
Selection_001

When application is loaded, it will look like as :
Selection_002

When application will run, it will look like as :
Selection_005

When click on button,an alert will be shown as :
Selection_006

About Rishi Khandelwal

Software Consultant at Knoldus Software LLP, New Delhi, India having around 2.5 years industry experience. He has working experience in various technologies such as Scala, Java, Play, Akka, Lift Web, Backbone.js, javascript, Jquery, Amazon EC2, WebRTC,
This entry was posted in Web. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s