Java Reference
In-Depth Information
Chapter 3
Using SceneBuilder to Create a
User Interface
Give me a lever long enough and a fulcrum on which to place it, and I shall move the world.
—Archimedes
In Chapter 2, you learned about the two ways of creating a JavaFX UI, programmatically and declaratively, and how to
programmatically create a UI using the JavaFX APIs. You are familiar with the theater metaphor of the JavaFX UI, with
the
Stage
representing a window in a Windows, Mac, or Linux program, or the touch screen in a mobile device, the
Scene
and the
Node
s it contains representing the content of the UI. In this chapter, we tackle the other side of the UI
story in JavaFX: the declarative creation of UIs.
At the center of this approach of UI design is the FXML file. It is an XML file format designed specifically to hold
information about UI elements. It contains the “what” of the UI elements, but not the “how.” This is why this method
of creating JavaFX UIs is called
declarative
. At its core, FXML is a Java object serialization format that can be used for
any Java classes written in a certain way, including all old-style JavaBeans. In practice, however, it is only used for
specifying JavaFX UIs.
Aside from direct editing in a text editor or your favorite Java integrated development environment (IDE), FXML
files can also be manipulated by a graphical tool designed for working with FXML files called JavaFX SceneBuilder.
JavaFX SceneBuilder 1.0 was released in August 2012, and JavaFX SceneBuilder 1.1 was released in September 2013.
Both 1.0 and 1.1 work with JavaFX 2. JavaFX SceneBuilder 2.0 was released in May 2014 and works with JavaFX 8. The
JavaFX SceneBuilder 2.0 code base is released as open source. JavaFX SceneBuilder is a fully graphical tool that allows
you to paint the screens of your UI out of a palette of available containers, controls, and other visual nodes, and lay
them out by direct manipulation on the screen and modification of their properties through property editors.
FXML files are loaded into JavaFX applications by the JavaFX runtime using the
FXMLLoader
class. The result of
loading an FXML file is always a Java object, usually a container
Node
such as a
Group
or a
Pane
. This object can be
used as the root in a
Scene
, or attached to a bigger programmatically created scene graph as a node. To the rest of the
JavaFX application, the nodes loaded from an FXML file are no different from programmatically constructed nodes.
We present the intricately related materials about the content and format of FXML files, how they are loaded at
runtime, and how they are fashioned at design time, in a spiraling progression. We start this chapter with a complete
example showing how the StageCoach program in Listing 2-1 from Chapter 2 can be done using FXML. We then
present the FXML loading facility in detail. We then present a series of small handcrafted FXML files that highlight
all the features of the FXML file format. Once you understand the FXML file format, we show you how to create these
FXML files using JavaFX SceneBuilder, covering all the features of JavaFX SceneBuilder 2.0.
Search WWH ::
Custom Search