Skip Headers
Oracle® Fusion Middleware Mobile Browser Developer's Guide for Oracle Application Development Framework
11g Release 1 (11.1.1.7.0)

Part Number E10140-06
Go to Documentation Home
Home
Go to Book List
Book List
Go to Table of Contents
Contents
Go to Master Index
Master Index
Go to Feedback page
Contact Us

Go to previous page
Previous
PDF · Mobi · ePub

8 Extending ADF Mobile Browser Applications

This chapter describes how to add e-mail, telephony, and Google Maps 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 style sheets described in Chapter 4, "Skinning", 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.

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

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

  3. Set the destination property to the HTML link (represented as the EL expression, #{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 (,) separates 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}?subject=hello 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=hello
                                                               &cc=myboss@example.com
                                                               &bcc=me@example.com
                                                               &body=good morning!"/>

8.3 Integrating Telephony

To invoke a call dialog box for a phone number:

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

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

  3. Set the destination property to the telephone number (represented as the EL expression, #{sessionScope.empDetails.PhoneNumber} in Example 8-3).

    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, specify the destination property of the tr:goLink component as follows:

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

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

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

  4. 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 described in the text string must be well formatted, including commas between locations. 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-4. Do not include spaces between the EL expressions.

8.4.1 Programming Driving Directions

To enable ADF Mobile applications to leverage the driving instructions provided by Google Maps, 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.

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 for the target website. 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 website. Because the native Google maps application accepts some URL parameters supported by maps.google.com, end users can specify a location and drop a pin.

8.5 What You May Need to Know About Page Display Dimensions

To retain 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/).

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 the viewport meta tag. 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 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;"/>
</f:verbatim>