1. EECS 1510: Introduction to object-Oriented Programming in Java
Chapter 16 – JavaFX UI Controls and Multimedia
Dr. Larry G. Thomas – University of Toledo / LCCC

2. Remaining Schedule (Tentative)Su M T W R F Sa 19 20 21
Chapter 16 (JavaFX UI Controls & Multimedia) 22 23
Chapter 17 (Binary I/O) 24 25 26 27 28
(Slack in Schedule – Review) 29 30
FINAL EXAM 1 2 3 4 5 6 7
Graduate Commencement 8 9 **

3. Book Outline
1 – Introduction to Computers, Programs, and Java (32 pp.) 2 – Elementary Programming (42 pp.) 3 – Selections (44 pp.) 4 – Mathematical Functions, Characters, and Strings (38 pp.) 5 – Loops (46 pp.) 6 – Methods (42 pp.) 7 – Single-Dimension Arrays (42 pp.) 8 – Multi-dimensional Arrays (34 pp.) 9 – Objects and Classes (44 pp.) 10 – Object-Oriented Thinking (44 pp.) 11 – Inheritance and Polymorphism (40 pp.) 12 – Exception Handling and Text I/O (46 pp.) 13 – Abstract Classes and Interfaces (40 pp.) 14 – JavaFX Basics (50 pp.) 15 – Event-Driven Programming and Animations (44 pp.) 16 – JavaFX UI Controls and Multimedia (48 pp.) 17 – Binary I/O (28 pp.)

4. Chapter 16 Objectives (1): To…
…create graphical user interfaces with various user interface controls (§§16.2–16.11)
…create a label with text and graphic using the Label class and explore properties in the abstract Labeled class (§16.2)
…create a button with text and graphic using the Button class and set a handler using the setOnAction method in the abstract ButtonBase class (§16.3)
…create a check box using the CheckBox class (§16.4)
…create a radio button using the RadioButton class and group radio buttons using a ToggleGroup (§16.5)
…enter data using the TextField class and password using the PasswordField class (§16.6)

5. Chapter 16 Objectives (1): To…
…enter data in multiple lines using the TextArea (§16.7)
…select a single item using ComboBox (§16.8)
…select a single / multiple items using ListView (§16.9)
…select a range of values using ScrollBar (§16.10)
…select a range of values using Slider and explore differences between ScrollBar and Slider (§16.11)
…develop a tic-tac-toe game (§16.12)
…view and play video and audio using the Media, MediaPlayer, and MediaView (§16.13)
…develop a case study for showing the flagS and playing national anthems (§16.14)

6. Chapter 16 Outline
16.1 – Introduction 16.2 – Labeled and Label 16.3 – Button 16.4 – CheckBox 16.5 – RadioButton 16.6 – TextField 16.7 – TextArea 16.8 – ComboBox 16.9 – ListView – ScrollBar – Slider – Case Study: Developing a Tic-Tac-Toe Game – Video and Audio – Case Study: National Flags and Anthems

7. Section 16.1
Introduction

8. §16.1 Introduction
So far, we have kept our UI simple, in order to demonstrate how to create a UI at all, and how to connect its elements to the code that will operate “behind” the UI’s façade.
We have seen Text, TextField, and Button nodes, as well as various shapes (Arc, Circle, Line, Rectangle, Ellipse, Polygon / Polyline)
There are LOTS of other UI elements we can pull together to make a rich interface to make our software easier to use.
This chapter explores several of them

9. §16.1 Introduction
We’re about to put names on things you’re used to using every day, and talk about their properties and methods with specific terms.
Don’t be overwhelmed by the number of terms; most of this is simple if you’ve used a GUI before!
Consider this GUI (for printing from Adobe Acrobat), and see how many of its components you already recognize, whether or not you know what they’re actually called:

10. §16.1 Introduction
Labels – just a piece of text on the UI to show the user what the control NEXT to it is for

11. §16.1 Introduction
Buttons with a label to tell us what clicking on the button should do

12. §16.1 Introduction
Buttons with both a label and an image

13. §16.1 Introduction
CheckBox with a square box to the left of its label that lets us turn on or off some Boolean value

14. §16.1 Introduction RadioButtons, arranged in groups.
Only one button in a group can be selected (marked) at any one time – selecting one deselects the others in the group
Each RadioButton has a round “selected” indicator and a label

15. §16.1 Introduction TextField, into which the user may type text.
If the text is inherently numeric in nature, we will have to parse the TextField’s contents from String to a numeric type before we can use it in a calculation

16. §16.1 Introduction
ComboBox, which lets the user drop-down a list of options from which to select

