8 Extending ADF Mobile Browser Applications

This chapter describes how to add functionality to ADF Mobile browser applications.

This chapter includes the following sections:

8.1 Introduction to Extending Applications for E-Mail, Telephony, and Google Maps

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.

8.2 Integrating an E-Mail Client

To invoke an e-mail application from a Web application:

  1. Use either the tr:goButton or the tr:goLink components.

  2. Prepend the mailto: protocol in an HTML link.

  3. 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}"/>

8.2.1 Adding Mail Properties

The mailto: protocol enables you to add the mail properties that are listed in Table 8-1.

Table 8-1 Mail Properties

Property Syntax

Multiple Recipients

A comma (,) separating each e-mail address

Message Subject

subject =<subject text>

cc Recipients

cc=<name@address.com>

bcc Recipients

bcc=<name@address.com>

Message Text

body=<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 (&).

Example 8-2 Adding E-Mail Properties

<tr:goLink styleClass="messageText"
                                 text="#{sessionScope.empDetails.Email}"                                                  destination="mailto:#{sessionScope.empDetails.Email}?subject=howdy&cc=myboss@oracle.com&bcc=me@oracle.com&body=howdy partner!"/>

8.3 Integrating Telephony

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.

Example 8-3 Enabling the Call Dialog Box

<tr:goLink styleClass="messageText"
                                 text="#{sessionScope.empDetails.PhoneNumber}"
destination="tel:#{ sessionScope.empDetails.PhoneNumber}"/>                           

8.4 Integrating Google Maps

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:

  1. Define destination= as the URL of Google Maps. (destination=http://maps.google.com/maps, as illustrated in Example 8-4.)

  2. To search for a location, append the Google Maps URL with ?q=.

  3. 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.

8.4.1 Programming Driving Directions

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.

8.4.2 Supporting Google Maps on iPhone

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.

8.5 What You May Need to Know About Page Display Dimensions

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

Example 8-6 Setting Viewports

<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 the HandheldFriendly 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">

8.5.1 Setting the Viewports for iPhone

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>