In this article, you’ll see how to modify
the code to implement the fan-shaped
arrangement of the PlayingCardLayoutB
project. Let’s start with an overview of the
PlayingCard class, which is the same for
both projects.
PLAYINGCARD AS A “MANAGED” NODE
The PlayingCard.fx script (see Listing 1)
defines the behavior of each playing card
instance (node) in a stack. As shown in
Listing 1, PlayingCard extends CustomNode,
the abstract base class for defining node
subclasses. The code overrides the children
variable, assigning to it a sequence of nodes.
Binding the node to the content attribute as
a member of a Group object will cause the
objects created with this class definition to
be rendered, in order, as a sequence.
The PlayingCard class also defines two
different handlers for mouse events on
each node (playing card), using the inherited variables onMousePressed and
onMouseReleased. The function defined
for the onMousePressed variable sets the
managed variable to false, thereby disassociating the selected node from the container’s
management. (The managed variable is a new
variable of Node, as of the JavaFX 1. 3 release.)
The toFront() function then moves the
unmanaged node to the front of that group
of nodes, thus achieving the action of the
application. That is, when a user clicks a
particular card, the state of the card goes
from managed to unmanaged and the
unmanaged card is sent by the toFront()
function to the front of the stack of cards.
When the mouse button is released
(onMouseReleased), the managed variable is
set once again to true and the node is held in
its position within its container, which, in the
case of the sample applications, is handled
by the custom layout manager.
manager you create, including those that
are part of this sample project, will extend
this same base class. The built-in layout
managers include
ClipView •;—acts as a clipping view of
its content, potentially responding to
unblocked mouse events by panning the
clipped region
Flow •;—lays out nodes in a horizontal or vertical flow, wrapping as necessary
HBox •;—lays out nodes in a single horizontal row, with configurable spacing and
alignment
Stack •;—lays out content nodes in a back-to-front stack
Tile •;—lays out content nodes in uniform-size areas
VBox •;—lays out content nodes in a single
vertical column
One of the variables inherited from the
Container class by all layout managers is the
content instance variable, which identifies
the nodes the layout manager will contain
at runtime. For example, in the following
code snippet, the content variable for the
scene contains two layout managers, HBox
and VBox, each containing its own content
variable that is set to a different series of
playing card nodes:
scene: sceneRef = Scene {
width: 600
height: 400
content: [
HBox {
layoutX: 100
layoutY: 0
spacing: - 58
content: for (i in [ 1.. 12])
PlayingCard {
node: ImageView {
image: Image {
url: "{__DIR__}images/{i}
.png"
}
}
}
},
VBox {
layoutX: 0
layoutY: 0
spacing: - 72
content: for (i in [ 13.. 20])
PlayingCard {
node: ImageView {
image: Image {
url: "{__DIR__}images/{i}
.png"
Stage {
var sceneRef:Scene;
title: "PlayingCard Layout Example"
}
}
}
},
INTRODUC TION TO JAVAFX
LAYOU T MANAGERS
The built-in JavaFX layout managers are
containers that support the positioning and
sizing of UI components in a cross-platform
manner. The layout managers inherit
base properties and functions from the
Container class ( javafx.scene.layout
.Container). In general, any custom layout
