IBM WebSphere Multichannel Bank Transformation Toolkit, Version 7.1

Developing Web2.0 UI with Dojo

You can use Dojo in BTT to develop high quality web user interface.

About this task

Dojo provides a rich set of utilities for building responsive applications. Generally, Web2.0 application includes three parts in its user interface:

Procedure

  1. First, enable Dojo support by configuring file BTTWeb20/common/Config.js. Add the following code into the file:
    BTTRuntimeConfig =  {	
    	debugMode:true,	
    	supportBase : "dojo"
    }
  2. Then you can use Dojo in your code.
    1. Firstly, make sure Dojo package is included in JSP file.
      <script src="dojo/dojo/dojo.js" type="text/javascript"
      djConfig="isDebug:false, parseOnLoad: true ,usePlainJson:true"></script
      ><script type="text/javascript">
      	dojo.require("dijit.dijit"); 	dojo.require("dojo.parser"); 	dojo.require("dojo.NodeList-fx");
      </script>
    2. Secondly, add Dojo appearance code between tag <script type="text/javascript"> and </script>.
      dojo.query("#welcome").addClass("testdojoClass").fadeOut({ delay:2000 }).play(); 
      		dojo.style("welcome","opacity","0"); 
      		 var anim1 = dojo.fadeOut({ node: "welcome", duration:2000 });
      		  var anim2 = dojo.animateProperty({
      		    node: "welcome", delay: 4000,
      		    properties:{
      			opacity: { end: 1 }, fontSize: { end:19, unit:"pt"}
      		    }
      		}); 
      		anim1.play();
      		anim2.play();
      These codes grants wording in label welcome a wonderful animation appearance.
    3. Add more Dojo event to this label:
      dojo.query("#welcome")
      		.style("cursor","pointer")
      		.connect("onclick",function(){
      		    this.innerHTML = "Welcome to BTT"; 
      		    alert("I'm clicked!"); 
      		    var tabId = BTTUtil.Workarea.addTab();
      			var columnId =BTTUtil.Workarea.addColumn(tabId,0);
      			var rowId= BTTUtil.Workarea.addService(columnId,0,{title : 'BTT', draggable : '1'}, {id : "simpleHTMLWgt", attribute : {url:"https://btt.cn.ibm.com"}});		
                  BTTUtil.Workarea.showTab(tabId);
      		});	
      These codes add a Dojo event to the Dojo, when clicking label “welcome”, it launches a Web2.0 service and displays the service tab.


Feedback