3 responsive box designs using javafx - javafx

Question

How do I create tree responsive box designs for javafx using scenebuilder. It should have 3 boxes that adjust to the size of the screen. Something similar to the boxes below. Any help>

Answer 1

I do not use scenebuilder, I prefer create the FXML file by my own especially because it is not responsive.
The purpose when defining the UI of your application is to choose the good layouts. Some are more responsive than other depending on what you want to achieve.
I saw your first first post and I do not use JFoenix, then here is a very light/simple example with "regular" component that could help you to make your application responsive.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.control.Button?>
<?import javafx.geometry.Insets?>
<fx:root xmlns:fx="http://javafx.com/fxml/1" type="GridPane" >
<children>
<VBox GridPane.rowIndex="0" GridPane.columnIndex="0" style="-fx-background-color:grey; -fx-opacity:0.7;"/>
<VBox GridPane.rowIndex="0" GridPane.columnIndex="2" style="-fx-background-color:grey; -fx-opacity:0.7;"/>
<VBox GridPane.rowIndex="0" GridPane.columnIndex="4" style="-fx-background-color:grey; -fx-opacity:0.7;"/>
<HBox GridPane.rowIndex="1" GridPane.columnIndex="2" alignment="CENTER" spacing="10.0">
<Button text="ADD" style="-fx-background-color:DODGERBLUE;-fx-border-radius:10;-fx-background-radius:10"/>
<Button text="UPDATE" style="-fx-background-color:DODGERBLUE;-fx-border-radius:10;-fx-background-radius:10"/>
<Button text="CLEAN" style="-fx-background-color:DODGERBLUE;-fx-border-radius:10;-fx-background-radius:10"/>
</HBox>
</children>
<columnConstraints>
<ColumnConstraints percentWidth="30.0" />
<!-- Space -->
<ColumnConstraints percentWidth="5.0" />
<ColumnConstraints percentWidth="30.0" />
<!-- Space -->
<ColumnConstraints percentWidth="5.0" />
<ColumnConstraints percentWidth="30.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints percentHeight="80.0" />
<RowConstraints percentHeight="20.0" />
</rowConstraints>
<padding>
<Insets top="10.0" left="10.0" bottom="10.0" right="10.0"/>
</padding>
</fx:root>
This lead to something like that :