Note: Not every region has to be filled by a layout element.
In the first code example, we are defining the design to be of type ‘headline’ which results in the general configuration that you see below 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.
In the second code example we define the 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 only need to define the width style property since the height will always be 100%.
In either case the center region will conform to fit the amount of space available based on the sizing of the other regions.
Child Elements of BorderContainer
Each region of a BorderContainer (top, bottom, left, right, center) can be filled by a Dojo layout element. These elements are AccordionContainer, ContentPane, SplitContainer, StackContainer, and TabContainer. You can also created nested BorderContainers to further divide the available layout space.
Child elements are placed inside a region through the use of the ‘region’ attribute as seen below. Notice in the yellow highlighted section that the ‘region’ attribute is set to ‘left’. This will create a ContentPane in the left region. A ContentPane is a very basic layout element and is used as a container for other widgets. In this case it is going to hold a TabContainer (green highlighted code).
The other child layout elements that can be placed inside a BorderContainer include AccordionContainer, SplitContainer, and StackContainer.
AccordionContainers hold a set of panes whose titles are visible, but only one pane’s content is visible at a time. As the user clicks a title, the pane contents become visible. These are excellent user interface containers that can hold a lot of information in a small area.
StackContainers resemble books where only a single pane of information is available at a time. Users can page through various panes of information.
Finally, a SplitContainer is a container that contains multiple children. All the children are displayed side by side either horizontally or vertically with a bar in between. The bars can be dragged to change the relative size of the child areas.
There are a number of other design considerations which you should take into account. ESRI has done a great job of defining those here near the bottom of the page.
Sample Layouts from ESRI
ESRI also provides toolbar helper classes that enable you to easily add in navigation, drawing, or editing functionality. These toolbars aren’t user interface components that you simply drop into your application, but are instead helper classes that make creating the toolbars a snap to create and add to your interface. For now we’ll just take a look at adding a navigation toolbar to your application. There are several steps to adding the toolbar, but all are quite simple.
First you’ll want to add in the references that you’ll need to implement this functionality.
You need a reference to the navigation toolbar along with a reference to dijit.Toolbar and dijit.form.Button. Each of the tools in the toolbar is actually a Dojo Dijit Button that is contained within a Dojo Dijit Toolbar.
Next we’ll define the icons that will be used for each of our buttons. This can be done through CSS styling as seen below. Here we are defining the images to be used along with their width and height.
Finally, we create the toolbar through the use of dijit.Toolbar which is defined inside a ContentPane in the ‘top’ region of our BorderContainer. You can see this in the code below. In the yellow highlighted code we are creating an instance of dijit.Toolbar called ‘navToolbar’. This new toolbar is located inside a ContentPane called ‘toolbar-container’ which is a child layout element of BorderContainer. This code is highlighted in green.
Inside our toolbar (‘navToolbar’) we create a series of dijit.form.Button objects that correspond to the type of function that should be performed by that tool. I’ve highlighted one example of this in the code below. This is the Zoom In tool that a user can click and then drag a rectangle on the map to zoom to a new extent. This tool is defined as type dijit.form.Button. The ‘onClick’ event is particularly important here because it references back to the esri.toolbars.navigation reference that we defined earlier. This actually defines what type of functionality should be provided by this button. In this case, esri.toolbars.Navigation.ZOOM_IN. The ‘iconClass’ attribute is used to reference back to the style we created earlier which contains the icon that will be used for the button.
So, all of that results in a toolbar.