Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 1
JavaFX Basics
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 2
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 chapter 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. 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 alibrary known as the Abstract Windows Toolkit (AWT). AWT isfine for developing simple graphical user interfaces, but not fordeveloping comprehensive GUI projects. In addition, AWT isprone to platform-specific bugs. The AWT user-interfacecomponents were replaced by a more robust, versatile, andflexible library known as Swing components. Swing componentsare painted directly on canvases using Java code. Swingcomponents depend less on the target platform and use less of thenative GUI resource. With the release of Java 8, Swing isreplaced 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
Installing JavaFX & Scene Builder
• e(fx)clipse is an extension for your Eclipse IDE
• Extensions like this can be installed using the "Install New
Software" wizard.
• Eclipse does not know about the location of the e(fx)clipse so you
need to add the repository as a software site.
• The address is:
http://download.eclipse.org/efxclipse/updates-released/1.2.0/site
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 5
Installing JavaFX & Scene Builder
• In the tree of installable features, check only the entry corresponding to your
release:
• e(fx)clipse - IDE
• Also, make sure the "Contact all update sites during install to find required
software" is checked.
• You may, however, install the FX Runtime feature into your IDE but we
strongly recommend composing your own target platform.
• When requested, restart Eclipse.
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 6
Installing JavaFX & Scene Builder• The JavaFX Scene Builder is available as a Windows package
(.msi) for the Windows platform, as a Debian package (.deb) or
.tar.gz file for the Linux platform, and as a disk image (.dmg) for
the Mac OS X platform.
• Download JavaFX Scene Builder from the Additional Resources
section of the Java SE Downloads page athttp://www.oracle.com/technetwork/java/javase/downloads/index.html
• By default, the JavaFX Scene Builder software is installed at
C:\Program Files\Oracle\JavaFX Scene Builder 2.0 on a Windows
platform. If you install JavaFX Scene Builder on a 64-bit
Windows machine, the default installation location is C:\Program
Files (x86)\Oracle\JavaFX Scene Builder 2.0.
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 7
Installing JavaFX & Scene Builder
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 8
Eclipse Configurations• We need to tell Eclipse to use JDK 8 and also where it will find
the Scene Builder:
1. Open the Eclipse Preferences and navigate to Java | Installed JREs.
2. Click Add..., select Standard VM and choose the installation Directory of
your JDK 8.
3. Remove the other JREs or JDKs so that the JDK 8 becomes the default.
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 9
Eclipse Configurations4. Navigate to Java | Compiler. Set the Compiler compliance level to 1.8.
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 10
Eclipse Configurations5. Navigate to the JavaFX preferences. Specify the path to your Scene
Builder executable.
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 11
Basic Structure of JavaFX
�Application
�Override the start(Stage) method
�Stage, Scene, and Nodes
RunMyJavaFX
RunMultipleStageDemo
Stage
Scene
Button
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 12
Basic Structure of JavaFXIt's like a theater play: The Stage is the main container which is
usually a Window with a border and the typical minimize,
maximize and close buttons. Inside the Stage you add a Scene
which can, of course, be switched out by another Scene. Inside the
Scene the actual JavaFX nodes like AnchorPane, TextBox, etc. are
added.
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 13
Example JavaFX Types
Classes
o JavaFX Main Class
• Extends JavaFX ‘Application’
• Contains main() and launch()
• launch() will initialise and call
start() which must be defined
o FXML
• XML based language
• Describes UI appearance
• Controlled by Scene Builder
UI Layouts
o Rootpane
• Base for UI scene
• Can have a menu bar
o AnchorPane
• Used to ‘anchor’ components
o SplitPane
o TableView
o GridPane
o TilePane
o Hbox
• Sets box wrapper to contain
horizontal components
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 14
JavaFX Classeso Stage
• Represents the main container and window
o Scene
• Adds features to Stage, representing FXML layouts
o FXMLLoader
• Handles parsing of FXML files into Java Class
• @FXML keyword links private Java variables to corresponding FXML
components• @FXML private TableView<person> personTable;
o JavaFX Collections
• Data Structures that have Event Listeners
• Can handle changes made in GUI automatically
• ObservableList is example of array with Listener
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 15
What is FXML?• FXML is an XML-based language that provides the structure for
building a user interface separate from the application logic of
your code. This separation of the presentation and application
logic is attractive to web developers because they can assemble a
user interface that leverages Java components without mastering
the code for fetching and filling in the data.
• FXML does not have a schema, but it does have a basic
predefined structure. What you can express in FXML, and how
it applies to constructing a scene graph, depends on the API of
the objects you are constructing. Because FXML maps directly
to Java, you can use the API documentation to understand what
elements and attributes are allowed. In general, most JavaFX
classes can be used as elements, and most Bean properties can
be used as attributes.
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 16
FXML and Scene Builder• Just as some developers prefer to work directly in the XML code, other
developers prefer to use a tool to author their XML. The same is true with
FXML.
• If you prefer to use a tool, or if you want to create a quick prototype to get
feedback, then you might prefer to use JavaFX Scene Builder.
• Scene Builder is a design tool that generates the FXML source code as you
define the user interface for your application. Scene Builder can help you to
quickly create a prototype for an interactive application that connects
components to the application logic.
• Because Scene Builder uses XML as a serialization format, the produced
FXML code is very clear and you can further edit FXML files, generated by
Scene Builder, in any text or XML editor.
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 17
Scene Builder
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 18
FXML UI Components
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 19
CSS Styling• Can style FXML features with CSS
• Edit appearance using controls for colour, background,
text and sizing
• Similar to using CSS with HTML
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 20
Advanced JavaFX Componentso FileChooser
• Opens Directory Browser
o TreeView
• Creates hierarchical list views for nest features
o HTMLEditor
• Advanced text editor with HTML features
o WebViewer
• Inbuilt web display
• Handles HTML5, CSS, JavaScript, DOM, SVG
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 21
Panes, UI Controls, and Shapes
RunButtonInPane
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 22
Display a Shape
This example displays a circle in the center of the pane.
RunShowCircle
(0, 0) X Axis
Y Axis
(x, y)
x
y
Java
Coordinate System
X Axis
Conventional
Coordinate System
(0, 0)
Y Axis
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 23
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.
RunShowCircleCentered
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 24
Binding Property:
getter, setter, and property getter
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 25
Common Properties and Methods
for Nodes
� style: set a JavaFX CSS style
� rotate: Rotate a node
RunNodeStyleRotateDemo
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 26
The Color Class
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 27
The Font Class
RunFontDemo
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 28
The Image Class
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 29
The ImageView Class
RunShowImage
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 30
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. 31
FlowPane
RunShowFlowPane
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 32
GridPane
Run
ShowGridPane
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 33
BorderPane
RunShowBorderPane
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 34
HBox
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 35
VBox
RunShowHBoxVBox
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 36
ShapesJavaFX 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. 37
Text
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 38
Text Example
RunShowText
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 39
Line
Run
ShowLine
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 40
Rectangle
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 41
Rectangle Example
RunShowRectangle
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 42
Circle
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 43
Ellipse
(centerX, centerY)
radiusY
radiusX
Run
ShowEllipse
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 44
Arc
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 45
Arc Examples
RunShowArc
(centerX, centerY)
radiusX
radiusY
length
startAngle
0 degree
(a) Negative starting angle –30° and
negative spanning angle –20° (b) Negative starting angle –50°
and positive spanning angle 20°
–30°
–20°
–50°
20°
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 46
Polygon and Polyline
RunShowArc
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 47
Polygon
RunShowPolygon
javafx.scene.shape.Polygon
+Polygon()
+Polygon(double... points)
+getPoints(): ObservableList<Double>
Creates an empty polygon.
Creates a polygon with the given points.
Returns a list of double values as x- and y-coordinates of the points.
The getter and setter methods for property values and a getter for property
itself are provided in the class, but omitted in the UML diagram for brevity.
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 48
Case Study: The ClockPane ClassThis case study develops a class that displays a clock on a
pane.
ClockPane
ClockPane
-hour: int
-minute: int
-second: int
+ClockPane()
+ClockPane(hour: int, minute: int, second: int)
+setCurrentTime(): void
+setWidth(width: double): void
+setHeightTime(height: double): void
javafx.scene.layout.Panel
The getter and setter methods for
these data fields are provided in the class, but omitted in the UML diagram for brevity.
The hour in the clock.
The minute in the clock.
The second in the clock.
Constructs a default clock for the current time.
Constructs a clock with the specified time.
Sets hour, minute, and second for current time. Sets clock pane’s width and repaint the clock,
Sets clock pane’s height and repaint the clock,