How can I do dynamic layouts in Javafx? - javafx

Question

First of all, excuse me if my English is bad, I don't speak English.
So, I'm working with javafx, when I say "dynamic layouts", I refer to the fact that I have my .fxml already programmed with a default structure which it is so.
menu.fxml view
and its code is this
<?xml version="1.0" encoding="UTF-8"?>
<?import com.jfoenix.controls.JFXButton?>
<?import java.lang.String?>
<?import java.net.URL?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<AnchorPane prefWidth="356.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
<children>
<VBox prefHeight="243.0" prefWidth="356.0" spacing="2.0" stylesheets="#../styles/Containers.css" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<AnchorPane prefHeight="31.0" prefWidth="356.0">
<children>
<HBox prefHeight="35.0" prefWidth="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<padding>
<Insets bottom="8.0" top="8.0" />
</padding>
<children>
<ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true">
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
<image>
<Image url="#../icons/icons8_Calendar_100px.png" />
</image>
</ImageView>
<Label fx:id="lblFecha" prefHeight="31.0" prefWidth="306.0" stylesheets="#../styles/Strings.css" text="---- ----, -----">
<HBox.margin>
<Insets left="15.0" />
</HBox.margin>
<styleClass>
<String fx:value="h4" />
<String fx:value="principal" />
</styleClass>
</Label>
</children>
</HBox>
</children>
</AnchorPane>
<AnchorPane>
<children>
<HBox prefHeight="35.0" prefWidth="200.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<children>
<ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="#../icons/icons8_Clock_100px.png" />
</image>
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
</ImageView>
<Label fx:id="lblHora" prefHeight="31.0" prefWidth="306.0" stylesheets="#../styles/Strings.css" text="-- : -- : -- --">
<HBox.margin>
<Insets left="15.0" />
</HBox.margin>
<styleClass>
<String fx:value="h4" />
<String fx:value="principal" />
</styleClass>
</Label>
</children>
<padding>
<Insets bottom="8.0" top="8.0" />
</padding>
</HBox>
</children>
</AnchorPane>
<AnchorPane fx:id="opcParlking">
<children>
<JFXButton alignment="BASELINE_LEFT" graphicTextGap="25.0" onAction="#openParking" prefHeight="35.0" prefWidth="366.0" styleClass="h4" text="Parking" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<graphic>
<ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true" translateX="10.0">
<image>
<Image url="#../icons/icons8_Tollbooth_100px.png" />
</image>
</ImageView>
</graphic>
<font>
<Font name="System Bold" size="12.0" />
</font>
<padding>
<Insets bottom="8.0" top="8.0" />
</padding>
<stylesheets>
<URL value="#../styles/Buttons.css" />
<URL value="#../styles/Strings.css" />
</stylesheets>
</JFXButton>
</children>
</AnchorPane>
<AnchorPane>
<children>
<JFXButton alignment="BASELINE_LEFT" graphicTextGap="25.0" prefHeight="35.0" prefWidth="363.0" styleClass="h4" text="Tipo de vehiculos" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<graphic>
<ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true" translateX="10.0">
<image>
<Image url="#../icons/icons8_Traffic_Jam_96px.png" />
</image>
</ImageView>
</graphic>
<font>
<Font name="System Bold" size="12.0" />
</font>
<padding>
<Insets bottom="8.0" top="8.0" />
</padding>
<stylesheets>
<URL value="#../styles/Buttons.css" />
<URL value="#../styles/Strings.css" />
</stylesheets>
</JFXButton>
</children>
</AnchorPane>
<AnchorPane>
<children>
<JFXButton alignment="BASELINE_LEFT" graphicTextGap="25.0" prefHeight="35.0" prefWidth="363.0" styleClass="h4" text="Usuarios" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<graphic>
<ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true" translateX="10.0">
<image>
<Image url="#../icons/icons8_User_Groups_100px.png" />
</image>
</ImageView>
</graphic>
<font>
<Font name="System Bold" size="12.0" />
</font>
<padding>
<Insets bottom="8.0" top="8.0" />
</padding>
<stylesheets>
<URL value="#../styles/Buttons.css" />
<URL value="#../styles/Strings.css" />
</stylesheets>
</JFXButton>
</children>
</AnchorPane>
<AnchorPane>
<children>
<JFXButton alignment="BASELINE_LEFT" graphicTextGap="25.0" prefHeight="35.0" prefWidth="361.0" styleClass="h4" text="Clientes" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<graphic>
<ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true" translateX="10.0">
<image>
<Image url="#../icons/icons8_Helping_Hand_104px.png" />
</image>
</ImageView>
</graphic>
<font>
<Font name="System Bold" size="12.0" />
</font>
<padding>
<Insets bottom="8.0" top="8.0" />
</padding>
<stylesheets>
<URL value="#../styles/Buttons.css" />
<URL value="#../styles/Strings.css" />
</stylesheets>
</JFXButton>
</children>
</AnchorPane>
<AnchorPane>
<children>
<JFXButton alignment="BASELINE_LEFT" graphicTextGap="25.0" prefHeight="35.0" prefWidth="361.0" styleClass="h4" text="Reportes" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<graphic>
<ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true" translateX="10.0">
<image>
<Image url="#../icons/icons8_Combo_Chart_104px.png" />
</image>
</ImageView>
</graphic>
<font>
<Font name="System Bold" size="12.0" />
</font>
<padding>
<Insets bottom="8.0" top="8.0" />
</padding>
<stylesheets>
<URL value="#../styles/Buttons.css" />
<URL value="#../styles/Strings.css" />
</stylesheets>
</JFXButton>
</children>
</AnchorPane>
<AnchorPane>
<children>
<JFXButton alignment="BASELINE_LEFT" graphicTextGap="25.0" prefHeight="29.0" prefWidth="356.0" styleClass="h4" text="Configuraciones" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0">
<graphic>
<ImageView fitHeight="25.0" fitWidth="25.0" pickOnBounds="true" preserveRatio="true" translateX="10.0">
<image>
<Image url="#../icons/icons8_Automation_100px.png" />
</image>
</ImageView>
</graphic>
<font>
<Font name="System Bold" size="12.0" />
</font>
<padding>
<Insets bottom="8.0" top="8.0" />
</padding>
<stylesheets>
<URL value="#../styles/Buttons.css" />
<URL value="#../styles/Strings.css" />
</stylesheets>
</JFXButton>
</children>
</AnchorPane>
</children>
</VBox>
</children>
</AnchorPane>
I want to be able in my execution time to hide any buttons and that the buttons adjust automatically filling the blank space that the hidden button leaves.
I've tried using in the MenuController.java instructions like opcParlking.setVisible(false) but it leave me a blank space. This the picture imagen 2.
How can I fix this?

Answer 1

You will want to assign an fx:id to your VBox as well and then inject it into your controller:
#FXML
private VBox vBox;
Then, in your controller, instead of setting a node visible or not, just remove it from the VBox:
vBox.getChildren().remove(opcParlking);
This will remove the node entirely, instead of just making it invisible. Therefore, you will not have the empty space.