Relative Positioning

At totalcross, we have two layouts ready to help you set up your application: HBox and VBox. These layouts can be described as 2 boxes where you "stack" your components, be it with a certain space between them or just simply really stacked. Both these layouts are extensions of the LinearBox class. To use them is pretty simple, all you ned to do is instantiate one of them, set its mode and add your components inside.
Hbox
This layout will group your components horizontally, 
How to use HBox Layout
public void initUI() {
    HBox hBox = new HBox(HBox.LAYOUT_FILL, HBox.ALIGNMENT_STRETCH);
​
    for (int i = 0; i < 5; i++) {
        hBox.add(new Button(i+""));
    }
    add(hBox, LEFT, CENTER, FILL, PREFERRED);
}
Vbox
This layout will group your controllers vertically
How to use VBox layout
public void initUI() {
    VBox vBox = new VBox(VBox.LAYOUT_FILL, VBox.ALIGNMENT_STRETCH);
    
    for (int i = 0; i < 5; i++) {
        vBox.add(new Button(i + ""));
    }
    add(vBox, CENTER, TOP, DP + 50, FILL);
}

Attributes
Type
Name
​
Description
int
LinearBox.LAYOUT_STACK_CENTER
Organizes the elements around the center.
int
LinearBox.LAYOUT_DISTRIBUTE
Distributes the elements along the width or height of the box.
int
LinearBox.LAYOUT_FILL
Distribute and scale each element to fill the entire width or height of the box.
int
LinearBox.ALIGNMENT_LEFT
Aligns each child along the left/top border.
int
LinearBox.ALIGNMENT_RIGHT
Aligns each child along the right/bottom border.
int
LinearBox.ALIGNMENT_CENTER
Centers each child object.
int
LinearBox.ALIGNMENT_STRETCH
Stretches each child object.
int
Hbox.LAYOUT_STACK_LEFT
Organizes each element from left to right.
int
Hbox.LAYOUT_STACK_RIGHT
Organizes each element from right to left.
int
Vbox.LAYOUT_STACK_TOP
Organizes each element from top to bottom.
int
Vbox.LAYOUT_STACK_BOTTOM
Organizes each element from bottom to top.
Methods
Type
Name
Description
void
setInsets(int left, int right, int top, int bottom)
Sets the internal paddings of this component.
void
setLayout(int mode, int alignment)
Sets the layout mode and alignment of this component.
void
suspendLayout()
Suspends all layout operations from 'add' calls until a 'resumeLayout' call.
void
resumeLayout()
Performs all queued layout operations and resumes the default layout behaviour of the 'add' method.
void
setSpacing(int spacing)
Sets the spacing between components.
​

Manual Positioning

Best practices to improve project maintenance

Last updated 2 years ago

Type	Name	Description
int	LinearBox.LAYOUT_STACK_CENTER	Organizes the elements around the center.
int	LinearBox.LAYOUT_DISTRIBUTE	Distributes the elements along the width or height of the box.
int	LinearBox.LAYOUT_FILL	Distribute and scale each element to fill the entire width or height of the box.
int	LinearBox.ALIGNMENT_LEFT	Aligns each child along the left/top border.
int	LinearBox.ALIGNMENT_RIGHT	Aligns each child along the right/bottom border.
int	LinearBox.ALIGNMENT_CENTER	Centers each child object.
int	LinearBox.ALIGNMENT_STRETCH	Stretches each child object.
int	Hbox.LAYOUT_STACK_LEFT	Organizes each element from left to right.
int	Hbox.LAYOUT_STACK_RIGHT	Organizes each element from right to left.
int	Vbox.LAYOUT_STACK_TOP	Organizes each element from top to bottom.
int	Vbox.LAYOUT_STACK_BOTTOM	Organizes each element from bottom to top.