Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang,...
Transcript of Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang,...
![Page 1: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/1.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 1
Chapter 14 JavaFX Basics
![Page 2: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/2.jpg)
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.
![Page 3: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/3.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 3
Objectives To distinguish between JavaFX, Swing, and AWT (§14.2).
To write a simple JavaFX program and understand the relationship among stages,
scenes, and nodes (§14.3).
To create user interfaces using panes, UI controls, and shapes (§14.4).
To use binding properties to synchronize property values (§14.5).
To use the common properties style and rotate for nodes (§14.6).
To create colors using the Color class (§14.7).
To create fonts using the Font class (§14.8).
To create images using the Image class and to create image views using the
ImageView class (§14.9).
To layout nodes using Pane, StackPane, FlowPane, GridPane, BorderPane, HBox,
and VBox (§14.10).
To display text using the Text class and create shapes using Line, Circle, Rectangle,
Ellipse, Arc, Polygon, and Polyline (§14.11).
To develop the reusable GUI components ClockPane for displaying an analog clock
(§14.12).
![Page 4: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/4.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 4
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.
![Page 5: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/5.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 5
Basic Structure of JavaFX
Application
Override the start(Stage) method
Stage, Scene, and Nodes
RunMyJavaFX
RunMultipleStageDemo
Stage
Scene
Button
![Page 6: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/6.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 6
Panes, UI Controls, and Shapes
RunButtonInPane
![Page 7: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/7.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 7
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
![Page 8: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/8.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 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 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
![Page 9: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/9.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 9
Binding Property:
getter, setter, and property getter
![Page 10: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/10.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 10
Uni/Bidirectional Binding
RunBidirctionalBindingDemo
![Page 11: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/11.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 11
Common Properties and Methods
for Nodes
style: set a JavaFX CSS style
rotate: Rotate a node
RunNodeStyleRotateDemo
![Page 12: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/12.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 12
The Color Class
![Page 13: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/13.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 13
The Font Class
RunFontDemo
![Page 14: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/14.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 14
The Image Class
![Page 15: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/15.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 15
The ImageView Class
RunShowImage
![Page 16: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/16.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 16
Layout Panes
JavaFX provides many types of panes for organizing nodes
in a container.
![Page 17: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/17.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 17
FlowPane
RunShowFlowPane
![Page 18: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/18.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 18
GridPane
Run
ShowGridPane
![Page 19: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/19.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 19
BorderPane
RunShowBorderPane
![Page 20: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/20.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 20
HBox
![Page 21: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/21.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 21
VBox
RunShowHBoxVBox
![Page 22: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/22.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 22
ShapesJavaFX provides many shape classes for drawing texts,
lines, circles, rectangles, ellipses, arcs, polygons, and
polylines.
![Page 23: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/23.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 23
Text
![Page 24: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/24.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 24
Text Example
RunShowText
![Page 25: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/25.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 25
Line
Run
ShowLine
![Page 26: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/26.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 26
Rectangle
![Page 27: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/27.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 27
Rectangle Example
RunShowRectangle
![Page 28: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/28.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 28
Circle
![Page 29: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/29.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 29
Ellipse
(centerX, centerY)
radiusY
radiusX
Run
ShowEllipse
![Page 30: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/30.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 30
Arc
![Page 31: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/31.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 31
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°
![Page 32: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/32.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 32
Polygon and Polyline
RunShowArc
![Page 33: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/33.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 33
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.
![Page 34: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/34.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 34
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 -char token +getToken +setToken +paintComponet +mouseClicked
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,
![Page 35: Chapter 14 JavaFX Basics - md.withcs.netmd.withcs.net/attach/2015java.14slide.pdf · Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All rights](https://reader034.fdocuments.us/reader034/viewer/2022052122/5b3cbd037f8b9a895a8d80b4/html5/thumbnails/35.jpg)
Liang, Introduction to Java Programming, Tenth Edition, (c) 2015 Pearson Education, Inc. All
rights reserved. 35
Use the ClockPane Class
RunDisplayClock