Using Layout Managers
With Bindows you have sophisticated layout capabilities at your disposal. There are special layout components, called layout managers, which layout their children in various ways. Almost all layout managers uses the preferred with and height of the components inside it so instead of setting the width and height you should use preferredWidth and preferredHeight.
BiComponent
Allthough technically not a layoutmanager, this component allows it's children to be sized and positioned based on absolute coordinates (inside the component). Setting left and top on the child, positions the child at that location within the component. The size can usually be set on the child using left and top. The default size of a BiComponent is always zero width and height. If these values are not set, manually or by a layout manger, the component will be invisible.
Anchoring
BiComponent allows its children to be anchored to its edges. If you anchor a child to the right edge of its parent, it will maintain this distance when either the child or parent is resized. If left, width and right are set the width is ignored and the child will be resized when the parent is resized maintaining both the left and the right distance from the inner edge of the parent.
BiGridPanel
This layout component positions its children in a grid with a given number of
columns or rows, using string patterns. This works much like a frameset in HTML,
and the number of columns and rows, as well as the size of these, are decided using
the cols and rows properties. The size of the columns can
either be expressed in pixels, percentage or a flex value. These properties take a
comma separated string of sizes. Sizes can be of the following formats:
- 75 - 75 px
- 25% - 25% of the client size of theBiGridPanel component
- * - Remaining space
- 1.5* - Weighted remaining space. This is used when more than one of the sizes contains a '*' to decide how to distribute the size.
<GridPanel height="100" width="100" cols="45, 25%, *, 2*" rows="*,*"
hGap="1" vGap="1">
<Label text="0"/>
<Label text="1"/>
<Label text="2"/>
<Label text="3"/>
<Label text="4"/>
<Label text="5"/>
<Label text="6"/>
<Label text="7"/>
</GridPanel>
Observe that in the above example we set the height and width of the GridPanel itself. We have to do this since BiGridPanel inherits from BiComponent, which has a default size of zero. Our GridPanel is also a top level component, ie., it's size is not controlled by some other component. Note also, that we did not specify a position for the GridPanel so it's default position will be at pixel 0,0. The fact that the GridPanel is a BiComponent makes it possible to modify other visual properties, like it's background color.
BiGridPanel2
BiGridPanel2 is a layout tool which emulates the behavior of a standard html table. A layout is created by adding rows with cells to the grid panel. Cells support spanning, alignment, padding and stretching. Row and column sizes are defined in the same way as in BiGridPanel.
There is a separate tutorial for BiGridPanel2 available here.
BiDockPanel
This layout component positions and sizes its children using docking guidelines.
BiDockPanel uses something called attached properties. A dock panel allows you to
dock children to an edge and it will take up the
entire width/height of that side and use its preferred size in the other
direction. The remaining children will then use the remaining space for docking
until there is no more space, no more children or a child uses the
fill dock value.
Attached properties
Attached properties allows other components to add UI hints that the dock panel uses. BiDockPanel uses the attached property dock to tell how to layout the child. The children are layed out from first child to last and after a child has been docked to one edge the following child will be docked to remaining available space. Once a child sets its docking hint to "fill", the following will not be shown.
var dp = new BiDockPanel();
dp.setSize(100,100);
dp.setBackColor("white");
var label = new BiLabel( "Text" );
label.setBackColor("yellow");
BiDockPanel.setDock( label, "top" );
dp.add(label);
application.getWindow().add(dp);and using markup:
<DockPanel width="100" height="100" >
<Label backColor="white" DockPanel.dock="left" text="0"/>
<Label backColor="blue" DockPanel.dock="top" text="1"/>
<Label backColor="green" DockPanel.dock="right" text="2"/>
<Label backColor="red" DockPanel.dock="bottom" text="3"/>
<Label backColor="yellow" DockPanel.dock="fill" text="4"/>
</DockPanel>
BiBox
BiBox implements a box layout much like the XUL box model. There are also BiVBox and BiHBox for convenience. The children of the box are laid out either horizontally or vertically and the preffered size or the attached flex property is used to decide the size of the child.
<VBox backColor="white" top="0" left="0" bottom="5" right="5" align="center" pack="center">
<Button>Centered Button</Button>
</VBox>
<HBox backColor="white" top="10" left="10" bottom="10" right="10" align="center">
<Label text="Password:"/>
<PasswordField marginLeft="3" HBox.flex="1"/>
</HBox>
BiFlowPanel
A flow panel flows components much like a text area flows text. It positions the children in a line from left to right and when no more children fit on the current line it wraps to the next line and continues from there. The height of the line is determined by the preferred height (as well as minimum and maximum height) of the children on that line.
The flow panel can do vertical align (vAlign), text align
(align) as well as alignment on the current line
(baselineAlign). The baselineAlign can be set on the
flow panel or you can override it with an attached property on a child.
<FlowPanel backColor="white" height="100" width="100">
<Button text="Button" preferredHeight="50"/>
<Label text="Hello" margin="5"/>
<Label text="World" margin="5"/>
<Label text="!" FlowPanel.baselineAlign="top"/>
</FlowPanel>
Features
The following table sums up some of the features provided by the different layout components.
| BiComponent | BiGridPanel | BiGridPanel2 | BiDockPanel | BiBox | BiFlowPanel | |
|---|---|---|---|---|---|---|
| Uses position and size |  |
| ||||
| Uses preferred size |
| |
|
|
||
| Uses maximum size | |
|
||||
| Uses minimum size | |
|
||||
| Adjusts to hidden | |
|
|
|||
| Uses margin | * | * | |
|
|
|
| Margin collapsing | |
** |
* Uses hGap and vGap
** Only on the same line
If a component does not take hidden children into account it means that switching the visibility on a child will not affect the size and position of the other children.
Margin collapsing means that if 2 adjacent child components have a margin the distance between them is the larger margin.
In Bindows the components are by default drawn in the same order as they are added to the parent. However, you can use zIndex to change this. A higher z-index value means that it will be be painted on top of a sibling. Z-index is only used to decide the order to draw the children of a component.
<Box>
<Label text="0" marginRight="10"/>
<Label text="1" marginLeft="5"/>
</Box>
This will have a margin of 10 pixels between the labels.