Java Reference
In-Depth Information
Notice that there is nothing special that we needed to do to align the
Text
in the window. The default alignment
for nodes in a
StackPane
is to center them, which is exactly what we wanted to happen. Later we show how you can
override this behavior on a per-layout or per-node basis.
Because a
StackPane
extends
Parent
, there is no need to wrap it in a
Group
when adding it to the
Scene
. Also,
when adding a resizable container such as a
StackPane
to a
Scene
, it will automatically get resized when the window
size changes. Some bindings were still required to keep the
Ellipse
properly sized. It is common to use bind together
with layouts in this fashion.
The completed example is shown running in Figure
5-5
.
Figure 5-5.
Inverted JavaFX Reversi logo using a
StackPane
Aligning to Edges Using StackPanes and TilePanes
Using edge alignment, you can improve the title program to fit in with the Reversi theme. To emphasize the black-
and-white contrast of the Reversi pieces, let's create a design where the words are alternating colors on an alternating
background.
To accomplish this visual effect, you need to do the following.
1.
Create a
Scene
that has a white background (the default).
2.
Add a
TilePane
to the
Scene
to split it into a left and right half.
3.
On the right side, add a
Text
node with “Reversi” aligned to the left.
4.
On the left side, add a
StackPane
with a black background.
5.
Add a
Text
node to the
StackPane
with “JavaFX” in white text aligned to the right.
One way of looking at this problem is that you are creating two equal-size tiles that will contain text aligned
toward the center of the window. The right side is simply a
Text
node that is aligned to the left edge, and the left side
can be accomplished using a
StackPane
with right-aligned
Text
. Rather than using a
Rectangle
object, which would
require binding to set its dimensions, we make use of the background-color style that is a feature of the
Region
class
that all layouts extend.
To create equal-size tiles, we use the built-in
TilePane
layout. This layout divides its content into equal-sized
areas to fit all of its nodes. The available layout methods on
TilePane
are shown in Table
5-3
.
Search WWH ::
Custom Search