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:
  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.