Introduction to JavaFX™ Technology-based Graphics & Animation

Richard BairChien YangStuart Marks

• Scenegraph• CSS• Media• Animation• Transitions• Futures

Agenda

2

3

Group

Image

Media

Group

Circle

Group

Image

Media

Group

Circle

4

• bounds• input events• transforms• effects• opacity

Node

5

6

Media

translateX: 100

rotate: 45

Circle

Group

• 0+ child Nodes• Order of nodes indicates painting order

• Blend modes

7

• CSS Stylesheets• Background fill• Width / Height

Scene

8

• Top-level container• Transparent, Undecorated, Decorated• Potentially represented by:

• JFrame on desktop• JApplet on web page• SVG player on mobile

• Stage Extensions

Stage

9

• Primary method of extending the Scene Graph• Simply override the create() method

• Return a Node of your choice

Custom Node

10

11

Group

Image

Media

CustomNode

Circle

• Arc• Circle• Ellipse• Line• Path• Polygon• Rectangle

• stroke• strokeWidth• fill• smooth

Shapes - Building Blocks

12

13

Demo

• 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

• 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

16

strokeWidth: 3 Stop { offset: 0, Color.rgb(0, 124, 175) }

Stop { offset: 1, Color.rgb(0, 63, 90) }

stroke: Color.BLACK

17

Demo

• 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

19

Demo

• 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

21

Example(0, 0)

(0, -10)

Controls and Layout

• Controls• Button• CheckBox• Label• ListView• ProgressBar• ProgressIndicator• ScrollBar• Slider• TextBox

• Layout• Flow• HBox + VBox• Panel• Stack

22

• Effects are placed on Nodes• Many standard built in

• DropShadow• ColorAdjust• BoxBlur• Glow• Reflection• more...

Effects

23

24

Demo

CSS

25

Text { font-family: "Helvetica"; font-size: 20pt;}

Selector

Declaration

Rule

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 }

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!

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/

CSS: ID selector

29

/* style.css */

Text#title { font-family: "Helvetica"; font-size: 20pt;}

// SomeClass.fx

Text { id: “title” content: “Hello World!”}

CSS: Style class selector

30

/* style.css */

Text.bold { font-family: "Helvetica"; font-weight: bold;}

// SomeClass.fx

Text { styleClass: “bold” content: “Hello World!”}

CSS: Pseudoclass Selector

31

/* style.css */

Text:hover { fill: red;}

// SomeClass.fx

Text { content: “Hello World!”}

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

CSS: style attribute of Node class

33

/* style.css */

Text:hover { fill: red;}

// SomeClass.fx

Text { content: “Hello World!”}

• 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

35

Demo

• Animation is a key feature of every rich graphics application platform

• There are two supported animation types in JavaFX• Keyframe animations• Transitions

Animation

36

37

� � �

� � � � � � � � � � � � � � � � � � � � � � � � � � �

38

Key Value Interpolator Interpolated Value

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

40

Demo

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

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

KeyFrame Animation Example (simplified)

Timeline {repeatCount: Timeline.INDEFINITEautoReverse: truekeyFrames: [

at (0s) { x => 0.0 },at (5s) { x => 300.0 tween Interpolator.LINEAR }

]}.play();

43

• 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

45

Demo

Simple Transition Example

TranslateTransition {repeatCount: Timeline.INDEFINITEautoReverse: truenode: ballduration: 5sfromX: 0toX: 300

}.play();

46

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

Nested Transition Example (2)

48

SequentialTransition {content: [

PauseTransition { duration: 1s },ParallelTransition {

content: [rotate360,scaleUp

]},fade

]}.play();

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

50

Demo

• Full hardware acceleration• 3D Transforms• 3D Model Imports• More Controls• More Layouts• Faster & Smaller

Futures

51

• TS-5575: Extreme GUI Makeover• Wednesday 9:45am Room 135

• TS-5578: JavaFX UI Controls• Thursday 9:30am Room 124

Also See

52

Richard Bairrichard.bair@sun.com

Chien Yangchien.yang@sun.com