How to show elements on FXML file loaded in JavaFX application?

Question

I need to understand how to show elements inserted in FXML file loaded by Main javaFX application, my JavaFX application main is:

// imports omitted
public class Main extends Application {
@Override
public void start(Stage window) throws IOException {
    Parent root = FXMLLoader.load(getClass().getResource("Standard.fxml"));
    Scene mainGraphic = new Scene(root,500,500);

    window.setTitle("Prova con FXML");
    window.setMinHeight(500);
    window.setMinWidth(500);
    window.setScene(mainGraphic);
    window.show();
    }
}

This file works and load properly the FXML file Standard.fxml, the problem is that it doesn't show the top rectangle, this is the FXML file:

// imports omitted    
<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.myname.mypackage.Controller">
    <stylesheets>
        <URL value="@Standard.css"/>
    </stylesheets>

    <Rectangle id="ParteSuperiore"/>
</AnchorPane>

I obvioulsy have created the CSS file and stylized the element with the property I want, this is the CSS:

#AnchorPane {
    -fx-background-color: rgb(224, 246, 255);
}

#ParteSuperiore {
    -fx-fill: rgb(255, 145, 28);
    -fx-arc-height: 100px;
    -fx-arc-width: 100px;
}

What is wrong in this file? I can only see the AnchorPane's background color! I tried to put the Rectangle inside <children> element, however i continue to see only the AnchorPane's background color and I don't see the Rectangle! Should I use a Region instead of a Rectangle? If yes, how can I give width and height to it? In JavaFX CSS reference it doesn't give me the instruction to set width and height, like -fx-arc-height of the rectangle.

Answer 1

You appear to be confusing the arcHeight/arcWidth properties and the height/width properties of Rectangle. According to the documentation, the arcHeight property:

Defines the vertical diameter of the arc at the four corners of the rectangle. The rectangle will have rounded corners if and only if both of the arc width and arc height properties are greater than 0.0.

And the height property:

Defines the height of the rectangle.

The arcWidth and width properties have similar documentation.

Both the width and height properties have a default value of 0.0. Since you don't define a width or height for your Rectangle there is nothing to render. Looking at the JavaFX CSS Reference Guide's documentation for Rectangle, along with Shape and Node, there is no way to set the width or height of a Rectangle from CSS¹. You'll need to do it in code or in the FXML file. For example:

// imports omitted    
<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.myname.mypackage.Controller">
    <stylesheets>
        <URL value="@Standard.css"/>
    </stylesheets>

    <Rectangle id="ParteSuperiore" width="100" height="100"/>

</AnchorPane>

And you'll probably want to remove, or at least change, the -fx-arc-width and -fx-arc-height values in the CSS file.

---

^{1. Looking at the implementation confirms this. Neither width nor height is an instance of StyleableProperty, unlike arcWidth and arcHeight.}