Dojo Dijit BorderContainer – a working example | Dojo Tutorial

Dijit BorderContainer                                                                                                          

Dijit BorderContainer overrides dijit/LayoutContainer which can have draggable splitters between its children.

Inside BorderContainer all children will have border between them irrespective of weather it is draggable or not.

BorderContainer will not have Border.

Main advantage of using BorderContainer is to create a unbreakable CSS layout.It will adjust its included containers automatically according to screen size, which is a most wanted feature nowadays. BorderContainer will have ContentPane, TabContainers etc.. as its children.

Dijit BorderContainer can be created using programmatic or declarative.

Programmatic method of creating Dijit BorderContainer

require([
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",

"dojo/domReady!"
], function(BorderContainer, ContentPane){

// create a BorderContainer
var borderContainer = new BorderContainer({

style: "height: 100%; width: 100%;"
});
    // creating a ContentPane as the left pane in the BorderContainer

var contentPaneLeft = new ContentPane({

region: "left",
style: "width: 30%",
content: "Iam Left Child"

});
borderContainer.addChild(contentPaneLeft);

    // creating a ContentPane as the center pane in the BorderContainer

var contentPaneRight = new ContentPane({

region: "center",
style: "width: 40%",
content: "I am the Middile One"

});
borderContainer.addChild(contentPaneRight);

// creating a ContentPane as the Right pane in the BorderContainer

var contentPaneRight = new ContentPane({

region: "right",
style: "width: 30%",
content: "I am the Right One"
});
borderContainer.addChild(contentPaneRight);

//place BorderContainer to the document Body

borderContainer.placeAt(document.body);
borderContainer.startup();
});

Declarative method   of creating Dijit BorderContainer

require(["dojo/parser", "dijit/layout/ContentPane", "dijit/layout/BorderContainer"]);
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainer" style="width:100%;height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'left'" style="width: 30%;">I am the left one</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'" style="width: 40%;">I am the center one</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'right'" style="width: 30%;">I am the Right one</div>
</div>

Accessibility of Dijit BorderContainer

1. To navigate splitters for resizeable regions – tab
2. To change the size of vertical region – up/down arrow
3. To change the size of horizontal region – left/right arrow