1.12. Retrieving Contacts in the Address Book

Problem

You want to retrieve and display the list of contacts that the user has saved on the device.

Solution

The PhoneGap API exposes a function called contacts.find that accepts four parameters, including the ability to search for a specific contact. By using this function in conjunction with the jQuery mobile library, you can display a list of contacts in a table view that, once a contact is selected, will display the contact’s full information.

Discussion

Several new files must be created to accomplish this. To begin, you must create the main contact listing page. Inside of your assets/www directory, create a new file called contacts.html. This file will simply hold the skeleton HTML that will be populated via JavaScript.

<!DOCTYPE HTML>
<html>
<head>
    <title>PhoneGap</title>
</head>
<body>
    <div data-role="page" id="contacts-page">
        <div data-role="header" data-position="inline">
            <h1>Contacts</h1>
        </div>

        <ul id="contactList" data-role="listview">

        </ul>

        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="map.html">Map</a></li>
                    <li><a href="compass.html">Compass</a></li>
                    <li><a href="list.html">List</a></li>
                    <li><a href="contacts.html"
class="ui-btn-active">Contacts</a></li>
                </ul>
            </div>
        </div>

        <script type="text/javascript" charset="utf-8"
src="scripts/contacts.js"></script>
    </div>
</body>
</html>

Some key design elements have been added in the preceding HTML. Firstly, ...

Get 20 Recipes for Programming PhoneGap now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial