8 Extending ADF Mobile Browser Applications

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

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

<tr:goLink styleClass="messageText"
           text="#{sessionScope.empDetails.Email}"
           destination="mailto:#{sessionScope.empDetails.Email}?subject=hello
                                                               &[email protected]
                                                               &[email protected]
                                                               &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.

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

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

http://maps.google.com/maps?
                       saddr=200+Oracle+Parkway,+Redwood+City,+CA,+USA
                       &daddr=1
                              +Telegraph
                              +Hill,
                              +San
                              +Francisco,
                              +CA,
                              +USA

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

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

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