LogoLogo
6.1.1
6.1.1
  • TotalCross Overview
  • TotalCross Javadoc
  • TotalCross Changelog
  • Roadmap
  • Documentation
    • Getting Started
      • First embedded project with TotalCross
    • Components
      • Accordion
      • Aligned Labels
      • Button
      • Check
      • ComboBox
      • Dynamic Scroll
      • Edit
      • Floating Button
      • Gpiod
      • Grid
      • GridContainer
      • Image
      • ImageControl
      • ImageList
      • Label
      • Material Icons
      • Material Window
      • MessageBox
      • Multi Edit
      • Progress Bar
      • Progress Box
      • Radio
      • Radio Group
      • Scroll Container
      • Side Menu
      • Slider
      • Sliding Window
      • Spin List
      • Spinner
      • Switch
      • Tabbed Container
      • Velocimeter
    • APIs
      • API Overview
      • API Rest
      • Asynchronous Task
      • Camera
      • Control
        • Main Window
        • Window
        • Container
      • GPS
      • HTTPS and SSL
      • JSON
      • Maps
        • Maps - Deprecated
        • Static Map
      • Material Design Standards
      • Ninepath
      • Notifications
      • PrinterManager
      • Push Notification Firebase
      • Scanner
      • SOAP
      • Socket
      • SocketServer
      • SQLite Encryption
      • QR Code Generator
      • totalcross.sys
      • Youtube API
    • Creating an Issue
    • Contributing
      • Branch workflow
      • Writing documentation
    • Guides
      • App Architecture
        • Suggested Architecture
        • Why do Design Patterns help with the application's organization?
          • MVC Architecture Pattern
          • Template Pattern
          • Data Persistence: DAO Pattern.
        • Separation of concepts: What is the best way to create UI interfaces?
        • Positioning
          • Manual Positioning
        • Relative Positioning
        • Best practices to improve project maintenance
      • Device Simulator
      • Package your app from scratch
        • TotalCross SDK
        • Environment Variables in IDE
          • Eclipse
          • IntelliJ
        • Deploy your app with a dependecy TC
        • Deploy iOS
          • Using Development certificate to test your apps
      • Understanding TotalCross for Linux ARM
      • Running C++ applications with TotalCross
      • Web Services
    • Miscelaneous
      • Java JDK 8
      • Maven
      • Installing Visual Studio Code
    • FAQ
      • IMEI in Android 10
Powered by GitBook
On this page
  • Hbox
  • Vbox
  • Attributes
  • Methods

Was this helpful?

  1. Documentation
  2. Guides
  3. App Architecture

Relative Positioning

PreviousManual PositioningNextBest practices to improve project maintenance

Last updated 5 years ago

Was this helpful?

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.