Java How to Program, 10/e

© Copyright 1992-2015 by Pearson Education, Inc. All Rights

Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 A graphical user interface (GUI) presents a user-
friendly mechanism for interacting with an app. A GUI
(pronounced “GOO-ee”) gives an app a distinctive
“look-and-feel.”
 GUIs are built from GUI components—sometimes
called controls or widgets.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 Providing different apps with consistent, intuitive user-
interface components gives users a sense of familiarity
with a new app, so that they can learn it more quickly
and use it more productively.
 Java’s GUI, graphics and multimedia API of the future
is JavaFX.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 JavaFX Scene Builder is a standalone JavaFX GUI
visual layout tool that can also be used with various
IDEs.
 JavaFX Scene Builder enables you to create GUIs by
dragging and dropping GUI components from Scene
Builder’s library onto a design area, then modifying
and styling the GUI—all without writing any code.
 JavaFX Scene Builder generates FXML (FX Markup
Language)—an XML vocabulary for defining and
arranging JavaFX GUI controls without writing any
Java code.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 The FXML code is separate from the program logic
that’s defined in Java source code—this separation of
the interface (the GUI) from the implementation (the
Java code) makes it easier to debug, modify and
maintain JavaFX GUI apps.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 A JavaFX app window consists of several parts
(Fig. 25.1) that you’ll use in Sections 25.4–25.5:

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 The window in which a JavaFX app’s GUI is displayed is
known as the stage and is an instance of class Stage
(package javafx.stage).
 The stage contains one scene that defines the GUI as a
scene graph—a tree structure of an app’s visual elements,
such as GUI controls, shapes, images, video, text and more.
The scene is an instance of class Scene (package
javafx.scene).
 Each visual element in the scene graph is a node—an
instance of a subclass of Node (package
javafx.scene), which defines common attributes and
behaviors for all nodes in the scene graph.
 The first node in the scene graph is known as the root node.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 Nodes that have children are typically layout containers
that arrange their child nodes in the scene.
 The nodes arranged in a layout container are a
combination of controls and possibly other layout
containers.
 When the user interacts with a control, it generates an
event. Programs can use event handling to specify what
should happen when each user interaction occurs.
 An event handler is a method that responds to a user
interaction. An FXML GUI’s event handlers are
defined in a controller class.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 In this section, without writing any code you’ll build a
JavaFX Welcome app that displays text in a Label
and an image in an ImageView (Fig. 25.2).

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 You’ll now use NetBeans to create a JavaFX FXML
App. Open NetBeans on your system. Initially, the
Start Page (Fig. 25.3) is displayed—this page gives
you links to the NetBeans documentation and displays
a list of your recent projects, if any.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 To create an app in NetBeans, you must first create a
project—a group of related files, such as code files and
images that make up an app.
 Click the New Project… () button on the toolbar or
select File > New Project… to display the New
Project dialog (Fig. 25.4). Under Categories, select
JavaFX and under Projects select JavaFX FXML
Application, then click Next >.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 In the New JavaFX Application dialog (Fig. 25.5),
specify the following information:
◦ Project Name: field—This is your app’s name. Enter
Welcome in this field.
◦ Project Location: field—The project’s location on your system.
NetBeans places new projects in a subdirectory of
NetBeansProjects within your user account’s
Documents- folder. You can click the Browse… button to
specify a different location. Your project’s name is used as the
subdirectory name.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 FXML name: field—The name of the FXML filename
that will contain the app’s GUI. Enter Welcome
here—the IDE creates the file Welcome.fxml in the
project.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 Create Application Class: checkbox—When this is
checked, NetBeans creates a class with the specified
name. This class contains the app’s main method.
Enter Welcome in this field. If you precede the class
name with a package name, NetBeans creates the class
in that package; otherwise, NetBeans will place the
class in the default package.
 Click Finish to create the project.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 The NetBeans Projects window provides access to all
of your projects. Within a project’s node, the contents
are organized into folders and files.
 The Welcome node represents this app’s project.
 You can have many projects open at once—each will
have its own top-level node.
 Within a project’s node, the contents are organized into
folders and files.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 You can view the Welcome project’s contents by
expanding the Welcome > Source Packages >
<default package> node (Fig. 25.6).
 If you specified a package name for the app class in
