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.
Procedure
- 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>
- 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);
}
});
- c) Let's focus on file BTTDijitWgt.js.
- 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, {
});
- 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() {
}
- 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"}});
});
- 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.