This chapter describes how to add 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", you can further tailor an ADF Mobile browser application by using the tr:goButton and tr:goLink components to integrate links to phone numbers, e-mail addresses, and Google Maps.
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 displayed in the application, prepend the phone number with the tel: protocol in an HTML link.
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 a user dials the primary phone number. Because Apple does not specify which portions of RFC 2086 that it supports, you must test each portion.In Example 8-3, the EL expression, #{sessionScope.empDetails.PhoneNumber} represents the phone number.
To create a link that displays a map that shows the data available in the application, specifying the destination property of the tr:goLink component as follows:
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 and locate. If multiple items are found, Google Maps drops multiple pins automatically.
Note:
The address string must be well formatted, including commas between words. Also, 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}"/>
The address string, such as the one in Example 8-4, must be have plus sign (+) characters rather than spaces.
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 to Oracle's San Francisco office at 1 Front Street in San Francisco are as follows:
http://maps.google.com/maps?saddr=200+Oracle+Parkway,+Redwood+City,+CA,+USA& daddr=1+Front+Street,+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 using 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 some 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 using the viewport specification, see http://developer.apple.com/.
<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 appear too large. As a result, the iPhone shrinks pages until they are too small to read. As illustrated by the following line from Example 8-6, 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;"/>
</f:verbatim>