Fig. 25.5, then that package’s name will appear rather
than <default- package>.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 NetBeans creates and opens three files for a JavaFX
FXML Application project:
◦ Welcome.fxml—This file contains the FXML markup for
the GUI. By default, the IDE creates a GUI containing a
Button and a Label.
◦ Welcome.java—This is the main class that creates the GUI
from the FXML file and displays the GUI in a window.
◦ WelcomeController.java—This is the class in which
you’d define the GUI’s event handlers that allow the app to
respond to user interactions with the GUI.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 One way to use an image in your app is to add its file to
the project, then display it on an ImageView.
 The bug.png image you’ll use for this app is located
in the images- subfolder of this chapter’s examples
folder.
 Locate the images- folder on your file system, then
drag bug.png onto the project’s <default package>
node to add the file to the project.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 To open JavaFX Scene Builder so that you can create
this app’s GUI, right click Welcome.fxml in the
Projects window, then select Open to view the FXML
file in Scene Builder (Fig. 25.7).

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 Layout containers help you arrange GUI components. A
VBox arranges its nodes vertically from top to bottom.
 To make a layout container the root node in a scene
graph, select the layout container, then select Scene
Builder’s Edit > Trim Document to Selection menu
item.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 A VBox’s alignment determines the layout positioning
of its children.
 The preferred size (width and height) of the scene
graph’s root node is used by the scene to determine its
window size when the app begins executing.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 You can set a Label’s text either by double clicking it
and typing the text, or by selecting the Label and
setting its Text property in the Inspector’s
Properties section.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 When adding controls to a VBox, each new control is
placed below the preceding ones by default. You can
change the order by dragging the children in Scene
Builder’s Hierarchy window.
 To set the image to display, select the ImageView
then set its Image property in the Inspector’s
Properties section. An image’s aspect ratio is the ratio
of the image’s width to its height.
 To specify an ImageView’s size, set its Fit Width and
Fit Height properties in the Inspector’s Layout
section.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 You can run the app from NetBeans in one of three
ways:
◦ Select the project’s root node in the NetBeans Projects
window, then click the Run Project () button on the toolbar.
◦ Select the project’s root node in the NetBeans Projects
window, then press F6.
◦ Right click the project’s root node in the NetBeans Projects
window, then select Run.
 In each case, the IDE will compile the app (if it isn’t
already compiled), then run the app.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 The Tip Calculator app (Fig. 25.9(a)) calculates and
displays a restaurant bill tip and total.
 By default, the app calculates the total with a 15% tip.
 You can specify a tip percentage from 0% to 30% by
moving the Slider thumb—this updates the tip
percentage (Fig. 25.9(b) and (c)).
 In this section, you’ll build a Tip Calculator app using
several JavaFX components and learn how to respond
to user interactions with the GUI.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 A JavaFX app’s main class inherits from Application
(package javafx.application.Application).
 The main class’s main method calls class
Application’s static launch method to begin
executing a JavaFX app. This method, in turn, causes the
JavaFX runtime to create an object of the Application
subclass and call its start method, which creates the GUI,
attaches it to a Scene and places it on the Stage that
method start recevies as an argument.
 A GridPane (package javafx.scene.layout)
arranges JavaFX nodes into columns and rows in a
rectangular grid.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 Each cell in a GridPane can be empty or can hold
one or more JavaFX components, including layout
containers that arrange other controls.
 Each component in a GridPane can span multiple
columns or rows.
 This app uses a GridPane (Fig. 25.10) to arrange
views into two columns and five rows.
 To learn more about class GridPane, visit:
◦ http://docs.oracle.com/javafx/2/api/javafx/scene/layout/GridPa
ne.html

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 A TextField (package
javafx.scene.control) can accept text input or
display text.
 A Slider (package javafx.scene.control)
represents a value in the range 0.0–100.0 by default and
allows the user to select a number in that range by
moving the Slider’s thumb.
 A Button (package javafx.scene.control)
allows the user to initiate an action.
 Class NumberFormat (package java.text) can
format locale-specific currency and percentage strings.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 GUIs are event driven.
◦ When the user interacts with a GUI component, the
interaction—known as an event—drives the program to
perform a task.
 The code that performs a task in response to an event is
