Thursday 20 September 2012

PhoneGap Basic Tutorial

PhoneGap is a framework to support HTMl,CSS and JavaScript to develop a mobile application. 
  By using Phoegap web Developer easily build web based mobile application in different mobile Os. As for example Android, IOs, BlackBerry and Window. 
   PhoneGap was started in 2008 to support web developer to create web app in mobile Os with out using native APIs . 
The framework currently supports the Accelerometer, Camera, Compass, Contacts, File, Geolocation, Media, Network, Notifications (Alert, Sound, and Vibrate) and Storage device APIs. There is full support for all of these features in the newer iOS Devices (3GS+) and Android.  For more details on support for Blackberry, WP7, Sybian, webOS, and Bada devices check the official compatibility table
PhoneGap is certainly a cross-platform framework capable of running on many supported devices, but in order to deploy successfully we have to test and tweak our code on each of the target devices. Generally We use this to create a rich web based application in Android, IOs or Window. By using native APIs sometime it is difficult to create rich web base application. So PhoneGap comes as rescue.    

               Install & Hello World for Android in PhoneGap
In this article I am going to show how to install and print hello world in Android by using phone Gap. 

Step 1
First You have to download eclipse and setup the Android work environment. For that You can Follow My Tutorial Hello world! in Android  
Step2
Now create a new Android project and named it HelloPhoneGap .
Now right click on Your project  helloPhoneGap and create a folder named it libs. If this folder is already in project  then there is no need to create it. In your project folder there is a assets folder inside that  create another folder called www.
    Now download PhoneGap Framework from here and unzip it at any loaction in your system. Open the folder inside that you found android folder . Open android folder and copy paste following file in your libs and www folder as shown in pic. 

After Doing that right click on your project and click property >> java build path >> libraries >> add jar >> HelloPhoneGap >> libs  and select cardova 2.0.0.jar
step 3   Now the coding part 
Within our www directory, create an welcome.html file and drop in the code below:

<!DOCTYPE HTML>
<html>
  <head>
    <title>mobiletuts phonegap</title>
  <script src="cordova-2.0.0.js"></script>
  <script>
function myFunction() { alert("Hello World!"); var age; age=document.getElementById("usr").value; document.write("<p>Welcome </p>"+age); }
  </script>
  </head>
  <body >
<h1>Welcome Pages</h1> <table> <tr> <td>UserName:</td> <td> <input type="text" name="usr" id="usr" /></td> </tr> 
<tr>
<td> Password:</td> <td> <input type="password" name="pw" id = "pw"/></td> </tr>  <tr>  <td> <button onclick="myFunction()">Login</button></td> </tr> </table>
  </body>
</html>



Now we have to change our main java class which you found in src folder. change this file  same way as shown in following picture. 
Open up the AndroidManifest.xml file and add the following before the application entry and below the  uses-sdk tag

<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"/>

On the activity tag, add the following attribute:
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" 

The last thing to do is copy the xml folder from the PhoneGap download to the res directory in the project. 

You are now ready to run this in the emulator. You can right-click your project now and run as an Android Application. You get the output like this image 


                 

1 comment:

  1. Hi saurabh,
    Please give some working example on Map and navigation

    ReplyDelete

Build a Custom Kernel Module for Android

Hi Guys!!!Hope you are doing well !!!. Today I will describe how you can write a custom kernel module(Hello world) for Android and load it a...