Tài liệu Lập trình iphone chuyên nghiệp part 13 pptx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (344.65 KB, 7 trang )
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;
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
c07.indd 154c07.indd 154 12/7/07 2:53:41 PM12/7/07 2:53:41 PM
Chapter 7: Integrating with iPhone Services
155
<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>
c07.indd 155c07.indd 155 12/7/07 2:53:43 PM12/7/07 2:53:43 PM
Chapter 7: Integrating with iPhone Services
156
In 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
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
