Here I’m going to explain about how to create a PhoneGap app with android using Eclipse in windows. For creating this application first we must have the basic ideas about Android Sdk and PhoneGap. Android Development with PhoneGap can be done in Windows, OS X, or Linux. In this post we are going to implement the PhoneGap project in android with Javascript

What is PhoneGap?

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms with HTML,CSS3 and JAVASCRIPT Technologies. This is a good solution for those who are interested in creating an application that can run on multiple devices with the same code. Let us learn some fundamentals of the PhoneGap development.

Introducing PhoneGap

mobile-gap

Now a Days most of the Mobile Developers using PhoneGap Development tool for creating cross platform Mobile Applications.The PhoneGap Development app works as a framework to easily build mobile applications without learning extra programming languages.

Advantages of PhoneGap

  • It doesn’t require any special programming language
  • It supports all major platforms
  • It supports various API’s
  • It provides open source caipabilities

Different Mobile Platforms support PhoneGap Development

  • Android
  • Ios
  • BlackBerry
  • Symbian
  • Bada

Supportive API’s by PhoneGap

  • Accelerometer
  • Camera
  • Capture
  • Compass
  • File
  • Network
  • Globalization

Setup

Before we start we need some basic ideas about the setup. Suppose most of you building and testing applications in Android or Ios devices. Here I describe about the Android Devices what would you need to run this application.

Steps to create Android app with PhoneGap

  • Download and install PhoneGap
  • Download and install Android Sdk
  • Create a new Android Application project
  • Convert the project from Java to Javascript
  • Add the required libraries from PhoneGap to Android
  • Create a www folder in the assets folder and add an index.html file into it
  • Make the required changes in the AndroidManifesto file
  • Run the Application

Download and Install PhoneGap

  • Go to the PhoneGap and download the latest version of PhoneGap.
  • Extract the files to the directory as you want.

Download and Install Android

  • Download Android Sdk from the link Android Developer and Jdk from Java Developers
  • Install both Android sdk and jdk
  • open the eclipse side and inside that open help->install new software.
  • A window will open which shows a space to give a location
  • Go to Install Eclipse plugin copy the url from there to give the location space
  • Now the eclipse is ready for Android Development
  • If you already have Android sdk no need to install this.you only need to download PhoneGap

Creating a New Android Application Project

Open Eclipse go to File-New-Android Application project then a window will appear. Give the Application Name and Project Name into that.

prefi
config-pro
conf-launch-icon
create-activity
blank-activity

Now our Android Application project is ready.

android-app-gap-form

Convert the Project from Java to Javascript to make PhoneGap Application

  • First create a New folder www in assets folder and create a file named index.html inside the www folder.

phone-gap-folder-list

Add the required libraries from PhoneGap to Android

re-libraries

Then Copy the corodova file in to the www folder and corodova-2.9. jar file into the libs folder and an xml folder in res folder in android.

se-phone-gap-fdlr
Now Go to the Activity class in Android and make changes in the following lines
Give MainActivity extends DroidGap instead of MainActivity extends Activity
Replace the line
setContentView(R.layout.activity_main);
with
super.loadUrl(“file:///android_asset/www/index.html”);

code1
Now copy the content inside index.html

[sh lang=”html”]

<html>
<head>
<title>Registration Form</title>
<script type=”text/javascript”>
<!–
function validate_form ( )
{

if ( document.emp.emp_name.value == “” )
{
alert ( “Please fill in the ‘Your Employee Name’ box.” );
return false;
}
if ( document.emp.num.value == “” )
{
alert ( “Enter Employee Number” );
return false;
}
alert(“sucessfully Submitted”);
return true;

}
if (!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/).test(document.emp.email_id.value))
{
alert(“You have entered an invalid email address!”)
return (false)
}

function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
{alert(“Enter Number”);
return false;
}
return true;
}

//–>
</script>
</head>
<body bgcolor=”#FFFFFF”>
<form name=”emp” action=”” onSubmit=”return validate_form();” method=”post”>
<table align=”center” width=40% width=”100%” cellspacing=”2″ cellpadding=”2″ border=”5″>
<tr>
<td colspan=”2″ align=”center”><b>Employee Registration Form.</b></td>
</tr>
<tr>
<td align=”left” valign=”top” width=”41%”>Employee Name<span style=”color:red”>*</span></td>
<td width=”57%”><input type=”text” value=”” name=”emp_name” size=”24″></td>
</tr>
<tr>
<td align=”left” valign=”top” width=”41%”>Employee Number<span style=”color:red”>*</span></td>
<td width=”57%”>
<input type=”text” value=”” name=”num” onKeyPress=”return isNumberKey(event)” size=”24″></td>
</tr>
<tr>
<td align=”left” valign=”top” width=”41%”>Address</td>

<td width=”57%”><textarea rows=”4″ maxlen=”200″ name=”S2″ cols=”20″></textarea></td>
</tr
><tr >

<td align=”left” valign=”top” width=”41%”>Contact Number</td>
<td width=”57%”>
<input type=”text” value=”” onKeyPress=”return isNumberKey(event)” name=”txtFName1″ size=”24″></td>
</tr>
<tr >
<td align=”left” valign=”top” width=”41%”>Job Location</td>
<td width=”57%”><select name=”mydropdown”>
<option value=”Default”>Default</option>
<option value=”Chennai”>Chennai</option>
<option value=”Bangalore”>Bangalore</option>
<option value=”Chennai”>Pune</option>
<option value=”Bangalore”>Mysore</option>
<option value=”Chennai”>Chandigarh</option>

</select></td>

</tr>

<tr >
<td align=”left” valign=”top” width=”41%”>Designation</td>
<td width=”57%”>
<select name=”mydropdown”>
<option value=”Default”>Default</option>
<option value=”Systems Engineer”>Systems Engineer</option>
<option value=”Senior Systems Engineer”>Senior Systems Engineer</option>
<option value=”Technology Analyst”>Technology Analyst</option>
<option value=”Technology Lead”>Technology Lead</option>
<option value=”Project Manager”>Project Manager</option>

</select></td>

</tr>
<tr>
<td align=”left” valign=”top” width=”41%”>Email<span style=”color:red”>*</span></td>
<td width=”57%”>
<input type=”text” value=”” name=”email_id” size=”24″></td>
</tr>
<tr>
<td colspan=”2″>
<p align=”center”>
<input type=”submit” value=” Submit” name=”B4″>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type=”reset” value=” Reset All ” name=”B5″></td>
</tr>

</table>
</form>
</body>
</html>

[/sh]

 

Make Changes in Android Manifesto
Copy this above

in Android Manifesto file

code-last

Running the Application

running-app

“The PhoneGap Application is ready Enjoy coding.”

2 thoughts on “How to Develop Android app using PhoneGap”

Comments are closed.