Embed the mobile widgets in the application you are enhancing.

Before you begin

Embed the widgets in the application you are enhancing.

About this task

Step 7 towards the goal: Receiving call notifications in web applications

Procedure

  1. Add the following viewport metatag to make the widget display in full-screen mode.
    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1,
       maximum-scale=1, user-scalable=no"/>
  2. Import the default Dojo and CallNotification widget CSS.
    <style type="text/css"> 
       @import "<contextRoot>/ceadojo/dijit/themes/tundra/tundra.css";
       @import "<contextRoot>/ceadojo/dojox/mobile/themes/iphone/iphone.css";
       @import "<contextRoot>/ceadojo/cea/mobile/widget/CallNotification/CallNotification.css";
       @import "<contextRoot>/ceadojo/cea/mobile/widget/CollaborationDialog/CollaborationDialog.css";
       @import "<contextRoot>/ceadojo/cea/mobile/widget/iFrame/iFrame.css"; 
    </style>
  3. Add the following JavaScript code to import the Dojo Toolkit that is included with the CEA feature.
    <script type="text/javascript" src="<contextRoot>/ceadojo/dojo/dojo.js" 
       djConfig="parseOnLoad: true, isDebug: false"></script>
    Avoid trouble Avoid trouble: If the page is already using a version of Dojo add the following JavaScript code instead of the preceding code. This code enables multiple versions of the Dojo on the same page.
    <script type="text/javascript">
       var djConfig = { baseUrl:"<contextRoot>/ceadojo/dojo/" };
    </script>
    
    <script type="text/javascript" src="<contextRoot>/ceadojo/dojo/dojo.js></script">

    See the reference information on multiple versions of Dojo on a page for more information.

    gotcha
  4. Add the following JavaScript™ to hide the location bar for the browser, and display the widget in full-screen mode.
    <script type="text/javascript">
       window.onload = function() {
          setTimeout(function(){window.scrollTo(0, 1);}, 100);
       }
    </script>
  5. Use the following HTML code to place the widget on the page.
    <div ceadojoType="cea.mobile.widget.CallNotification" enableCollaboration="false" 
       canControlCollaboration="false" defaultCollaborationUri="<contextRoot>/cobrowseWelcome.html">
  6. To configure this widget to be available for a web collaboration session, change enableCollaboration="false" to "true".
  7. To configure this widget to be available to drive the web collaboration session, change canControlCollaboration="false" to "true".

    enableCollaboration must also be set to true.

  8. To configure the default page shown when the Collaboration Dialog is launched, update defaultCollaborationUri.

    enableCollaboration must also be set to true.

  9. Override the widget CSS if necessary to match the look and feel of the page.

Example

The following example HTML code will place the CallNotification mobile widget on a web page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
	<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
   <title>Call Notification Widget</title> 
   <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1,
      maximum-scale=1, user-scalable=no"/>
   <style type="text/css"> 
      @import "<contextRoot>/ceadojo/dijit/themes/tundra/tundra.css";
      @import "<contextRoot>/ceadojo/dojox/mobile/themes/iphone/iphone.css";
      @import "<contextRoot>/ceadojo/cea/mobile/widget/CallNotification/CallNotification.css";
      @import "<contextRoot>/ceadojo/cea/mobile/widget/CollaborationDialog/CollaborationDialog.css";
      @import "<contextRoot>/ceadojo/cea/mobile/widget/iFrame/iFrame.css"; 
   </style>
   <script type="text/javascript" src="<contextRoot>/ceadojo/dojo/dojo.js" 
      djConfig="parseOnLoad: true, isDebug: true"></script>
   <script type="text/javascript">
      window.onload = function() {
         setTimeout(function(){window.scrollTo(0, 1);}, 100);
      }
   </script>
</head> 
<body class="tundra">
   <div ceadojoType="cea.mobile.widget.CallNotification" enableCollaboration="true" 
      canControlCollaboration="true" defaultCollaborationUri="<contextRoot>/cobrowseWelcome.html">
</body>
</html>
This example renders the following interface controls on the screen of a mobile phone.
CallNotification mobile widget
CallNotification mobile widget attributes and descriptions
ceaContextRoot
The context root to access the CEA service.
widgetNumber
Used by the widget to determine what device to monitor for incoming calls. If not specified the user will be presented with a textfield to enter the number.
enableCollaboration
Determines whether this widget will be made available for Contact center cobrowsing. If Contact center cobrowsing is enabled you should also configure canControlCollaboration and defaultCollaborationUri
canControlCollaboration
Determines whether this widget will be able to drive the collaboration session
defaultCollaborationUri
Specifies what page to load first when the Contact center cobrowsing is started.
highlightElementList
A comma-separated list of HTML element types that can be highlighted during a cobrowsing session.
isHighlightableCallback
Name of the callback function to run to determine if the current element is highlightable. If not provided only the highlightElementList will be used.
isClickableCallback
Name of the callback function to run to determine if the current element is clickable. This is useful to block certain actions from being run when follow me mode is enabled.
sendPageUrlRewriteCallback
Name of the callback function to run when send page is called to rewrite the current URL. This is useful when one of the peers will be using a Proxy to access the web application.

What to do next

Install and start the application you have enhanced.
Task topic    

Terms and conditions for information centers | Feedback

Last updated: April 17, 2014 04:48 PM CDT
http://www14.software.ibm.com/webapp/wsbroker/redirect?version=phil&product=was-base-iseries&topic=tcea_enable_call_notifications_widgets_step7
File name: tcea_enable_call_notifications_widgets_step7.html