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.