Java Reference
In-Depth Information
Notice that we used a
FlowPane
as the outer layout and a
VBox
inside to keep the
Ellipse
and
Text
vertically
aligned. This ensures that the
Ellipse
will always stay on top of the
Text
but still allows the display to wrap into a
vertical layout if horizontal screen real estate is limited.
We use binding both to enable and disable the special effects (
DropShadow
and
InnerShadow
) that highlight the
current player's turn, as well as to dynamically update the text based on the model. This is a very powerful use of binding
that keeps the UI in sync with the game state without requiring the use of event listeners or imperative callbacks.
The result of running the program for a horizontal layout is shown in Figure
5-7
, and the resized vertical layout is
shown in Figure
5-8
.
Figure 5-7.
Output of running the Player Score Example in a horizontally sized window
Figure 5-8.
Output of running the Player Score Example in a vertically sized window
Although it might be surprising that the starting score is not zero, if you remember the Reversi starting position,
there are four pieces in the center of the board, which gives each player two points. Also, the sum of all the scores and
turns remaining should always add up to 64, which is true in this case.
The next step is to combine the logo and score using a
BorderPane
to build the minimal shell for the Reversi
application.
Composing a Layout Using
BorderPane
We have built up several elements of the Reversi UI, and now we need to tie them together into a single composition.
In this section we demonstrate how you can use the
BorderPane
class to quickly put together other components in a
common layout pattern. Unlike the layouts used earlier in this chapter, you should not modify the
BorderPane
's list of
children, but instead use the properties for each of the content areas listed in Table
5-6
.
Search WWH ::
Custom Search