This chapter describes how to add e-mail, telephony, and Google Maps functionality to ADF Mobile browser applications.
This chapter includes the following sections:
Section 8.1, "Introduction to Extending Applications for E-Mail, Telephony, and Google Maps"
Section 8.5, "What You May Need to Know About Page Display Dimensions"
In addition to using the style sheets described in Chapter 4, "Skinning ADF Mobile Browser Applications", you can further tailor an ADF Mobile browser application to include support for e-mail, telephony, and Google Maps by defining the tr:goButton and tr:goLink components with EL (Expression Language) expressions.
To invoke an e-mail application from a web application:
Use either the tr:goButton or the tr:goLink components.
Prepend the mailto: protocol in an HTML link.
Set the destination property to the HTML link (represented as the Expression Language statement #{sessionScope.empDetails.Email} in Example 8-1).
Example 8-1 Integrating the iPhone E-Mail Client Using the mailto: Protocol
<tr:goLink styleClass="messageText"
text="#{sessionScope.empDetails.Email}"
destination="mailto:#{sessionScope.empDetails.Email}"/>
The mailto: protocol enables you to add the mail properties that are listed in Table 8-1.
| Property | Syntax |
|---|---|
|
Multiple Recipients |
A comma (,) separating each e-mail address |
|
Message Subject |
|
|
cc Recipients |
|
|
bcc Recipients |
|
|
Message Text |
|
To specify these properties, append the e-mail address with question mark (?) as illustrated by #{sessionScope.empDetails.Email}? in Example 8-2 and then add the properties, separating each with an ampersand (&).
To invoke a call dialog box for a phone number:
Use either the tr:goButton or the tr:goLink component.
Prepend the phone number with the tel: protocol.
Note:
The phone number must support the portion of the RFC 2806 protocol (http://www.ietf.org/rfc/rfc2806.txt) which enables you to add pauses or dial extensions after an end user dials the primary phone number. Because Apple does not specify which portions of RFC 2086 that it supports, you must test each portion.Set the destination property to the telephone number (represented as the EL expression, #{sessionScope.empDetails.PhoneNumber} in Example 8-3).
To create a link that displays a map that shows the data available in the application, specify the destination property of the tr:goLink component as follows:
Use either the tr:goButton or the tr:goLink component.
Define destination= as the URL of Google Maps. (destination=http://maps.google.com/maps, as illustrated in Example 8-4.)
To search for a location, append the Google Maps URL with ?q=.
Define q= using the address string of the target location. This value can be a full street address, a city, landmark, or any item that Google Maps can search for and locate. If multiple items are found, Google Maps drops multiple pins automatically.
Note:
The address described in thetext string must be well-formatted and include commas between words. For the destination string, replace spaces with plus sign (+) characters.Example 8-4 illustrates how to define the tr:goLink component to invoke a Google Maps application and then drop a pin on 200 Oracle Parkway.
Example 8-4 Specifying Locations in Google Maps
<tr:goLink styleClass="messageAddrText"
text="200 Oracle Parkway, Redwood City, CA, USA"
destination="http://maps.google.com/maps?q=200+Oracle+Parkway,+Redwood+City,+CA,+USA"/>
Example 8-5 illustrates specifying a location using an address represented by EL expressions.
Example 8-5 Specifying Locations in Google Maps Using EL Expressions
<tr:goLink styleClass="messageAddrText"
text="#{sessionScope.empDetails.StreetAddress},
#{sessionScope.empDetails.City},
#{sessionScope.empDetails.StateProvince},
#{sessionScope.empDetails.CountryName}"
destination=" http://maps.google.com/maps?q=#{sessionScope.empDetails.StreetAddress},
+#{sessionScope.empDetails.City},
+#{sessionScope.empDetails.StateProvince},
+#{sessionScope.empDetails.CountryName}"/>
You must join each EL expression in the address string with a plus sign (+), as illustrated in Example 8-5. Do not include spaces between the EL expressions.
Google Maps also supports driving directions. Modify the string following the question mark (?) in the Google Maps URL with the starting and destination addresses (saddr=<starting address>&daddr=<destination address>). Using this format, the directions from Oracle headquarters at 200 Oracle Parkway in Redwood City, California, to 1 Telegraph Hill in San Francisco, California, are as follows:
http://maps.google.com/maps?
saddr=200+Oracle+Parkway,+Redwood+City,+CA,+USA
&daddr=1+Telegraph+Hill,+San+Francisco,+CA,+USA
Note:
Apple and Google have not yet published other APIs.iPhone Safari supports both Google Maps and YouTube applications in that it automatically intercepts certain URL calls and invokes a native application rather than opening the URL for the target web site. For example, when a user clicks an HTML link to Google Maps (http://maps.google.com), Safari invokes a native Google Maps application rather than navigating to the Google Maps web site. Because the native Google maps application accepts URL parameters supported by maps.google.com, users can specify a location and drop a pin.
To control the correct zoom ratio, add a viewport meta tag in the header of a page. The viewport is a device-specific meta tag used to ensure that a page displays at the correct scale. Example 8-6, illustrates setting the viewports for both iPhones and BlackBerry smartphones. For more information on the viewport, see iOS Human Interface Guidelines, available from the iOS Developer Library (http://developer.apple.com/library/ios/navigation/).
<trh:head title="Online Banking Demo">
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1252"/>
<f:verbatim rendered="#{requestContext.agent.skinFamilyType eq 'blackberry'}">
<meta name="viewport"
content="width=device-width;
height=device-height;
initial-scale=1.0;
maximum-scale=1.0;
user-scalable=0;"/>
</f:verbatim>
<f:verbatim rendered="#{requestContext.agent.skinFamilyType eq 'iPhonewebkit'}">
<meta name="viewport"
content="width=device-width;
initial-scale=1.0;
maximum-scale=1.0;
user-scalable=0;"/>
</f:verbatim>
</trh:head>
Note:
Versions 4.6 and later of BlackBerry support theHandheldFriendly meta tag which is similar to viewport. Include the following line in the header to enable the page to scale appropriately:
<meta name="HandheldFriendly" content="True">
While some mobile browser applications may display correctly on desktop Safari browsers, they may not scale not correctly for the smaller screen of the iPhone and may appear too large. As a result, the iPhone shrinks pages until they are too small to read. The following line from Example 8-6, illustrates how to set the iPhone viewport specifications in the <head> element to ensure that applications display properly on iPhones.
<f:verbatim rendered="#{requestContext.agent.skinFamilyType eq 'iPhonewebkit'}">
<meta name="viewport"
content="width=device-width;
initial-scale=1.0;
maximum-scale=1.0;
user-scalable=0;"/>