17. §16.1 Introduction
Sliders are similar to ScrollBars (which this UI doesn’t happen to have, but which you are, no doubt, already familiar with for scrolling the screen).
Sliders differ from ScrollBars, though, in that a Slider lets us select a value from a range, whereas a ScrollBar is usually used to let us scroll content that doesn’t fit into its container

18. §16.1 Introduction
The ImageView can be used to either provide static information, or the image it displays can change depending on what the user does while in the interface
In this example, the image displayed is the one that corresponds to the page selected by the Slider below the ImageView

19. §16.1 Introduction
UI elements can be either enabled (allowing the user to interact with them), or disabled, in which case they’re present and visible, but “deactivated” or (“grayed out”)
In this example, the page range TextBox is disabled when the “Pages” RadioButton is not selected – the TextBox is there, but we can’t type in it

20. §16.1 Introduction
It’s usually easier to navigate a GUI with the mouse, but it’s typically much faster to do so it with the keyboard, and there are many keyboard shortcuts available.
First, controls with an underlined letter in their label can be selected by using ALT and the underlined letter (ALT+P from the keyboard is the same as clicking on the “Properties” Button)

21. §16.1 Introduction
What about the controls that we can’t select with ALT?
The Tab key shifts the focus from control to control in a pre-set order
When a Button or a CheckBox has the focus, pressing the Space Bar generates a click event
When a RadioButton or a ComboBox has the focus, UP / DOWN selects a different item

22. §16.1 Introduction
When a horizontal Slider has the focus, the LEFT / RIGHT arrow keys change its value.
When ComboBox has the focus, the F4 key will make the box alternate between its dropped-down and collapsed views
The more you can rely on the keyboard (and less on the mouse), the more productive you will be on the computer!

23. §16.1 Introduction
See how much you already knew about User Interface elements and HCI (Human-Computer Interaction), even before we started formally defining any of it?
The fact that a modern UI is so “intuitive” is a testament to its design.
Now, armed with the head-start you already had, let’s dive into what the book has to say about these elements in more detail:

24. §16.1 Introduction We started Chapter 14 with this diagram:
This is great, but that whole branch that just says Control has a lot of missing pieces
This chapter goes into the details of what the primary controls are, and how we can use them to build a richer UI.
The next slide shows us what “lies beyond”…

25. §16.1 Introduction
We covered the ImageView in Chapter 14, and we did a little with the Button in Chapter 15, so we could discuss handling events, but there’s a lot more
This chapter covers these:

26. A Notational Note
The author notes that the book will consistently use the following prefixes for the various node types, making it easy to tell by looking at a node’s variable name, what type of node it is:
lbl Label bt Button
chk CheckBox rb RadioButton
tf TextField pf PasswordField
ta TextArea cbo ComboBox
lv ListView scb ScrollBar
sld Slider mp MediaPlayer
This is a good idea. Some programmers even extend this to prefixing most non-obvious variable names with a reminder of their data type (i, sgl, dbl, c or ch, bol, lng, sh, byt) – see here

27. Section 16.2
Labeled and Label

28. §16.2 Labeled and Label
Because a Button has a Label on it, it’s actually a sub-class of the Labeled class, which is the parent class of Label, Button, CheckBox, and RadioButton.

29. §16.2 Labeled and Label A Label is the simplest Labeled sub-class
It typically contains a String, but can contain a graphic instead, or it can contain both.
The “graphic” can be an ImageView, or something more complicated, like a whole pane.
Listing 16.1, pp , shows us how to do these “out of the ordinary” labels:
This code is pretty straightforward – let me know if you have questions on it

30. Section 16.3
Button

31. §16.3 Button
A Button is a control that fires an ActionEvent when clicked.
There are several flavors of Button, each of which extends ButtonBase.
The only thing ButtonBase adds to Labeled is the onAction event handler (which we override!)

32. §16.3 Button
The 46-line ButtonDemo program (Listing 16.2, pp. 633 – 634) creates a Text element and two Buttons
Clicking the two Buttons moves the Text to the left and right.
From what we have already done in Chapter 15, understanding this code should be a breeze.

33. Section 16.4
CheckBox

34. §16.4 CheckBox
The CheckBox inherits all of the Label- and Image- displaying abilities from Labeled, and the onAction method from ButtonBase, and adds a Boolean property to tell us whether it is selected (checked) or not, which we can examine via isSelected()

35. §16.4 CheckBox
The program in Listing 16.3 (pp. 635 – 636) extends the ButtonDemo to add CheckBoxes for changing the text to bold and/or italic
Rather than creating a new pane from scratch, this program extends the ButtonDemo and overrides its getPane() method to produce the new one (See the description on p. 636)

