Wednesday, July 1, 2009

Embedding the CEA Peer to Peer Cobrowsing Widget

The first step when embedding any of the CEA widgets into your application is to copy the ceadojo directory ( <washome>\feature_packs\cea\javascript\ceadojo ) into your application.

Based on where you copied the ceadojo directory you will need to use that path when pointing to the various JavaScript and CSS files. For this post I will assume that I've copied the ceadojo directory directly under the context root and the HTML file that I am adding the widget to is at the same path.

For the
Peer to peer cobrowsing widget we need to import the following CSS files:
<style type="text/css">
@import "./ceadojo/dijit/themes/tundra/tundra.css";

@import "./ceadojo/cea/widget/Cobrowse/Cobrowse.css";

@import "./ceadojo/cea/widget/CollaborationDialog/CollaborationDialog.css";

</style>

The next step is to import the CEA widget toolkit. Importing the CEA widget toolkit is just like importing any other Dojo toolkit.

<script type="text/javascript" src="./ceadojo/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: false"></script>
The CEA widgets are built on top of Dojo's Tundra theme. So next we need to add this theme to the body:
<body class="tundra">
And finally the last step is to place the CEA widget on the page. The following HTML code snippet will place the Peer to peer cobrowsing widget on the page:
<div ceadojoType="cea.widget.Cobrowse" joinCollaborationURI="PlantsByWebSphereAjax/cobrowse.html" defaultCollaborationUri="index.html" ></div>
There are a few additional attributes that need to be configured for Peer to peer cobrowsing.
  • joinCollaborationURI is 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 paramater. 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. For example in the plants sample we used the same page we added the widget to
    "/PlantsByWebSphereAjax/cobrowse.html"
  • defaultCollaborationUri specifies what page to load first when Peer to peer cobrowsing is started. For example in the Plants sample we used "/PlantsByWebSphereAjax/index.html"

0 comments:

Post a Comment