Procedure
- 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>
- (optional) If the page is already using a version of
Dojo, add the following JavaScript code instead of the previous step to enable multiple versions of
the Dojo on the same page. See the reference information
on multiple versions of Dojo on a page.
<script type="text/javascript">
var djConfig = { baseUrl:"<contextRoot>/ceadojo/dojo/" };
</script>
<script type="text/javascript" src="<contextRoot>/ceadojo/dojo/dojo.js"></script>
- Place the widget on the page using the following HTML
code.
<div ceadojoType="cea.widget.Cobrowse" joinCollaborationUri="<contextRoot>/ceadojo/cea/tests/test_Cobrowse.html" defaultCollaborationUri="<contextRoot>/cobrowseWelcome.html">
- Replace "<contextRoot>/" with the context root
of the application.
Relative URIs can also be used instead
of specifying the paths including the context root. The joinCollaborationUri,
however, must be specified as an absolute or full URI.
- 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.
- To configure the default page shown when the Collaboration
Dialog is launched, update the defaultCollaborationUri attribute.
- 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
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>
<style type="text/css">
@import "<contextRoot>/ceadojo/dijit/themes/tundra/tundra.css";
@import "<contextRoot>/ceadojo/cea//widget/Cobrowse/Cobrowse.css";
@import "<contextRoot>/ceadojo/cea/widget/CollaborationDialog/CollaborationDialog.css";
</style>
<script type="text/javascript" src="<contextRoot>/ceadojo/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: false"></script>
</head>
<body class="tundra">
<div ceadojoType="cea.widget.Cobrowse" joinCollaborationUri="<contextRoot>/ceadojo/cea/tests/test_Cobrowse.html" defaultCollaborationUri="<contextRoot>/cobrowseWelcome.html">
</body>
</html>
This example renders the following interface
controls.
Cobrowse 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
that contains 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.