SlideShare a Scribd company logo

Java Rich Clients with JavaFX 2.0

•
R
Richard Bair

The document details the creation of animations in JavaFX 2.0, explaining two primary methods: transitions and timelines. Various types of transitions, such as fade, fill, rotate, and scale transitions are discussed, including their implementation through builders. It also includes examples of animating car images and clouds along a track using JavaFX's timeline and keyframes.

Technology
1 of 40
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
JAVAFX 2.0 Rich Client Applications Richard Bair & Jasper Potts
0 100 200 300 400 100 200 300 400 500 600 700 800 900 1000 Swing JavaFX (fullspeed) JavaFX
•Two ways of creating animation in JavaFX • Transitions (Action based animation) • Timelines (Key Frame based animation) ANIMATION
• FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
• FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
• FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS FadeTransitionBuilder.create() .duration(Duration.seconds(4)) .node(rect) .fromValue(1) .toValue(0.2) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build() .play();
• FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
•FadeTransition •FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS FillTransitionBuilder.create() .duration(Duration.seconds(3)) .shape(rect) .fromValue(Color.RED) .toValue(Color.DODGERBLUE) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build() .play();
• FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
•FadeTransition •FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS ParallelTransitionBuilder.create() .node(rect) .children( FadeTransitionBuilder.create() ....... .build(), TranslateTransitionBuilder.create() ....... .build(), RotateTransitionBuilder.create() ....... .build(), ScaleTransitionBuilder.create() ....... .build(), ) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build();
• FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
•FadeTransition •FillTransition •ParallelTransition •PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS Path path = PathBuilder.create() .elements( new MoveTo(20,20), new CubicCurveTo(380, 0, 380, 120, 200, 120), new CubicCurveTo(0, 120, 0, 240, 380, 240) ) .build(); .build();PathTransitionBuilder .create() .duration(Duration.seconds(4)) .path(path) .node(rect) .orientation( OrientationType.ORTHOGONAL_TO_TANGENT) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build();
• FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
•FadeTransition •FillTransition •ParallelTransition •PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS SequentialTransitionBuilder.create() .node(rect) .children( TranslateTransitionBuilder.create() ....... .build(), PauseTransitionBuilder.create() .duration(Duration.seconds(2)) .build(), TranslateTransitionBuilder.create() ....... .build() ) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build().play();
•FadeTransition •FillTransition •ParallelTransition •PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS PauseTransitionBuilder.create() .duration(Duration.seconds(1)) .onFinished(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent t) { text.setText("Bang!"); } }) .build().play();
• FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
•FadeTransition •FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS RotateTransitionBuilder.create() .node(rect) .duration(Duration.seconds(4)) .fromAngle(0) .toAngle(720) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build().play();
• FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
•FadeTransition •FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS ScaleTransitionBuilder.create() .node(rect) .duration(Duration.seconds(4)) .toX(3) .toY(3) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build().play();
• FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
•FadeTransition •FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS SequentialTransitionBuilder.create() .node(rect) .children( RotateTransitionBuilder.create() ....... .build(), ScaleTransitionBuilder.create() ....... .build(), TranslateTransitionBuilder.create() ....... .build(), FadeTransitionBuilder.create() ....... .build() ) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build().play();
• FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
•FadeTransition •FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS StrokeTransitionBuilder.create() .duration(Duration.seconds(3)) .shape(rect) .fromValue(Color.RED) .toValue(Color.DODGERBLUE) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build().play();
• FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
•FadeTransition •FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS TranslateTransitionBuilder.create() .duration(Duration.seconds(4)) .node(circle) .fromX(20) .toX(380) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build().play();
• FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
•Timeline animation can do anything transitions can do and much more TIMELINE ANIMATION
TimelineBuilder.create() .keyFrames( ) .build().play(); ............ BASICTIMELINE
TimelineBuilder.create() .keyFrames( ) .build().play(); ............ ImageView sedan = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("sedan-s.png"))) .translateX(10).translateY(110-27).build(); ImageView suv = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("suv-s.png"))) .translateX(10).translateY(140-27).build(); ImageView truck = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("truck-s.png"))) .translateX(10).translateY(170-27).build(); ImageView van = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("van-s.png"))) .translateX(10).translateY(200-27).build(); ............ CREATE CAR IMAGEVIEWS
TimelineBuilder.create() .keyFrames( ) .build().play(); // DRIVING CARS ALONG TRACK new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(sedan.translateXProperty(), TRACK_LENGTH, accelerate)), new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(suv.translateXProperty(), TRACK_LENGTH, accelerate)), new KeyFrame( Duration.seconds(5), new KeyValue(truck.translateXProperty(), TRACK_LENGTH, Interpolator.SPLINE(0.698,0.055,0.838,0.310))), new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(van.translateXProperty(), TRACK_LENGTH, accelerate)), ............ ImageView sedan = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("sedan-s.png"))) .translateX(10).translateY(110-27).build(); ImageView suv = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("suv-s.png"))) .translateX(10).translateY(140-27).build(); ImageView truck = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("truck-s.png"))) .translateX(10).translateY(170-27).build(); ImageView van = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("van-s.png"))) .translateX(10).translateY(200-27).build(); ............ ADD CAR KEYFRAMES
Interpolator.SPLINE(0.698,0.055,0.838,0.310) ACCELERATION CURVE
TimelineBuilder.create() .keyFrames( ) .build().play(); ............ Rotate truckWheelie = new Rotate(0,11,21); truck.getTransforms().add(truckWheelie); ............ ImageView sedan = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("sedan-s.png"))) .translateX(10).translateY(110-27).build(); ImageView suv = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("suv-s.png"))) .translateX(10).translateY(140-27).build(); ImageView truck = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("truck-s.png"))) .translateX(10).translateY(170-27).build(); ImageView van = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("van-s.png"))) .translateX(10).translateY(200-27).build(); ADDTRUCK ROTATETRANSFORM
TimelineBuilder.create() .keyFrames( ) .build().play(); ............ // TRUCK WHEELIE new KeyFrame( Duration.seconds(3), new KeyValue(truckWheelie.angleProperty(), 0)), new KeyFrame( Duration.seconds(3.5), new KeyValue(truckWheelie.angleProperty(), -15)), ............ Rotate truckWheelie = new Rotate(0,11,21); truck.getTransforms().add(truckWheelie); ............ ImageView sedan = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("sedan-s.png"))) .translateX(10).translateY(110-27).build(); ImageView suv = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("suv-s.png"))) .translateX(10).translateY(140-27).build(); ImageView truck = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("truck-s.png"))) .translateX(10).translateY(170-27).build(); ImageView van = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("van-s.png"))) .translateX(10).translateY(200-27).build(); ANIMATETRUCK WHEELIE
TimelineBuilder.create() .keyFrames( ) .build().play(); ............ // CLOUDS new KeyFrame( Duration.seconds(30), new KeyValue(cloud1.translateXProperty(), TRACK_LENGTH*0.8)), new KeyFrame( Duration.seconds(30), new KeyValue(cloud2.translateXProperty(), TRACK_LENGTH*0.1)), new KeyFrame( Duration.seconds(30), new KeyValue(cloud3.translateXProperty(), TRACK_LENGTH*0.3)) private static final String CLOUD = "M44.618,14.363c0.504-0.8,0.795-1.696,0.795-2.647c0-3.333-3.476-6.034-7.765-6.034"+ "c-0.213,0-0.422,0.012-0.63,0.025c-0.268-2.93-4.914-5.265-10.623-5.265c-5.882,0-10.65,2.475-10.65,5.529"+ "c0,0.427,0.102,0.841,0.279,1.24c-4.767,0.863-8.207,3.293-8.207,6.163c0,0.21,0.022,0.417,0.058,0.622"+ "c-4.088,0.38-7.27,3.302-7.27,6.855c0,3.81,3.659,6.898,8.173,6.898c0.874,0,1.715-0.118,2.504-0.333"+ "c2.808,1.431,7.161,2.353,12.062,2.353c4.689,0,8.881-0.844,11.694-2.169c0.712,0.097,1.447,0.149,2.2,0.149"+ "c6.187,0,11.202-3.423,11.202-7.645C48.442,17.814,46.958,15.765,44.618,14.363z"; SVGPath cloud1 = SVGPathBuilder.create().content(CLOUD).fill(Color.WHITE) .translateX(TRACK_LENGTH*0.1).translateY(10).build(); SVGPath cloud2 = SVGPathBuilder.create().content(CLOUD).fill(Color.WHITE) .translateX(TRACK_LENGTH*0.9).translateY(5).build(); SVGPath cloud3 = SVGPathBuilder.create().content(CLOUD).fill(Color.WHITE) .translateX(TRACK_LENGTH*0.6).translateY(15).build(); ............ ADD & ANIMATE CLOUDS
TimelineBuilder.create() .keyFrames( ) .build().play(); // DRIVING CARS ALONG TRACK new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(sedan.translateXProperty(), TRACK_LENGTH, accelerate)), new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(suv.translateXProperty(), TRACK_LENGTH, accelerate)), new KeyFrame( Duration.seconds(5), new KeyValue(truck.translateXProperty(), TRACK_LENGTH, Interpolator.SPLINE(0.698,0.055,0.838,0.310))), new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(van.translateXProperty(), TRACK_LENGTH, accelerate)), // TRUCK WHEELIE new KeyFrame( Duration.seconds(3), new KeyValue(truckWheelie.angleProperty(), 0)), new KeyFrame( Duration.seconds(3.5), new KeyValue(truckWheelie.angleProperty(), -15)), // CLOUDS new KeyFrame( Duration.seconds(30), new KeyValue(cloud1.translateXProperty(), TRACK_LENGTH*0.8)), new KeyFrame( Duration.seconds(30), new KeyValue(cloud2.translateXProperty(), TRACK_LENGTH*0.1)), new KeyFrame( Duration.seconds(30), new KeyValue(cloud3.translateXProperty(), TRACK_LENGTH*0.3)) ............ COMPLETETIMELINE
TimelineBuilder.create() .keyFrames( ) .build().play(); // DRIVING CARS ALONG TRACK new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(sedan.translateXProperty(), TRACK_LENGTH, accelerate)), new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(suv.translateXProperty(), TRACK_LENGTH, accelerate)), new KeyFrame( Duration.seconds(5), new KeyValue(truck.translateXProperty(), TRACK_LENGTH, Interpolator.SPLINE(0.698,0.055,0.838,0.310))), new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(van.translateXProperty(), TRACK_LENGTH, accelerate)), // TRUCK WHEELIE new KeyFrame( Duration.seconds(3), new KeyValue(truckWheelie.angleProperty(), 0)), new KeyFrame( Duration.seconds(3.5), new KeyValue(truckWheelie.angleProperty(), -15)), // CLOUDS new KeyFrame( Duration.seconds(30), new KeyValue(cloud1.translateXProperty(), TRACK_LENGTH*0.8)), new KeyFrame( Duration.seconds(30), new KeyValue(cloud2.translateXProperty(), TRACK_LENGTH*0.1)), new KeyFrame( Duration.seconds(30), new KeyValue(cloud3.translateXProperty(), TRACK_LENGTH*0.3)) ............ COMPLETETIMELINE
•You can apply effects to any node •Effects can be combined using Blend effect •Available Effects: EFFECTS • Blend • Bloom • BoxBlur • ColorAdjust • DisplacementMap • DropShadow • GaussianBlur • Glow • InnerShadow • Lighting • MotionBlur • PerspectiveTransform • Reflection • SepiaTone
Here is how to create dynamic text with a recessed effect applied in realtime. RECESSEDTEXT
Text label = TextBuilder.create() .font(Font.font("Arial Black", 72)) .style("-fx-fill: linear-gradient(from 0% 0% to 0% 100%, #bebebe 0%, #aaaaaa 100%);") .text("Recessed") .build(); TextField textField = TextFieldBuilder.create() .text("Recessed") .build(); label.textProperty().bind(textField.textProperty()); Scene scene = new Scene(VBoxBuilder.create() .spacing(20) .padding(new Insets(30)) .children(label, textField) .style("-fx-background-color: linear-gradient(from 0% 0% to 0% 100%, #cacaca 0%, #616161 100%);") .prefWidth(800) .build());
Effect recessed = BlendBuilder.create() .mode(BlendMode.MULTIPLY) .bottomInput( DropShadowBuilder.create() .color(Color.rgb(255,255,255,0.5)) .offsetX(1).offsetY(1) .radius(0) .build() ) .topInput( InnerShadowBuilder.create() .color(Color.rgb(0,0,0,0.7)) .offsetX(2).offsetY(2) .radius(5) .build() ) .build(); label.setEffect(recessed)