36. Section 16.5
RadioButton

37. §16.5 RadioButton RadioButtons are sometimes called option buttons
They let us select (only) one of a group of options, unlike CheckBoxes, in which any (or all) of the boxes can be checked.
If RadioButton A is selected and we click on RadioButton B, RadioButton A will become deselected, and RadioButton B will become selected.

38. §16.5 RadioButton
The text presents a sample program to use the RadioButton in Listing 16.4 (pp. 638 – 639)
This program is an extension of CheckBoxDemo, which was an extension of ButtonDemo
This one adds three RadioButtons, one each for Red, Green, and Blue.
When the user clicks a RadioButton, the text changes color to match the new selection.

39. §16.5 RadioButton In this program, we have three RadioButtons.
What if we added three more for something else?
How would the UI know that these three are mutually-exclusive, and that the other three are a different set of mutually-exclusive options?
We create a ToggleGroup for each set, and then add the RadioButtons to the ToggleGroup.

40. §16.1 Introduction Ten RadioButtons, belonging to three ToggleGroups.
RadioButtons, arranged in groups.
Only one button in a group can be selected (marked) at any one time – selecting one deselects the others in the group
Each RadioButton has a round “selected” indicator and a label

41. Section 16.6
TextField

42. §16.6 TextField
A TextField can be used to either display (uneditable) text, or to create a place the user can type textual information
Pressing the Enter key inside a TextField fires an ActionEvent

43. §16.6 TextField
Listing 16.5 (pp. 640 – 641) shows yet another extension to the program we’ve been adding features to all chapter long
This one adds a TextField to the top section of the BorderPane, so the user can change the contents of the displayed Text.
When the user presses Enter, the Text changes

44. §16.6 TextField
The only difference between a TextField and a PasswordField is that, as the user is typing text nto a PasswordField, rather than showing the characters the user typed, the system displays an asterisk for each character, effectively hiding the text (but not its length)

45. Section 16.7
TextArea

46. §16.7: TextArea
The TextArea is essentially a TextBox that can contain multiple lines of text, rather than just one.
It, too, is an extension of TextInputControl:

47. §16.7: TextArea
The code Listing 16.6 (pp. 642 – 643) uses a TextArea inside a ScrollPane to allow us an easy way of scrolling the text for a large TextArea.
The DescriptionPane is just a building block
Listing 16.7 (p. 644) actually uses a DescriptionPane to build an application to show a country’s flag, along with a larger body of text in the TextArea

48. Section 16.8
ComboBox

49. §16.8 : ComboBox
The ComboBox lets the user select one of a pre-defined set of options.
By only allowing items on the list, we avoid many data validation issues we might have with a TextField.
A ComboBox fires an ActionEvent when an item on the list is selected.
Listing 16.8 (pp. 646 – 647) show the code for an application that lets the user select a country via a ComboBox, and then displays the country’s flag and a descriptive bit of text.

50. §16.8 : ComboBox
The ComboBox lets the user select one of a pre-defined set of options.

51. Section 16.9
ListView

52. §16.9: ListView
The ListView is vaguely similar to the ComboBox, except that there is no drop-down feature (the list doesn’t “collapse”), and we can set the properties of the ListView to allow selecting multiple items.
The code in Listing 16.9 (pp. 549 – 650) shows how to create a ListView populated with the names of several countries.
When the user selects one or more flags, the flags from the selected countries appear in the FlowPane on the right side of the window

53. §16.9: ListView Here’s an example:
How do we select multiple items from the list?
If we click on an item, it just selects the one item
First, we have to set the ListView to allow it

54. §16.9: ListView Here’s an example:
ctrl+click adds or removes (toggles) an item from the selection list
shift+click selects everything from the current selection to where the click occurred.

55. §16.9: ListView So, to get this selection:
Click on Norway (only Norway is selected)
shift+click on USA (Norway, UK, and US)
ctrl+click on Canada, Denmark, and France (in any order)

56. Section 16.10
ScrollBar

57. §16.10: ScrollBar
If you’ve uses a GUI at all, you’ve run into a ScrollBar, but you may not have thought about how the control interfaces with the code.
Scroll bars can be oriented horizontally or vertically. We’ll illustrate with a horizontal one:

58. §16.10: ScrollBar
The ScrollBar’s value changes as the user either drags the thumb, or clicks various places

59. §16.10: ScrollBar
Unlike Buttons and ComboBoxes, ScrollBars don’t generate events in the conventional sense, but we can still get them to generate one.
When a ScrollBar’s value changes (previous slide), we can watch for a change in that value either by setting up a listener (value is an ObservableProperty), and when the listener detects a change, it can have code executed, …

