A JavaFx application contains one or more stages. These correspond to the windows of the application. Each stage has a scene attached to it and each scene can have a object graph of controls and layouts attached to it. This object graph is called a scene graph. Here’s an illustration of the general structure of the user interface of a JavaFX application.

JavaFX Overview


The stage is the outermost frame of a JavaFX application and typically corresponds to an application window. If a JavaFX appliation has multiple windows open each window has its own stage.


To display anything on-stage in a JavaFX application you need a scene. A stage can only show one scene at a time, but, just like the stage in a theatre, where multiple scenes could be shown during a play, you can exchange one scene for another at runtime. This is done by simply attaching the corresponding scene to the Stage object at the appropriate time. For example, for the Storytron 2.0 scene editor, we might have two JavaFX scenes, one for the editor itself; a second for the player.

A scene is represented by a Scene object inside a JavaFX application and the JavaFX application must create all the Scene objects that it needs.

Scene Graph

All the visual components in a scene must be attached to that scene in order to be displayed and that scene must be attached to the stage for the entire scene to be visible. The entire object graph of all these controls and layouts that are attached to a scene are called a Scene Graph.


All components in a scene graph are called nodes, which are subclasses of a JavaFX class called javafx.scene.node. There are two types of nodes: branch nodes and leaf nodes. A branch node (also known as a “parent” node) is a node that can contain other nodes (also known as “child” nodes). A leaf node is a node that cannot or does not contain other nodes.


The JavaFX controls listed below are components that provide interaction inside a JavaFX applications. Controls are usually nested inside a JavaFX layout component that manages the positioning of individual controls relative to one another.

JavaFX has the following controls available:

Accordian Menu TableView
Button MenuBar TabPane
CheckBox PasswordField TextArea
ChoiceBox ProgressBar TextField
ColorPicker RadioButton TiltedPane
ComboBox Slider ToggleButton
DatePicker Spinner ToolBar
Label SplitMenuButton TreeTableView
ListView SplitPane TreeView


The JavaFX layouts listed below are components which manage the layout of the controls or layouts that they contain. JavaFX layouts are sometimes called “parent” components because they contain “child” components and because layout components are asubclass of the JavaFX class javafx.scene.parent.

JavaFX has the following layouts available:

Group VBox TilePane
Region FlowPane GridPane
Pane BorderPane AnchorPane
HBox StackPane TextFlow

Nested Layouts

It is possible to nest layout components inside other layout components in order to achieve a desired effect.


JavaFX contains a set of ready-to-use chart components so it is not necessary to code basic charts from scratch.

AreaChart LineChart StackedAreaChart
BarChart PieChart StackedBarChart
BubbleChart ScatterChart  

Graphics, Audio, Video, and Web

JavaFX also has features that make it easy to draw 2D and 3D graphics onscreen, play audio and video, and even has a WebView component based on WebKit, the rendering engine in Chrome and Safari, that lets you display web pages.

In my next post I’ll show you how an FXML file that contains JavaFX components is turned into application controls onscreen. Until then check out a visual representation of all the JavaFX controls below.

JavaFX Modena