More Related Content

PDF
Exercising equipment
bestmadeinkorea korea
 
PDF
Gaming JavaFX
Richard Bair
 
PDF
Practical Experience Building JavaFX Rich Clients
Richard Bair
 
PDF
JavaFX Deployment
Richard Bair
 
PDF
Building Amazing Applications with JavaFX
Richard Bair
 
PDF
JavaFX In Practice
Richard Bair
 
PDF
JavaFX 101
Richard Bair
 
PDF
From Shabby to Chic
Richard Bair
 
Exercising equipment
bestmadeinkorea korea
 
Gaming JavaFX
Richard Bair
 
Practical Experience Building JavaFX Rich Clients
Richard Bair
 
JavaFX Deployment
Richard Bair
 
Building Amazing Applications with JavaFX
Richard Bair
 
JavaFX In Practice
Richard Bair
 
JavaFX 101
Richard Bair
 
From Shabby to Chic
Richard Bair
 

Similar to Java Rich Clients with JavaFX 2.0 (20)

PDF
RxSwiftを用いたアプリ開発の実践
GOMI NINGEN
 
PPTX
Vertica the convertro way
Zvika Gutkin
 
ODP
Javafx
Dwarakanath Jagadeesan
 
PPTX
CSS3 TTA (Transform Transition Animation)
창석 한
 