called an event handler.
 For certain events you can link a control to its event-
handling method by using the Code section of Scene
Builder’s Inspector window.
◦ In this case, the class that implements the event-listener
interface will be created for you and will call the method you
specify.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 For events that occur when the value of a control’s
property changes, you must create the event handler
entirely in code.
 You implement the ChangeListener interface
(package javafx.beans.value) to respond to the
user moving the Slider’s thumb.
 JavaFX applications in which the GUI is implemented
as FXML adhere to the Model-View-Controller (MVC)
design pattern, which separates an app’s data
(contained in the model) from the app’s GUI (the view)
and the app’s processing logic (the controller).

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 The controller implements logic for processing user
inputs.
 The view presents the data stored in the model.
 When a user provides input, the controller modifies the
model with the given input.
 When the model changes, the controller updates the
view to present the changed data.
 In a simple app, the model and controller are often
combined into a single class.
 In a JavaFX FXML app, you define the app’s event
handlers in a controller class.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 The controller class defines instance variables for
interacting with controls programmatically, as well as
event-handling methods.
 Class FXMLLoader’s static method load uses the
FXML file that represents the app’s GUI to creates the
GUI’s scene graph and returns a Parent (package
javafx.scene) reference to the scene graph’s root
node.
 It also initializes the controller’s instance variables, and
creates and registers the event handlers for any events
specified in the FXML.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 If a control or layout will be manipulated
programmatically in the controller class, you must
provide a name for that control or layout. Each object’s
name is specified via its fx:id property. You can set this
property’s value by selecting a component in your
scene, then expanding the Inspector window’s Code
section—the fx:id property appears at the top.
 Figure 25.11 shows the fx:id properties of the Tip
Calculator’s programmatically manipulated controls.
 For clarity, our naming convention is to use the
control’s class name in the fx:id property.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 By default, the GridPane contains two columns and
three rows. You can add a row above or below an
existing row by right clicking a row and selecting Grid
Pane > Add Row Above or Grid Pane > Add Row
Below.
 You can delete a row or column by right clicking the
tab containing its row or column number and selecting
Delete.
 After adding two rows, the GridPane should appear
as shown in Fig. 25.12.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 You’ll now add the controls in Fig. 25.10 to the
GridPane.
 For those that have fx:ids (see Fig. 25.11), while the
control is selected, set its fx:id property in the
Inspector window’s Code section.
 Perform the following steps:
◦ Adding the Labels. Drag Labels from the Library window’s
Controls section into the first four rows of the GridPane’s
left column (i.e., column 0). As you add each Label, set its
text as shown Fig. 25.10.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
◦ Adding the TextFields. Drag TextFields from the
Library window’s Controls section into rows 0, 2 and 3 of the
GridPane’s right column (i.e., column 1).
◦ Adding a Slider. Drag a horizontal Slider from the
Library window’s Controls section into row 1 of the
GridPane’s right column.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 ◦ Adding a Button. Drag a Button from the Library
window’s Controls section into row 4 of the GridPane’s
right column. You can set the Button’s text by double
clicking it, or by selecting the Button, then setting its Text
property in the Inspector window’s Properties section.
 The GridPane should appear as shown in Fig. 25.13.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 A GridPane column’s contents are left-aligned by
default. To change the alignment, select the column by
clicking the tab at the top or bottom of the column, then
in the Inspector’s Layout section, set the Halignment
property.
 In this app, we sized each column to fit its contents.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 Select the column 0 by clicking the tab at the top or
bottom of the column, then in the Inspector’s Layout
section, set the Pref Width property to
USE_COMPUTED_SIZE to indicate that the column’s
width should be based on the widest child—the
Amount Label in this case.
 Repeat this process for column 1.
 The GridPane should appear as shown in Fig. 25.14.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 Scene Builder sets each TextField’s width to 200
pixels by default.
 When setting a property to the same value for several
controls, you can select all of them and specify the
value once.
 To select all three TextFields, hold the Ctrl (or
Command) key and click each TextField.
 Then in the Inspector’s Layout section, set the Pref
Width property to USE_COMPUTED_SIZE.
 This indicates that each TextField should use its
preferred width (as defined by JavaFX).

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 The GridPane’s right column resizes to the Text-
Fields’ preferred widths.
 To size a Button the same width as the other controls
