I have been getting familiar with the Android Development lately with the help of PhoneGap. Just want to share a simple app integrating with the native Android OS. The application has the simple functionality as creating contacts, removing contacts and looking for contacts.
I ran into some configuration issues in the beginning, but after reading the article: http://simonmacdonald.blogspot.com/2011/09/saving-contacts-with-phonegap-android.html, my setting issues are resolved. Thanks to Simon.
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">
<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 */
function onDeviceReady()
{
console.log("PhoneGap is working")
}
function createContact(firstName, lastName)
{
// create a new contact object
var contact = navigator.contacts.create();
contact.displayName = "Plumber";
contact.nickname = "Plumber"; //specify both to support all devices
// populate some fields
var name = new ContactName();
name.givenName = firstName.value;
name.familyName = lastName.value;
contact.name = name;
// save to device
contact.save(onSuccess,onError);
}
function onSuccess(contact)
{
alert("Save Success");
};
function onError(contactError)
{
alert("Error = " + contactError.code);
};
function onFindSuccess(contacts)
{
alert("Find Success");
var string="";
for (var i=0; i<contacts.length; i++) {
string = string + contacts[i].name.givenName + " " +contacts[i].name.familyName + "\n";
}
alert(string);
};
function onFindError(contactError)
{
alert("Find Error = " + contactError.code);
};
function findContact()
{
// specify contact search criteria
var options = new ContactFindOptions();
options.filter=""; // empty search string returns all contacts
options.multiple=true; // return multiple results
filter = ["name"]; // return contact.name field
// find contacts
navigator.contacts.find(filter, onFindSuccess, onFindError, options);
}
function removeContact(removeFirstName, removeLastName){
options = new ContactFindOptions();
//options.filter=removeFirstName.value;
options.filter=removeFirstName.value;
navigator.contacts.find(["name.givenName","displayName"], onRemoveFindSuccess, onFindError, options);
}
function onRemoveFindSuccess(contacts)
{
contacts[0].remove(removeFindSuccess, removeFindError);
}
function removeFindSuccess()
{
alert("Contact removed.");
}
function removeFindError(error)
{
alert("Remove Error: " +error)
}
</script>
</head>
<body onload="onBodyLoad()">
<br />
<ol>
<p> Welcome to index.html </p>
<p> First Name: </p>
<input type="text" name="firstName" id="firstName" value=""/>
<p> Last Name: </p>
<input type="text" name="lastName" id="lastName" value=""/>
<button onclick="createContact(firstName, lastName);">Add Contact</button><br>
<button onclick="findContact();">Find Contact</button><br>
<p> First Name: </p>
<input type="text" name="removeFirstName" id="removeFirstName" value=""/>
<button onclick="removeContact(removeFirstName,removeLastName);">Remove Contact</button> <br>
</ol>
</body>
</html>
Enjoy!
