![Page 1: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/1.jpg)
Introduction to JavaFX™ Technology-based Graphics & Animation
Richard BairChien YangStuart Marks
![Page 2: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/2.jpg)
• Scenegraph• CSS• Media• Animation• Transitions• Futures
Agenda
2
![Page 3: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/3.jpg)
3
Group
Image
Media
Group
Circle
![Page 4: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/4.jpg)
Group
Image
Media
Group
Circle
4
![Page 5: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/5.jpg)
• bounds• input events• transforms• effects• opacity
Node
5
![Page 6: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/6.jpg)
6
Media
translateX: 100
rotate: 45
Circle
![Page 7: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/7.jpg)
Group
• 0+ child Nodes• Order of nodes indicates painting order
• Blend modes
7
![Page 8: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/8.jpg)
• CSS Stylesheets• Background fill• Width / Height
Scene
8
![Page 9: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/9.jpg)
• Top-level container• Transparent, Undecorated, Decorated• Potentially represented by:
• JFrame on desktop• JApplet on web page• SVG player on mobile
• Stage Extensions
Stage
9
![Page 10: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/10.jpg)
• Primary method of extending the Scene Graph• Simply override the create() method
• Return a Node of your choice
Custom Node
10
![Page 11: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/11.jpg)
11
Group
Image
Media
CustomNode
Circle
![Page 12: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/12.jpg)
• Arc• Circle• Ellipse• Line• Path• Polygon• Rectangle
• stroke• strokeWidth• fill• smooth
Shapes - Building Blocks
12
![Page 13: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/13.jpg)
13
Demo
![Page 14: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/14.jpg)
• Colors• 150+ built in colors (all the HTML & CSS built in values)• Color.web(“#aabbcc”)• Color.web(“blue”)• Color.rgb(128, 222, 21)
Colors
14
![Page 15: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/15.jpg)
• startX, startY, endX, endY• Define the direction of the gradient• On the unit square
• Stops define each step in the gradient. Each stop• Has an offset between 0...1• Has a Color
Linear Gradients
15
![Page 16: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/16.jpg)
16
strokeWidth: 3 Stop { offset: 0, Color.rgb(0, 124, 175) }
Stop { offset: 1, Color.rgb(0, 63, 90) }
stroke: Color.BLACK
![Page 17: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/17.jpg)
17
Demo
![Page 18: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/18.jpg)
• Image represents an in-memory Image• ImageView is a Node containing an Image• Image loaded synchronously or asynchronously
• For asynch, can specify a placeholder image
• Both ImageView and Image can scale• Preserve ratio• Fit within a specific width/height• When fit used on Image, keeps smaller image in memory
Images: Image and ImageView Classes
18
![Page 19: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/19.jpg)
19
Demo
![Page 20: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/20.jpg)
• x, y, TextOrigin• By default, text positioned such that (x, y) is left
baseline• Fonts can be specified on Text• Favor “fill” over “stroke”• Supports multiline text• Use alignment to align multiline text• To center text, compute the center via layout bounds
Text Node
20
![Page 21: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/21.jpg)
21
Example(0, 0)
(0, -10)
![Page 22: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/22.jpg)
Controls and Layout
• Controls• Button• CheckBox• Label• ListView• ProgressBar• ProgressIndicator• ScrollBar• Slider• TextBox
• Layout• Flow• HBox + VBox• Panel• Stack
22
![Page 23: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/23.jpg)
• Effects are placed on Nodes• Many standard built in
• DropShadow• ColorAdjust• BoxBlur• Glow• Reflection• more...
Effects
23
![Page 24: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/24.jpg)
24
Demo
![Page 25: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/25.jpg)
CSS
25
Text { font-family: "Helvetica"; font-size: 20pt;}
Selector
Declaration
Rule
![Page 26: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/26.jpg)
Cascading Style Sheets (CSS)
26
• Use JavaFX class name in selectors• Selectors can also have id, style class, pseudoclass
• Use JavaFX variables as property in declaration• Rectangle { fill: red }
• Styleable property can be a Skin variable• Use Boolean state variables as pseudoclasses
• Rectangle:hover { fill: red }
![Page 27: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/27.jpg)
Cascading Style Sheets (CSS)
27
• Controls are styled through skin• .hotbutton { base: red }
• Must include stylesheet in stylesheets of Scene:• stylesheets: [ "{__DIR__}style.css" ]
• Canʼt style bound variables!
![Page 28: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/28.jpg)
Cascading Style Sheets (CSS)
28
• Useful (not definitive) links • http://forums.sun.com/thread.jspa?threadID=5357325• https://javacss.dev.java.net/
• Samples• http://www.javafx.com/samples/Sudoku/• http://www.javafx.com/samples/CSSFun/
![Page 29: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/29.jpg)
CSS: ID selector
29
/* style.css */
Text#title { font-family: "Helvetica"; font-size: 20pt;}
// SomeClass.fx
Text { id: “title” content: “Hello World!”}
![Page 30: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/30.jpg)
CSS: Style class selector
30
/* style.css */
Text.bold { font-family: "Helvetica"; font-weight: bold;}
// SomeClass.fx
Text { styleClass: “bold” content: “Hello World!”}
![Page 31: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/31.jpg)
CSS: Pseudoclass Selector
31
/* style.css */
Text:hover { fill: red;}
// SomeClass.fx
Text { content: “Hello World!”}
![Page 32: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/32.jpg)
CSS: Some examples of valid selectors
32
TextBox Selects instances of TextBox
.bold Selects nodes with styleCass “bold”
#title Selects nodes with id “title”
Rectangle.rounded Selects Rectangles with styleClass “rounded”
#tree.folder Selects nodes with id “tree” and styleClass “folder”
TextBox:focused Selects instances of TextBox when focused
![Page 33: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/33.jpg)
CSS: style attribute of Node class
33
/* style.css */
Text:hover { fill: red;}
// SomeClass.fx
Text { content: “Hello World!”}
![Page 34: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/34.jpg)
• JavaFX supports both visual and audio media• Cross platform JavaFX Media file (fxm, mp3)• Also plays native formats (mov, wmv)• Media class represents a media file• MediaPlayer plays a Media file• MediaView is the Node which displays the Media• No built in Movie playing Control (yet!)
Media
34
![Page 35: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/35.jpg)
35
Demo
![Page 36: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/36.jpg)
• Animation is a key feature of every rich graphics application platform
• There are two supported animation types in JavaFX• Keyframe animations• Transitions
Animation
36
![Page 37: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/37.jpg)
37
� � �
� � � � � � � � � � � � � � � � � � � � � � � � � � �
![Page 38: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/38.jpg)
38
Key Value Interpolator Interpolated Value
![Page 39: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/39.jpg)
KeyFrame Animation
• Timeline + KeyFrame + Interpolator• Just modifies the values of variables over time• Doesnʼt actually do any animation
• How to animate?• Arrange for KeyFrame to modify an interesting Node variable
• x, rotate, opacity, fill, ...
• Or bind a Node variable to a KeyFrame variable• Can animate Group variables to animate a hierarchy
39
![Page 40: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/40.jpg)
40
Demo
![Page 41: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/41.jpg)
KeyFrame Animation Setup
var x:Number;
def ball = Circle {fill: Color.REDradius: 10translateX: bind xtranslateY: 100 };
Stage {title: "KeyFrame Example"scene: Scene {
width: 300 height: 200fill: Color.WHITEcontent: ball
}}
41
![Page 42: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/42.jpg)
KeyFrame Animation Example
Timeline {repeatCount: Timeline.INDEFINITEautoReverse: truekeyFrames: [
KeyFrame {time: 0svalues: x => 0.0
},KeyFrame {
time: 5svalues: x => 300.0 tween Interpolator.LINEAR
}]
}.play();
42
![Page 43: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/43.jpg)
KeyFrame Animation Example (simplified)
Timeline {repeatCount: Timeline.INDEFINITEautoReverse: truekeyFrames: [
at (0s) { x => 0.0 },at (5s) { x => 300.0 tween Interpolator.LINEAR }
]}.play();
43
![Page 44: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/44.jpg)
• Predefined, single-purpose animations• extends Timeline; can be nested and composed
• Leaf transitions:• Fade, Path, Pause, Rotate, Scale, Translate
• Can specify to, from, and by values
• Container transitions:• Parallel, Sequential
• Replace nested transitions in Java 1.1 and earlier
Transitions
44
![Page 45: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/45.jpg)
45
Demo
![Page 46: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/46.jpg)
Simple Transition Example
TranslateTransition {repeatCount: Timeline.INDEFINITEautoReverse: truenode: ballduration: 5sfromX: 0toX: 300
}.play();
46
![Page 47: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/47.jpg)
Nested Transition Example (1)
def rotate360 = RotateTransition {duration: 3snode: targetbyAngle: 360 }
def scaleUp = ScaleTransition {duration: 4snode: targetbyX: 2 byY: 2 }
def fade = FadeTransition {duration: 5snode: targetfromValue: 1.0toValue: 0.1 }
47
![Page 48: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/48.jpg)
Nested Transition Example (2)
48
SequentialTransition {content: [
PauseTransition { duration: 1s },ParallelTransition {
content: [rotate360,scaleUp
]},fade
]}.play();
![Page 49: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/49.jpg)
Animation On A Path
def path = Path {elements: [
MoveTo { ... },CubicCurveTo { ... }
]}
PathTransition {node: pointerpath: AnimationPath.createFromPath(path)orientation: OrientationType.ORTHOGONAL_TO_TANGENTduration: 5srepeatCount: Timeline.INDEFINITEautoReverse: true
}.play();
49
![Page 50: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/50.jpg)
50
Demo
![Page 51: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/51.jpg)
• Full hardware acceleration• 3D Transforms• 3D Model Imports• More Controls• More Layouts• Faster & Smaller
Futures
51
![Page 52: Introduction to JavaFX™ Technology-based …...•Top-level container • Transparent, Undecorated, Decorated • Potentially represented by: • JFrame on desktop • JApplet on](https://reader034.vdocuments.us/reader034/viewer/2022042923/5f717002ab9675719d2999ff/html5/thumbnails/52.jpg)
• TS-5575: Extreme GUI Makeover• Wednesday 9:45am Room 135
• TS-5578: JavaFX UI Controls• Thursday 9:30am Room 124
Also See
52