60. §16.10: ScrollBar
(repeat:) When a ScrollBar’s value changes (previous slide), we can watch for a change in that value either by setting up a listener (value is an ObservableProperty), and when the listener detects a change, it can have code executed,…

61. §16.10: ScrollBar
…or, since value is an ObservableProperty, it can participate in a binding relationship (see Section 14.5):
This code causes the text to move to a location determined by the position (value) of the ScrollBar relative to the pane’s height or width

62. §16.10: ScrollBar Final Notes:
By default, a ScrollBar’s min and max values are 0 and 100, with a default unitIncrement of 1 and a blockIncrement of 10. If you want your ScrollBar to represent a different range, or move in different increments, you’ll have to change these values.
The visibleAmount property represents the visible amount of the ScrollBar’s range, and is typically represented by the size of the thumb. It defaults to 15 (meaning that 15% of the range the ScrollBar covers is visible at a time)

63. Section 16.11
Slider

64. §16.11: Slider
The Slider is similar to the ScrollBar, but the Slider has more options.
That doesn’t make it a replacement for the ScrollBar, though.
Like the ScrollBar, the Slider has either HORIZONTAL or VERTICAL orientation, as well as min, max, and blockIncrement (but not unitIncrement) properties (and the corresponding getters and setters, of course)

65. §16.11: Slider

66. §16.11: Slider
Just like the ScrollBar, the Slider doesn’t fire events per se, but we can assign a listener to its value property, or bind the value to something we want the slider to control
See the examples and descriptions on pp

67. Case Study: Developing a Tic-Tac-Toe Game
Section 16.12
Case Study: Developing a Tic-Tac-Toe Game

68. §16.12: A Tic-Tac-Toe Game
Liang next spends 2.5 pages of text to describe 2.5 pages of code to walk through the development of a Tic-Tac-Toe game.
This is a pretty good wrap-up of what we have done since Chapter 14 – creating the UI, connecting the UI elements to the event-driven code, and using some extra UI elements
We won’t walk through every single line of this program (or every step of the design), but we will hit the highlights.
If you have questions, let me know.

69. §16.12: A Tic-Tac-Toe Game
The UI represents the game board, which is a 3-x-3 array of cells.
Liang creates a cell class to model what happens in a “cell” of the paper-based game
The Cell class is an extension of the Pane, so we can draw on it and have it generate events
A cell has a single property – a char called token that contains either ' ' (empty, the default value assigned when a cell is created), 'x', or 'o', with a simple getter

70. §16.12: A Tic-Tac-Toe Game The individual cells:
The game requires nine cells:

71. §16.12: A Tic-Tac-Toe Game
This is the Cell class, and inner class of the main program (which is in an override of start)
Its lone field (property) is a char, called token, which defaults to a space
A cell is an extension of a pane, so we can draw on it. Most of the work in this class is done in the setToken method.
When setToken is called, we assume it’s going to be either 'x' or 'o' – no checking is done to make sure that’s the case, but it’s only set from within our code, so we should be able to ensure that precondition.
Whatever char we’re given, we store in token. (line 100).

72. §16.12: A Tic-Tac-Toe Game
The Cell’s constructor simply sets the cell’s style (a black border), and a preferred size (2000 x 2000 pixels)
The last thing the constructor does is to use a Lambda expression to register the MouseClick event handler for this cell to be the handleMouseClick method, which is defined below.

73. §16.12: A Tic-Tac-Toe Game
The rest of setToken is devoted to drawing either the X or the O to represent the new token.
If we’re setting the token to 'X', we create a pair of crossed lines and add them to the pane
The lines’ starting and ending points’ X and Y values are bound to the Cell’s height and width, so resizing the window will re-size the pane, and thus, resize the X (lines 102 – 115)
Similarly, setting the token to 'O', causes an ellipse to be drawn on the pane, with its center (X, Y), and radii (X and Y) bound to the pane’s height and width (lines 116 – 132)

