Integrating with iPhone Ser vices 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 dial
Trang 1Integrating with iPhone Ser vices
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
Trang 2Preparing 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”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>iProspector</title>
<meta name=”viewport” content=”width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;”/>
<style type=”text/css” media=”screen”>@import “ /iui/iui.css”;</style>
Contact header
Services link
Address book box
Services button
Figure 7-1: Contact UI
Trang 3<style type=”text/css” media=”screen”>@import “ /iui/cui.css”;</style>
<script type=”application/x-javascript” src=” /iui/iui.js”></script>
</head>
<body>
<! Top iUI toolbar >
<div class=”toolbar”>
<h1 id=”pageTitle”></h1>
<a id=”backButton” class=”button” href=”#”></a>
<a class=”button” href=”#searchForm”>Search</a>
</div>
<! Top-level menu >
<! Customers, Orders, Settings, and About menus not enabled for this sample > <ul id=”home” title=”iProspector” selected=”true”>
<li><a href=”#leads”>Sales Leads</a></li>
<li><a href=”#customers”>Customers</a></li>
<li><a href=”#orders”>Order Fulfillment</a></li>
<li><a href=”#settings”>Settings</a></li>
<li><a href=”#about”>About</a></li>
</ul>
<! Sales Leads menu >
<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”/>
</fieldset>
</form>
</body>
</html>
Trang 4In the document head, begin by adding a link to a style sheet named cui.css, stored in the same directory
as iui.css You’ll begin defining cui.css shortly
The iUI framework uses a series of ul lists to compose a list-based navigation UI The home ul list
provides the top-level menu for the iProspector application (see Figure 7-2 ) Because you’re concerned
here with the functionality of working with a specific contact rather than the nuts and bolts of an entire
contact management system, the Sales Leads link is the only one defined
The leads ul list provides a canned list of sales leads (see Figure 7-3 ) Each of the list items contains a
link that, in the real world, would be mapped to a unique Contact panel The Jack_Armitage link is
connected to the one Contact panel provided in the example document From a code standpoint, the
Contact panel is a div element with the panel class assigned to it, which displays a generic iPhone-style
page (see Figure 7-4 )
Figure 7-2: iProspector top-level menu
Trang 5Figure 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>
Trang 6The img element will hold the thumbnail image The h1 element will contain the name, while the h2
element will show the company
Creating the cui.css Style Sheet
Next, it is time to create the cui.css file (or download it from www.wiley.com ) When you use the
style conventions originally defined in iui.css, four additional rules are defined for the Contact
header:
.panel h1.cui {
margin: 5px 0 0px 80px;
font-size: 20px;
font-weight: bold;
color: black;
text-shadow: rgba(255, 255, 255, 0.75) 2px 2px 0;
top: 5px;
clear: none;
}
.panel h2.cui {
margin: 0 0 30px 80px;
font-size: 14px;
font-weight: normal;
color: black;
text-shadow: rgba(255, 255, 255, 0.75) 2px 2px 0;
top: 43px;
clear: none;
}
.panel img.cui {
margin: 0px 15px 5px 0px;
border: 1px solid #666666;
float: left;
-webkit-border-radius: 5px;
}
.panel > div.cuiHeader {
position: relative;
margin-bottom: 0px 0px 10px 14px;
}
The first three rules position the h1 , h2 , and img elements in the appropriate location The final rule adds
spacing between the header panel and the rest of the page Figure 7-5 shows the current state of the
Contact panel
With all of the preparatory UI in place, you can begin to add the service integration
Trang 7Making Phone Calls
from Your Application
You can make a phone call from your application simply through a special telephone link A telephone link is specified through the tel: protocol The basic syntax is:
<a href=”tel:1-507.555-5555”>1-507.555-5555</a>
When a user clicks the link, the phone does not automatically dial Instead, iPhone displays a confirmation box (see Figure 7-6 ) that allows the user to click Call or Cancel
Figure 7-5: Adding the Contact header