Why does this JavaFX application look way different than when it's in SceneBuilder?

Question

I was trying to make my first application on JavaFX but this frustrated me so much! These elements of the application are perfect in SceneBuilder, but now it's just misaligned!

I think it's because of this error when I run the app:

WARNING: Loading FXML document with JavaFX API of version 11.0.1 by JavaFX runtime of version 8.0.231

I have tried to change the AnchorPane attributes to:

<AnchorPane prefHeight="129.0" prefWidth="205.0" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml"">
   ...
</AnchorPane>

but it just fixes the warning and not the misalignment.

Here is my full code:

Main.java

package application;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.stage.Stage;
import javafx.scene.Scene;
//import javafx.scene.layout.BorderPane;


public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            //BorderPane root = new BorderPane();
            Parent root = FXMLLoader.load(getClass().getResource("Root.fxml"));
            Scene scene = new Scene(root,400,400);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Root.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>


<AnchorPane prefHeight="129.0" prefWidth="205.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <TextField layoutX="28.0" layoutY="23.0" />
      <Button layoutX="77.0" layoutY="65.0" mnemonicParsing="false" text="Button" />
   </children>
</AnchorPane>

Two reasons: (1) You're using an `AnchorPane` which is not responsive to the window resizing; (2) You're setting the initial size of the `Scene`, in the code, instead of letting the `Scene` use the preferred dimensions of the root. — Slaw, Jan 04 '20 at 00:07
You’re putting a 129×205 AnchorPane in a 400×400 Scene. What result were you expecting? — VGR, Jan 04 '20 at 03:40
You can avoid the warning by not using such an outdated Java version. Switch to Java 11+. The current version is 13 and not 8. — mipa, Jan 04 '20 at 08:43

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

As @Slaw mentioned that AnchorPane is not a responsive layout. You may consider using VBox with CENTER alignment as you have two nodes positioned with vertically.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Pos?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.VBox?>


<VBox prefHeight="129.0"  alignment="CENTER" prefWidth="205.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <TextField fx:id="INPUT_FIELD" />
      <Button fx:id="SUBMIT" mnemonicParsing="false" text="Button" />
   </children>
</VBox>

Generally, AnchorPane can be set as a parent layout and you can put VBox on it and controls(Button, TextField, etc) can be added on the VBox.

I think it's because of this error when I run the app:

WARNING: Loading FXML document with JavaFX API of version 11.0.1 by JavaFX runtime of version 8.0.231

No, it's just a warning! You can find a huge discussion over here.

Why does this JavaFX application look way different than when it's in SceneBuilder?

Main.java

Root.fxml

1 Answers1