Thursday, May 30, 2013

Android Phonegap Integration


First create one Android application with Eclipse and then
Follow this Steps : [Example to fetch all Contacts from device]
[1] Import cordova-2.2.0.jar file into your project.
[2] Add cordova-2.2.0.js file into your assets/www folder.
[3] Copy xml folder came with cordova source into res folder
[4] Replace your activity with this.
package com.cordovatest;

import org.apache.cordova.DroidGap;

import android.os.Bundle;

public class MainActivity extends DroidGap {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        super.setIntegerProperty("loadUrlTimeoutValue", 60000);        
        super.loadUrl("file:///android_asset/www/index.html",1000);
    }


}

[5] Add index.html file into assets/www folder with this content.
<!DOCTYPE html>
<html>
  <head>
    <title>Contact Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {    
        callFetchContacts();
    }

    function callFetchContacts(){
        var options = new ContactFindOptions();
        options.multiple=true; 
        var fields = ["id","name", "displayName", "organizations","emails","phoneNumbers","addresses"];
        navigator.contacts.find(fields, onSuccess, onError, options);   

    }

    function onSuccess(contacts) {

        alert('Done');
        alert(contacts.length);

        for(var i = 0; i < contacts.length; i++){
            alert(contacts[i].displayName);                                                 // use your logic here to display this contact values on screen.
        }


    };

    function onError(contactError) {
        alert('onError!');
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>Display Contacts</p>
  </body>
</html>

[6] Add following permissions into your Manifest file.
<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.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.RECORD_VIDEO"/>
    <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" />
    <uses-permission android:name="android.permission.BROADCAST_STICKY" />


That's It.
You will have your contacts details on your screen.
Hope it helps you.

Thanks and Regards,
Pratik Sharma

1 comment:

  1. Hi Pratik,

    can you please guide me how to install PhoneGap on windows 7 64 bit machine. does it require any prerequisites like Node.js ? i tried to download PhoneGap from www.phonegap.com but continuously getting "Network error". please help me out to get it from other links. then let me know once it is installed, then how to integrate with Eclipse Juno.

    prompt response would be appreciated.

    ReplyDelete