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:
- Web skeleton UI, which is the outside layout of a Web2.0 application.
You can use Dojo in this part and this task provides examples for
it.
- Service list, you can also use Dojo in this part.
- Widget container, where you can use Dojo/Dijit in the inner side
of Web2.0 widget.
- First, enable Dojo support by configuring file BTTWeb20/common/Config.js. Add the following code into
the file:
BTTRuntimeConfig = {
debugMode:true,
supportBase : "dojo"
}
- Then you can use Dojo in your code.
- 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>
- 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.
- 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.