Game Development Reference
In-Depth Information
The FXML structure is based on the JavaFX classes (objects), and their attributes, that
the FXML
tags,
and
parameters
structures, which you can easily create, allow you to
“mock up” a front-end UI more easily, using a mark-up language. The FXML structure
lets you more easily construct your Scene Graph hierarchy, and the FXML tags and
their parameters, which you will be looking at in the next section, match up 1:1 with
the JavaFX API classes.
Once you create your UI design, the Java programmers can use
javafx.fxml
classes
and methods to inflate your UI layout container and UI control arrangement into a
JavaFX scene and Scene Graph structure, based on Java objects. Then, the UI design
can be used in the application Java code. As mentioned earlier, FXML is most useful
for designing complex, static (fixed) UI design layouts containing lots of buttons,
forms, check boxes and the like.
Hello World UI FXML Definition: Replicating Your
Current UI Design, Using FXML
The first thing that you define in the FXML structure is the FXML
processing instruc-
tions
. Each processing instruction starts with a less-than sign, question mark sequence
(
<?)
and ends with the reversal of that sequence (question mark, greater-than sign
[
?>])
. The first processing instruction is a declaration of the XML language use, its
version
(1.0), and the
text character set
language-encoding format that you want to
use (in this case,
UTF-8
[
universal
character set
transformation format
,
8 bit
]). Be-
cause it is 8 bit, there are 256 characters in this international character set, which was
designed to span the many languages based on Germanic characters, that is, languages
that use an A to Z alphabet (including accented characters).
Following the declaration of an XML language and a character set are processing
instructions. These
import
the Java language, utilities, and
javafx.scene package
as
well as the
javafx.scene.layout
and
javafx.scene.control
packages, which are used to
design the UI layout and the UI controls that the layout contains.
For example, the StackPane UI layout container that you are using in the current
application is in the javafx.scene.layout package, and the button UI control element is
in the javafx.scene.control package. Because the
<StackPane>
FXML UI layout con-
tainer is the
parent
element in this structure, it goes first, or
outside
the
nested
FXML
UI definition structure that you are about to create.
Inside the <StackPane>, you will nest
children
of the StackPane class (object), us-
ing the
<children>
tags ( XML tags are coded using
<arrowHeadBrackets>
). Nested
inside these <children> tags are the UI control elements (in this case, a button control,
