What is a "Node" in JavaFx/FXML?

A Node is the abstract superclass of the graphical elements the scenegraph are "made of".

Some examples of classes inheriting from Node:

  • TextField
  • AnchorPane
  • Canvas
  • Group
  • VBox
  • Button
  • Label
  • ...

Injecting a Node with the FXMLLoader id done this way:

  1. Create a field in the controller associated with the fxml with a appropriate type (i.e. any type the element you want to inject can be assigned to). This field must be accessible by the FXMLLoader which means it has to be public or annotated with the @FXML annotation.
  2. Add the id attribute from the fxml namespace (most likely using the prefix fx) to the element in the fxml file that should be injected. The value of that attribute is the name of the field in the controller.

Example

fxml

....
<TextField fx:id="myTextField" ....>
....

Controller

....
@FXML
private TextField myTextField;
....

The FXMLLoader uses this information to assign the object it creates for that fxml element to the field before the controller's initialize method is called.

A full example/extendend tutorial including injection can be can be found here: https://docs.oracle.com/javase/8/javafx/fxml-tutorial/fxml_tutorial_intermediate.htm#JFXMG153


Before you understand what a Node is, it is also important to first of all understand what a Scene Graph is in JavaFX.

JavaFX applications consist of a Stage and a Scene or several scenes. The stage being the top-level container of your application. The Scene(s) on the other hand, contains all the content (User Interface elements) of your application (if your application has only one "page") or the content of one of the "pages" of your application, and exists in/on a stage. (To be clear here, by page I mean what the user interacts with, for instance, a login page.)

The Scene Graph is a graphical illustration of how all the stuff in your scene are laid out. This graph is represented in the form of a tree data structure.

A Node is an item in the scene graph.

I think this image explains this clearly.

enter image description here

Example of a Node is a Control, which is anything that can be manipulated by the user E.g., TextField, Button, TextArea

Photo Credit