Dojo – Understanding The BorderContainer

I 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:

Top
Left
Center
Right
Bottom

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:

Left
Top
Right
Center
Bottom

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:

Top
Left Top
Left Bottom
Center

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.

Be Sociable, Share!

Checkout My New Site - T-shirts For Geeks