Dojo – Understanding The BorderContainer
Friday, April 10th, 2009I recently restarted a project that I haven’t worked on in nearly a year. I am using Dojo for the project. I ran the application in order view the current functionality and to try to figure out where I stopped in my development. I then upgraded to a new version (1.3) and viewed the website once again. I immediately noticed a firebug message that basically told me that the LayoutContainer was being deprecated and would not be used in version 2. The message also suggested that I should use BorderContainer instead.
Changing from the LayoutContainer to the BorderContainer wasn’t difficult because I basically had to change the content panes attribute “layoutAlign” to “region”:
<div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="height: 50px;"> <div dojoType="dijit.layout.ContentPane" region="left" style="height: 50px;">
I also found that setting up the BorderContainer was very similar to the YUI Layout Manager. When setting up the BorderContainer, first consider which layout mode you wish to use in the “design” attribute. The options are “headline” (the default) and “sidebar”.
In “headline” mode, the top and bottom regions extend the entire width of the container and the remaining regions are placed in the middle:
In “sidebar” mode, the left and right regions extend the full height of it’s container and the remaining regions are placed in the middle:
To create a borderContainer in “headline” mode:
<div id="container">
<div dojoType="dijit.layout.BorderContainer" gutters="false" liveSplitters="false" id="borderContainer">
<div class=”banner” dojoType="dijit.layout.ContentPane" region="top" splitter="false"></div>
<div dojoType="dijit.layout.ContentPane" region="center"></div>
</div>
</div>
To create a borderContainer in “sidebar” mode:
<div id="container">
<div dojoType="dijit.layout.BorderContainer" gutters="false" liveSplitters="false" design=”sidebar” id="borderContainer">
<div dojoType="dijit.layout.ContentPane" region="left" splitter="false"></div>
<div dojoType="dijit.layout.ContentPane" region="center"></div>
</div>
</div>
As you can see in the above examples, I don’t have to use all of the regions. The BorderContainer can set be split into 5 regions: left (leading), right (trailing), top, bottom, and center. Only the center is mandatory.
The project that I’m working on, I needed to split the left region into two sections - an AccodionContainer on the top and a ContentPane on the bottom:
To create this layout, I did the following:
<div id="page">
<div dojoType="dijit.layout.BorderContainer" gutters="false" liveSplitters="false" id="borderContainer">
<div class="banner" dojoType="dijit.layout.ContentPane" region="top" splitter="false"></div>
<div dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar" region="center" id="mainSplit" style="background-color:#eeeeee;">
<div dojoType="dijit.layout.ContentPane" region="left" splitters="false" >
<div dojoType="dijit.layout.AccordionContainer" minSize="20" id="stepAccord" splitter="false">
<div dojoType="dijit.layout.ContentPane" title="Step 1" class="stepContent"></div>
<div dojoType="dijit.layout.ContentPane" title="Step 2">
<div dojoType="dijit.layout.ContentPane" title="Step 3">
…
</div>
<div dojoType="dijit.layout.ContentPane" style="height:50px;"><!--Help/Desicription --></div>
</div>
<div dojoType="dijit.layout.ContentPane" region="center"></div>
</div>
</div>
</div><!--- page end --->
Note: Notice that I am using ContentPane inside the AccordionContainer instead of AccordionPane. The AccordionPane is being deprecated and will not be compatible with Dojo 2.
The BorderContainer can be a bit confusing when attempting to design a complex layout, but it gets the job done.
One final note, when using the BorderContainer, the size of the <body> element and the BorderContainer needs to be set in order for the BorderContainer to fill it’s container:
body, html {
width:100%;
height:100%;
}
#borderContainer {
width:100%;
height:100%;
}
Enjoy.
April 10th, 2009 at 10:52 am
Nice writeup. For the programatically-inclined, I’ve thrown together a fairly complex BorderContainer example using a CDN:
http://dante.dojotoolkit.org/static/xd/layout.html
Peter Higgins’s last blog post..A Dojo Plugin Pattern
April 10th, 2009 at 11:25 am
Thanks. Also, your Dojo Plugin Pattern article is very interesting.
December 1st, 2009 at 9:55 pm
Hi,
I would appreciate if you could zip up the source files for the example of the BorderContainer so that I can play around with it offline?
Many thanks!