Using the Media Classes - JavaFX 8: A Definitive Guide to Building Desktop, Mobile, and Embedded Java Clients - page 396

private Slider createSlider(String id) {
final Slider slider = new Slider(0.0, 1.0, 0.1);
slider.setId(id);
slider.setValue(0);
return slider;
}
private Label createLabel(String text, String styleClass) {
final Label label = new Label(text);
label.getStyleClass().add(styleClass);
return label;
}
The method starts by creating the controls and ImageView s that will be placed in the layout. We have already
seen the code that creates the openButton in Listing 9-12. The createControlPanel method is presented later in this
section. The next step is to create the GridPane and its ColumnConstraints . Three different column constraints are
created. The first, buttonCol , is for the open button and has a fixed width of 100 pixels. The button is smaller than 100
pixels, so the width of this column creates a nice buffer between the open button and the actual player controls. The
second column constraint is the spacerCol and can vary in width from a minimum of 40 pixels to a maximum of 80
pixels, with a preferred width of 80 pixels. This constraint is used for the columns that mainly contain the volume slider
and the status display. Finally we have the middleCol constraint. The column having this constraint is allowed to grow
to fill the remaining space left over from the other columns. It will contain the position slider and the playback controls.
The constraints are added in the following order: buttonCol , spacerCol , middleCol , spacerCol , and buttonCol .
We added the last buttonCol constraint even though we don't have any controls to put in that last column. This keeps
the layout symmetrical and keeps the player controls centered in the window.
Several of the controls also have special alignments that are set using the setHalignment and setValignment
methods to control their horizontal and vertical alignment. For example, the openButton is aligned to the bottom
of the three cells that it spans. As previously mentioned, this is to create “white space” between the button and the
actual player controls. Another example is the volHigh ImageView . It is aligned to the right of its cell. The reason is
that we add the volLow and volHigh images to the same GridPane cell. Because volLow is left-aligned (the default)
and volHigh is right-aligned, they don't overlap and automatically maintain their proper positions above the volume
slider even when the layout is resized.
The final step, of course, is to actually add the controls to the GridPane . We used GridPane 's add methods in
Listing 9-15. There are two different variants of the method. The first allows you to specify the Node to be added along
with its column index and its row index. The second version of the add method additionally allows you to specify
the number of columns and rows that the Node should span. This latter version is used for the player controls (the
controlPanel Node and the openButton ) to allow them to span multiple rows.
With its ability to specify row and column sizing constraints, create custom alignments, and even display multiple
nodes per cell, the GridPane is by far the most powerful and flexible layout in your JavaFX toolkit. It really pays to
become familiar with all of its abilities.
Creating Playback Controls
Now that you have a basic knowledge of controlling playback with a MediaPlayer and our layout is now in place, let's
consider the implementation of a play/pause button. This simple control will show a play icon if the MediaPlayer
is not currently in the PLAYING state. If the MediaPlayer is PLAYING , the button will show a pause icon. If pressed
while the MediaPlayer is in the PLAYING state, the button's event handler will call the MediaPlayer 's pause method.
Otherwise, the MediaPlayer 's play method will be called. The code that loads the play and pause icons, creates the
button, and attaches the event handler that implements this logic is shown in Listing 9-16.