Is there a concept of growth priority in javafx? - css

Question

How does JavaFX renderer decides which component grows when pref sizes sum of 2 components is lower than the overall scene size ?
Is there any way to decide which component should grow first and how more than the other component as flexbox does in regular css ?
here is a css code that describes what i want to do in my javafx app :
.my-container {
display: flex;
width: 1400px;
}
.my-component-1 {
/*pref width is 800*/
flex: 2;
}
.my-component-2 {
/*pref width is 300*/
flex: 1;
}
for example, in the above case, component 1 will grow up to 1000px and component 2 up to 400px.
what is the javafx equivalent to the flex property ?

Answer 1

Here is a small example how a GridPane layout with "Percent Width" works:
Preview:
Controller Class:
package sample;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
import java.net.URL;
import java.util.ResourceBundle;
public class WidthController implements Initializable {
#FXML
private Pane
redPane,
bluePane;
#FXML
private Label
stageWidthLabel,
redPaneWidthLabel,
bluePaneWidthLabel;
private DoubleProperty
stageWidth = new SimpleDoubleProperty(),
redPaneWidth = new SimpleDoubleProperty(),
bluePaneWidth = new SimpleDoubleProperty();
#Override
public void initialize(URL location, ResourceBundle resources) {
stageWidthLabel.textProperty().bind(stageWidth.asString());
redPaneWidthLabel.textProperty().bind(redPaneWidth.asString());
bluePaneWidthLabel.textProperty().bind(bluePaneWidth.asString());
redPaneWidth.bind(redPane.widthProperty());
bluePaneWidth.bind(bluePane.widthProperty());
}
public void setStage(Stage stage) {
stageWidth.bind(stage.widthProperty());
}
}
FXML File:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.RowConstraints?>
<GridPane prefHeight="400.0" prefWidth="1100.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.WidthController">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" percentWidth="72.73" />
<ColumnConstraints hgrow="SOMETIMES" percentWidth="27.27" />
</columnConstraints>
<rowConstraints>
<RowConstraints vgrow="SOMETIMES" />
<RowConstraints vgrow="NEVER" />
</rowConstraints>
<children>
<Pane fx:id="bluePane" style="-fx-background-color: blue;" />
<Pane fx:id="redPane" style="-fx-background-color: red;" GridPane.columnIndex="1" />
<GridPane hgap="3.0" vgap="3.0" GridPane.columnSpan="2" GridPane.rowIndex="1">
<columnConstraints>
<ColumnConstraints fillWidth="false" halignment="RIGHT" hgrow="NEVER" />
<ColumnConstraints fillWidth="false" halignment="LEFT" hgrow="NEVER" minWidth="10.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints fillHeight="false" valignment="CENTER" vgrow="NEVER" />
<RowConstraints fillHeight="false" valignment="CENTER" vgrow="NEVER" />
<RowConstraints fillHeight="false" valignment="CENTER" vgrow="NEVER" />
<RowConstraints fillHeight="false" valignment="CENTER" vgrow="NEVER" />
</rowConstraints>
<children>
<Label text="Width information" underline="true" />
<Label text="Stage:" GridPane.rowIndex="1" />
<Label text="Blue Pane:" GridPane.rowIndex="2" />
<Label text="Red Pane:" GridPane.rowIndex="3" />
<Label fx:id="stageWidthLabel" GridPane.columnIndex="1" GridPane.rowIndex="1" />
<Label fx:id="bluePaneWidthLabel" GridPane.columnIndex="1" GridPane.rowIndex="2" />
<Label fx:id="redPaneWidthLabel" GridPane.columnIndex="1" GridPane.rowIndex="3" />
</children>
<padding>
<Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
</padding>
</GridPane>
</children>
</GridPane>
Application Class:
package sample;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
import java.io.IOException;
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
FXMLLoader loader = new FXMLLoader(getClass().getResource("width.fxml"));
Parent root = null;
try {
root = loader.load();
} catch (IOException ex) {
ex.printStackTrace();
}
if (root == null) return;
WidthController controller = loader.getController();
primaryStage.setScene(new Scene(root));
primaryStage.show();
controller.setStage(primaryStage);
}
public static void main(String[] args) {
launch(args);
}
}