Monday, September 17, 2007

Creating Tabs Programmatically with Dojo 0.9 [2]

If you had a look of the previous post, you probably saw that it was working. But there was at least an error in there.

<div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
style="float: left; margin-right: 30px; width: 100%;
height: 100%; overflow: hidden">
<div id="tabs"></div>
</div>

I put a div with an id 'tabs'. This is a really bad idea. In fact, even if the tabs are displayed correctly, this is messing up for instance the access by javascript code to those tabs:

for(var i=this.getChildren().length-1; i>=0; i--) {
this.tablist.onCloseButtonClick(this.getChildren()[i]);
}

This code (in my personal tab widget that is an extension of the dojo tab widget - if I will have time I'll post it later), for instance, is not working, as the method getChildren() is returning always and only an element. To get over this problem, instead of declaring a div in the html, I create some divs dynamically, when needed:

var pane1 = new dijit.layout.ContentPane({ id: 'tab1', title: 'Test tab 1' }, dojo.doc.createElement('div'));

and the HTML code will become:

<div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
style="float: left; margin-right: 30px; width: 100%;
height: 100%; overflow: hidden">
</div>
Posted by at No comments:

Thursday, September 13, 2007

Creating Tabs Programmatically with Dojo 0.9 [1]

I am in the process of moving one of the projects I am working on from Dojo 4.3 to Dojo 0.9. One of the things I need is to develop an extended version of the dijit.TabContainer. First, I need to be able to create the standard components programmatically.

I created a simple css file like this:

html, body, #main{
width: 100%; /* make the body expand to fill the visible window */
height: 100%;
overflow: hidden; /* erase window level scrollbars */
padding: 0 0 0 0;
margin: 0 0 0 0;
font-family: Verdana,sans-serif;
font-size: 11px;
}

#banner {
width: auto;
float: right;
margin: -1px -4px;
height: 20px;
position: absolute;
z-index: 100;
right: 10px;
top: 6px;
}

And here's the code to be inserted in the html head (pay attention in adjusting the dojo path according to your dojo installation):

<script type="text/javascript" src="../dojo09/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
<script type="text/javascript" src="../dojo09/dijit/dijit.js"></script>

<style type="text/css">
@import "../dojo09/dijit/themes/soria/soria.css";
@import "../dojo09/dojo/dojo.css";
@import "css/extTabContainerTest.css";
</style>

The html body:

<body class="soria">
<div id="banner">
<button dojoType="dijit.form.Button" onclick="call_function">
Start Programmatic Test!
</button>
</div>
<div id="mainTabContainer" dojoType="dijit.layout.TabContainer"
style="float: left; margin-right: 30px; width: 100%;
height: 100%; overflow: hidden">
<div id="tabs"></div>
</div>
</body>

Finally the script to be added again in the html head:

<script type="text/javascript">

dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");

function call_function() {

var pane1 = new dijit.layout.ContentPane({ id: 'tab1', title: 'Test tab 1' }, dojo.byId('tabs'));
var pane2 = new dijit.layout.ContentPane({ id: 'tab2', title: 'Test tab 2', closable: true }, dojo.byId('tabs'));

var tabContainer = dijit.byId('mainTabContainer');
tabContainer.addChild(pane1);
tabContainer.addChild(pane2);
}

</script>

Now loading the page and pressing the button on the top right you'll see the two new tabs
Posted by at No comments:
Subscribe to: Posts (Atom)