One of the most intriguing ideas when creating a Web 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, four of the most important mobile functions (Phone, Mail, SMS Messaging, and Google Maps) are accessible to the developer. On the downside, there is no means of tapping into other core services, such as Calendar, Address Book, Camera, Clock, iPod, and Settings.
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 10-1). To create the UI, you will be starting with iUI framework, which is discussed fully in Chapter 3, "Building with Web App Frameworks." 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.
Because iPod touch does not provide support for Phone service, any iPhone-specific integration should degrade gracefully when running on iPod touch.
Before integrating services and adding custom UI controls for them, you need to prepare the iProspector application shell. The following XHTML document contains a version of the 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>
<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>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 10-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 10-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 10-4).
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>The img element will hold the thumbnail image. The h1 element will contain the name, whereas the h2 element will show the company.
Next, it is time to create the cui.css file (or download it from www.wrox.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 10-5 shows the current state of the Contact panel.
With all the preparatory UI in place, you can begin to add the service integration.
You can make a phone call from your application through a special telephone link. A telephone link is specified through the tel: protocol. The basic syntax is this:
<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 10-6) that allows the user to click Call or Cancel.
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. Safari on iPhone 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), add the format-detection <meta> tag to the document head:
<meta name = "format-detection" content = "telephone=no">
In adding this telephone link functionality into iProspector, you want to emulate the telephone links inside 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"
>(765) 555-1212</a>
</div>
<div class="row">
<label class="cui">mobile</label>
<a class="cuiServiceLink" target="_self" href="tel:(765) 545-1211"
>(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. 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 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. 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;
}
.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 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"); }
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 one is discovered, the parent div is retrieved and its instance assigned to curRow. A cuiSelected attribute is then added to the curRow and 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; then it 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).
The telephone links of the Contact panel, shown in Figure 10-7, are now styled and fully functional.
E-mails can also be sent from your application through links using the familiar mailto: protocol, as shown in the following example:
<a href="mailto:[email protected]">Jack Armitage</a>
When this link is clicked by the user, Mail opens and a new message window is displayed, as shown in Figure 10-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 e-mail message using the mailto: protocol without user intervention. The mailto: protocol always takes the user to a new message window.
Following the mailto: protocol, you can also include parameters to specify the subject, cc address, bcc address, and message body. Table 10-1 lists these options.
Table 10-1. Optional mailto: Attributes
Option | Syntax |
|---|---|
Multiple recipients | , (comma separating e-mail addresses) |
Message subject |
|
cc recipients | |
bcc recipients | |
Message text |
|
Per HTTP conventions, precede the initial parameter with a ? (such as
?subject=), and precede any additional parameters with an &.
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 the text on one line.
As a work-around, iPhone enables you to embed HTML in your message body, thereby 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:[email protected]?
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&[email protected]">Email Reminder</a>As Figure 10-9 shows, all the user needs to do is press the Send button.
Adding an e-mail link to the iProspector application is straightforward. Because the look and functionality of an e-mail 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 defined earlier in this chapter. With that in mind, add an e-mail 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"
>
(765) 555-1212</a>
</div>
<div class="row">
<label class="cui">mobile</label>
<a class="cuiServiceLink" target="_self" href="tel:(765) 545-1211"
>
(765) 545-1211</a>
</div>
<div class="row">
<label class="cui">email</label>
<a class="cuiServiceLink" target="_self"
href="mailto:[email protected]">
[email protected]</a>
</div>
</fieldset>Much like e-mail message integration, you can send SMS messages using the sms protocol. For example, the following code launches the SMS application, addressing a text message to 765-545-1211:
<a href="sms:765-545-1211">(765) 545-1211</a>
As Figure 10-10 shows, you can then enter the message using the keyboard and send it when finished.
Alternatively, if you just want to launch the SMS app without a specific number to text, use a blank sms:
<a href="sms:">Send SMS Message</a>
For the iProspector app, you can add SMS message support much like the e-mail button, as shown in the code highlighted here:
<fieldset>
<div class="row">
<label class="cui">office</label>
<a class="cuiServiceLink" target="_self" href="tel:(765) 555-1212"
>
(765) 555-1212</a>
</div>
<div class="row">
<label class="cui">mobile</label>
<a class="cuiServiceLink" target="_self" href="tel:(765) 545-1211"
>
(765) 545-1211</a>
</div>
<div class="row">
<label class="cui">email</label>
<a class="cuiServiceLink" target="_self"
href="mailto:[email protected]">
[email protected]</a>
</div><div class="row">
<label class="cui">sms</label>
<a class="cuiServiceLink" target="_self" href="sms:765-545-1211">
(765) 545-1211</a>
</div>
</fieldset>
If you try to click an SMS link on an iPod touch, the device ignores the request, since iPod touch does not support SMS messaging.
Although Google Maps does not have its own custom href protocol, 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, 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>
When the address shown previously is located in Google Maps, the marker is generically labeled 1000 Massachusetts Ave Boston MA. However, you can specify a custom label by appending the URL with +(Label+Text), as shown in the following example:
<a href="http://maps.google.com/maps?q=1000+Massachusetts+Ave,+Boston,+MA+ (Jack+Armitage's+Office)">Jack Armitage's Office</a>
Figure 10-11 shows the custom label in Google Maps.
You can also specify a location using latitude and longitude coordinates:
<a href="http://maps.google.com/maps?q=52.123N,2.456W">Jack's Summer Retreat</a>
To get directions, use the saddr= parameter to indicate the starting address and the daddr= parameter to specify the destination address, as shown in the following example:
<a href="http://maps.google.com/maps?saddr=Holden+MA&daddr=1000+Massachusetts+Ave, +Boston,+MA">Directions To Office</a>
Figure 10-12 displays the map view when this link is clicked.
The Google Maps public Web site has an extensive set of parameters. However, except where noted previously, none of these are supported at this time. You cannot, for example, use the t= parameter to specify the Satellite map, the z= parameter to indicate the map zoom level, or even layer=t to turn on the Traffic display. The user needs to perform those steps interactively.
To include Google Maps integration with iProspector, you need to add two new capabilities to its Contact panel. First, you need to display multiline, read-only address information in its own box. Second, you need to create a new action button style to emulate the button functionality of the native iPhone Contact UI.
To define an address box, define a div with a new style named rowCuiAddressBox. Inside of it, add a cui label and then cui p elements for each line of the address:
<fieldset>
<div class="rowCuiAddressBox">
<label class="cui">work</label>
<p class="cui">1520 Main Street</p>
<p class="cui">Boston, MA 01210</p>
</div>
</fieldset>Next, going back to cui.css, you need to define four new styles:
.rowCuiAddressBox {
position: relative;
min-height: 24px;
border-bottom: 1px solid #999999;
-webkit-border-radius: 0;
text-align: left;
}
.rowCuiAddressBox > p.cui {
box-sizing: border-box;
margin: 0;
border: none;
text-align: left;
padding: 2px 10px 0 80px;
height: 30px;
background: none;
font-weight: bold;
}
fieldset > .rowCuiAddressBox:first-child {
padding-top: 12px;
border-bottom: none !important;
}
fieldset > .rowCuiAddressBox:last-child {
min-height: 25px;
text-align: left;
border-bottom: none !important;
}The :first-child and :last-child styles ensure proper padding and sizing of the contents of the box.
To style the address box label, you need to add one additional selector onto the previously defined .row > label.cui rule:
.row > label.cui, .rowCuiAddressBox > label.cui {
position: absolute;
margin: 0 0 0 14px;
line-height: 42px;
font-weight: bold;
color: #7388a5;
}The display-only address box is now ready.
Two new links are needed to add Google Maps integration. One link will display a map of the contact, and a second will provide driving directions. Here is the fieldset definition:
<fieldset> <div class="row">
<a class="cuiServiceButton" target="_self"
href="http://maps.google.com/maps?q=1000+Massachusetts+Ave,+Boston,+MA">Map To
Office</a>
</div>
<div class="row">
<a class="cuiServiceButton" target="_self"
href="http://maps.google.com/maps?saddr=Holden+MA&daddr=1000+Massachusetts+Ave,
+Boston,+MA">Directions To Office</a>
</div>
</fieldset>These two links are assigned to the cuiServiceButton class. The first link displays a map of the specified address in Boston, whereas the second link provides driving directions between Holden, Massachusetts and the Boston address. Once again, to get around the way iUI handles events in iui.jss, you need to specify the target="_self" parameter.
Back over in cui.css, one new style needs to be added:
.cuiServiceButton {
display: block;
margin: 0;
border: none;
padding: 12px 10px 0 0px;
text-align: center;
font-weight: bold;
text-decoration: inherit;
height: 42px;
color: #7388a5;
box-sizing: border-box;
}This style emulates the look of the action buttons (centered blue text, and so on) in the native iPhone Contact UI.
There is one final tweak that needs to be made to iui.jss before the cuiServiceButton links work as expected. If you recall, an else if condition is added to trap for service links inside the addEventListener( "click", event(function) ) function. You need to add an additional test so that both cuiServiceLink and cuiServiceButton classes are evaluated. To do so, modify the line of code as specified here:
else if ( (link.getAttribute("class") == "cuiServiceLink" ) ||
( link.getAttribute("class") == "cuiServiceButton") )Now that the cuiServiceButton link class is ready to go, you need to add one last button to the iProspector Contact panel to finish it off — a services button that automatically composes a reminder e-mail to the Contact. The following HTML code combines mailto: link functionality and the cuiServiceButton style:
<fieldset>
<div class="row">
<a class="cuiServiceButton" target="_self" href="mailto:
[email protected]?subject=Meeting&body=Dear Jack, I look forward to our upcomingmeeting together this Friday at 8am. Sincerely, Jason Malone&cc= [email protected]">Email Reminder</a> </div> </fieldset>
Figure 10-13 shows the display of these cuiServiceButton links inside of iProspector.
The iProspector Contact panel is now fully enabled to emulate both the look and functionality of the built-in iPhone Contact UI.
Listing 10-1 displays the prospector.html file, Listing 10-2 displays the cui.css file, and Listing 10-3 displays the modified function block inside of iui.jss.
Example 10-1. prospector.html
<!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=320; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;"/>
<style type="text/css" media="screen">@import "./iui/iui.css";</style>
<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">
<div class="cuiHeader">
<img class="cui" src="jackarmitage.png"/>
<h1 class="cui">Jack Armitage</h1>
<h2 class="cui">IBM Corp.</h2>
</div>
<fieldset>
<div class="row">
<label class="cui">office</label>
<a class="cuiServiceLink" target="_self" href=
"tel:(765) 555-1212"
>(765) 555-1212</a>
</div>
<div class="row">
<label class="cui">mobile</label>
<a class="cuiServiceLink" target="_self" href="tel:(765)
545-1211">(765) 545-1211</a>
</div>
<div class="row">
<label class="cui">email</label>
<a class="cuiServiceLink" target="_self"
href="mailto:[email protected]"
>[email protected]</a>
</div>
<div class="row">
<label class="cui">sms</label>
<a class="cuiServiceLink" target="_self" href="sms:
765-545-1211">(765) 545-1211</a>
</div>
</fieldset>
<fieldset>
<div class="rowCuiAddressBox">
<label class="cui">work</label>
<p class="cui">1520 Main Street</p>
<p class="cui">Boston, MA 01210</p>
</div>
</fieldset>
<fieldset>
<div class="row">
<a class="cuiServiceButton" target="_self"
href="http://maps.google.com/maps?q=1000+Massachusetts+Ave,
+Boston,+MA">Map To Office</a>
</div>
<div class="row">
<a class="cuiServiceButton" target="_self"
href="http://maps.google.com/maps?saddr=Holden+MA&daddr=1000+
Massachusetts+Ave,+Boston,+MA">Directions To Office</a>
</div>
</fieldset>
<fieldset>
<div class="row">
<a class="cuiServiceButton" target="_self"
onclick="return
(navigator.userAgent.indexOf('iPhone') != −1)
"href="mailto:[email protected]?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&[email protected]">Email Reminder</a>
</div>
</fieldset>
</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>Example 10-2. cui.css
/* cui Contacts Extension to Joe Hewitt's iUI */
/* 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;
}
/* Contact Fields */
.row > label.cui, .rowCuiAddressBox > label.cui {
position: absolute;
margin: 0 0 0 14px;
line-height: 42px;
font-weight: bold;
color: #7388a5;
}
.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;
}
.cuiServiceButton {
display: block;
margin: 0;
border: none;
padding: 12px 10px 0 0px;
text-align: center;
font-weight: bold;
text-decoration: inherit;
height: 42px;
color: #7388a5;
box-sizing: border-box;
}
a[cuiSelected], a:active {
background-color: #194fdb !important;
color: #FFFFFF !important;
}
.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;
}
/* Contact Address Box (Display-only) */
.rowCuiAddressBox {
position: relative;
min-height: 24px;
border-bottom: 1px solid #999999;
-webkit-border-radius: 0;
text-align: left;
}
.rowCuiAddressBox > p.cui {
box-sizing: border-box;
margin: 0;border: none;
text-align: left;
padding: 2px 10px 0 80px;
height: 30px;
background: none;
font-weight: bold;
}
fieldset > .rowCuiAddressBox:first-child {
padding-top: 12px;
border-bottom: none !important;
}
fieldset > .rowCuiAddressBox:last-child {
min-height: 25px;
text-align: left;
border-bottom: none !important;
}Example 10-3. Modified portion of iui.js
addEventListener("click", function(event)
{
var link = findParent(event.target, "a");
if (link)
{
function unselect() { link.removeAttribute("selected"); }
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" ) || ( link
.getAttribute("class") == "cuiServiceButton") )
{
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;
}
}, true);One of the most compelling features of a mobile application — either Web-based or native — is the ability to integrate with core iPhone services. In this chapter, I showed you how you can integrate your iPhone Web applications with four of the most important mobile functions: Phone, Mail, SMS Messaging, and Google Maps. As I did so, I walked you through how you might utilize those services in a contact management app.