CODEWITHSUNDEEP
javajavafxscenebuilderefxclipse
circles.png
circles.png

Reputation: 33

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

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!

In SceneBuilder

In reality

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>

Upvotes: 1

Views: 685

Answers (1)

Shekhar Rai
Shekhar Rai

Reputation: 2058

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.

Upvotes: 1

Related Questions