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

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