Controls inside a canvas are layed out according to the layout type you specify. The layout type is specified by adding the layout attribute to the <canvas> element. This article describes all the possible layout types and their special behavior.
If the canvas is set to flow layout, controls are placed on the panel one after the other, without any special positioning. When the panel is resized, the controls are repositioned to fit the new size.
Flow Layout is the default layout type if no other layout is specified. If you wish to use this layout type, you may ommit the layout attribute.
In this layout, each control is docked to an edge of the panel - top, bottom, left or right edges. When the panel is resized, these controls will re-adjust their position automatically (e.g. controls which are docked to the bottom edge will always stay on the very bottom of the panel).
To dock a control to an edge of the panel, specify a dock attribute for it and give it one of the values: "top", "bottom", "left", or "right". For example, in the following canvas, the textoutput control is dock to the top edge of the panel. The textoutput will always stick to the top of the panel and will change its width to fill up the top part of the panel:
Here, every control has a specific position that never changes. To change a control's position and size, use the rect attribute, specifying x position, y position, width, and height (all in pixels), delimited by commas. See the following sample:
The textoutput will be attached to its fixed position: right next to the left edge of the panel (x = 0), 20 pixels down from the top (y = 20). It will always be 200 pixels wide and 15 pixels high, even if the panel is too small to contain it and even if the text inside the textoutput will be to big and partially hidden.
In addition, if you use the fixed layout you may constrain the canvas to a certain size by using the canvas's size attribute. The following snippet will give the canvas a width of 100 pixels and a height of 200 pixels.
This layout divides the panel into a virtual grid, and each control is placed inside a cell of the grid. This allows neat placing of the controls and aligning them to each other's position.