In this lab you will extend your
Circles project from the
previous lab exercise to give you more practice with JavaFX, including layout,
numeric controls, and adding listeners. (See the link to the previous
Java 8 lab exercise in the menu to the left.)
When complete, your program should behave like the one
in
the accompanying video.
Below is a snapshot of the opening window. Note that the
Circles
button has been replaced by controls allowing the user to change the
configuration of the display, including:
- The number of rows of circles
- The number of columns of circles
- The cell size of each circle. In the snapshot each circle's diameter
is half the cell size.
- The scaling factor for the width (along the X axis) of each circle during
its ScaleTransition animation
- The scaling factor for the height (along the Y axis) of each circle during
its ScaleTransition animation
Unlike in the previous lab, here the circles appear upon
launch of the application with their
ScaleTransitions
playing. Since the
X and
Y scale values are both
initialized to zero, the circles initially appear "still."
When the user changes the value in any of these five controls, the circles
launch and the animations (including
the
TranslateTransition that moves the circles from the
lower right to their positions) restart, reflecting the new value.
This section outlines the steps necessary to achieve the required behavior.
Remove the
Circles button from the layout and replace it with a
horizontally laid out group of controls:
- Row and column controls are spinners
(javafx.scene.control.Spinner) whose values range from 1 to 5
- Cell size control is a slider
(javafx.scene.control.Slider) whose value ranges from 50 to 150
- X and Y scaling factor controls are spinners whose values range
from -3 to 3
Make sure that each control is a private instance field, and that each
field is initialized in the
Circles constructor. Note:
- The canvas size should be computed from the maximum row,
column, and cell size values
- Controls can be given specific widths
with setPrefWidth
- The cell size label next to the slider needs to get its text
from the slider's getValue() method
Replace the button from the previous lab with the five controls
and run (test) the
CirclesTest.java file to observe the
look of the layout before giving the controls any
behavior. Note:
- In order to get the circles to appear in the initial screen,
before the user invokes any of the controls, launch the circles just
before the end of the Circles constructor.
Use the same code that your button handler used from the
previous lab.
The original
Circles class used constants such as
ROWS to
represent features of the program such as the number of rows of circles
rendered.
These features and the circle animation scaling factors must now be
obtained from the GUI controls:
- Locate where constant values are used and replace them with
calls to getValue(). For example, if you have a control
called rowSpinner, replace all ROWS references
with rowSpinner.getValue().
- Do the same for COLS and CELL_SIZE references.
- Replace the constant arguments to the ScaleTransition
object's setByX and setByY methods with calls
to getValue(). For example, if you have a control
called xScaleSpinner, make the
call st.setByX(xScaleSpinner.getValue()).
A change to any of the new controls must cause the same response that
clicking the original
Circles button did.
Currently, you add action to the button with:
You need to take the same action when any of the five controls' value
property changes. For example:
This must be done in the
Circles constructor. Note:
- The cell slider listener must, in addition to launching the
circles, also update the cell size label next to the slider.