PDF
MongoUK 2011 - Rplacing RabbitMQ with MongoDB
Boxed Ice
 
PDF
Starting Core Animation
John Wilker
 
PPTX
Advanced RxJS: Animations
Ben Lesh
 
PPTX
Java Core | JavaFX 2.0: Great User Interfaces in Java | Simon Ritter
JAX London
 
PPTX
Servlets
Bala Murugan
 
PDF
Coscup
宇宣 賴
 
POTX
Apache Spark Streaming: Architecture and Fault Tolerance
Sachin Aggarwal
 
PPT
Servlets
Sasidhar Kothuru
 
PPT
Hive introduction 介绍
ablozhou
 
KEY
Iagc2
Lee Lundrigan
 
KEY
Interactive Graphics
Blazing Cloud
 
PPTX
Reactive Spring 5
Corneil du Plessis
 
PPTX
RESTful modules in zf2
Corley S.r.l.
 
PDF
XNA L04–Primitives, IndexBuffer and VertexBuffer
Mohammad Shaker
 
PDF
My internship presentation at WSO2
Prabhath Suminda
 
KEY
Adding Riak to your NoSQL Bag of Tricks
siculars
 
RxSwiftを用いたアプリ開発の実践
GOMI NINGEN
 
Vertica the convertro way
Zvika Gutkin
 
