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. c07.indd 159c07.indd 159 12/7/07 2:53:44 PM12/7/07 2:53:44 PM Chapter 7: Integrating with iPhone Services 160 Telephone links can go beyond ordinary numbers. iPhone provides partial support for the RFC 2086 protocol ( www.ietf.org/rfc/rfc2806.txt ), which enables you to develop some sophisticated telephone-based URLs. For example, the following link calls the U.S. Postal Service, pauses for 2 seconds, and then presses 2 to get a Spanish version: <a href=”tel:+1-800-ASK-USPS;pp2”>USPS (Espanol)</a> Note that p creates a 1-second pause, so pp will cause a 2-second pause before continuing. Mobile Safari will also automatically create telephone links for you in your pages. Any number that takes the form of a phone is displayed as a link. Therefore, if you ever have a situation in which you do not want to link a telephone number (or a number that could be interpreted as a phone number), then add the format-detection meta tag (for iPhone 1.1.1 and above) to the document head: Figure 7-6: User needs to confirm a telephone link before a call is initiated. c07.indd 160c07.indd 160 12/7/07 2:53:44 PM12/7/07 2:53:44 PM Chapter 7: Integrating with iPhone Services 161 <meta name = “format-detection” content = “telephone=no”> For legacy support, you can also break up the number sequence using a span element. For example, <p>Your ID is 5083212202.</p> would become <p>Your ID is <span>5083</span>212202.</p> Creating Service Links In adding this telephone link functionality into iProspector, you want to emulate the telephone links inside of the iPhone Contact UI. To do so, begin by adding a fieldset in prospector.html and enclosing two row div elements inside of it. Inside of the div elements, add a label and a link. Here’s the code: <fieldset> <div class=”row”> <label class=”cui”>office</label> <a class=”cuiServiceLink” target=”_self” href=”tel:(765) 555-1212” onclick=”return (navigator.userAgent.indexOf(‘iPhone’) != -1)”>(765) 555-1212</a> </div> <div class=”row”> <label class=”cui”>mobile</label> <a class=”cuiServiceLink” target=”_self” href=”tel:(765) 545-1211” onclick=”return (navigator.userAgent.indexOf(‘iPhone’) != -1)”>(765) 545-1211</a> </div> </fieldset> The a links, which are referred to as service links in this book, are assigned a cuiServiceLink class and use the tel: protocol in the href value. The target=”_self” attribute is needed to override default iUI behavior, which would prevent the link from calling the Phone application. Also, to degrade gracefully when running on iPod touch, the onclick handler ensures that the link works only if running on iPhone. Finally, the label is assigned a cui class. The fieldset and row class styling are already defined in the iui.css. However, several additional styles need to be defined inside of the cui.css file. First, styles need to be defined for the labels and service links. Second, a set of styles needs to be added to emulate the push-down effect of the services link when a user presses it with a finger. The rules are shown in the following code: .row > label.cui { position: absolute; margin: 0 0 0 14px; line-height: 42px; font-weight: bold; color: #7388a5; } (continued) c07.indd 161c07.indd 161 12/7/07 2:53:45 PM12/7/07 2:53:45 PM Chapter 7: Integrating with iPhone Services 162 .cuiServiceLink { display: block; margin: 0; border: none; padding: 12px 10px 0 80px; text-align: left; font-weight: bold; text-decoration: inherit; height: 42px; color: inherit; box-sizing: border-box; } .row[cuiSelected] { position: relative; min-height: 42px; border-bottom: 1px solid #999999; -webkit-border-radius: 0; text-align: right; background-color: #194fdb !important; color: #FFFFFF !important; } .row[cuiSelected] > label.cui { position: absolute; margin: 0 0 0 14px; line-height: 42px; font-weight: bold; color: #FFFFFF; } fieldset > .row[cuiSelected]:last-child { border-bottom: none !important; } The bottom three rules are used to change the row and label styling when the row div has a cuiSelected attribute set to true (the element’s background becomes blue, and the label font is set to white). Although the styles are now ready for these elements, the service links are not yet functional within the iUI framework. By default, iUI intercepts all link click events inside of iui.js in order to change a link’s selection state and to disable the default action of a link. Therefore, you need to add a handler for service link buttons coming through this routine. Here’s the modified version of the addEventListener (“click”, function(event)) handler: addEventListener(“click”, function(event) { var link = findParent(event.target, “a”); if (link) { function unselect() { link.removeAttribute(“selected”); } (continued) c07.indd 162c07.indd 162 12/7/07 2:53:45 PM12/7/07 2:53:45 PM Chapter 7: Integrating with iPhone Services 163 if (link.href && link.hash && link.hash != “#”) { link.setAttribute(“selected”, “true”); iui.showPage($(link.hash.substr(1))); setTimeout(unselect, 500); } // Begin cui insertion else if ( link.getAttribute(“class”) == “cuiServiceLink” ) { var curRow = findParent( link, “div” ); curRow.setAttribute(“cuiSelected”, “true”); setTimeout(function() { curRow.removeAttribute(“cuiSelected”); }, 500); return; } // End cui insertion else if (link == $(“backButton”)) history.back(); else if (link.getAttribute(“type”) == “submit”) submitForm(findParent(link, “form”)); else if (link.getAttribute(“type”) == “cancel”) cancelDialog(findParent(link, “form”)); else if (link.target == “_replace”) { link.setAttribute(“selected”, “progress”); iui.showPageByHref(link.href, null, null, link, unselect); } else if (!link.target) { link.setAttribute(“selected”, “progress”); iui.showPageByHref(link.href, null, null, null, unselect); } else return; event.preventDefault(); } }, true); The first else if conditional block is inserted to check for all links that have a class of cuiServiceLink . If so, then the parent div is retrieved and its instance assigned to curRow . A cuiSelected attribute is then added to the curRow and then removed. When paired with the styles set up in cui.css, this code changes the colors of the service link’s parent div for 500 milliseconds, and then sets them back to normal. The visual effect simulates, as much as possible, the default behavior of iPhone. Finally, a return statement is added at the end of the block to ensure that the preventDefault() command is not called (which would prevent the services link from working correctly). c07.indd 163c07.indd 163 12/7/07 2:53:45 PM12/7/07 2:53:45 PM Chapter 7: Integrating with iPhone Services 164 The telephone links of the Contact panel, shown in Figure 7-7 , are now styled and fully functional. Figure 7-7: Telephone links added to the Contact panel Sending Emails Emails can also be sent from your application through links using the familiar mailto: protocol, as shown in the following example: <a href=”mailto:jack@ibmcorp.com”>Jack Armitage</a> When this link is clicked by the user, Mail opens and a new message window is displayed, as shown in Figure 7-8 . The user can then fill out the subject and body of the message and send it. As you would expect, you cannot automatically send an email message using the mailto: protocol without user intervention. The mailto: protocol always takes the user to a new message window. c07.indd 164c07.indd 164 12/7/07 2:53:45 PM12/7/07 2:53:45 PM Chapter 7: Integrating with iPhone Services 165 Following the mailto: protocol, you can also include parameters to specify the subject, cc address, bcc address, and message body. Table 7-1 lists these options. Figure 7-8: Sending a mail message from an application Option Syntax Multiple recipients , (comma separating email addresses) Message subject subject=Subject Text Cc recipients cc=name@address.com Bcc recipients bcc=name@address.com Message text body=Message text Table 7-1: Optional mailto: Attributes Per HTTP conventions, precede the initial parameter with a ? (such as ?subject= ) and precede any additional parameters with an &. c07.indd 165c07.indd 165 12/7/07 2:53:46 PM12/7/07 2:53:46 PM Chapter 7: Integrating with iPhone Services 166 The mailto: protocol normally allows line breaks in the body attribute value using %0A for a line break and %0A%0A for a line break followed by a blank line. However, iPhone ignores the %0A codes and puts all of the text on one line. As a work-around, iPhone enables you to embed HTML in your message body, therefore enabling you to add br tags for line breaks and even other tags (such as strong ) for formatting. When you combine several parameters, the following element provides everything a user needs to send a reminder message: <a class=”cuiServiceButton” target=”_self” onclick=”return (navigator.userAgent.indexOf(‘iPhone’) != -1)” href=”mailto:jack@ibmcorp.com?subject=Meeting&body=Dear Jack,<br/>I look forward to our upcoming meeting together <strong>this Friday at 8am.</strong><br/>Sincerely,<br/>Jason Malone&cc=jason@iphogcorp.com”>Email Reminder</a> As Figure 7-9 shows, all the user needs to do is press the Send button. Figure 7-9: Populating an email message data from an application c07.indd 166c07.indd 166 12/7/07 2:53:46 PM12/7/07 2:53:46 PM Chapter 7: Integrating with iPhone Services 167 Adding an email link to the iProspector application is straightforward. Because the look and functionality of an email link are identical to those of telephone links in the native iPhone Contact UI, you can piggyback on top of the styles and functionality you already defined earlier in this chapter. With that in mind, add an email link just under the two telephone links inside of the same fieldset : <fieldset> <div class=”row”> <label class=”cui”>office</label> <a class=”cuiServiceLink” target=”_self” href=”tel:(765) 555-1212” onclick=”return (navigator.userAgent.indexOf(‘iPhone’) != -1)”>(765) 555-1212</a> </div> <div class=”row”> <label class=”cui”>mobile</label> <a class=”cuiServiceLink” target=”_self” href=”tel:(765) 545-1211” onclick=”return (navigator.userAgent.indexOf(‘iPhone’) != -1)”>(765) 545-1211</a> </div> <div class=”row”> <label class=”cui”>email</label> <a class=”cuiServiceLink” target=”_self” onclick=”return (navigator.userAgent.indexOf(‘iPhone’) != -1)” href=”mailto:jack@ibmcorp.com”> jack@ibmcorp.com</a> </div> </fieldset> Pointing on Google Maps While Google Maps does not have its own custom href protocol, Mobile Safari on iPhone is smart enough to reroute any request to maps.google.com to the built-in Maps application rather than going to the public Google Web site. (On iPod touch, Mobile Safari links directly to the public Google Web site.) As a result, you can create a link to specify either a specific location or driving directions between two geographical points. You cannot specify whether to display the map in Map or Satellite view. The location you specify will be displayed in the last selected view of the user. Keep in mind the basic syntax conventions when composing a Google Maps URL: ❑ For normal destinations, start with the q= parameter, and then type the location as you would a normal address, substituting + signs for blank spaces. ❑ For clarity, include commas between address fields. Here’s a basic URL to find a location based on city and state: <a href=”http://maps.google.com/maps?q=Boston,+MA”>Boston</a> Here’s the syntax used for a full street address: <a href=”http://maps.google.com/maps?q=1000+Massachusetts+Ave,+Boston,+MA”>Jack Armitage’s Office</a> c07.indd 167c07.indd 167 12/7/07 2:53:46 PM12/7/07 2:53:46 PM . 2:53:44 PM Chapter 7: Integrating with iPhone Services 160 Telephone links can go beyond ordinary numbers. iPhone provides partial support for the RFC 2086 protocol. followed by a blank line. However, iPhone ignores the %0A codes and puts all of the text on one line. As a work-around, iPhone enables you to embed HTML