Using Dijit to enrich Web2.0 applications

Put your short description here; used for first paragraph and abstract.

Before you begin
We will build up a BTT web2 widget with dijit from scratch, suppose there's a digit service in WidgetCatalog.xml:
<entry id='BTTDijitWgt' definition='../widget/dijitweb2.0/BTTDijitWgt.xml'></entry>
About this task
Dijit are predefined Dojo widgets. It is also a framework which provides tab containers, splitters, and other layout containers to help you create your own widgets. BTT Web2.0 supports Dijit integration in BTT Web2.0 widgets. the widget XML will call several JavaScript, one is Dijit base javascript, and others are other Dijit widget JavaScript which is extended from Dijit base JavaScript, the dijit widget will call a Dijit HTML page, where we can define various Dijit elements.
  1. In xml file BTTDijitWgt.xml, add following definition, in call two java script: BTTDijitBase.js, the base Dijit, and BTTDijitWgt.js, the Dijit widget JavaScript, also we will declare the iScope “com.ibm.btt.simpleDijit” in later parts.
    <iw:iwidget name="BTTDijitWgt"
    xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget"
    iScope="com.ibm.btt.simpleDijit"
    supportedModes="view edit refresh close max collapse" mode="view"
    >
        <iw:resource uri="BTTDijitBase.js"/>
        <iw:resource uri="BTTDijitWgt.js"/>
    </iw:iwidget>
  2. Add following definition in the base Dijit BTTDijitBase.js, it loads the DOM in the page, and declare Dijit class com.ibm.btt.BTTDijitBase:
    dojo.declare("com.ibm.btt.BTTDijitBase", [dijit._Widget, dijit._Templated], {
    	
    	widgetsInTemplate: true,
    	
    	onLoad: function() {
    	
    		var rootElement = this.iContext.rootElement;
    		var domDivRoot = this.iContext.wgt.domDivRoot;
    		domDivRoot.innerHTML = "";
    		domDivRoot.appendChild(this.domNode);
    	}
    });
  3. c) Let's focus on file BTTDijitWgt.js.
    1. Add Dijit require package and declare Dijit class com.ibm.btt.simpleDijit which extend com.ibm.btt.BTTDijitBase
      dojo.require("dijit.dijit");
      dojo.require("dijit.form.Button");
      dojo.declare("com.ibm.btt.simpleDijit", com.ibm.btt.BTTDijitBase, {
      
      	});
    2. Add following template Path to call the HTML page and the onLoad function in the declare class com.ibm.btt.simpleDijit
      templatePath: "widget/dijitweb2.0/BTTDijitWgt.html",
      	
      	onLoad: function() {
      }
    3. Add following code in the onLoadfunction, it define the action of the button which is defined in the HTML page by the Dojo event, it launch another service when click the button in the page.
      var thisIContext=this.iContext;
      var theButton = new dijit.form.Button({
      			onClick:function(){
      			alert("Clicking!!!!");
      			}
      		    },"myButton");
      		dojo.query(this.iContext.getElementById("myButton"))
      		.style("cursor","pointer")
      		.connect("onclick",function(){
      		    this.innerHTML = "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"}});		
      		});
  4. Define Dijit element in Dijit HTML page file BTTDijitWgt.html, here we will define a Dijit button in the page. Please note, HTML tag is not recommended in this HTML page.