JavaFX Basics (Ref: Liang Ch 14)
Shing-Chi Cheung
Computer Science and Engineering
HKUST
Motivations
JavaFX is the latest framework completely replacing
AWT and Swing for GUI programs since Java 8.
There will be no further development of AWT and Swing.
We will present the basics of JavaFX programming.
We will use JavaFX to demonstrate OOP. Specifically,
we will introduce the framework of JavaFX and
discusses JavaFX GUI components and their
relationships.
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 2
History: AWT Swing JavaFX
AWT
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 GUI (graphical user interfaces), but prone to
platform-specific bugs.
Swing: The AWT user-interface components were replaced since Java 2
by a more robust 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 resources.
Supported by Java Applets for graphics display on web browsers.
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 3
History: AWT Swing JavaFX
Swing: limitations
No longer can display Swing components on web browsers with the discontinued
support of Java Applets.
Not designed to provide multi-touch and built-in 3D support.
JavaFX.
Provides a more intuitive conceptual model for modern GUI design.
stage scene pane node
Well integrated with the latest internet technologies, e.g., CSS.
Take advantage of new hardware acceleration pipeline and graphics cards.
https://www.youtube.com/watch?v=uxmhqv0in34
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 4
Basic Structure of JavaFX
Stage
Application Scene
Override the start (Stage) method Button
Stage, Scene, and Nodes
MyJavaFX Run
If you encounter access restriction compile error, MultipleStageDemo Run
please configure Eclipse Project Build Path for JavaFX:
http://stackoverflow.com/questions/22812488/using-javafx-in-jre-8
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 5
JavaFX Application Lifecycle
JavaFX runtime does the following when an Application is launched:
1. Constructs an instance of the specified Application class
2. Calls the init() method // executed by the Java launcher thread
3. Creates an application thread and runs the start(Stage) method
4. Waits for the application to finish, which happens when either of the following occur:
•the application calls Platform.exit()
•the last window has been closed
5. Calls the stop() method
• Note that the start method is abstract and must be overridden. The init and stop
methods have concrete implementations that do nothing.
• Calling Platform.exit() is the preferred way to explicitly terminate a JavaFX
Application. Directly calling System.exit(int) doesn't allow the stop() method to run.
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 6
Panes, UI Controls,
and Shapes
ButtonInPane Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 7
Display a Shape
This example displays a circle in the center of the pane.
A x is
(0 , 0 ) A x is
A x is
Java C o n v e n ti o n a l
C o o r d in a t e C o o r d in a t e
S y st e m
A x is S y st e m
ShowCircle Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 8
Binding Properties
JavaFX introduces a new concept called binding property
that enables a target object to be bound to a source
object. If the source object’s value changes, the target
property also changes automatically. The target object is
simply called a binding object or a binding property.
Source object: pane.widthProperty().divide(2)
Binding property: circle’s centerX
ShowCircleCentered Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 9
Binding Property:
getter, setter, and property getter
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 10
Uni/Bidirectional Binding
Unidirectional binding
DoubleProperty.bind(Property)
Bidirectional binding
DoubleProperty.bindBidirectional(Property)
BidirctionalBindingDemo Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 11
Common Properties and Methods for Nodes
style: set a JavaFX CSS style
rotate: Rotate a node
NodeStyleRotateDemo Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 12
The Color Class
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 13
The Font Class
FontDemo Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 14
The Image Class
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 15
The ImageView Class
ShowImage Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 16
Layout Panes
JavaFX provides many types of panes for organizing nodes in a container.
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 17
FlowPane
ShowFlowPane Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 18
GridPane
ShowGridPane
Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 19
BorderPane
ShowBorderPane Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 20
HBox
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 21
VBox
ShowHBoxVBox Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 22
Shapes
JavaFX provides many shape classes
for drawing texts, lines, circles,
rectangles, ellipses, arcs, polygons,
and polylines.
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 23
Text
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 24
Text Example
ShowText Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 25
Line
ShowLine
Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 26
Rectangle
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 27
Rectangle Example
ShowRectangle Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 28
Circle
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 29
Ellipse
radiusX radiusY
(centerX, centerY)
ShowEllipse
Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 30
Arc
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 31
Arc Examples radiusY length
startAngle
0 degree
radiusX
(centerX, centerY)
–30° –50°
–20° 20°
( a ) N e g a ti v e sta r t in g a n g le – 3 0 ° a n d ( b ) N e g a ti v e sta r ti n g a n g l e – 5 0 °
n e g a ti v e s p a n n i n g a n g l e – 2 0 ° a n d p o sit iv e s p a n n i n g a n g l e 2 0 °
ShowArc Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 32
Polygon and Polyline
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 33
Polygon
T h e g e t t e r a n d s e t t e r m e th o d s fo r p ro p e rty v a lu e s a n d a g e tte r fo r p ro p e rty
ja v a fx .s c e n e .s h a p e .P o ly g o n its e lf a re p ro v id e d in th e c la s s , b u t o m itte d in th e U M L d ia g ra m fo r b re v ity .
+Polygon() C re a te s a n e m p ty p o ly g o n .
+Polygon(double... points) C re a te s a p o ly g o n w ith th e g iv e n p o in ts .
+getPoints(): R e tu rn s a lis t o f d o u b le v a lu e s a s x - a n d y -c o o rd in a te s o f th e p o in ts .
ObservableList<Double>
ShowPolygon Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 34
Case Study: The ClockPane Class
This study develops a class that displays a clock on a pane.
javafx.scene.layout.Panel T h e g e t t e r a n d s e t t e r m e th o d s fo r
th e s e d a ta f ie ld s a r e p r o v id e d in th e c la s s ,
b u t o m itte d in th e U M L d ia g r a m f o r b r e v it y .
C lo c k P a n e
-hour: int T h e h o u r in th e c lo c k .
-minute: int T h e m in u te in th e c lo c k .
-second: int
T h e s e c o n d in th e c lo c k .
+ClockPane() C o n s tru c ts a d e f a u lt c lo c k f o r th e c u r r e n t tim e .
+ClockPane(hour: int, minute: int, C o n s tru c ts a c lo c k w ith th e s p e c if ie d tim e .
second: int)
+setCurrentTime(): void S e ts h o u r , m in u te , a n d s e c o n d f o r c u r re n t tim e .
+setWidth(width: double): void S e ts c lo c k p a n e ’ s w id th a n d r e p a in t th e c lo c k ,
+setHeightTime(height: double): void S e ts c lo c k p a n e ’ s h e ig h t a n d r e p a in t th e c lo c k , ClockPane
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 35
Use the ClockPane Class
DisplayClock Run
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 36
JavaFX (latest version JavaFX2)
JavaFX can be programmed by Java commands or XML
commands (FXML) which Java can load.
JavaFX is built to support common touch gestures in mobile
devices.
There is a nice JavaFX designer called SceneBuilder to create
fancy layouts in FXML.
http://www.oracle.com/technetwork/java/javase/downloads/javafxs
cenebuilder-info-2157684.html
Install e(fx)clipse plugin from Eclipse Marketplace.
Separate user interface design from code.
Nov-16 S.C Cheung - Adapted from Liang, Introduction to Java Programming 37
