JavaFX -- controller don't see the button or event - javafx

Why, when I click to the "New" button, text are not change?
A Main class:
public class MainApp extends Application {
#Override
public void start(Stage primaryStage) throws IOException {
BorderPane rootLayout = FXMLLoader.load(getClass().getResource("view/RootLayout.fxml"));
AnchorPane code = FXMLLoader.load(getClass().getResource("view/DeskLayout.fxml"));
rootLayout.setCenter(code);
GridPane tool = FXMLLoader.load(getClass().getResource("view/ToolLayout.fxml"));
rootLayout.setBottom(tool);
primaryStage.setTitle("MyLittleIDE");
primaryStage.setScene(new Scene(rootLayout));
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
ToolLayoutController:
public class ToolLayoutController {
#FXML
private Button newButton;
#FXML
protected void handleNewProject(ActionEvent event) {
newButton.setText("123");
}
ToolLaout.fxml
<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="30.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ru.mrchebik.view.ToolLayoutController">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<Button fx:id="newButton" mnemonicParsing="false" onAction="#handleNewProject" prefHeight="30.0" prefWidth="150.0" text="New" GridPane.columnIndex="0" />
<Button fx:id="compile" mnemonicParsing="false" prefHeight="51.0" prefWidth="150.0" text="Compile" GridPane.columnIndex="1" />
<Button fx:id="run" mnemonicParsing="false" prefHeight="54.0" prefWidth="150.0" text="Run" GridPane.columnIndex="2" />
<Button fx:id="save" mnemonicParsing="false" prefHeight="59.0" prefWidth="150.0" text="Save" GridPane.columnIndex="3" />
</children>
</GridPane>
RootLaout.fxml:
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1">
<top>
<MenuBar BorderPane.alignment="CENTER">
<menus>
<Menu mnemonicParsing="false" text="File">
<items>
<MenuItem mnemonicParsing="false" text="Close" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Edit">
<items>
<MenuItem mnemonicParsing="false" text="Delete" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Help">
<items>
<MenuItem mnemonicParsing="false" text="About" />
</items>
</Menu>
</menus>
</MenuBar>
</top>
</BorderPane>
DeskLayout.fxml
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx="http://javafx.com/fxml/1">
<children>
<SplitPane dividerPositions="0.8015075376884422" layoutX="196.0" layoutY="87.0" orientation="VERTICAL" prefHeight="400.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<TextArea fx:id="code" layoutX="39.0" layoutY="-27.0" prefHeight="315.0" prefWidth="598.0" promptText="Code" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="160.0">
<children>
<TextArea fx:id="inOutPut" layoutX="-21.0" layoutY="-73.0" prefHeight="75.0" prefWidth="598.0" promptText="Input/Output" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
</items>
</SplitPane>
</children>
</AnchorPane>
I also try to make a sample application with javafx, and add toollayout.fxml only, controller and it works. But I can't do this on this case.

Related

Problems with Gridpane fxml layout

I have a fxml dialog in SceneBuilder, which contains a Gridpane on the right side of a Splitpane contained in a BorderPane. I have two issues with this dialog that relate to each other.
Problem #1 is the width of the last column doesn't behave as
expected, given I set the max width to "USE_COMPUTED_SIZE", Hgrow = "Never" and Fill Width = false.
Problem #2, is that the preview in SceneBuilder differs
from the layout when I run the application.
The layout of the overall dialog is supposed to look like this (I highlighted where the different columns are located):
Regarding problem 1: In order to achieve this layout of the GridPane I have to constraint the max width of the last column to a value of ~60, despite that all of its Nodes, in the different rows, are limited in width. I would expect that this column stays narrow and that column 2 would take all the available space. But if I don't use this explicit max width value, the remaining space is not given to the Combobox but to the last column, which looks like this:
Regarding problem #2: In SceneBuilder the dialog looks like the images above. And if I resize the Splitpane the layout works such that I can continuesly see the buttons in the bottom and the exercise break and total duration information in the top right as long as possible. The Combobox and the table resize accordingly.Nice. However, if I run the application the right side of the Gridpane is cut off and I need to move the Splitpane to the left in order to see the missing nodes:
Here, the fxml file:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.Slider?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.media.MediaView?>
<BorderPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minWidth="1000.0" stylesheets="#application.css" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ctrl.MainCtrl">
<top>
<MenuBar BorderPane.alignment="CENTER">
<menus>
<Menu mnemonicParsing="false" text="File">
<items>
<MenuItem mnemonicParsing="false" onAction="#exit" text="Exit" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Sessions">
<items>
<MenuItem mnemonicParsing="false" onAction="#openSessionEditor" text="Open..." />
</items>
</Menu>
</menus>
</MenuBar>
</top>
<center>
<SplitPane fx:id="splitPane" dividerPositions="0.5" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" BorderPane.alignment="CENTER">
<items>
<StackPane fx:id="mediaPane" prefHeight="150.0" prefWidth="200.0">
<children>
<MediaView fx:id="mediaView" fitHeight="200.0" fitWidth="200.0" />
<ImageView fx:id="imageView" pickOnBounds="true" preserveRatio="true" StackPane.alignment="CENTER_RIGHT">
<StackPane.margin>
<Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
</StackPane.margin></ImageView>
</children>
</StackPane>
<GridPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minWidth="0.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="0.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="0.0" />
<ColumnConstraints hgrow="ALWAYS" maxWidth="1.7976931348623157E308" minWidth="0.0" />
<ColumnConstraints fillWidth="false" hgrow="NEVER" minWidth="0.0" />
<ColumnConstraints fillWidth="false" hgrow="NEVER" minWidth="0.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints fillHeight="false" vgrow="NEVER" />
<RowConstraints fillHeight="false" maxHeight="-Infinity" minHeight="10.0" vgrow="NEVER" />
<RowConstraints maxHeight="1.7976931348623157E308" minHeight="-Infinity" vgrow="ALWAYS" />
<RowConstraints vgrow="NEVER" />
<RowConstraints minHeight="-Infinity" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<ComboBox fx:id="sessionComboBox" maxWidth="1.7976931348623157E308" minWidth="0.0" onAction="#sessionSelected" promptText="Select session..." GridPane.columnSpan="3" GridPane.hgrow="ALWAYS">
<GridPane.margin>
<Insets bottom="12.0" left="12.0" right="24.0" top="12.0" />
</GridPane.margin>
</ComboBox>
<TableView fx:id="exerciseTable" editable="true" maxHeight="1.7976931348623157E308" minWidth="0.0" tableMenuButtonVisible="true" GridPane.columnSpan="2147483647" GridPane.hgrow="ALWAYS" GridPane.rowIndex="2" GridPane.vgrow="ALWAYS">
<columns>
<TableColumn fx:id="selectedColumn" maxWidth="-1.0" minWidth="30.0" prefWidth="30.0" text="Sel" />
<TableColumn fx:id="excerciseColumn" maxWidth="300.0" minWidth="80.0" prefWidth="160.0" sortable="false" text="Exercise" />
<TableColumn fx:id="setsColumn" maxWidth="-Infinity" minWidth="40.0" prefWidth="40.0" sortable="false" text="Sets" />
<TableColumn fx:id="repsColumn" maxWidth="-Infinity" minWidth="40.0" prefWidth="40.0" sortable="false" text="Reps" />
<TableColumn fx:id="repBreakColumn" maxWidth="-Infinity" minWidth="40.0" prefWidth="40.0" sortable="false" text="Break" />
<TableColumn fx:id="introColumn" maxWidth="-Infinity" minWidth="40.0" prefWidth="40.0" sortable="false" text="Intro" />
<TableColumn fx:id="startSpeedColumn" maxWidth="-Infinity" minWidth="80.0" sortable="false" text="Start Speed" />
<TableColumn fx:id="endSpeedColumn" maxWidth="-Infinity" minWidth="80.0" sortable="false" text="End Speed" />
<TableColumn fx:id="metronomColumn" maxWidth="-Infinity" minWidth="80.0" sortable="false" text="Metronom" />
<TableColumn fx:id="durationColumn" prefWidth="75.0" text="Duration" />
</columns>
<GridPane.margin>
<Insets bottom="6.0" left="12.0" right="24.0" />
</GridPane.margin>
</TableView>
<TextField fx:id="exerciseBreakTextField" maxWidth="40.0" minWidth="0.0" GridPane.columnIndex="4" GridPane.hgrow="NEVER">
<GridPane.margin>
<Insets bottom="12.0" right="30.0" top="12.0" />
</GridPane.margin>
</TextField>
<Label minWidth="0.0" text="Exercise break (sec)" GridPane.columnIndex="3" GridPane.hgrow="NEVER">
<GridPane.margin>
<Insets right="6.0" />
</GridPane.margin>
</Label>
<Label minWidth="0.0" text="Total duration (min)" GridPane.columnIndex="3" GridPane.rowIndex="1">
<GridPane.margin>
<Insets />
</GridPane.margin>
</Label>
<Label fx:id="durationLabel" maxWidth="40.0" text="0" GridPane.columnIndex="4" GridPane.hgrow="NEVER" GridPane.rowIndex="1">
<GridPane.margin>
<Insets left="6.0" right="30.0" />
</GridPane.margin>
</Label>
<Button fx:id="tableUpButton" maxHeight="-Infinity" mnemonicParsing="false" onAction="#exerciseUp" prefHeight="20.0" GridPane.hgrow="NEVER" GridPane.rowIndex="1" GridPane.vgrow="NEVER">
<GridPane.margin>
<Insets bottom="6.0" left="12.0" />
</GridPane.margin>
</Button>
<Button fx:id="tableDownButton" maxHeight="-Infinity" mnemonicParsing="false" onAction="#exerciseDown" prefHeight="20.0" GridPane.columnIndex="1" GridPane.hgrow="NEVER" GridPane.rowIndex="1">
<GridPane.margin>
<Insets bottom="6.0" left="6.0" />
</GridPane.margin>
</Button>
<HBox nodeOrientation="RIGHT_TO_LEFT" spacing="6.0" GridPane.columnSpan="2147483647" GridPane.hgrow="NEVER" GridPane.rowIndex="3">
<children>
<Button mnemonicParsing="false" onAction="#saveSession" text="Save">
<HBox.margin>
<Insets right="24.0" />
</HBox.margin>
</Button>
<Button minWidth="0.0" mnemonicParsing="false" onAction="#editExercise" prefWidth="50.0" text="Edit" />
<Button minWidth="0.0" mnemonicParsing="false" onAction="#deleteExercise" text="Delete" />
<Button minWidth="0.0" mnemonicParsing="false" onAction="#addNewExercise" prefWidth="50.0" text="Add" />
</children>
<GridPane.margin>
<Insets bottom="12.0" left="12.0" right="24.0" top="6.0" />
</GridPane.margin>
</HBox>
</children>
</GridPane>
</items>
</SplitPane>
</center>
<bottom>
<GridPane BorderPane.alignment="CENTER">
<columnConstraints>
<ColumnConstraints hgrow="NEVER" minWidth="10.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="NEVER" minWidth="10.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="NEVER" minWidth="10.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="1.7976931348623157E308" minHeight="10.0" vgrow="ALWAYS" />
<RowConstraints minHeight="10.0" vgrow="ALWAYS" />
</rowConstraints>
<children>
<Label text="Set:" GridPane.rowIndex="1">
<GridPane.margin>
<Insets left="30.0" top="12.0" />
</GridPane.margin>
</Label>
<Label fx:id="setLabel" text="0" GridPane.columnIndex="1" GridPane.rowIndex="1">
<GridPane.margin>
<Insets left="12.0" top="12.0" />
</GridPane.margin>
</Label>
<Label text="Repetition:" GridPane.columnIndex="2" GridPane.rowIndex="1">
<GridPane.margin>
<Insets top="12.0" />
</GridPane.margin></Label>
<Label fx:id="repLabel" text="0" GridPane.columnIndex="3" GridPane.columnSpan="2" GridPane.rowIndex="1">
<GridPane.margin>
<Insets left="12.0" top="12.0" />
</GridPane.margin>
</Label>
<Label fx:id="exerciseLabel" styleClass="exercise-header" text="Exercise" GridPane.columnSpan="5">
<GridPane.margin>
<Insets left="24.0" top="12.0" />
</GridPane.margin>
</Label>
<Button fx:id="startStopContinueButton" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" onAction="#startStopContinuePressed" styleClass="start-button" text="Start" GridPane.columnSpan="5" GridPane.hgrow="ALWAYS" GridPane.rowIndex="2" GridPane.rowSpan="2" GridPane.vgrow="ALWAYS">
<GridPane.margin>
<Insets bottom="24.0" left="24.0" right="12.0" top="12.0" />
</GridPane.margin>
</Button>
<Slider fx:id="speedSlider" blockIncrement="0.5" majorTickUnit="1.0" max="8.0" showTickLabels="true" showTickMarks="true" GridPane.columnIndex="6" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="2">
<GridPane.margin>
<Insets right="24.0" top="12.0" />
</GridPane.margin>
</Slider>
<Slider fx:id="volumeSlider" majorTickUnit="0.2" max="1.0" showTickMarks="true" value="1.0" GridPane.columnIndex="6" GridPane.hgrow="SOMETIMES" GridPane.rowIndex="3">
<GridPane.margin>
<Insets bottom="24.0" right="24.0" top="12.0" />
</GridPane.margin>
</Slider>
<Label text="Speed" GridPane.columnIndex="5" GridPane.rowIndex="2">
<GridPane.margin>
<Insets left="12.0" right="6.0" top="12.0" />
</GridPane.margin>
</Label>
<Label text="Volume" GridPane.columnIndex="5" GridPane.rowIndex="3">
<GridPane.margin>
<Insets bottom="24.0" left="12.0" right="6.0" top="12.0" />
</GridPane.margin>
</Label>
</children>
</GridPane>
</bottom>
</BorderPane>
There is no magic in loading the fxml:
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
try {
URL url = getClass().getClassLoader().getResource("ui/MainScene.fxml");
Parent root = FXMLLoader.load(url);
Scene scene = new Scene(root);
primaryStage.setTitle("Sifu says...");
// primaryStage.setFullScreen(true);
// primaryStage.setFullScreenExitKeyCombination(KeyCombination.NO_MATCH);
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
EDIT:
If I don't set the last column width manually, then the application version does not cut the right side but looks like the 2nd picture.
END_EDIT
What am I doing wrong? Thank you in advance.
Unfortunately, could not find a solution, just a minimal reproducible example for debugging/analysing: I think the behavior might be a bug.
The example below is part of the upper right gridpane in the question. The buttons in its second line are wired to increment/decrement the preferred width of the first column and log the table's pref width (along with its current width).
When run as-is, the initial layout is as expected, that is the last grid column the same as the restricted max of the upper left textField.
incr/dec the pref column width a bit and see that the the table's pref width is at its lower boundary (400 * golden-ratio), so doesn't change
increment further to see the misbehavior (the last grid column increasing): it starts as soon as the table's pref is increasing.
output (the numbers might depend on screen size/resolution):
pref: 247.2135948 actual: 315.3333333333333 // pref at lower boundary
pref: 247.2135948 actual: 315.3333333333333
pref: 247.66666666666669 actual: 315.3333333333333 // incr pref -> last grid column increasing
pref: 248.66666666666669 actual: 316.0
Example code
public class GridPaneTableExtract extends Application {
private Parent createContent() {
GridPane grid = new GridPane();
ObservableList<ColumnConstraints> columnConstraints = grid.getColumnConstraints();
for (int i = 0; i < 5; i++) {
if (i == 2) {
columnConstraints.add(createGrowingColumn());
} else {
columnConstraints.add(createFixedColumn());
}
}
ComboBox<String> combo = new ComboBox<>();
combo.setPromptText("some prompt");
combo.setMaxWidth(Double.MAX_VALUE);
GridPane.setHgrow(combo, Priority.ALWAYS);
GridPane.setFillWidth(combo, true);
Label fieldLabel = new Label("break in seconds: ");
TextField field = new TextField();
field.setPrefColumnCount(2);
field.setMaxWidth(Region.USE_PREF_SIZE);
// first row
grid.add(combo, 0, 0, 3, 1);
grid.add(fieldLabel, 3, 0);
grid.add(field, 4, 0);
Button up = new Button("+");
Button down = new Button("-");
Label durationLabel = new Label("Total Duration");
Label duration = new Label("000");
// second row
grid.add(up, 0, 1);
grid.add(down, 1, 1);
grid.add(durationLabel, 3, 1);
grid.add(duration, 4, 1);
// third row
TableView table = createTable(3);
grid.add(table, 0, 2, 5, 1);
GridPane.setHgrow(table, Priority.ALWAYS);
GridPane.setFillWidth(table, true);
up.setOnAction(e -> {
updateColumnPref(table, 1);
});
down.setOnAction(e -> {
updateColumnPref(table, -1);
});
grid.setGridLinesVisible(true);
BorderPane content = new BorderPane(grid);
return content;
}
private void updateColumnPref(TableView table, double delta) {
TableColumn last = (TableColumn) table.getColumns().get(0);
last.setPrefWidth(last.getPrefWidth() + delta);
System.out.println(" pref: " + table.prefWidth(-1) + " actual: " + table.getWidth());
}
private ColumnConstraints createFixedColumn() {
ColumnConstraints constraint = new ColumnConstraints();
constraint.setHgrow(Priority.NEVER);
constraint.setFillWidth(false);
return constraint;
}
private ColumnConstraints createGrowingColumn() {
ColumnConstraints constraint = new ColumnConstraints();
constraint.setHgrow(Priority.ALWAYS);
constraint.setFillWidth(true);
return constraint;
}
private TableView createTable(int colCount) {
TableView table = new TableView();
for (int i = 0; i < colCount; i++) {
TableColumn column = new TableColumn("column " + i);
table.getColumns().add(column);
}
if (colCount == 4) {
((TableColumn) table.getColumns().get(1)).setPrefWidth(40);
}
return table;
}
#Override
public void start(Stage stage) throws Exception {
stage.setScene(new Scene(createContent()));
stage.setX(20);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
This is an opinionated answer.
I'd get rid of a lot of the hard coding of constraints and use the GridPane minimally, only where it makes sense to align things in a Grid. Otherwise, I would use other layout panes (e.g., VBox, HBox, ButtonBar) with appropriate padding, spacing and alignment values to get the layout required.
Don't use node orientation for layout purposes. The purpose of that setting is described in the documentation:
Node orientation describes the flow of visual data within a node. In the English speaking world, visual data normally flows from left-to-right. In an Arabic or Hebrew world, visual data flows from right-to-left. This is consistent with the reading order of text in both worlds. The default value is left-to-right.
But your app is in English, so you shouldn't change the default node orientation.
The sample below demonstrates the approach I advocate. It is not supposed to be a complete layout for your app, nor to be exactly the layout you want to create for the provided elements (you will need to make adjustments). Nor does it try to solve all issues you raise in your question. Hopefully, it will provide you with a start on how to fix some of your issues by applying the recommended approach.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ButtonBar?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<VBox spacing="10.0" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1">
<children>
<GridPane hgap="10.0" vgap="10.0">
<columnConstraints>
<ColumnConstraints hgrow="ALWAYS" />
<ColumnConstraints hgrow="SOMETIMES" />
<ColumnConstraints hgrow="SOMETIMES" />
</columnConstraints>
<rowConstraints>
<RowConstraints vgrow="SOMETIMES" />
<RowConstraints vgrow="SOMETIMES" />
</rowConstraints>
<children>
<ComboBox fx:id="sessionComboBox" maxWidth="1.7976931348623157E308" promptText="Select session..." />
<Label text="Exercise break (sec)" GridPane.columnIndex="1" />
<TextField fx:id="exerciseBreakTextField" prefColumnCount="2" GridPane.columnIndex="2" />
<HBox spacing="10.0" GridPane.rowIndex="1">
<children>
<Button fx:id="tableUpButton" maxHeight="-Infinity" mnemonicParsing="false" prefHeight="20.0" />
<Button fx:id="tableDownButton" maxHeight="-Infinity" mnemonicParsing="false" prefHeight="20.0" />
</children>
</HBox>
<Label text="Total duration (min)" GridPane.columnIndex="1" GridPane.rowIndex="1" />
<Label fx:id="durationLabel" text="0" GridPane.columnIndex="2" GridPane.rowIndex="1" />
</children>
</GridPane>
<TableView fx:id="exerciseTable" editable="true" prefWidth="690.0" tableMenuButtonVisible="true" VBox.vgrow="ALWAYS">
<columns>
<TableColumn fx:id="selectedColumn" maxWidth="-1.0" minWidth="30.0" prefWidth="30.0" text="Sel" />
<TableColumn fx:id="excerciseColumn" maxWidth="300.0" minWidth="80.0" prefWidth="160.0" sortable="false" text="Exercise" />
<TableColumn fx:id="setsColumn" maxWidth="-Infinity" minWidth="40.0" prefWidth="40.0" sortable="false" text="Sets" />
<TableColumn fx:id="repsColumn" maxWidth="-Infinity" minWidth="40.0" prefWidth="40.0" sortable="false" text="Reps" />
<TableColumn fx:id="repBreakColumn" maxWidth="-Infinity" minWidth="40.0" prefWidth="40.0" sortable="false" text="Break" />
<TableColumn fx:id="introColumn" maxWidth="-Infinity" minWidth="40.0" prefWidth="40.0" sortable="false" text="Intro" />
<TableColumn fx:id="startSpeedColumn" maxWidth="-Infinity" minWidth="80.0" sortable="false" text="Start Speed" />
<TableColumn fx:id="endSpeedColumn" maxWidth="-Infinity" minWidth="80.0" sortable="false" text="End Speed" />
<TableColumn fx:id="metronomColumn" maxWidth="-Infinity" minWidth="80.0" sortable="false" text="Metronom" />
<TableColumn fx:id="durationColumn" prefWidth="75.0" text="Duration" />
</columns>
</TableView>
<ButtonBar buttonOrder="+U_R">
<buttons>
<Button mnemonicParsing="false" text="Add" />
<Button mnemonicParsing="false" text="Edit" />
<Button mnemonicParsing="false" text="Delete" />
<Button mnemonicParsing="false" text="Save" ButtonBar.buttonData="RIGHT" />
</buttons>
</ButtonBar>
</children>
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
</VBox>

Changes in the fxml file are not visible

Basically when i update my .fxml file, i can't see the new stuff...it's like showing the old version of the .fxml...with the old stuff... and yes i save the file...
This is my Main.java
package Library.Assistant.Ui.Main;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class MainLoader extends Application {
public static void main(String arg[]) {
launch(arg);
}
#Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("Main.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
}
This is my Main.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXTextField?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.ListView?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<VBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" prefHeight="548.0" prefWidth="617.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="Library.Assistant.Ui.Main.MainController">
<children>
<MenuBar maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308">
<menus>
<Menu mnemonicParsing="false" text="File">
<items>
<MenuItem mnemonicParsing="false" text="Close" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Edit">
<items>
<MenuItem mnemonicParsing="false" text="Delete" />
</items>
</Menu>
<Menu mnemonicParsing="false" text="Help">
<items>
<MenuItem mnemonicParsing="false" text="About" />
</items>
</Menu>
</menus>
</MenuBar>
<GridPane fx:id="grid" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" VBox.vgrow="ALWAYS">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<TabPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" tabClosingPolicy="UNAVAILABLE" GridPane.rowSpan="2147483647">
<tabs>
<Tab text="Book Issue">
<content>
<VBox alignment="CENTER" prefHeight="200.0" prefWidth="100.0">
<children>
<HBox alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" VBox.vgrow="ALWAYS">
<children>
<TextField fx:id="enterBookID" promptText="Enter Book ID" />
<VBox alignment="CENTER" prefHeight="200.0" prefWidth="100.0" HBox.hgrow="ALWAYS">
<children>
<Label text="Book Name" />
<Label text="Author" />
</children>
</VBox>
</children>
</HBox>
<HBox alignment="CENTER" layoutX="10.0" layoutY="10.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" VBox.vgrow="ALWAYS">
<children>
<TextField promptText="Enter Member ID" />
<VBox alignment="CENTER" prefHeight="200.0" prefWidth="100.0" HBox.hgrow="ALWAYS">
<children>
<Label text="Member Name" />
<Label text="Contact" />
</children>
</VBox>
</children>
</HBox>
<HBox alignment="CENTER" layoutX="10.0" layoutY="404.0" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" VBox.vgrow="ALWAYS">
<children>
<JFXButton maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text="Issue" HBox.hgrow="ALWAYS" />
</children>
</HBox>
</children>
</VBox>
</content>
</Tab>
<Tab text="Renew / Submission">
<content>
<VBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308">
<children>
<BorderPane maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" VBox.vgrow="ALWAYS">
<top>
<JFXTextField alignment="CENTER" promptText="Enter Book ID" BorderPane.alignment="CENTER">
<BorderPane.margin>
<Insets bottom="20.0" left="10.0" right="10.0" top="10.0" />
</BorderPane.margin>
</JFXTextField>
</top>
<center>
<ListView maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" BorderPane.alignment="CENTER" />
</center>
<bottom>
<HBox maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" BorderPane.alignment="CENTER">
<children>
<JFXButton maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text="Renew" HBox.hgrow="ALWAYS" />
<JFXButton maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" text="Submission" HBox.hgrow="ALWAYS" />
</children>
<BorderPane.margin>
<Insets />
</BorderPane.margin>
</HBox>
</bottom>
</BorderPane>
</children>
</VBox>
</content>
</Tab>
</tabs>
</TabPane>
<Button contentDisplay="TOP" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Add Member" GridPane.columnIndex="1">
<graphic>
<ImageView fitHeight="50.0" fitWidth="50.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="#add_mem.png" />
</image>
</ImageView>
</graphic>
</Button>
<Button contentDisplay="TOP" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Add Book" GridPane.columnIndex="1" GridPane.rowIndex="1">
<graphic>
<ImageView fitHeight="50.0" fitWidth="50.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="#add_book.png" />
</image>
</ImageView>
</graphic>
</Button>
<Button contentDisplay="TOP" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="View Members" GridPane.columnIndex="1" GridPane.rowIndex="2">
<graphic>
<ImageView fitHeight="50.0" fitWidth="50.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="#list_mem.png" />
</image>
</ImageView>
</graphic>
</Button>
<Button contentDisplay="TOP" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="View Books" GridPane.columnIndex="1" GridPane.rowIndex="3">
<graphic>
<ImageView fitHeight="50.0" fitWidth="50.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="#list_book.png" />
</image>
</ImageView>
</graphic>
</Button>
<Button contentDisplay="TOP" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" mnemonicParsing="false" text="Settings" GridPane.columnIndex="1" GridPane.rowIndex="4">
<graphic>
<ImageView fitHeight="50.0" fitWidth="50.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="#settings.png" />
</image>
</ImageView>
</graphic>
</Button>
</children>
</GridPane>
</children>
</VBox>
I just can't understand why it's showing the old version of the file...yesterday everything was working fine.I was adding new stuff and it was showing them properly, but today it keeps showing the version from yesterday...no matter how many stuff i change..

JavaFx: about nodes and scenes [duplicate]

This question already has an answer here:
How to bind Pane with another Pane in JavaFX
(1 answer)
Closed 3 years ago.
I have a problem with my project I have a stackpane that calls an fxml but my fxml gets bugged:
my fxml main:
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="650.0" prefWidth="1000.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.ControllerHome">
<children>
<VBox layoutX="10.0" layoutY="10.0" maxWidth="-Infinity" prefWidth="150.0" style="-fx-background-color: #150;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<HBox alignment="CENTER" maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="80.0" prefWidth="150.0" style="-fx-background-color: #0fbcf9;">
<children>
<FontAwesomeIconView fill="WHITE" glyphName="HOME" size="30" />
<Text strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-family: Quicksand; -fx-font-weight: bold; -fx-fill: white;" text="Application">
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
</Text>
</children>
<opaqueInsets>
<Insets />
</opaqueInsets>
<padding>
<Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
</padding>
</HBox>
<HBox alignment="CENTER_LEFT">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
<VBox.margin>
<Insets top="40.0" />
</VBox.margin>
<children>
<FontAwesomeIconView fx:id="iconUser" glyphName="USERS" onMouseClicked="#xx" size="25" />
<Text fx:id="textUser" onMouseClicked="#xx" strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-family: Quicksan; -fx-font-weight: bold; -fx-fill: #485460;" text="Usuarios">
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
</Text>
</children>
</HBox>
<HBox alignment="CENTER_LEFT">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
<children>
<FontAwesomeIconView glyphName="LIST" size="25" />
<Text strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-family: Quicksan; -fx-font-weight: bold; -fx-fill: #485460;" text="Requisições">
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
</Text>
</children>
<VBox.margin>
<Insets top="10.0" />
</VBox.margin>
</HBox>
<VBox alignment="BOTTOM_CENTER" VBox.vgrow="ALWAYS">
<children>
<HBox alignment="CENTER_LEFT">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
<children>
<FontAwesomeIconView glyphName="COG" size="25" />
<Text strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-family: Quicksan; -fx-font-weight: bold; -fx-fill: #485460;" text="Settings">
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
</Text>
</children>
</HBox>
<HBox alignment="CENTER_LEFT">
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
<children>
<FontAwesomeIconView glyphName="SIGN_OUT" size="25" />
<Text strokeType="OUTSIDE" strokeWidth="0.0" style="-fx-font-family: Quicksan; -fx-font-weight: bold; -fx-fill: #485460;" text="Logout">
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
</Text>
</children>
</HBox>
</children>
<VBox.margin>
<Insets />
</VBox.margin>
<padding>
<Insets bottom="20.0" />
</padding>
</VBox>
</children>
</VBox>
<HBox fx:id="subRoot" maxHeight="-Infinity" prefHeight="80.0" style="-fx-background-color: #000;" AnchorPane.leftAnchor="150.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
<StackPane fx:id="mainRoot" layoutX="265.0" layoutY="256.0" prefHeight="150.0" prefWidth="200.0" style="-fx-background-color: #fff;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="150.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="80.0" />
</children>
</AnchorPane>
my controller:
public class ControllerHome implements Initializable {
#FXML
private HBox subRoot;
#FXML
private FontAwesomeIconView iconUser;
#FXML
private Text textUser;
#FXML
private StackPane mainRoot;
#FXML
void xx(MouseEvent event) throws IOException {
System.out.println("xd");
Pane content = FXMLLoader.load(getClass().getResource("mainContentUser.fxml"));
mainRoot.getChildren().addAll(content);
}
#Override
public void initialize(URL location, ResourceBundle resources) {
/*
iconUser.addEventHandler(MouseEvent.MOUSE_CLICKED, (e) -> {
System.out.println("xd");
});
textUser.addEventHandler(MouseEvent.MOUSE_CLICKED, (e) -> {
System.out.println("xd");
});*/
try {
HBox menu = FXMLLoader.load(getClass().getResource("menuUser.fxml"));
subRoot.getChildren().addAll(menu);
System.out.println("xdxx");
} catch (IOException ex) {
Logger.getLogger(ControllerHome.class.getName()).log(Level.SEVERE, null, ex);
}
}
}
my fxml with anchor Pane:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="559.0" prefWidth="811.0" style="-fx-background-color: #f547;" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1">
<children>
<Button layoutX="388.0" layoutY="199.0" mnemonicParsing="false" text="Button" />
</children>
</AnchorPane>
I don't know what is going on it is not full size and is covering other parts of my screen
I don't know if it's because of the stackpane or some configuration I made.
If anyone can help me on how I can solve this
Your main problem is misusing different Pane types to achive your goal. It would be very hard to point out all the problems this layout has. That is why I publish fxml which provides expected layout. Load it in SceneBuilder and try to manipulate it for better understanding. Remember that order of addition to GridPane (same for every Pane) affects z-order of children.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.171">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="-Infinity" minWidth="10.0" prefWidth="200.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="-Infinity" minHeight="-Infinity" prefHeight="100.0" vgrow="ALWAYS" />
<RowConstraints maxHeight="1.7976931348623157E308" minHeight="-Infinity" prefHeight="200.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<VBox style="-fx-background-color: green;" GridPane.rowIndex="1">
<children>
<VBox VBox.vgrow="ALWAYS">
<children>
<Button mnemonicParsing="false" text="Button" />
<Button mnemonicParsing="false" text="Button" />
</children>
</VBox>
<VBox alignment="BOTTOM_LEFT" VBox.vgrow="ALWAYS">
<children>
<Button mnemonicParsing="false" text="Button" />
<Button mnemonicParsing="false" text="Button" />
</children>
</VBox>
</children>
</VBox>
<StackPane prefHeight="150.0" prefWidth="200.0" style="-fx-background-color: pink;" GridPane.columnIndex="1" GridPane.rowIndex="1">
<children>
<Button mnemonicParsing="false" text="Button" />
</children>
</StackPane>
<HBox alignment="CENTER_LEFT" spacing="16.0" style="-fx-background-color: black;" GridPane.columnIndex="1">
<children>
<Button mnemonicParsing="false" text="Button" />
<Button mnemonicParsing="false" text="Button" />
<Button mnemonicParsing="false" text="Button" />
</children>
<padding>
<Insets left="16.0" />
</padding>
</HBox>
<StackPane style="-fx-background-color: lightblue;" />
</children>
</GridPane>

visible button in grid

my gridpane is :
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="569.0" prefWidth="794.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="com.controller.test">
<children>
<GridPane layoutX="10.0" layoutY="270.0" prefWidth="775.0" rotate="0.0">
<children>
<Button fx:id="btn1" mnemonicParsing="false" prefWidth="67.0" rotate="0.0" text="btn1" GridPane.columnIndex="0" GridPane.rowIndex="0" />
<Button fx:id="btn2" mnemonicParsing="false" prefWidth="67.0" rotate="0.0" text="btn2" GridPane.columnIndex="1" GridPane.rowIndex="0" />
<Button fx:id="btn3" mnemonicParsing="false" prefWidth="67.0" rotate="0.0" text="btn3" GridPane.columnIndex="2" GridPane.rowIndex="0" />
<Button fx:id="btn4" mnemonicParsing="false" prefWidth="67.0" rotate="0.0" text="btn4" GridPane.columnIndex="3" GridPane.rowIndex="0" />
</children>
<columnConstraints>
<ColumnConstraints maxWidth="594.0" minWidth="10.0" prefWidth="69.0" />
<ColumnConstraints maxWidth="594.0" minWidth="10.0" prefWidth="69.0" />
<ColumnConstraints maxWidth="558.0" minWidth="10.0" prefWidth="67.0" />
<ColumnConstraints maxWidth="507.0" minWidth="10.0" prefWidth="507.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
</GridPane>
</children>
</AnchorPane>
i need the result like below image when visible(false) for btn1,btn2
i use scene builder. thanks
In addition to making the components invisible by setting the visible property to false ('visible="false"'), you have set the managed property to false (managed="false").But with explicit 'ColumnConstraints' in your fxml, 'managed=false' will not have effect. So you may want to avoid using ColumnConstraints and instead use GridPane child component's properties to set dimensions.

resize stage components when resizing stage

The below screen shot is the default size of stage
when resized
how to resize the inner components when resizing the stage window accordingly?
<AnchorPane fx:id="mainpane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="809.0" prefWidth="860.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxhomeui_1.HomeUI_2Controller">
<children>
<VBox layoutX="695.0" layoutY="137.0" AnchorPane.bottomAnchor="341.0" AnchorPane.leftAnchor="695.0" AnchorPane.rightAnchor="-2.0" AnchorPane.topAnchor="137.0">
<children>
<SplitPane fx:id="sidebar" layoutX="695.0" layoutY="137.0" prefHeight="331.0" prefWidth="167.0" AnchorPane.bottomAnchor="341.0" AnchorPane.leftAnchor="695.0" AnchorPane.rightAnchor="-2.0" AnchorPane.topAnchor="137.0" />
</children>
</VBox>
<HBox layoutX="37.0" layoutY="163.0" AnchorPane.bottomAnchor="38.0" AnchorPane.leftAnchor="37.0" AnchorPane.rightAnchor="257.0" AnchorPane.topAnchor="163.0">
<children>
<ScrollPane fx:id="displayscroll" layoutX="37.0" layoutY="163.0" prefHeight="608.0" prefWidth="566.0" AnchorPane.bottomAnchor="29.0" AnchorPane.leftAnchor="37.0" AnchorPane.rightAnchor="197.0" AnchorPane.topAnchor="163.0">
<content>
<GridPane fx:id="gridpane" prefHeight="383.0" prefWidth="449.0">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
</GridPane>
</content>
</ScrollPane>
</children>
</HBox>
<Pane layoutX="573.0" layoutY="46.0" AnchorPane.bottomAnchor="738.0" AnchorPane.leftAnchor="573.0" AnchorPane.rightAnchor="107.0" AnchorPane.topAnchor="46.0">
<children>
<ComboBox fx:id="categorycmb" prefHeight="25.0" prefWidth="180.0" />
</children>
</Pane>
<Pane layoutX="110.0" layoutY="108.0" AnchorPane.bottomAnchor="672.0" AnchorPane.leftAnchor="110.0" AnchorPane.rightAnchor="461.0" AnchorPane.topAnchor="108.0">
<children>
<ToggleButton fx:id="gamestbutton" layoutX="76.0" layoutY="4.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="71.0" stylesheets="#Togglebutton.css" text="Games" AnchorPane.topAnchor="112.0" />
<ToggleButton fx:id="songstbutton" layoutX="218.0" layoutY="4.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="71.0" stylesheets="#Togglebutton.css" text="Songs" AnchorPane.topAnchor="112.0" />
<ToggleButton fx:id="apptbutton" layoutX="5.0" layoutY="4.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="71.0" stylesheets="#Togglebutton.css" text="Apps" AnchorPane.topAnchor="112.0" />
<ToggleButton fx:id="moviestbutton" layoutX="147.0" layoutY="4.0" mnemonicParsing="false" prefHeight="25.0" prefWidth="71.0" stylesheets="#Togglebutton.css" text="Movies" AnchorPane.topAnchor="112.0" />
</children>
</Pane>
<Pane layoutX="92.0" layoutY="44.0" AnchorPane.bottomAnchor="737.0" AnchorPane.leftAnchor="92.0" AnchorPane.rightAnchor="347.0" AnchorPane.topAnchor="44.0">
<children>
<TextField fx:id="searchtxt" prefHeight="28.0" prefWidth="421.0" promptText="Search" AnchorPane.bottomAnchor="737.0" AnchorPane.leftAnchor="92.0" AnchorPane.rightAnchor="347.0" AnchorPane.topAnchor="44.0" />
</children>
</Pane>
</children>
</AnchorPane>
FXML code (above) scrollpane and splitpane enclosed inside HBox and VBox respectively.
Also I want to keep space between images..

Resources