Tài liệu Lập trình iphone chuyên nghiệp part 14 pptx

Making Phone Calls from Your Application You can make a phone call from your application simply through a special telephone link.. Therefore, if you ever have a situation in which you

Trang 1

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:

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

Trang 2

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

Trang 3

For legacy support, you can also break up the number sequence using a span element For example,

would become

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:

<label class=”cui”>office</label>

</div>

<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;

}

Trang 4

.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)

Trang 5

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)

Trang 6

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

Trang 7

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

Table 7-1: Optional mailto: Attributes

Trang 8

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

Trang 9

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 :

<label class=”cui”>office</label>

</div>

<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>

<label class=”cui”>email</label>

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:

Tiêu đề	Integrating with iPhone Services
Thể loại	Chapter

Định dạng
Số trang	9
Dung lượng	492,6 KB