us site
developer center
search

Box layout containers for Dojo

March 20th, 2008 by

What is it?

HorizontalBoxContainer and VerticalBoxContainer is a pair of layout managers that allow multiple children components to be laid out either vertically or horizontally. This is similar to BoxLayout from the Java Swing toolkit.

So, why do we need Box Containers?

Box layout is simple to understand and easy to use. It allows us to apply successful “divide and conquer” tactic to User Interface design. The allotted container space can be arbitrarily divided, say, horizontally, then, in turn, each part can be divided vertically and so on, thus leading to potentially complex UI designs.

How is that better than SplitContainer?

xBoxContainer is not intended as a replacement for SplitContainer. It is useful when you want to divide the allotted space into three or more sub-areas. Children can also be set up to resize automatically when the amount of allotted space changes.

Automatic sizing

Both managers allow top/bottom and left/right alignment or “stretch” of children components. In addition, one or more children components can define a ”flex” attribute to claim unallocated Container space. In case of many children with the ”flex” attribute, the value determines the relative elasticity of each component. For example, if one child component has a flex of 2 and another has a flex of 1, the first child component will claim twice as much space to fill the bounds of the Container.

Examples

Here are links to some examples:

VerticalBoxContainer
HorizontalBoxContainer

Source

Complete source code for both HorizontalBoxContainer and VerticalBoxContainer can be found here.

BoxContainer.zip

Tags:

Leave a Reply