Friday, April 30, 2010

Add the Mobile Cobrowse Widget to your Application

After downloading and unzipping the directory into the WebContent directory of your application these 5 simple steps will get you up and running with the CEA mobile cobrowse widget:

1. Configure the widget page to be full screen and non-scalable using the viewport meta tag

<meta name="viewport" content="height=device-height, width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no"/>
2. Import the CEA widget toolkit
<script type="text/javascript" src="./ceadojo/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: false"></script>
3. Add the CSS for the mobile cobrowse widget
<style type="text/css">
@import "ceadojo/dijit/themes/tundra/tundra.css";
@import "ceadojo/dojox/mobile/themes/iphone/iphone.css";
@import "ceadojo/cea/mobile/widget/Cobrowse/Cobrowse.css";
@import "ceadojo/cea/mobile/widget/CollaborationDialog/CollaborationDialog.css";
@import "ceadojo/cea/mobile/widget/iFrame/iFrame.css";
4. Add the following JavaScript code to hide the location bar when the page loads
<script type="text/javascript">
window.onload = function() {
setTimeout(function(){window.scrollTo(0, 1);}, 100);
5. Last place the widget as the only element in the page using the following HTML snippet
<body class="tundra mbl iphone">
<div ceadojoType="" joinCollaborationUri="/cea/cobrowse.html"

Thanks to Steps 1 and 4 when the page loads in the mobile browser it will display full screen as well as scrolling to hide the location bar. This gives the widget an 'app-like' look and feel as well as allows the user to take advantage of all the screen real estate offered by their device.


Post a Comment