tag:blogger.com,1999:blog-19773526932164917292024-03-12T20:57:22.456-04:00Communications Enabled ApplicationsThoughts and opinions on WebSphere Application Server's Communications Enabled Applications (CEA) and Session Initiation Protocol (SIP) capabilities. The postings on this site are our own and don’t necessarily represent IBM’s positions, strategies or opinions.Erik Burckarthttp://www.blogger.com/profile/11271959207299422264noreply@blogger.comBlogger52125tag:blogger.com,1999:blog-1977352693216491729.post-79028595837933485342010-06-22T08:33:00.003-04:002010-06-22T08:44:08.912-04:00Mobile widget support in the latest CEA refreshThe latest 1.0.0.5 release of CEA Feature Pack is now available at this <a href="http://www-01.ibm.com/support/docview.wss?uid=swg24027105&myns=swgws&mynp=OCSSEQTP&mync=R">site</a><br /><br />The refresh includes the following updates:<br /><ul><br /><li>New Web 2.0 mobile widgets deliver versions of Click to call, Call Notifications, Contact Center Co-browsing, Peer-to-peer Co-browsing and Two Way Synchronized Forms optimized for iPhone and Android mobile browser applications.</li><br /><li>Web 2.0 mobile widgets extend multi-modal communications across desktop and mobile browsers.</li><br /><li>Helps customers build applications with native mobile web application look and feel.</li><br /><li>Support for mobile specific interactions such as touch and gesture support for selecting, scrolling and zooming on mobile browsers.</li><br /><li>Enables mobile users to Co-browse with desktop or mobile users.</li><br /></ul>Andy Ivoryhttp://www.blogger.com/profile/06309211781959546852noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-33012179380547183942010-06-15T09:19:00.003-04:002010-06-15T12:15:28.837-04:00Start a Cobrowsing Session on the Current PageA common scenario is to embed the CEA widget in a page fragment that is used across all the pages in the application. For example, for a commerce application, the widget may be displayed as part of the individual product pages. When enabling contact center or peer to peer cobrowsing for these pages the ideal scenario is start the session on the page the user is currently browsing. This can be achieved through a few simple steps.<br /><br />First the initial steps to import the JavaScript and CSS are the same. However, instead of the div tag to place the widget on the page instead we will add a placeholder div. Next we will programmatically initialize the widget. Using this approach we can then pass in the current page for <span style="font-style: italic;">joinCollaborationURI</span> and <span style="font-style: italic;">defaultCollaborationUri</span> using window.location.href. The final step is to get a reference to the container div and then append the newly created widget as its child.<br /><pre><br /><span style="font-size:85%;"><div id="cobrowseContainer"></div><br /><script><br /> if ( window.top._ceaCollabDialog == null){<br /> this.cobrowse = new cea.widget.Cobrowse({<br /> joinCollaborationURI: window.location.href,<br /> defaultCollaborationUri: window.location.href<br /> });<br /><br /> var container = document.getElementById('cobrowseContainer');<br /> container.appendChild(this.cobrowse.domNode);<br /> }<br /></script></span><br /></pre><br />We can also wrap the code to create the widget in a check to see if the page is currently displayed in the CollaborationDialog and if so we can skip creating the widget.Andy Ivoryhttp://www.blogger.com/profile/06309211781959546852noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-8419840359282158372010-05-27T15:26:00.008-04:002010-05-27T16:43:38.967-04:00Create a Page Allowing a Mobile User to Invite a Desktop User to CobrowseOne of the cool new features offered in the <a href="http://www.ibm.com/developerworks/websphere/downloads/ceawidgets.html">CEA Mobile Widgets Technology Preview</a> is the ability to have a desktop user cobrowsing with a user on a mobile device. Since at the time the first user creates the invitation link we don't know if they will share it with a desktop or mobile user we can create the invitation link to a landing page that will re-direct to the page with the appropriate widget.<br /><br />There are 4 steps to create this landing page. Using JavaScript first strip off the invitation information from the current page. Next check the user agent to determine if the page is running in a mobile browser. If so then redirect to the page containing the mobile widget otherwise redirect to the page for the desktop browser widget. In both cases append the invitation link information. The last step is to edit the <span style="font-style: italic;">joinCollaborationUri</span> attribute in the existing pages for both the mobile and desktop cobrowse to point to this new landing page.<br /><br />Here is a sample of the HTML/Javascript code for a basic cobrowse landing page:<br /><pre><br /><span style="color: rgb(51, 102, 255);font-size:85%;" ><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="content-type" content="text/html; charset=utf-8" /><br /><title>CEA Cobrowse Widget</title><br /><br /><script type="text/javascript"><br /> var CEA_COLLAB_PREFIX = "cea_collab=";<br /> var href = document.location.href;<br /> var cobrowseString = "";<br /><br /> if ( -1 < href.indexOf(CEA_COLLAB_PREFIX)){</span> <span style="color: rgb(51, 102, 255);font-size:85%;" ><br /> index = href.lastIndexOf(CEA_COLLAB_PREFIX);<br /> collabID = href.slice(index + CEA_COLLAB_PREFIX.length);<br /> cobrowseString = "?" + CEA_COLLAB_PREFIX + collabID;<br /> }<br /><br /> if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/Android/i))) { </span> <span style="color: rgb(51, 102, 255);font-size:85%;" ><br /> window.location = "/cea/cobrowse_mobile.html" + cobrowseString;<br /> } else {<br /> window.location = "/cea/cobrowse_desktop.html" + cobrowseString;<br /> }<br /></script><br /><br /></head><br /></html></span><br /></pre>Andy Ivoryhttp://www.blogger.com/profile/06309211781959546852noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-90788062983991171522010-05-03T10:04:00.002-04:002010-05-03T10:07:55.058-04:00New CEA videos..Two more demo videos aside from the one in the last post. We'll be using some of these in the IBM Impact 2010 sessions that I referenced <a href="http://ibmcea.blogspot.com/2010/04/cea-impact-sessions.html">here</a><br /><br />The first one is doing some of the contact center widgets (like click to call then cobrowsing) on the iPhone:<br /><br /><object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/XUds_2NCPrA&hl=en_US&fs=1&color1=0x402061&color2=0x9461ca"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/XUds_2NCPrA&hl=en_US&fs=1&color1=0x402061&color2=0x9461ca" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object><br /><br />The next is a shorter and HD version of our JavaScript widget walk through:<br /><object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/fr83jerK-uA&hl=en_US&fs=1&color1=0x402061&color2=0x9461ca"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/fr83jerK-uA&hl=en_US&fs=1&color1=0x402061&color2=0x9461ca" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>Erik Burckarthttp://www.blogger.com/profile/11271959207299422264noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-34238332639258226082010-04-30T21:43:00.002-04:002010-04-30T21:45:42.413-04:00CEA Impact SessionsIn case you are looking to learn more about Communications Enabled Applications (CEA) at Impact, here are some talks you can come into:<br />Enabling Cobrowsing and Coshopping on your website - 2040A Tue, 4/May 10:15 AM - 11:30 AM Venetian - San Polo 3506<br />Adding Rich Interaction Support to your Enterprise Application - 2272A Wed, 5/May 10:15 AM - 11:30 AM Venetian - Lido 3103<br /><br />Also, we have a lab on Enabling Coshopping and Two Way Forms on your Web Applications with CEA - 2027A Tue, 4/May 04:45 PM - 06:00 PM Venetian - Murano 3304 <br /><br />Finally, here is a less than 3 minute video showing cobrowsing and the new mobile widgets we have made available and will be demoing at Impact <a href="http://www.ibm.com/developerworks/websphere/downloads/ceawidgets.html">here as a tech preview</a><br /><br /><object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/nylnSdiCbDM&hl=en_US&fs=1&color1=0x402061&color2=0x9461ca"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/nylnSdiCbDM&hl=en_US&fs=1&color1=0x402061&color2=0x9461ca" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>Erik Burckarthttp://www.blogger.com/profile/11271959207299422264noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-70642405799785911782010-04-30T09:35:00.012-04:002010-05-27T16:43:22.203-04:00Add the Mobile Cobrowse Widget to your Application<span style="font-size:85%;">After downloading and unzipping the ceadojo.zip directory into the WebContent directory of your application these 5 simple steps will get you up and running with the CEA mobile cobrowse widget:<br /><br />1. Configure the widget page to be full screen and non-scalable using the viewport meta tag</span><br /><blockquote><span style="font-size:85%;"><meta name="viewport" content="height=device-height, width=device-width,<br /> initial-scale=1, maximum-scale=1, user-scalable=no"/><br /></span></blockquote><span style="font-size:85%;">2. Import the CEA widget toolkit</span><br /><blockquote><span style="font-size:85%;"><script type="text/javascript" src="./ceadojo/dojo/dojo.js"<br />djConfig="parseOnLoad: true, isDebug: false"></script><br /></span></blockquote><span style="font-size:85%;">3. Add the CSS for the mobile cobrowse widget</span><br /><blockquote><pre><span style="font-size:85%;"><style type="text/css"><br />@import "ceadojo/dijit/themes/tundra/tundra.css";<br />@import "ceadojo/dojox/mobile/themes/iphone/iphone.css";<br />@import "ceadojo/cea/mobile/widget/Cobrowse/Cobrowse.css";<br />@import "ceadojo/cea/mobile/widget/CollaborationDialog/CollaborationDialog.css";<br />@import "ceadojo/cea/mobile/widget/iFrame/iFrame.css";<br /></style><br /></span></pre></blockquote><span style="font-size:85%;">4. Add the following JavaScript code to hide the location bar when the page loads</span><br /><blockquote><pre><span style="font-size:85%;"><script type="text/javascript"><br />window.onload = function() {<br />setTimeout(function(){window.scrollTo(0, 1);}, 100);<br />}<br /></script><br /></span></pre></blockquote><span style="font-size:85%;">5. Last place the widget as the only element in the page using the following HTML snippet</span><br /><blockquote><pre><span style="font-size:85%;"><body class="tundra mbl iphone"><br /><div ceadojoType="cea.mobile.widget.Cobrowse" joinCollaborationUri="/cea/cobrowse.html"<br />defaultCollaborationUri="/"></div> <br /></body><br /></span></pre></blockquote><span style="font-size:85%;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_6xv4UrKg2qk/S_bAZSS72EI/AAAAAAAAB8Y/GsT8fmeGpMY/s1600/Mobile_Cobrowse.jpg"><img style="float: right; margin: 0pt 0pt 10px 10px; cursor: pointer; width: 174px; height: 320px;" src="http://1.bp.blogspot.com/_6xv4UrKg2qk/S_bAZSS72EI/AAAAAAAAB8Y/GsT8fmeGpMY/s320/Mobile_Cobrowse.jpg" alt="" id="BLOGGER_PHOTO_ID_5473773937755936834" border="0" /></a><br /><br /><br /><br /><br />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.</span>Andy Ivoryhttp://www.blogger.com/profile/06309211781959546852noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-73990643307857567372010-04-29T10:52:00.006-04:002010-05-27T16:43:04.837-04:00CEA Mobile Widgets Technology PreviewOne of the questions that keeps coming up, when people see a demo of the CEA widgets or try them out, is - "Will the widgets work with mobile devices?". <br /><br />Since mobile devices have their own unique challenges around screen real estate and also touch interactions we have developed new versions of the CEA widgets, Click to call, Call notification and Cobrowse optimized for the iPhone and Android mobile browsers.<br /><br />Fore more information and to download the updated ceadojo toolkit check out the <br /><a href=" http://www.ibm.com/developerworks/websphere/downloads/ceawidgets.html">Communications Enabled Applications Mobile Widgets Technology Preview</a><br /><br />Also if you would like to see the new widgets in action checkout the following <a href="http://www.youtube.com/watch?v=HIp4S4zTzMk">video</a>!Andy Ivoryhttp://www.blogger.com/profile/06309211781959546852noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-33836291169922268942010-02-05T10:26:00.004-05:002010-02-05T10:30:45.052-05:00DevX article on CEA and other WAS Feature PacksCheck out <a href="http://www.devx.com/ibm/Article/43868?trk=DXRSS_LATEST">this article on CEA and other WAS Feature Packs</a> on DevX. <br /><blockquote><br />"Imagine enabling customers to cobrowse a website with friends – without clunky browser plugins. Imagine two-way forms that help users complete gnarly virtual paperwork – without Java applets. Imagine a warehouse that phones suppliers when inventory is low."<br /></blockquote><br />All of those things are possible with the CEA Feature Pack. If you are just getting started, <a href="http://ibmcea.blogspot.com/2009/08/where-to-get-started.html">check out this link</a> which links to some of the good content within this blog...and watch this video to learn of other great ideas like those above.<br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/AsQLmG-TVlw&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/AsQLmG-TVlw&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>Erik Burckarthttp://www.blogger.com/profile/11271959207299422264noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-3590636672487140032010-01-14T11:41:00.003-05:002010-01-14T11:46:47.126-05:00CEA now supports secure Web URIsDuring web collaboration sessions there was the potential for the web session to be ‘snooped’. The <span class="blsp-spelling-error" id="SPELLING_ERROR_0">CEA</span> 1.0.0.1 release took steps to resolve this. Now a random number is generated and provided as a way to prevent session snooping through man-in-the-middle attacks. The number is injected at the end of the 'invitation link' or URI that is generated and used for collaboration. When the 'invitation link' is generated a random number, called a 'nonce' is also generated and appended to the URL.<br /><br />For example: <a href="http://s1.suq.hal.com/PlantsByWebSphereAjax/cobrowse.html?cea_collab=s1.1255561449053.0_2&nonce=-1554841135">http://s1.suq.hal.com/PlantsByWebSphereAjax/cobrowse.html?cea_collab=s1.1255561449053.0_2&nonce=-1554841135</a><br /><br />is the URI User2 received from User1. User2 will paste in a browser to start the Web collaboration. User1's collaboration session will compare the nonce number value to the generated value, and if they match, the session is instantiated and Web collaboration is established.Brian Pulitohttp://www.blogger.com/profile/14867913645986815216noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-14496100602390379992009-11-16T11:15:00.004-05:002009-11-16T14:25:15.975-05:00CEA widgets now packaged with Dojo 1.3.2The ceadojo custom build packages the CEA widgets with a specific version of Dojo and eliminates the need to declare the cea module path and "importing" the widget. For the CEA 1.0.0.1 refresh a new version of Dojo 1.3.2 ( previously 1.3.1 ) was pulled in to create the custom build.<br /><br />This updated version of Dojo now includes official support for:<br /><ul><li><span style=";font-family:Arial;font-size:100%;color:black;" >Internet Explorer</span><span style=";font-family:Arial;font-size:100%;color:black;" > V8</span></li><li><span style=";font-family:Arial;font-size:100%;color:black;" >Firefox 3.5</span></li><li><span style=";font-family:Arial;font-size:100%;color:black;" >Google Chrome 2</span></li></ul>Since the CEA widgets already supported these additional browsers this update is valuable for customers that are building pages that utilize the base Dojo functionality from the ceadojo custom build.Andy Ivoryhttp://www.blogger.com/profile/06309211781959546852noreply@blogger.com1tag:blogger.com,1999:blog-1977352693216491729.post-23580706056472145852009-11-16T11:14:00.008-05:002009-11-17T09:12:30.326-05:00iWidget support for CEA widgets<p style="margin-top: 4.32pt; margin-bottom: 0pt; text-align: left; direction: ltr; unicode-bidi: embed; vertical-align: baseline;"><span style=";font-family:Arial;font-size:100%;color:black;" >The core CEA widgets, </span><span style=";font-family:Arial;font-size:100%;color:black;" >ClickToCall, CallNotification and </span><span style=";font-family:Arial;font-size:100%;color:black;" >Cobrowse</span>,<span style=";font-family:Arial;font-size:100%;color:black;" > can now be easily integrated into frameworks that implement the </span><span style=";font-family:Arial;font-size:100%;color:black;" >iWidget</span><span style=";font-family:Arial;font-size:100%;color:black;" > specification, for example IBM </span><span style=";font-family:Arial;font-size:100%;color:black;" >Mashup</span><span style=";font-family:Arial;font-size:100%;color:black;" > Center.<span style=""> </span></span><span style=";font-family:Arial;font-size:100%;color:black;" >These widgets have each been wrapped following the iWidget specification and packaged together in an iWidget Package file (<washome>\feature_packs\cea\samples \cea.war ) for easy deployment.<br /></washome></span></p><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_6xv4UrKg2qk/SwKub6Yz7eI/AAAAAAAAB0U/f_JtiD71Vys/s1600/c2c_available.GIF"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 142px;" src="http://3.bp.blogspot.com/_6xv4UrKg2qk/SwKub6Yz7eI/AAAAAAAAB0U/f_JtiD71Vys/s320/c2c_available.GIF" alt="" id="BLOGGER_PHOTO_ID_5405074297351040482" border="0" /></a><br /><p style="margin-top: 4.32pt; margin-bottom: 0pt; text-align: left; direction: ltr; unicode-bidi: embed; vertical-align: baseline;">For more general information on iWidgets, please see the <a href="http://www-10.lotus.com/ldd/mashupswiki.nsf/archive?openview&title=Product%20documentation&type=cat&cat=Product%20documentation&sort=I">IBM Mashup Center wiki</a>.<br /></p><p style="margin-top: 4.32pt; margin-bottom: 0pt; text-align: left; direction: ltr; unicode-bidi: embed; vertical-align: baseline;"><br /></p><p style="margin-top: 4.32pt; margin-bottom: 0pt; text-align: left; direction: ltr; unicode-bidi: embed; vertical-align: baseline;"><br /></p><p style="margin-top: 4.32pt; margin-bottom: 0pt; text-align: left; direction: ltr; unicode-bidi: embed; vertical-align: baseline;"><span style=";font-family:Arial;font-size:100%;color:black;" ><span style=""><br /></span></span><span style=";font-family:Arial;font-size:100%;color:black;" ></span></p> <span style=";font-family:Arial;font-size:12pt;color:black;" ><span style=""> </span></span><p></p>Andy Ivoryhttp://www.blogger.com/profile/06309211781959546852noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-18828301047574990842009-11-16T11:10:00.003-05:002009-11-16T11:31:04.512-05:00Clustering and Failover support in latest CEA refreshThe latest 1.0.0.1 release of the <span class="blsp-spelling-error" id="SPELLING_ERROR_0">CEA</span> Feature Pack now includes full support for High Availability. This important new feature enables clustering and <span class="blsp-spelling-error" id="SPELLING_ERROR_1">failover</span> for both Web Collaboration and the Telephony services delivered in <span class="blsp-spelling-error" id="SPELLING_ERROR_2">CEA</span>. This capability insures that any web application built using the <span class="blsp-spelling-error" id="SPELLING_ERROR_3">CEA</span> widgets have the capability of being deployed in a highly available environment.<br /><br />In addition, advancements were also delivered in this refresh with respect to converged web services in the base container. Now its possible to build a truly converged web service that will maintain session affinity to the related SIP and HTTP sessions associated with a web service session before and after a <span class="blsp-spelling-error" id="SPELLING_ERROR_4">failover</span>.Brian Pulitohttp://www.blogger.com/profile/14867913645986815216noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-75660884192010512692009-11-13T11:21:00.002-05:002009-11-13T11:25:35.557-05:00First refresh of CEA shipped<a href="http://www-01.ibm.com/support/docview.wss?uid=swg24024830">At this site</a>, you can download the first refresh fix pack of the CEA Feature Pack. Here is a list of what we changed:<br /><ul><li>Clustering and failover support for CEA services on distributed platforms (Web Collaboration and Telephony services)<br /><li>iWidget support for CEA widgets<br /><li>Increased Web Collaboration security<br /><li>New Dojo level supported by the widgets</ul><br />We'll try to blog in the upcoming weeks about some more details of these features but if you have downloaded the first release of CEA, we highly recommend picking up this fix pack!Erik Burckarthttp://www.blogger.com/profile/11271959207299422264noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-10549180406838709682009-11-10T09:00:00.004-05:002009-11-10T09:45:48.476-05:00Adding Value with Communications Enabled ApplicationsHere is a video explaining three scenarios in which the Communications Enabled Applications Feature Pack can be used to add value to your applications and website.<br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/AsQLmG-TVlw&hl=en&fs=1&color1=0x402061&color2=0x9461ca"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/AsQLmG-TVlw&hl=en&fs=1&color1=0x402061&color2=0x9461ca" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object><br /><br />This video covers three scenarios:<br /><br />1) Adding CEA functions to a retail website which enables the customer to:<br /><ul><li>Click to make a call to a customer service representative<br /><li>Cobrowse through the website with the customer service representative<br /><li>Cobrowse with a friend through the website</ul><br />2) Adding CEA functions to an insurance website<br /><ul><li>Use two way forms to help customers fill out forms and drive more forms to completion.</ul><br />3) Using CEA within an inventory management system<br /><ul><li>Let the application drive calls between buyers and suppliers through the make a call web services or REST services.</ul><br /><br />If nothing else, its a very entertaining video!Erik Burckarthttp://www.blogger.com/profile/11271959207299422264noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-6135056201385295412009-11-09T20:29:00.001-05:002009-11-09T20:33:33.895-05:00Introducing Feature Packs and the CEA Feature PackHere is a quick video I had missed the opportunity to blog about when it first came out talking about our WebSphere Application Server Feature Packs and the Communications Enabled Applications Feature Pack.<br /><br /><object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/38HSwWU8e6E&hl=en&fs=1&color1=0x402061&color2=0x9461ca"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/38HSwWU8e6E&hl=en&fs=1&color1=0x402061&color2=0x9461ca" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>Erik Burckarthttp://www.blogger.com/profile/11271959207299422264noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-8342217665974409772009-09-18T15:37:00.010-04:002009-09-18T16:54:49.221-04:00Add file transfer capabilities to the CollaborationDialogThe CollaborationDialog widget in the WAS CEA feature pack provides capability that is leveraged during cobrowsing sessions. Part of the function in the widget consists of sending data between the participants in a cobrowse session. This enables function like highlighting, following, and sending a page. It's this, the capability to send data back and forth between participants, that can be leveraged to produce very useful extensions to the base CollaborationDialog widget.<div><br /></div><div>Take for example the previous scenario I blogged about. In that case, a few extensions to some of the CEA widgets provided an enhanced, online communications experience between a customer and an insurance company customer service representative. What if during the course of that communication the policy was updated and the customer service representative wanted to send the new policy to the customer? Well, it could be sent via email and the customer could check it at some later time. However, a simple extension to the CollaborationDialog widget to provide file transfer capabilities will allow the customer service representative to send and the customer to receive the updated policy right away.</div><div><br /></div><div>To do this we can leverage the CollaborationDialog widget's existing ability to send data back and forth between cobrowse participants. Your first thought may be that we actually use the data sending capability to directly send file contents back and forth, but that's not what the data sending infrastructure was designed for. Rather, it was designed to send small, chatty messages. With that in mind, we use simple AJAX functionality to post a form containing a file attachment to a backend file server. Then, we leverage the data sending infrastructure to notify the other cobrowse participant that they are being sent a file, and we provide the location of that file so it can be downloaded.</div><div><br /></div><div>We also make some changes to the HTML and CSS files for the CollaborationDialog, and combined with the necessary JavaScript additions mentioned above, we can now choose and send files as seen below:</div><div><br /></div><div><img src="http://3.bp.blogspot.com/_FmnmngyajrQ/SrPvmX6UG4I/AAAAAAAAACc/gLQKliDgTxw/s400/cb_1.bmp" style="cursor:pointer; cursor:hand;width: 400px; height: 225px;" border="0" alt="" id="BLOGGER_PHOTO_ID_5382909422170545026" /></div><div><br /></div><div>We can also receive files from our cobrowsing partner:</div><div><br /></div><div><img src="http://4.bp.blogspot.com/_FmnmngyajrQ/SrPwRLgStcI/AAAAAAAAACk/a9IKyB8tasA/s400/cb_2.bmp" style="cursor:pointer; cursor:hand;width: 400px; height: 239px;" border="0" alt="" id="BLOGGER_PHOTO_ID_5382910157574550978" /></div><div><br /></div><div>The capability to send and receive files while in a cobrowse session can significantly enhance the experience of both participants. If you are interested in how you can add this extension into your WAS CEA environment, drop a comment right here and we'll be happy to set you up with some examples.</div>Dustin Amrheinhttp://www.blogger.com/profile/00786999728126984819noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-21046106293483452572009-09-16T13:50:00.018-04:002009-09-24T10:36:18.378-04:00CEA sample environment using the non default SIP portIn Roger's post <a href="http://ibmcea.blogspot.com/2009/08/setting-up-and-demonstrating-cea.html">Setting up and Exploring the CEA Feature Pack</a> he provided and in-depth set of instructions to get started with the feature pack. The instructions were recently updated to better support situations where the application server does not utilize the default TCP/IP ports.<br /><br />This post provides an additional level of detail on setting up the CEA (WAS) configuration and the soft phones when the application server does not utilize the default SIP port, i.e., the SIP_DEFAULTHOST port is set to a value other than 5060.<br /><br />The default SIP port for the Application Server is 5060. If using a different port first check the server config to determine the port that is being used. For this example I will be using port 5065.<br /><br />Next update the <span style="font-style: italic;">port</span> for <span style="font-style: italic;">Telephony access method</span> in the Communications Enabled Application ( CEA ) settings panel from 5060 to 5065<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_6xv4UrKg2qk/SrEqSUihqXI/AAAAAAAABtg/roKolXrMu6g/s1600-h/AdminConsole.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 173px;" src="http://2.bp.blogspot.com/_6xv4UrKg2qk/SrEqSUihqXI/AAAAAAAABtg/roKolXrMu6g/s320/AdminConsole.JPG" alt="" id="BLOGGER_PHOTO_ID_5382129523923986802" border="0" /></a>After saving the change restart the Application Server.<br /><br />Now for the soft phone setup launch Express Talk Basic and go to the <span style="font-style: italic;">Advanced Line Settings</span> configuration ( File -> Options -> Lines Tab -> Advanced Line Settings ). Then select the radio button for <span style="font-style: italic;">Use a different outbound server</span> and enter "localhost:5065" for <span style="font-style: italic;">Outbound Server</span>.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_6xv4UrKg2qk/SrEtHqFXUmI/AAAAAAAABtw/datO-Qm5FYo/s1600-h/ExpressTalk.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 225px;" src="http://1.bp.blogspot.com/_6xv4UrKg2qk/SrEtHqFXUmI/AAAAAAAABtw/datO-Qm5FYo/s320/ExpressTalk.JPG" alt="" id="BLOGGER_PHOTO_ID_5382132639263576674" border="0" /></a>After saving the changes Express Talk will re-connect to the Sample PBX Application using the new settings.<br /><br />Next launch X-Lite and edit your SIP Account settings ( Show Menu -> SIP Account Settings -> Properties ). Select the radio button for<span style="font-style: italic;"> Send outbound via: Proxy</span> and enter "localhost:5065" for the <span style="font-style: italic;">Address</span>.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_6xv4UrKg2qk/SrEuQjOnCDI/AAAAAAAABt4/uFDO2hYl_FI/s1600-h/X-Lite.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 230px; height: 320px;" src="http://1.bp.blogspot.com/_6xv4UrKg2qk/SrEuQjOnCDI/AAAAAAAABt4/uFDO2hYl_FI/s320/X-Lite.JPG" alt="" id="BLOGGER_PHOTO_ID_5382133891553757234" border="0" /></a>After saving the changes X-Lite will re-connect to the Sample PBX Application using the new settings.<br /><br />The numbers used by the widget remain the same "sip:Customer@localhost" and sip:CSR@localhost" and specifying the port is not needed.<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_6xv4UrKg2qk/SrEuy2rynYI/AAAAAAAABuA/ZUqBkUoKzHA/s1600-h/CEA_Widgets.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 320px; height: 202px;" src="http://1.bp.blogspot.com/_6xv4UrKg2qk/SrEuy2rynYI/AAAAAAAABuA/ZUqBkUoKzHA/s320/CEA_Widgets.JPG" alt="" id="BLOGGER_PHOTO_ID_5382134480891977090" border="0" /></a>Andy Ivoryhttp://www.blogger.com/profile/06309211781959546852noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-29620179966610498302009-09-04T14:33:00.016-04:002009-09-04T15:27:56.335-04:00Extending the Cobrowse widgetI'm still looking at and experimenting with the WebSphere CEA Feature Pack widgets. In my last two posts I took a look at scenarios that lead to extending the WebSphere CEA ClickToCall widget. In my latest project, I took a look at the Cobrowse and CollaborationDialog widgets.<br /><br />It's clear that there are many scenarios where users would want to employ and maybe even extend these two widgets. For instance, check out the demonstration below for one such scenario.<br /><br /><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/cRgmCCbUI4k&hl=en&fs=1&"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed src="http://www.youtube.com/v/cRgmCCbUI4k&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object><br /><br />There are a few things to note about the sample as far as the extensions go. First of all, I did a very simple extension to the ClickToCall widget along the same lines of my previous posts, so I won't go into much detail about that particular piece.<br /><br />Other than the ClickToCall extension, I extended both the Cobrowse (cea.widget.Cobrowse) and CollaborationDialog (cea.widget.CollaborationDialog) widgets to provide the function you see in the sample. With the Cobrowse widget, I added functionality such that when the customer service representative creates the collaboration link, a resource representing that link and the customer it is intended for is created on the backend. That was easy to do by overriding the Cobrowse widget's <i>_convertToWaitingState</i> method and providing custom function to create the necessary resource.<div><br /></div><div>When a customer logs into the Insurance Company's home page, JavaScript running on the page checks the backend for any resources that would indicate a customer service representative has invited that particular customer to a collaboration session. In the sample video, this is shown when the customers logs into the Insurance Company's site.</div><div><br /></div><div>Next, I needed to extend the CollaborationDialog widget in a couple of ways. First, I added the <i>Send Policy Data</i> button to the dialog's toolbar. All that was required to add the button was a small update to the widget's JavaScript. No HTML or CSS changes were necessary. </div><div><br /></div><div>After that, I added a function that allows the customer service representative to send the retrieved policy information from his window to the customer's window. This was done by piggy-backing on the ability of the CollaborationDialog widget to send data back and forth between the collaboration participants. There was a nifty Dojo function that came into play when implementing this capability. Once the data was received by the CollaborationDialog instance on the customer side, the contents of the content pane in the CollaborationDialog needed to be updated. This was done by using <i>dojo.withDoc</i> as seen below:<pre>dojo.withDoc(iframeDoc,<br />function() {<br /> var data = this.receivedPolicyData;<br /> dojo.style(dojo.byId("policyTable"), "display", "block");<br /> dojo.byId("policyNumText").innerHTML = data['policyNum'];<br /> dojo.byId("policyHolderText").innerHTML = data['policyHolder'];<br /> dojo.byId("policyTypeText").innerHTML = data['policyType'];<br /> dojo.byId("policyAmountText").innerHTML = data['policyAmount'];<br /> dojo.byId("policyPremiumText").innerHTML = data['policyPremium'];<br /> dojo.byId("policyPaymentScheduleText").innerHTML = <br /> data['policyPaymentSchedule'];<br /> dojo.byId("policyDeductibleText").innerHTML =<br /> data['policyDeductible'];<br /> },<br /> this<br />);</pre>The <i>dojo.withDoc</i> method allowed me to update the DOM of the source HTML page for the content pane, and in this case it was extremely helpful. </div><div><br /></div><div>The required changes to implement these widget extensions were fairly minimal considering the capabilities that were added. In fact, the backend data services for the various resources used by this sample took most of my time. If you are interested in seeing more of the code for the sample above just drop a reply to this blog post. I'd be happy to share more of the extension implementation.</div>Dustin Amrheinhttp://www.blogger.com/profile/00786999728126984819noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-46292618288840617582009-08-25T13:00:00.019-04:002009-08-27T11:34:07.201-04:00More use cases for CEA widget extensionJust a few days ago I documented my first example with extending the WebSphere CEA click-to-call widget to provide a customized experience between a customer and customer service representative.That experience opened my eyes to the tons of use cases for extending the click-to-call widget (or any of the WebSphere CEA widgets for that matter).<br /><br />For instance, a growing trend among restaurants is to offer food ordering online. You can go online, place your order, and either have it delivered or pick it up at some later time. So, I thought about the employee back at the restaurant monitoring these orders, and in particular I thought about how they may benefit from embedding communication capabilities in that online ordering system.<div><br />Consider my fictional pizza company, <i>The Acme Pizza Company</i>, and the back-end to their online ordering system. The employee back at the restaurant may view a list of the pizza orders and confirm each of those orders for the kitchen team.</div><div><br /></div><div><img src="http://4.bp.blogspot.com/_FmnmngyajrQ/SpRK8kEDeyI/AAAAAAAAACE/kNzahjysWew/s320/online_orders_1.bmp" style="cursor: pointer; width: 320px; height: 198px;" alt="" id="BLOGGER_PHOTO_ID_5374002659693132578" border="0" /></div><div><br /><div>When the restaurant employee clicks the <i>Confirm Order</i> it is probably necessary to show more information about the order and the customer who placed the order. But wouldn't it also be nice to allow the restaurant employee to simply click a button to call the customer that placed the order when it was necessary?</div><div><br /></div><div>An easy extension to the WebSphere CEA click-to-call widget gives us both the information about the order and the embedded communication capabilities that allow the restaurant employee to connect with the customer directly from the web page.</div><div><br /></div><div><img src="http://3.bp.blogspot.com/_FmnmngyajrQ/SpSJVsuCXwI/AAAAAAAAACU/q0vvQqVTQjU/s400/order_confirm.bmp" style="cursor: pointer; width: 400px; height: 278px;" alt="" id="BLOGGER_PHOTO_ID_5374071261234355970" border="0" /><br /></div><div><br /></div><div><br /></div><div>The panel you see above is a simple <i>dijit.Dialog</i> widget that contains an extended version of the <i>cea.widget.ClickToCall</i> widget. The <i>Acme Pizza Company</i> employee has all the information they need to confirm the order, and they can even call the customer directly from the web page if necessary. </div><div><br /></div><div>The possibilities for extending the WebSphere CEA widgets are endless. I hope to post more scenarios of interest involving different widgets soon. In the meantime, if you're interested in the JavaScript and HTML involved in building up this extension, you can download it <a href="http://docs.google.com/Doc?docid=0AUbzuZchxt66ZGZnZjNiYmtfMmR0azluNWYy&hl=en">here</a>. </div><div><br /></div></div>Dustin Amrheinhttp://www.blogger.com/profile/00786999728126984819noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-69526520279092031112009-08-24T08:08:00.002-04:002009-08-24T08:19:40.165-04:00Educational Overview of the Feature PackOur IBM Education Assistant has some good presentations and information available to learn more about the CEA Feature Pack. I wish I could embed it here, but after trying to figure out their nested frames I gave up and thought it would be better just to link to it. <br /><br /><a href="http://publib.boulder.ibm.com/infocenter/ieduasst/v1r1m0/index.jsp?topic=/com.ibm.iea.wasfpcea/wasfpcea/1.0/Overview/CEAFP_Overview/player.html">Here is the feature pack overview narrated presenation</a> (around 15 mins long)<br /><br /><a href="http://publib.boulder.ibm.com/infocenter/ieduasst/v1r1m0/index.jsp?topic=/com.ibm.iea.wasfpcea/wasfpcea/1.0/Overview.html">Also, here is the main page which also has a link to the PDF version of that presentation.</a>Erik Burckarthttp://www.blogger.com/profile/11271959207299422264noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-2286269474749208812009-08-21T08:06:00.002-04:002009-08-21T08:08:33.612-04:00Where to get started?We have had a lot of activity on our blog here. I have had several blogs highlighting scenarios from retail to finance to inventory management. You can walk through some of the scenarios using the tag cloud on the right sidebar of the blog. Beyond that, there has been a whole bunch of information presented and I wanted to give you all a quick summary and reference to some of those blogs. <br /><br />First, Roger <a href="http://ibmcea.blogspot.com/2009/08/setting-up-and-demonstrating-cea.html">wrote a great and verbose cheat sheet</a> in PDF format on how to get up and running with the CEA Feature Pack and Plants by WebSphere sample. If you are looking to try it out, his document is a great place to start.<br /><br />James has written some <a href="http://ibmcea.blogspot.com/2009/08/communications-enabled-applications.html">specific details</a> on which version of vendor systems we tested our CEA Feature Pack against. He also wrote a more in depth piece on how to configure the feature pack to work with <a href="http://ibmcea.blogspot.com/2009/08/how-to-configure-was-cea-to-use-avaya.html">Avaya AES</a>.<br /><br />Andy wrote some getting started and advanced usage blogs on the Web 2.0 widget capabilities in the CEA Feature Pack. To get started, he wrote a blog on <a href="http://ibmcea.blogspot.com/2009/06/embedding-cea-telephony-widgets.html">embedding the telephony widgets like click to call</a> and <a href="http://ibmcea.blogspot.com/2009/07/embedding-cea-peer-to-peer-cobrowsing.html">embedding the peer to peer cobrowsing (aka coshopping) widget</a>. He also wrote several more advanced blogs on <a href="http://ibmcea.blogspot.com/2009/08/creating-basic-two-way-form.html">how to create a two way form</a>, how to handle personalized <a href="http://ibmcea.blogspot.com/2009/07/handling-personalized-content-in.html">content</a> and <a href="http://ibmcea.blogspot.com/2009/07/handling-personalized-actions-in.html"> actions</a> in cobrowsing scenarios, and how to <a href="http://ibmcea.blogspot.com/2009/07/adding-cea-widget-to-page-already-using.html">add CEA widgets to a page already using another version of dojo</a>.<br /><br />Finally, we had our first guest blogger. Dustin Amrhein tried out the feature pack for the first time this week and found good ways to easily extend the Web 2.0 widgets included. He wrote <a href="http://ibmcea.blogspot.com/2009/08/extending-websphere-cea-widgets.html">his first blog</a> showing how you can customize the click to call widget to add the ability to select a specialist. We are looking forward to him writing several more blogs on the other scenarios he tried out.Erik Burckarthttp://www.blogger.com/profile/11271959207299422264noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-61523344129614420022009-08-19T13:02:00.002-04:002009-08-21T08:09:43.244-04:00Extending WebSphere CEA widgetsSince it’s my first time posting here, I guess a quick introduction is in order. My name is Dustin Amrhein and I’m a technical evangelist for emerging technologies (cool stuff) in WebSphere. I do not work on the WebSphere CEA development team, but I have been experimenting with the new CEA Feature Pack for the WebSphere Application Server lately.<br /><br />The first thing I did after installing the CEA Feature Pack was install and play around with the PlantsByWebSphere sample application that is included in the install. The cool features provided by the CEA Feature Pack, like co-browse, click-to-call, and call notification immediately jump out through the sample.<br /><br />With the introduction to some of the features of the CEA Feature Pack behind me, I decided to peek under the covers a bit. In particular, I was interested in the Dojo widgets that provided the interface to the functionality on display. If you are familiar with Dojo, you’re well aware that one of the benefits of Dojo widgets is that they can be easily extended to deliver custom function and interfaces. With that in mind, I decided to look into extending one of the widgets delivered by the CEA Feature Pack, the click-to-call widget.<br /><br />If you look at the <i>Contact Us</i> page of the PlantsByWebSphere, you will see an example of the click-to-call widget:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_FmnmngyajrQ/Sow24MsxEWI/AAAAAAAAABs/latelBM8wj8/s1600-h/click_to_call.jpg"><img style="cursor: pointer; width: 320px; height: 236px;" src="http://4.bp.blogspot.com/_FmnmngyajrQ/Sow24MsxEWI/AAAAAAAAABs/latelBM8wj8/s320/click_to_call.jpg" alt="" id="BLOGGER_PHOTO_ID_5371728794655723874" border="0"></a><br /><br /><div>Suppose I wanted to extend this widget just a bit. I want to give my users the option to select from a list of specialist in the different areas of my site (flowers, trees, vegetables, accessories), and once they select a particular specialist I'd like to display information about the person with whom they will be in contact. After all, it's always nice to know who's on the other end!</div><div><br /></div><div>To do this, I first start by extending the provided cea.widget.ClickToCall JavaScript:<br /><pre><br /><font size="1">dojo.provide("extension.ClickToCall");<br />dojo.require('cea.widget.ClickToCall');<br /><br />dojo.declare("extension.ClickToCall", [ dijit._Widget, dijit._Templated,<br /> cea.widget.ClickToCall ], {<br /><br />templatePath : dojo.moduleUrl('extension', 'ClickToCall/ClickToCall.html'),<br />templateString : "",<br /><br />handleSpecialistSelect : function(item) {<br /> var url = "/proxy/bpp?specialist=" + item;<br /> var responseHandler = dojo.hitch(this, "handleContactResponse");<br /> var errorHandler = dojo.hitch(this, "handleContactError");<br /> dojo.xhrGet( {<br /> url : url,<br /> handleAs : "json",<br /> timeout : 5000,<br /> load : responseHandler,<br /> error : errorHandler<br /> });<br />},<br /><br />handleContactResponse : function(response, ioargs) {<br /> this.returnedInfoRow.style.display = "block";<br /> this.callInfoRow.style.display = "block";<br /> this.contactInfoFromGet.innerHTML = "Click the Call Me button to be contacted<br /> by " + response['firstName'] + " " + response['lastName'] + " in "<br /> + response['city'] + ". Alternatively you may email "<br /> + response['firstName'] + " at " + response['email'] + ".";<br /> this.widgetNumber = response['phone'];<br />},<br /><br />handleContactError : function(response, ioargs) {<br /> console.error("error getting contact info " + response + " status " +<br /> ioArgs.xhr.status);<br />}<br />});</font></pre><br />The above contains the dojo declaration of my custom widget that extends the existing cea.widget.ClickToCall. The <i>handleSpecialistSelect</i> above will send an HTTP GET request when a user selects the particular type of specialist with whom they wish to talk. In my case, the GET request is sent to an Ajax proxy that then forwards the request for contact information along to the appropriate service. This allows us to use data in our JavaScript that is provided by a service in a different domain. The <i>handleContactResponse</i> populates the page with the contact information returned from the GET request.</div><div><br /></div><div>The JavaScript above also references a new HTML template via the <i>templatePath</i> variable. The new template can be seen here:<br /><pre><font size="1"><div><br /><table class="clickToCallWidget"><br /> <tr id="contactInfoRow"><br /> <td><br /> <table><br /> <tr dojoAttachPoint="getContactRow"><br /> <td>I want to contact a <br /> <select<br /> dojoType="dijit.form.ComboBox"<br /> dojoAttachEvent="onChange:handleSpecialistSelect" id="specialist"<br /> name="specialist"><br /> <option value="none">-- Make Selection --</option><br /> <option value="flowers">Flowers Specialist</option><br /> <option value="trees">Trees Specialist</option><br /> <option value="vegetables">Vegetables Specialist</option><br /> <option value="accessories">Accessories Specialist</option><br /> </select></td><br /> </tr><br /> <tr dojoAttachPoint="returnedInfoRow" style="display: hidden"><br /> <td><span dojoAttachPoint="contactInfoFromGet"></span></td><br /> </tr><br /> </table><br /> </td><br /> </tr><br /> <tr dojoAttachPoint="callInfoRow" style="display: none"><br /> <td><br /> <table dojoAttachPoint="callInfoTable"><br /> <tr><br /> <td><label dojoAttachPoint="phoneNumberLabel"<br /> title="${myNumberString}"><input name="phoneNumber"<br /> dojoType="dijit.form.TextBox" dojoAttachPoint="phoneNumber"<br /> class="clickToCallWidgetTextBox" value="${myNumberString}"></input></label><br /> </td><br /> <td><br /> <button dojoType="dijit.form.Button" dojoAttachEvent="onClick:call"<br /> dojoAttachPoint="callButton"<br /> iconClass="clickToCallWidgetIcon clickToCallWidgetCallIcon"<br /> class="clickToCallWidgetButton">${callButtonString}<br /> </button><br /> </td><br /> <td><br /> <button dojoType="dijit.form.Button"<br /> dojoAttachEvent="onClick:hangup" dojoAttachPoint="hangupButton"<br /> iconClass="clickToCallWidgetIcon clickToCallWidgetEndCallIcon"<br /> class="clickToCallWidgetButton" style="display: none">${hangupButtonString}<br /> </button><br /> </td><br /> <td><br /> <button dojoType="dijit.form.Button"<br /> dojoAttachEvent="onClick:cobrowse" dojoAttachPoint="cobrowseButton"<br /> iconClass="clickToCallWidgetIcon clickToCallWidgetCollaborateIcon"<br /> class="clickToCallWidgetButton" style="display: none">${cobrowseButtonString}<br /> </button><br /> </td><br /><br /> </tr><br /> <tr><br /> <td colspan="4" dojoAttachPoint="status" class="clickToCallWidgetStatus" style="display: none"><br /> </td><br /> </tr><br /> </table><br /> </td><br /> </tr><br /></table><br /><div dojoAttachPoint="collaborationDialog"<br /> dojoType="cea.widget.CollaborationDialog"<br /> canControlCollaboration="${canControlCollaboration}"<br /> defaultCollaborationUri="${defaultCollaborationUri}"<br /> highlightElementList="${highlightElementList}"<br /> isHighlightableCallback="${isHighlightableCallback}"<br /> isClickableCallback="${isClickableCallback}"><br /></div><br /></div></font></pre>To get my extended click-to-call widget in the PlantsByWebSphere sample application I need to do a couple of things. First I need to add my new files to the application. I'll add them in the PlantsByWebSphere.war file within the PlantsByWebSphere.ear. Relative to the root of the WAR file, I'm adding the following:<ul><li><font class="Apple-style-span" size="small">/ceadojo/cea/extension/ClickToCall.js (JavaScript file above)</font></li><font class="Apple-style-span" size="small"><br /></font><li><font class="Apple-style-span" size="small">/ceadojo/cea/extension/ClickToCall/ClickToCall.html (HTML above)</font></li></ul><font class="Apple-style-span" size="medium">I'm also going to modify the </font><i><font class="Apple-style-span" size="medium">contactus.html</font></i><font class="Apple-style-span" size="medium"> at the root level of the PlantsByWebSphere.war to use my custom widget instead of the normal one. To accomplish this, I first add the following to the HTML head section:</font><pre><font class="Apple-style-span" size="x-small"><script type="text/javascript"><br /> ceadojo.registerModulePath("extension","../cea/extension");<br /> ceadojo.require("extension.ClickToCall");<br /> ceadojo.require("dojo.parser");<br /></script></font></pre>After that is taken care of, I change the value of the <i>ceadojoType</i> attribute. Before it referenced the <i>cea.widget.ClickToCall</i> widget shipped with the CEA Feature Pack. As seen below, I change the <i>ceadojoType</i> attribute's value to <i>extension.ClickToCall</i>.<br /><br /><div><font class="Apple-style-span" style="white-space: pre;" face="-webkit-monospace" size="1"><TD></font></div><div><font class="Apple-style-span" style="white-space: pre;" face="-webkit-monospace" size="1"> <h2>Click To Call</h2></font></div><div><font class="Apple-style-span" style="white-space: pre;" face="-webkit-monospace" size="1"> <div id="clickToCallWidget"></font></div><div><font class="Apple-style-span" style="white-space: pre;" face="-webkit-monospace" size="1"> <!-- Replace 'CSR@localhost' with the user and address to be contacted when a clickToCall call is initiated --></font></div><div><font class="Apple-style-span" style="white-space: pre;" face="-webkit-monospace" size="1"> <div ceadojoType="<b>extension.ClickToCall</b>" widgetNumber="sip:CSR@localhost" enableCollaboration="true" </font></div><div><font class="Apple-style-span" style="white-space: pre;" face="-webkit-monospace" size="1"> canControlCollaboration="true" defaultCollaborationUri="index.html"></font></div><div><font class="Apple-style-span" style="white-space: pre;" face="-webkit-monospace" size="1"> </div></font></div><div><font class="Apple-style-span" style="white-space: pre;" face="-webkit-monospace" size="1"></TD></font></div><br />Now I'm ready to test out my changes. When I visit the <i>contactus.html</i> page, I'm greeted by a different view:<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_FmnmngyajrQ/SoxXgF7QeOI/AAAAAAAAAB0/iiGEmPm-WyQ/s1600-h/contact_us_new_1.JPG"><img style="cursor: pointer; width: 320px; height: 202px;" src="http://3.bp.blogspot.com/_FmnmngyajrQ/SoxXgF7QeOI/AAAAAAAAAB0/iiGEmPm-WyQ/s320/contact_us_new_1.JPG" alt="" id="BLOGGER_PHOTO_ID_5371764664404310242" border="0"></a><br />Once I select a particular specialist I want to contact, I then see information about the person who will be contacting me:<br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_FmnmngyajrQ/SoxYptWM46I/AAAAAAAAAB8/7pyxjzvNJkk/s1600-h/contact_us_new_2.JPG"><img style="cursor: pointer; width: 320px; height: 187px;" src="http://1.bp.blogspot.com/_FmnmngyajrQ/SoxYptWM46I/AAAAAAAAAB8/7pyxjzvNJkk/s320/contact_us_new_2.JPG" alt="" id="BLOGGER_PHOTO_ID_5371765929116754850" border="0"></a><br /><br />This is just one example of how the widgets provided by the WebSphere CEA Feature Pack can be extended to deliver customized function and behavior. I hope this helps give you a glimpse into the basic pattern for customizing the WebSphere CEA widgets. By the way, you can download a PDF of the JavaScript and HTML displayed above <a href="http://docs.google.com/fileview?id=0B0bzuZchxt66Yzg0ZTViZTMtMDA0My00NjIyLThjMzMtYmNmMWFmODI3OGE2&hl=en">here</a>.<br /></div>Dustin Amrheinhttp://www.blogger.com/profile/00786999728126984819noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-45800261954715948342009-08-19T09:23:00.000-04:002009-08-19T09:53:38.935-04:00Using CEA Services - Inventory Management example<object width="560" height="340"><param name="movie" value="http://www.youtube.com/v/9HbvVX9gAj4&hl=en&fs=1&color1=0x402061&color2=0x9461ca"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/9HbvVX9gAj4&hl=en&fs=1&color1=0x402061&color2=0x9461ca" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object><br /><br />We have spent a lot of time talking about how to use our CEA Web 2.0 widget features in WebSphere to communications enable your website but there certainly are several other use cases we have provided for. Overall, we are providing three main access points to help communications enable your applications. We provide the Web 2.0 widgets, REST like services, and web services. I wanted to blog in more depth about the CEA services that are available in WebSphere.<br /><br />First, we have a REST like service. I say REST like because while we tried to follow the REST semantics as much as possible, it definitely made more sense to build some level of affinity logic into the service to tie a HTTP request to a specific server which is participating in the telephony side of the conversation. To build a similar system stateless would have been much more challenging and not perform as well. The service however does use the REST semantics. The verbs are still HTTP methods, PUT, POST, GET, and DELETE and at the root of the URLs are nouns. The REST services use either encoded URLs or Cookies for affinity. These services either send back data in JSON or XML formats depending on which is easiest for the consumer to handle. <a href="http://publib.boulder.ibm.com/infocenter/wasinfo/fep/index.jsp?topic=/com.ibm.websphere.ceafep.multiplatform.doc/info/ae/ae/ccea_rest_overview.html">Here is a great in depth article on the REST services</a> in the Communications Enabled Applications Feature Pack.<br /><br />Second we have web services. As I stated above, we have challenges with having affinity for these services and needing a call back mechanism in order to get updates about the call state. We used WS-Adressing to deal with the affinity issues by having specially encoded end point references which tie the web services to a backend SIP session talking to your telephony infrastructure. We also use WS-Notification as a way to send updates about a particular call state.<br /><a href="http://publib.boulder.ibm.com/infocenter/wasinfo/fep/index.jsp?topic=/com.ibm.websphere.ceafep.multiplatform.doc/info/ae/ae/tcea_manage_calls_webservice_step7.html">Here is a good reference usage of using the web services to make a phone call</a>.<br /><br />So, how can these be used? Well, one example as briefly talked about in the video above is in an inventory management system. When the inventory begins to run low, a call could be made between the buyer and supplier using web services so that more stock could be ordered. This could be in addition to sending the appropriate message to the buyer letting them know what is low, what needs ordered, and the account information for the supplier. Now, this scenario could also be handled through REST integration or even using the widgets, it really just depends where the right place in your existing application is to plug in communications.Erik Burckarthttp://www.blogger.com/profile/11271959207299422264noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-81720984497903953312009-08-13T20:10:00.006-04:002009-11-30T11:54:28.429-05:00Setting Up and Exploring the CEA Feature Pack<p>Version 1.0.0.1 of the Feature Pack for CEA now includes a dedicated demonstration system setup guide, as well as a set of scripts to automate many of the setup tasks. For further information, please see the <a href="http://www14.software.ibm.com/webapp/wsbroker/redirect?version=v700cea&product=was-nd-mp">IBM WebSphere Application Server Information Center</a>, as well as the following support page: <a href="http://www-01.ibm.com/support/docview.wss?rs=180&uid=swg24024830">CEA Feature Pack Fix Pack V1.0.0.1 for WebSphere Application Server V7</a>.</p>Roger Davenporthttp://www.blogger.com/profile/13170619395032324378noreply@blogger.com0tag:blogger.com,1999:blog-1977352693216491729.post-3768911411307608812009-08-12T09:37:00.001-04:002009-08-13T09:11:45.011-04:00Communications Enabled Applications Vendor InteroperabilityWith so much buzz around the release of the Communications Enabled Applications 1.0.0.0 feature pack I would like to highlight the vendors that we worked closely with to ensure product interoperability. <br /><br />Below is a listing of each vendor and PBX version used in our testing.<br /><blockquote><br /><span style="font-weight: bold;">Avaya:</span><br />Application Enablement Services<br />Version: r4-2-1-20-5-0<br />Server Type: DELL1950<br />Offer Type: TURNKEY<br /><br /><br /><span style="font-weight: bold;">Cisco:</span><br />Cisco Unified CM Administration<br />System version: 7.0.1.11000-2<br />Cisco Unified Presence Administration<br />System version: 7.0.2.10000-36<br /><br /><br /><span style="font-weight: bold;">Nortel:</span><br />Nortel Communication Server 1000E CPPM<br />Version: 4021<br />Release: 550J<br /></blockquote><br />I would like to thank Avaya, Cisco, and Nortel for their support in helping us ensure our product worked seamlessly with their specific PBX solution.Ollie J Haleshttp://www.blogger.com/profile/12352957942745125435noreply@blogger.com0