Since the AGIS API for JavaScript is built directly on top of the Dojo JavaScript framework, you automatically have access to the user interface Dojo libraries, including layout dijits such as BorderContainer. The layout dijits are a set of user interface elements you can add to an application that give you control over the layout of the application. The BorderContainer dijit serves primarily as a container for other child containers and can be one of these two design types: headline or sidebar. You define the design type using the design attribute. The design type can be either headline or sidebar and both can be split into as many as 5 different regions: top, bottom, right, left, and center. Each region is normally filled by a Dojo layout element. It is also possible to nest regions for greater control over the layout of an application. For example, you might include a second BorderContainer within the center region of a master BorderContainer. Using this second BorderContainer, you could then further divide the center region.
In the following code example, we are defining design to be of type headline. This results in the general configuration that you see in the code, with the top and bottom regions stretching across the entire width of the screen space. In this case, you only need to set the height property for the top and bottom regions:
<div id="main-pane" dojoType="dijit.layout.BorderContainer" design="headline">
In the following code example, we define design as sidebar. With the sidebar design, the left and right regions expand to take up 100% of the height of the window, sacrificing the area available to the top and bottom regions. In this case, you need to define only the width style property as the height will always be 100%.
<div id="main-pane" dojoType="dijit.layout.BorderContainer" design="sidebar">
In either case, the center region will conform to fit the amount of space available, based on the sizing of the other regions. The following screenshots that you will see depict both of the design types available for BorderContainer. The first shows a headline style while the second shows a sidebar style.