Javafx
Dwarakanath Jagadeesan
 
CSS3 TTA (Transform Transition Animation)
창석 한
 
MongoUK 2011 - Rplacing RabbitMQ with MongoDB
Boxed Ice
 
Starting Core Animation
John Wilker
 
Advanced RxJS: Animations
Ben Lesh
 
Java Core | JavaFX 2.0: Great User Interfaces in Java | Simon Ritter
JAX London
 
Servlets
Bala Murugan
 
Coscup
宇宣 賴
 
Apache Spark Streaming: Architecture and Fault Tolerance
Sachin Aggarwal
 
Servlets
Sasidhar Kothuru
 
Hive introduction 介绍
ablozhou
 
Iagc2
Lee Lundrigan
 
Interactive Graphics
Blazing Cloud
 
Reactive Spring 5
Corneil du Plessis
 
RESTful modules in zf2
Corley S.r.l.
 
XNA L04–Primitives, IndexBuffer and VertexBuffer
Mohammad Shaker
 
My internship presentation at WSO2
Prabhath Suminda
 
Adding Riak to your NoSQL Bag of Tricks
siculars
 
Ad

Recently uploaded (20)

PPTX
ChatGPT's Deck on The Enduring Legacy of Fax Machines
Greg Swan
 
PDF
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PDF
DevOps & Developer Experience Summer BBQ
AUGNYC
 
