1. Section 16.1

2. §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

3. §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:

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

5. §16.1 Introduction Button s with a label to tell us what clicking on the button should do

6. §16.1 Introduction Button s with both a label and an image

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

8. §16.1 Introduction RadioButton s, 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

9. §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

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

11. §16.1 Introduction Slider s are similar to ScrollBar s (which this UI doesn’t happen to have, but which you are, no doubt, already familiar with for scrolling the screen). Slider s differ from ScrollBar s, 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

12. §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

13. §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

14. §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 )

15. §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

16. §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!

17. §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:

18. §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”…

19. §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:

20. 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: ○ lblLabelbtButton ○ chkCheckBoxrbRadioButton ○ tfTextFieldpfPasswordField ○ taTextAreacboComboBox ○ lvListViewscbScrollBar ○ sldSlidermpMediaPlayer  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 herehere

21. Section 16.2

22. §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.

23. §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. 630-631, 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

24. Section 16.3

25. §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!)

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

27. Section 16.4

28.  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()

29.  The program in Listing 16.3 (pp. 635 – 636) extends the ButtonDemo to add CheckBox es 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)

30. Section 16.5

31.  RadioButtons are sometimes called option buttons  They let us select (only) one of a group of options, unlike CheckBox es, 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.

32.  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.

33.  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.

34. §16.1 Introduction RadioButton s, 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 Ten RadioButton s, belonging to three ToggleGroups.

35. Section 16.6

36. §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

37. §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

38. §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)

39. Section 16.7

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

41.  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

42. Section 16.8

43.  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.

44.  The ComboBox lets the user select one of a pre- defined set of options.

45. Section 16.9

46.  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

47.  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

48.  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.

49.  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)

50. Section 16.10

51.  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:

52.  The ScrollBar ’s value changes as the user either drags the thumb, or clicks various places

53.  Unlike Button s and ComboBox es, ScrollBar s 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, …

54.  (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,…

55.  …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

56.  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)

57. Section 16.11

58.  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)

60.  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. 654-7

61. Section 16.12

62. §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.

63. §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

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

65. §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).

66. §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.

67. §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)

68. §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

69. §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. 141 - 145

70. §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. 146 - 149

71. §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

72. §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 1 - 10):

73. §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)

74. §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).

75. §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.

76. Section 16.13

77. §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.

78. §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”):

79. §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)

80. §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

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

82. Section 16.14

83. §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 16.15 (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 Image s and 7 MediaPlayer s  Ll. 28 – 33 load the 7 images and media clips

84. §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.

85. §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!

86. End of Chapter 16 Any Questions?