Using Dojo in Web2.0 widgets

About this task

This task defines a service named DOJOAccountTransferWgt in WidgetCatalog.xml. Then use Dojo in this service to enrich its functions.

Procedure

  1. Define the Web2.0 service DOJOAccountTransferWgt in file WidgetCatalog.xml using the following codes:
    <entry id='DOJOAccountTransferWgt' definition='../widget/dojobase/dojo_account_transfer.xml'></entry>
  2. Add following Dojo package declaration in file dojo_account_transfer.js. It is the resource of dojo_account_transfer.xml.
    dojo.require("dojo.NodeList-fx");
    dojo.declare("dojo.account_transfer", null, {
    …}
  3. Add iscope and resource in file dojo_account_transfer.xml, and make sure the iscope name is identical to the javascript declared name dojo.account_transfer.
    <iw:iwidget name="account_transfer" xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" iScope="dojo.account_transfer" supportedModes="collapse close" mode="view">
    <iw:resource uri="Web2ChannelRequest.js"/>
    <iw:resource uri="dojo_account_transfer.js"/> </iw:iwidget>
  4. Suppose there is a div definition in file dojo_account_transfer.xml: <div id="titlediv"></div>. Use following codes to add Dojo animations in the JavaScript:
    1. Add an onload function in the JavaScript:
      onLoad : function() {}
    2. Add following Dojo appearance code in the function onLoad. These code shows Dojo animation in the widget:
      var thisIcontext=this.iContext;
      	thisIcontext.getElementById("titlediv").innerHTML = "Again, We're on our way!";
      		dojo.query(thisIcontext.getElementById("titlediv")).addClass("testdojoClass").fadeOut({ delay:2000 }).play(); 
      		dojo.style(thisIcontext.getElementById("titlediv"),"opacity","0"); 
      		 var anim1 = dojo.fadeOut({ node: thisIcontext.getElementById("titlediv"), duration:2000 });
      		  var anim2 = dojo.animateProperty({
      		    node: thisIcontext.getElementById("titlediv"), delay: 4000,
      		    properties:{
      			opacity: { end: 1 }, fontSize: { end:19, unit:"pt"}
      		    }
      		}); 
      		anim1.play();
      		anim2.play();	
    3. Add following Dojo event code in the function onLoad. It launches a new service by Dojo event mechanism:
      dojo.query(this.iContext.getElementById("titlediv"))
      		.style("cursor","pointer")
      		.connect("onclick",function(){
      		    this.innerHTML = "I've been clicked";  
      		    var rowId = thisIcontext.getWgt().getContainerId();
      		    var rowId= BTTUtil.Workarea.addService(rowId, 0, {title : 'BTT', draggable : '1'}, {id : "simpleHTMLWgt", attribute : {url:"https://btt.cn.ibm.com"}});		
      
      		});