PDF
Revolutionize Operations with Intelligent IoT Monitoring and Control
Rejig Digital
 
PPTX
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
PPTX
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira Júnior
 
PDF
Automating ArcGIS Content Discovery with FME: A Real World Use Case
Safe Software
 
PDF
Chapter 1 Introduction to CV and IP Lecture Note.pdf
Getnet Tigabie Askale -(GM)
 
PDF
This slide provides an overview Technology
mineshkharadi333
 
PDF
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
PPTX
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
sujalchauhan1305
 
PDF
CIFDAQ'S Market Insight: BTC to ETH money in motion
CIFDAQ
 
PDF
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
PDF
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
PDF
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
PPTX
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
PDF
Structs to JSON: How Go Powers REST APIs
Emily Achieng
 
PDF
The Evolution of KM Roles (Presented at Knowledge Summit Dublin 2025)
Enterprise Knowledge
 
PDF
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
ChatGPT's Deck on The Enduring Legacy of Fax Machines
Greg Swan
 
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
DevOps & Developer Experience Summer BBQ
AUGNYC
 
Revolutionize Operations with Intelligent IoT Monitoring and Control
Rejig Digital
 
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
Comunidade Salesforce São Paulo - Desmistificando o Omnistudio (Vlocity)
Francisco Vieira Júnior
 
Automating ArcGIS Content Discovery with FME: A Real World Use Case
Safe Software
 
Chapter 1 Introduction to CV and IP Lecture Note.pdf
Getnet Tigabie Askale -(GM)
 
This slide provides an overview Technology
mineshkharadi333
 
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
sujalchauhan1305
 
CIFDAQ'S Market Insight: BTC to ETH money in motion
CIFDAQ
 
SparkLabs Primer on Artificial Intelligence 2025
SparkLabs Group
 
Using Anchore and DefectDojo to Stand Up Your DevSecOps Function
Anchore
 
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
What-is-the-World-Wide-Web -- Introduction
tonifi9488
 
Structs to JSON: How Go Powers REST APIs
Emily Achieng
 
The Evolution of KM Roles (Presented at Knowledge Summit Dublin 2025)
Enterprise Knowledge
 
Data_Analytics_vs_Data_Science_vs_BI_by_CA_Suvidha_Chaplot.pdf
CA Suvidha Chaplot
 
Ad

