+

Search Tips   |   Advanced Search

Embed the mobile widgets in the application you are enhancing.

Embed the widgets in the application you are enhancing.

Parent

Collaborating and cobrowsing in web applications

  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 Cobrowse 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/Cobrowse/Cobrowse.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 included with this product.

      <script type="text/javascript" src="<contextRoot>/ceadojo/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: false"></script>

    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. Place the widget on the page using the following HTML code. 
    <div ceadojoType="cea.mobile.widget.Cobrowse" joinCollaborationUri="<contextRoot>/ceadojo/cea/tests/
   test_Cobrowse.html" defaultCollaborationUri="<contextRoot>/cobrowseWelcome.html">

  6. The joinCollaborationURI attribute specifies the page to which the Cobrowse peer is taken. This page must include the Cobrowse widget and be able to accept an additional parameter as part of the request.

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

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


Example

Use the following example HTML code to place the Cobrowse 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>Cobrowse 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/Cobrowse/Cobrowse.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: false"></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.Cobrowse" joinCollaborationUri="<contextRoot>/ceadojo/cea/tests/
      test_Cobrowse.html" defaultCollaborationUri="<contextRoot>/cobrowseWelcome.html">
</body>
</html>

This example renders the following interface controls on the screen of a mobile phone.

Cobrowse mobile widget attributes and descriptions

ceaContextRoot

The context root to access the CEA service.

joinCollaborationURI

Used by the Peer to peer cobrowsing widget to generate the invitation link that can be sent to the peer. This needs to be a link to a page containing the Peer to peer cobrowsing widget and can accept an additional request parameter. Commonly this will be a link to the current page you are adding the widget to or a specific page created with instructions detailing how to use Peer to peer cobrowsing.

canControlCollaboration

Determines whether this widget will be able to drive the collaboration session.

defaultCollaborationUri

Specifies what page to load first when the Peer to peer 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 are enhancing.


Subtopics


Related tasks

  • Assembling applications