74. §16.12: A Tic-Tac-Toe Game
The MouseClick event handler first makes sure that the cell is empty, and it’s somebody’s turn (when the game is over, it’s not X’s turn, and it’s not O’s turn, so we set the whoseTurn variable to a blank to make sure nobody can go. Line 138 makes this check
In line 139, we call setToken to mark the cell as X’s or O’s, and draw the lines for the X or the ellipse for O

75. §16.12: A Tic-Tac-Toe Game
If, as a result of assigning the clicked-on cell to the current player, that player now has three-in-a-row, we announce that they won, and effectively end the game by setting whoseTurn to ' ' (nobody’s) – ll

76. §16.12: A Tic-Tac-Toe Game
If assigning the clicked-on cell to the current player did not result in a win for that player, it could have filled the board, meaning it was a draw, and again need to effectively end the game by setting whoseTurn to ' ' (nobody’s) – ll

77. §16.12: A Tic-Tac-Toe Game
If it didn’t result in a win, and it didn’t result in a tie, then it must be time to change players and take another turn.
This is a good place to use the selection operator. If the current player is X, we change the current player to be O, otherwise (which must be O), we set it to X.
Either way, we announce whose turn it has just become

78. §16.12: A Tic-Tac-Toe Game That covers the Cell class.
Now, all we have to do is add the supporting code that USES the Cell class to implement the game (the first 80 lines, but we’ll omit the necessary import statements in lines ):

79. §16.12: A Tic-Tac-Toe Game We’ll cover this one backwards.
Lines 51 – 80 are the isWon(char token) method
Lines 52 – 58 check all three rows to see of all three cells in that row contain token. If one does, return true
If we didn’t find three-in-a-row on any row, try all three columns, returning true as soon as we find a column with three cells containing token (ll. 60 – 65)
If we didn’t get a hit on a row or a column check the main diagonal ([0][0], [1][1], [2][2]) – ll, 67-71
Finally, check the other diagonal (ll. 73 – 77)
If none of the above checks managed to find three-in-a-row, then return false (line 79)

80. §16.12: A Tic-Tac-Toe Game
Lines 41 – 49 are the isFull method. This one is much simpler than isWon.
We just check all 9 cells in a pair of nested for loops. As soon as we find an empty cell, we can return false (line 46).
If, after checking all 9 cells and not finding an empty one, we know the board is full, and we can return true (line 48).

81. §16.12: A Tic-Tac-Toe Game All that remains is the creation of the UI.
Lines 25 – 28 create a GridPane and then creates and adds the nine cells to it.
Lines 30 – 32 create a BorderPane, with the grid in the center section, and a Label in the bottom section to tell whose turn it is.
Lines 34 – 38 add the pane to a scene, the scene to a stage, give the stage a title, and make the stage visible.

82. Section 16.13
Video and Audio

83. §16.13: Video and Audio
Just as we can load a JPG into an Image, and then actually display the Image in an ImageView control, we can load a media clip (MP3, WAV, MP4, or FLV) into a Media node, and then play it with a MediaPlayer.

84. §16.13: Video and Audio
The MediaPlayer does the actual work of playing a clip (“play” to mean “get the bits from the file, decode them, and determine how to display them”):

85. §16.13: Video and Audio
But there’s a third link in this chain: the MediaView actually displays it.
The MediaView basically handles display and scaling (we can display a 1920 x 1080 video in a 200 x 200 window, for example)

86. §16.13: Video and Audio
Liang implements a player for a video clip that’s available for download from the textbook’s companion website.
It implements (in an HBox in the bottom portion of a BorderPane):
A button to toggle between play and pause
A volume slider (with an identifying label)
A rewind button, to seek back to the beginning
The center of the BorderPane is the MediaView control

87. §16.13: Video and Audio
The finished application in action

88. Case Study: National Flags and Anthems
Section 16.14
Case Study: National Flags and Anthems

89. §16.14: National Flags and Anthems
Liang concludes this chapter with one more case study – one to display the flags and play the national anthems of 7 countries.
The code is in Listing (pp. 666 – 667), and, surprisingly, is only 75 lines total.
Ll. 1 – 15 are the import statements.
Ll. 18 – 21 set up for 7 countries, define the location of the files, and start us at country #0
Ll. 25 – 26 create an array of 7 Images and 7 MediaPlayers
Ll. 28 – 33 load the 7 images and media clips

90. §16.14: National Flags and Anthems
Ll. 35 – 44 implement the play / pause button
Ll. 47 – 51 create a ComboBox for the list of countries, and set the box’s selected item to be the first one.
Ll. 52 – 57 are the event handler for the ComboBox. When the user changes the selection, it stops the current MediaPlayer, switches to the one that corresponds to the newly selected country, and starts that one.
Ll. 59 – 74 set up the HBox, the BorderPane, the scene, and the stage.

91. §16.14: National Flags and Anthems
It would not be hard to create a media player application for your computer from these components.
By far, the hardest part is the management of your media library – lots of files, artists, genres, albums, media types, etc.
Gathering all of that information is the nightmare in creating a media player; not actually playing the media!

92. End of Chapter 16
Any Questions?