Integrating with
iPhone Services
One of the most intriguing ideas when creating a Web 2.0 application for iPhone is integrating the
application with core mobile services, such as dialing phone numbers or sending e-mails. After all,
once you break those inside the browser barriers, the application becomes more than just a Web
app and extends its functionality across the mobile device.
However, iPhone service integration is a mixed bag; it’s a “good news, bad news” situation.
On the upside, perhaps the three most important mobile functions (Phone, Mail, and Google
Maps) are accessible to the developer. On the downside, there are no means of tapping into
other core services, such as SMS messaging, Calendar, Address Book, Camera, Clock, iPod,
and Settings.
In order to demonstrate the integration with iPhone services, you’ll be working with a sample
application called iProspector, which is a mocked up contact management system that emulates
the iPhone Contact UI (see Figure 7-1 ). To create the UI, you will be starting with Joe Hewitt’s iUI
framework, which is discussed fully in Chapter 3 . However, because it does not provide support
for the specific controls needed for the Contact UI, this chapter will show you how to extend iUI
as service integration is discussed.
Because iPod touch does not provide support for Phone and Mail services, any iPhone-specific
integration should degrade gracefully when running on iPod touch.
c07.indd 153c07.indd 153 12/7/07 2:53:41 PM12/7/07 2:53:41 PM
Chapter 7: Integrating with iPhone Services
154
Preparing the iProspector Application Shell
Before integrating services and adding custom UI controls for them, you first need to prepare the
iProspector application shell. The following XHTML document contains a standard iUI setup for a
hierarchical list-based, side-scrolling interface:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“ /><html xmlns=” /><head>
<title>iProspector</title>
<meta name=”viewport” content=”width=device-width; initial-scale=1.0;
<ul id=”leads” title=”Sales Leads”>
<li class=”group”>A</li>
<li><a href=”#Jack_Armitage”>Jack Armitage</a></li>
<li><a href=”#Jason_Armstrong”>Jason Armstrong</a></li>
<li class=”group”>B</li>
<li><a href=”#Bob_Balancia”>Bob Balancia</a></li>
<li><a href=”#Sara_Billingsly”>Sara Billingsly</a></li>
<li><a href=”#Uri_Bottle”>Uri Bottle</a></li>
<li><a href=”#Larry_Brainlittle”>Larry Brainlittle</a></li>
<li class=”group”>C</li>
<li><a href=”#Carl Carlsson”>Carl Carlsson</a></li>
<li><a href=”#John_Charleston”>John Charleston</a></li>
<li class=”group”>D</li>
<li><a href=”#Bill_Drake”>Bill Drake</a></li>
<li><a href=”#Randy_Dulois”>Randy Dulois</a></li>
</ul>
<!-- Contact panel -->
<div id=”Jack_Armitage” title=”Contact” class=”panel”>
<h2>This page is intentionally blank.</h2>
</div>
<!-- iUI Search form -->
<form id=”searchForm” class=”dialog” action=”search.php”>
<fieldset>
<h1>Contact Search</h1>
<a class=”button leftButton” type=”cancel”>Cancel</a>
<a class=”button blueButton” type=”submit”>Search</a>
<label>Name:</label>
<input type=”text” name=”name”/>
<label>Company:</label>
<input type=”text” name=”company”/>
Figure 7-2: iProspector top-level menu
c07.indd 156c07.indd 156 12/7/07 2:53:43 PM12/7/07 2:53:43 PM
Chapter 7: Integrating with iPhone Services
157
Figure 7-3: List of sales leads
Figure 7-4: Empty Contact panel
Creating the Contact Header
With the application shell functionality in place, the Contact panel is now ready to be filled in. At the top
of a typical iPhone Contacts page is a thumbnail image of the contact along with the contact name and
company. The HTML document is set up by replacing the dummy
h2
text with a
div
element with a
cuiHeader
class that you’ll define shortly. Inside of the
div
, three elements are defined, each of which is
assigned a
cui
class. Here’s the code:
<div id=”Jack_Armitage” title=”Contact” class=”panel”>
<div class=”cuiHeader”>
<img class=”cui” src=”jackarmitage.png”/>
<h1 class=”cui”>Jack Armitage</h1>
<h2 class=”cui”>IBM Corp.</h2>
</div>
</div>
c07.indd 157c07.indd 157 12/7/07 2:53:44 PM12/7/07 2:53:44 PM
Copyright: Tài liệu đại học ©