Java Rich Clients with JavaFX 2.0

  • 1. JAVAFX 2.0 Rich Client Applications Richard Bair & Jasper Potts
  • 2. 0 100 200 300 400 100 200 300 400 500 600 700 800 900 1000 Swing JavaFX (fullspeed) JavaFX
  • 3. •Two ways of creating animation in JavaFX • Transitions (Action based animation) • Timelines (Key Frame based animation) ANIMATION
  • 4. • FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
  • 5. • FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
  • 6. • FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS FadeTransitionBuilder.create() .duration(Duration.seconds(4)) .node(rect) .fromValue(1) .toValue(0.2) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build() .play();
  • 7. • FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
  • 8. •FadeTransition •FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS FillTransitionBuilder.create() .duration(Duration.seconds(3)) .shape(rect) .fromValue(Color.RED) .toValue(Color.DODGERBLUE) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build() .play();
  • 9. • FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
  • 10. •FadeTransition •FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS ParallelTransitionBuilder.create() .node(rect) .children( FadeTransitionBuilder.create() ....... .build(), TranslateTransitionBuilder.create() ....... .build(), RotateTransitionBuilder.create() ....... .build(), ScaleTransitionBuilder.create() ....... .build(), ) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build();
  • 11. • FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
  • 12. •FadeTransition •FillTransition •ParallelTransition •PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS Path path = PathBuilder.create() .elements( new MoveTo(20,20), new CubicCurveTo(380, 0, 380, 120, 200, 120), new CubicCurveTo(0, 120, 0, 240, 380, 240) ) .build(); .build();PathTransitionBuilder .create() .duration(Duration.seconds(4)) .path(path) .node(rect) .orientation( OrientationType.ORTHOGONAL_TO_TANGENT) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build();
  • 13. • FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
  • 14. •FadeTransition •FillTransition •ParallelTransition •PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS SequentialTransitionBuilder.create() .node(rect) .children( TranslateTransitionBuilder.create() ....... .build(), PauseTransitionBuilder.create() .duration(Duration.seconds(2)) .build(), TranslateTransitionBuilder.create() ....... .build() ) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build().play();
  • 15. •FadeTransition •FillTransition •ParallelTransition •PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS PauseTransitionBuilder.create() .duration(Duration.seconds(1)) .onFinished(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent t) { text.setText("Bang!"); } }) .build().play();
  • 16. • FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
  • 17. •FadeTransition •FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS RotateTransitionBuilder.create() .node(rect) .duration(Duration.seconds(4)) .fromAngle(0) .toAngle(720) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build().play();
  • 18. • FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
  • 19. •FadeTransition •FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS ScaleTransitionBuilder.create() .node(rect) .duration(Duration.seconds(4)) .toX(3) .toY(3) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build().play();
  • 20. • FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
  • 21. •FadeTransition •FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS SequentialTransitionBuilder.create() .node(rect) .children( RotateTransitionBuilder.create() ....... .build(), ScaleTransitionBuilder.create() ....... .build(), TranslateTransitionBuilder.create() ....... .build(), FadeTransitionBuilder.create() ....... .build() ) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build().play();
  • 22. • FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
  • 23. •FadeTransition •FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS StrokeTransitionBuilder.create() .duration(Duration.seconds(3)) .shape(rect) .fromValue(Color.RED) .toValue(Color.DODGERBLUE) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build().play();
  • 24. • FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
  • 25. •FadeTransition •FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS TranslateTransitionBuilder.create() .duration(Duration.seconds(4)) .node(circle) .fromX(20) .toX(380) .cycleCount(Timeline.INDEFINITE) .autoReverse(true) .build().play();
  • 26. • FadeTransition • FillTransition • ParallelTransition • PathTransition • PauseTransition • RotateTransition • ScaleTransition • SequentialTransition • StrokeTransition • TranslateTransition TRANSITIONS
  • 27. •Timeline animation can do anything transitions can do and much more TIMELINE ANIMATION
  • 29. TimelineBuilder.create() .keyFrames( ) .build().play(); ............ ImageView sedan = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("sedan-s.png"))) .translateX(10).translateY(110-27).build(); ImageView suv = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("suv-s.png"))) .translateX(10).translateY(140-27).build(); ImageView truck = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("truck-s.png"))) .translateX(10).translateY(170-27).build(); ImageView van = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("van-s.png"))) .translateX(10).translateY(200-27).build(); ............ CREATE CAR IMAGEVIEWS
  • 30. TimelineBuilder.create() .keyFrames( ) .build().play(); // DRIVING CARS ALONG TRACK new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(sedan.translateXProperty(), TRACK_LENGTH, accelerate)), new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(suv.translateXProperty(), TRACK_LENGTH, accelerate)), new KeyFrame( Duration.seconds(5), new KeyValue(truck.translateXProperty(), TRACK_LENGTH, Interpolator.SPLINE(0.698,0.055,0.838,0.310))), new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(van.translateXProperty(), TRACK_LENGTH, accelerate)), ............ ImageView sedan = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("sedan-s.png"))) .translateX(10).translateY(110-27).build(); ImageView suv = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("suv-s.png"))) .translateX(10).translateY(140-27).build(); ImageView truck = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("truck-s.png"))) .translateX(10).translateY(170-27).build(); ImageView van = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("van-s.png"))) .translateX(10).translateY(200-27).build(); ............ ADD CAR KEYFRAMES
  • 32. TimelineBuilder.create() .keyFrames( ) .build().play(); ............ Rotate truckWheelie = new Rotate(0,11,21); truck.getTransforms().add(truckWheelie); ............ ImageView sedan = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("sedan-s.png"))) .translateX(10).translateY(110-27).build(); ImageView suv = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("suv-s.png"))) .translateX(10).translateY(140-27).build(); ImageView truck = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("truck-s.png"))) .translateX(10).translateY(170-27).build(); ImageView van = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("van-s.png"))) .translateX(10).translateY(200-27).build(); ADDTRUCK ROTATETRANSFORM
  • 33. TimelineBuilder.create() .keyFrames( ) .build().play(); ............ // TRUCK WHEELIE new KeyFrame( Duration.seconds(3), new KeyValue(truckWheelie.angleProperty(), 0)), new KeyFrame( Duration.seconds(3.5), new KeyValue(truckWheelie.angleProperty(), -15)), ............ Rotate truckWheelie = new Rotate(0,11,21); truck.getTransforms().add(truckWheelie); ............ ImageView sedan = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("sedan-s.png"))) .translateX(10).translateY(110-27).build(); ImageView suv = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("suv-s.png"))) .translateX(10).translateY(140-27).build(); ImageView truck = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("truck-s.png"))) .translateX(10).translateY(170-27).build(); ImageView van = ImageViewBuilder.create() .image(new Image(TimelineAnimation.class.getResourceAsStream("van-s.png"))) .translateX(10).translateY(200-27).build(); ANIMATETRUCK WHEELIE
  • 34. TimelineBuilder.create() .keyFrames( ) .build().play(); ............ // CLOUDS new KeyFrame( Duration.seconds(30), new KeyValue(cloud1.translateXProperty(), TRACK_LENGTH*0.8)), new KeyFrame( Duration.seconds(30), new KeyValue(cloud2.translateXProperty(), TRACK_LENGTH*0.1)), new KeyFrame( Duration.seconds(30), new KeyValue(cloud3.translateXProperty(), TRACK_LENGTH*0.3)) private static final String CLOUD = "M44.618,14.363c0.504-0.8,0.795-1.696,0.795-2.647c0-3.333-3.476-6.034-7.765-6.034"+ "c-0.213,0-0.422,0.012-0.63,0.025c-0.268-2.93-4.914-5.265-10.623-5.265c-5.882,0-10.65,2.475-10.65,5.529"+ "c0,0.427,0.102,0.841,0.279,1.24c-4.767,0.863-8.207,3.293-8.207,6.163c0,0.21,0.022,0.417,0.058,0.622"+ "c-4.088,0.38-7.27,3.302-7.27,6.855c0,3.81,3.659,6.898,8.173,6.898c0.874,0,1.715-0.118,2.504-0.333"+ "c2.808,1.431,7.161,2.353,12.062,2.353c4.689,0,8.881-0.844,11.694-2.169c0.712,0.097,1.447,0.149,2.2,0.149"+ "c6.187,0,11.202-3.423,11.202-7.645C48.442,17.814,46.958,15.765,44.618,14.363z"; SVGPath cloud1 = SVGPathBuilder.create().content(CLOUD).fill(Color.WHITE) .translateX(TRACK_LENGTH*0.1).translateY(10).build(); SVGPath cloud2 = SVGPathBuilder.create().content(CLOUD).fill(Color.WHITE) .translateX(TRACK_LENGTH*0.9).translateY(5).build(); SVGPath cloud3 = SVGPathBuilder.create().content(CLOUD).fill(Color.WHITE) .translateX(TRACK_LENGTH*0.6).translateY(15).build(); ............ ADD & ANIMATE CLOUDS
  • 35. TimelineBuilder.create() .keyFrames( ) .build().play(); // DRIVING CARS ALONG TRACK new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(sedan.translateXProperty(), TRACK_LENGTH, accelerate)), new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(suv.translateXProperty(), TRACK_LENGTH, accelerate)), new KeyFrame( Duration.seconds(5), new KeyValue(truck.translateXProperty(), TRACK_LENGTH, Interpolator.SPLINE(0.698,0.055,0.838,0.310))), new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(van.translateXProperty(), TRACK_LENGTH, accelerate)), // TRUCK WHEELIE new KeyFrame( Duration.seconds(3), new KeyValue(truckWheelie.angleProperty(), 0)), new KeyFrame( Duration.seconds(3.5), new KeyValue(truckWheelie.angleProperty(), -15)), // CLOUDS new KeyFrame( Duration.seconds(30), new KeyValue(cloud1.translateXProperty(), TRACK_LENGTH*0.8)), new KeyFrame( Duration.seconds(30), new KeyValue(cloud2.translateXProperty(), TRACK_LENGTH*0.1)), new KeyFrame( Duration.seconds(30), new KeyValue(cloud3.translateXProperty(), TRACK_LENGTH*0.3)) ............ COMPLETETIMELINE
  • 36. TimelineBuilder.create() .keyFrames( ) .build().play(); // DRIVING CARS ALONG TRACK new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(sedan.translateXProperty(), TRACK_LENGTH, accelerate)), new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(suv.translateXProperty(), TRACK_LENGTH, accelerate)), new KeyFrame( Duration.seconds(5), new KeyValue(truck.translateXProperty(), TRACK_LENGTH, Interpolator.SPLINE(0.698,0.055,0.838,0.310))), new KeyFrame( Duration.seconds(5.5+(3*Math.random())), new KeyValue(van.translateXProperty(), TRACK_LENGTH, accelerate)), // TRUCK WHEELIE new KeyFrame( Duration.seconds(3), new KeyValue(truckWheelie.angleProperty(), 0)), new KeyFrame( Duration.seconds(3.5), new KeyValue(truckWheelie.angleProperty(), -15)), // CLOUDS new KeyFrame( Duration.seconds(30), new KeyValue(cloud1.translateXProperty(), TRACK_LENGTH*0.8)), new KeyFrame( Duration.seconds(30), new KeyValue(cloud2.translateXProperty(), TRACK_LENGTH*0.1)), new KeyFrame( Duration.seconds(30), new KeyValue(cloud3.translateXProperty(), TRACK_LENGTH*0.3)) ............ COMPLETETIMELINE
  • 37. •You can apply effects to any node •Effects can be combined using Blend effect •Available Effects: EFFECTS • Blend • Bloom • BoxBlur • ColorAdjust • DisplacementMap • DropShadow • GaussianBlur • Glow • InnerShadow • Lighting • MotionBlur • PerspectiveTransform • Reflection • SepiaTone
  • 38. Here is how to create dynamic text with a recessed effect applied in realtime. RECESSEDTEXT
  • 39. Text label = TextBuilder.create() .font(Font.font("Arial Black", 72)) .style("-fx-fill: linear-gradient(from 0% 0% to 0% 100%, #bebebe 0%, #aaaaaa 100%);") .text("Recessed") .build(); TextField textField = TextFieldBuilder.create() .text("Recessed") .build(); label.textProperty().bind(textField.textProperty()); Scene scene = new Scene(VBoxBuilder.create() .spacing(20) .padding(new Insets(30)) .children(label, textField) .style("-fx-background-color: linear-gradient(from 0% 0% to 0% 100%, #cacaca 0%, #616161 100%);") .prefWidth(800) .build());
  • 40. Effect recessed = BlendBuilder.create() .mode(BlendMode.MULTIPLY) .bottomInput( DropShadowBuilder.create() .color(Color.rgb(255,255,255,0.5)) .offsetX(1).offsetY(1) .radius(0) .build() ) .topInput( InnerShadowBuilder.create() .color(Color.rgb(0,0,0,0.7)) .offsetX(2).offsetY(2) .radius(5) .build() ) .build(); label.setEffect(recessed)