Thông tin tài liệu
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” “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 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 Chapter 7: Integrating with iPhone Services 158 The 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. c07.indd 158c07.indd 158 12/7/07 2:53:44 PM12/7/07 2:53:44 PM Chapter 7: Integrating with iPhone Services 159 Making 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 c07.indd 159c07.indd 159 12/7/07 2:53:44 PM12/7/07 2:53:44 PM . Integrating with iPhone Services One of the most intriguing ideas when creating a Web 2.0 application for iPhone is integrating the application. 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
Ngày đăng: 15/12/2013, 11:15
Xem thêm: Tài liệu Lập trình iphone chuyên nghiệp part 13 pptx, Tài liệu Lập trình iphone chuyên nghiệp part 13 pptx
