Chapter 9 ■ JavaFX 9 User InterFaCe DesIgn: the Front enD For Java 9 game DesIgnThe wrapping width of a TextFlow layout will be determined by the Region object’s current width. This can
be specified by your application by setting the TextFlow object’s preferred width property. If no wrapping
feature is desired, the application can set the preferred width to either Double.MAX_VALUE or, alternately,
Region.USE_COMPUTED_SIZE. Paragraphs should be separated using the new line, or \n (escape
character), inside of any of your child Text Node objects, shown in the following bold code example.
The value of the pickOnBounds property of a Text Node object will be set to false when it is rendered in
the TextFlow object. This happens because your content in a single Text Node object can become divided by
the TextFlow algorithm and be placed in different locations in the TextFlow because of line breaking and bidi
reordering. TextFlow algorithms will lay out each managed child Text Node object regardless of that child’s
visibility property value, leaving gaps for Text Node objects that are set to be invisible. Here is an example of
the TextFlow object creation workflow:
Text titleText = new Text("Welcome to iTVboardgame! \n");
titleText.setFill(Color.RED).setFont(Font.font("Helvetica", FontPosture.ITALIC, 40));
Text pressPlayText = new Text("Press the Start Game Button to Start!");
pressPlayText.setFill(Color.BLUE).setFont(Font.font("Helvetica", FontWeight.BOLD, 10));
TextFlow gameTextFlow = new TextFlow(titleText, pressPlayText);
The TextFlow class has two properties: the DoubleProperty lineSpacing attribute, which defines
the vertical space using pixels between the lines of Text, and the ObjectProperty
textAlignment attribute, which defines the horizontal text alignment constant such as LEFT, RIGHT,
CENTER, or JUSTIFY.
The TextFlow class has two constructor methods; the first has an empty parameter area and constructs
an empty TextFlow text layout object. This constructor method would use the following format:
TextFlow()
The second TextFlow constructor method used previously creates a TextFlow with the child Text (or
rich media) Node objects that are passed into the parameter area using a comma-delimited list, using the
following format:
TextFlow(Node... children)
The reason this second constructor method takes a parameter list Array of Node objects is because the
TextFlow object supports “Rich Text Layouts,” which is the combination of Text objects and other supported
Node objects that support rich media (images, shapes, geometry, mesh, animation, video, etc.).
Let’s get back to coding and instantiate and configure the Image, ImageView, Text, and TextFlow objects
so that you can add them into your existing Scene Graph hierarchy to achieve what is shown in Figure 9-1.
After that, in Chapter 10 we can write code in your Button ActionEvent handlers that will customize your UI
based on clicks.
Coding the User Interface: A UI Compositing Pipeline
To get the User Interface Design dialed in, you will need to instantiate the ImageView and TextFlow objects,
add them to your Scene Graph in the proper position in the hierarchy, import digital images into your
project, create a method to load your Image objects with your digital image assets, create a method to create
your Text objects with the proper information, and finally tweak your SceneGraph and UI elements to fine-
tune your UI end result.