Lecture 7 JavaFX Basics

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
1
 Motivations
JavaFX is a new framework for developing Java
GUI programs. The JavaFX API is an excellent
example of how the object-oriented principle is
applied. This chapter serves two purposes. First, it
presents the basics of JavaFX programming.
Second, it uses JavaFX to demonstrate OOP.
Specifically, this lecture introduces the framework
of JavaFX and discusses JavaFX GUI components
and their relationships.

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
2
 Objectives
❑ To distinguish between JavaFX, Swing, and AWT
❑ To write a simple JavaFX program and understand the relationship among stages,
scenes, and node
❑ To create user interfaces using panes, UI controls, and shapes
❑ To use binding properties to synchronize property values
❑ To use the common properties style and rotate for nodes
❑ To create colors using the Color class
❑ To create fonts using the Font class
❑ To create images using the Image class and to create image views using the
ImageView class
❑ To layout nodes using Pane, StackPane, FlowPane, GridPane, BorderPane, HBox,
and VBox
❑ To display text using the Text class

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
3
 JavaFX vs Swing and AWT
Swing and AWT are replaced by the JavaFX platform for
developing rich Internet applications.

When Java was introduced, the GUI classes were bundled in a

library known as the Abstract Windows Toolkit (AWT). AWT is
fine for developing simple graphical user interfaces, but not for
developing comprehensive GUI projects. In addition, AWT is
prone to platform-specific bugs. The AWT user-interface
components were replaced by a more robust, versatile, and
flexible library known as Swing components. Swing components
are painted directly on canvases using Java code. Swing
components depend less on the target platform and use less of the
native GUI resource. With the release of Java 8, Swing is
replaced by a completely new GUI platform known as JavaFX.

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
4
 Basic Structure of JavaFX
▪ Application
▪ Override the start(Stage) method
▪ Stage, Scene, and Nodes
Stage
Scene

Button

MyJavaFX Run

MultipleStageDemo Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
5
Panes, UI Controls, and Shapes

ButtonInPane Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
6
 Display a Shape
This example displays a circle in the center of the pane.

x
Y Axis
(0, 0) X Axis

y
(x, y)
(0, 0) X Axis
Java Conventional
Coordinate Coordinate
System System
Y Axis

ShowCircle Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
7
 Binding Properties
JavaFX introduces a new concept called binding property
that enables a target object to be bound to a source object.
If the value in the source object changes, the target
property is also changed automatically. The target object is
simply called a binding object or a binding property.

ShowCircleCentered Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
8
Common Properties and Methods
for Nodes
▪ style: set a JavaFX CSS style

▪ rotate: Rotate a node

NodeStyleRotateDemo Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
9
 The Color Class

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
10
 The Font Class

FontDemo Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
11
 The Image Class

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
12
 The ImageView Class

ShowImage Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
13
 Layout Panes
JavaFX provides many types of panes for organizing nodes
in a container.

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
14
 FlowPane

ShowFlowPane Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
15
 GridPane

ShowGridPane
Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
16
 BorderPane

ShowBorderPane Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
17
 HBox

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
18
 VBox

ShowHBoxVBox Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
19
 Shapes
JavaFX provides many shape classes for drawing texts,
lines, circles, rectangles, ellipses, arcs, polygons, and
polylines.

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
20
 Text

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
21
 Text Example

ShowText Run

Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved.
22