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

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

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

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