in a GridPane’s column, select the Button, then in
the Inspector’s Layout section, set the Max Width
property to MAX_VALUE.
 As you design your GUI, you can preview it by
selecting Preview > Show Preview in Window.
 As you can see in Fig. 25.15, there’s no space between
the Labels in the left column and the controls in the
right column.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 In addition, there’s no space around the GridPane,
because the Stage is sized to fit the Scene’s content.
 Thus, many of the controls touch or come close to the
window’s borders.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 The space between a node’s contents and its top, right,
bottom and left edges is known as the padding, which
separates the contents from the node’s edges. To set the
padding, select the node, then in the Inspector’s
Layout section, set the Padding property’s values.
 You can specify the default amount of space between a
GridPane’s columns and rows with its Hgap
(horizontal gap) and Vgap (vertical gap) properties,
respectively.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 You can type in a TextField only if it’s “in focus”—that
is, it’s the control that the user is interacting with. When
you click an interactive control, it receives the focus.
Similarly, when you press the Tab key, the focus transfers
from the current focusable control to the next one—this
occurs in the order the controls were added to the GUI.
 Select Preview > Show Preview in Window to view the
final GUI (Fig. 25.16).
 When we discuss the TipCalculatorController
class in Section 25.5.5, we’ll show how to specify the
Calculate Button’s event handler in the FXML file.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 Figure 25.17 presents class TipCalculator.
 With the exception of line 18, all of the code in this
class was generated by NetBeans.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 To display a GUI, you must attach it to a Scene, then
attach the Scene to the Stage that’s passed into
Application method start.
 By default, the Scene’s size is determined by the size
of the scene graph’s root node.
 Overloaded versions of the Scene constructor allow
you to specify the Scene’s size and fill (a color,
gradient or image), which appears in the c’s
background.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 Scene method setTitle specifies the text that
appears in the Stage window’s title bar.
 Stage method setScene places a Scene onto a
Stage.
 Stage method show displays the Stage window.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 Figure 25.18 shows class
TipCalculatorController’s import
statements.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 The RoundingMode enum of package java.math
is used to specify how BigDecimal values are
rounded during calculations or when formatting
floating-point numbers as Strings.
 Class NumberFormat of package java.text
provides numeric formatting capabilities, such as
locale-specific currency and percentage formats.
 A Button’s event handler receives an
ActionEvent, which indicates that the Button was
clicked. Many JavaFX controls support
ActionEvents.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 Package javafx.scene.control contains many
JavaFX control classes.
 Lines 17–38 of Fig. 25.19 present class
TipCalculatorController’s static and
instance variables.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 The @FXML annotation preceding an instance variable
indicates that the variable’s name can be used in the
FXML file that describes the app’s GUI.
 The variable names that you specify in the controller
class must precisely match the fx:id values you
specified when building the GUI.
 When the FXMLLoader loads an FXML file to create
a GUI, it also initializes each of the controller’s
instance variables that are declared with @FXML to
ensure that they refer to the corresponding GUI
components in the FXML file.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
 Figure 25.20 presents class
TipCalculatorController’s
calculateButtonPressed method, which is
called with the user clicks the Calculate Button.
 The @FXML annotation preceding a method indicates
that the method can be used to specify a control’s event
handler in the FXML file that describes the app’s GUI.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 Figure 25.21 presents class
TipCalculatorController’s initialize
method.
 When the FXMLLoader creates an object of a
controller class, it determines whether the class
contains an initialize method with no parameters
and, if so, calls that method to initialize the controller.
 This method can be used to configure the controller
before the GUI is displayed.

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.
© Copyright 1992-2015 by Pearson
Education, Inc. All Rights Reserved.
 An anonymous inner class is a class that’s declared without
a name and typically appears inside a method declaration.
 Since an anonymous inner class has no name, one object of
the class must be created at the point where the class is
declared.
 An anonymous inner class can access its top-level class’s
instance variables, static variables and methods, but has
limited access to the local variables of the method in which
it’s declared—it can access only the final local variables
declared in the enclosing method’s body. (As of Java SE 8,
an anonymous inner class may also access a class’s
effectively final local variables.)

© Copyright 1992-2015 by Pearson

Education, Inc. All Rights Reserved.