46
JavaFX – 10 things I love about you

JavaFX – 10 things I love about you

Embed Size (px)

DESCRIPTION

JavaFX 8 Introduction Live-Coding Examples here: https://github.com/sialcasa/JAX2014

Citation preview

Page 1: JavaFX – 10 things I love about you

JavaFX – 10 things I love about you

Page 2: JavaFX – 10 things I love about you

Alexander Casall

sialcasa

QA

Page 3: JavaFX – 10 things I love about you

Today‘s Topics

Hello JavaFX

What we do with JavaFX

10 things we like most about JavaFX

Page 4: JavaFX – 10 things I love about you

Hello JavaFX

Page 5: JavaFX – 10 things I love about you

F3 (Form Follow Functions

by SeeBeyond)

2007

JavaFX Script

2011

JavaFX 2.0

JavaFX 2.2

JavaSE 7u6

JavaFX 8

JDK Integration

Evolution of

Page 6: JavaFX – 10 things I love about you

What we do with JavaFX

Page 7: JavaFX – 10 things I love about you
Page 8: JavaFX – 10 things I love about you

ScrumBoard in action:

YouTube Video

Page 9: JavaFX – 10 things I love about you

Short Stop How many lines of code?

hugePaneWithStories.setScaleX(0.2);hugePaneWithStories.setScaleY(0.2);

Page 10: JavaFX – 10 things I love about you

1. Less code for more results

Swing Worker vs. JavaFX ImageView

Asynchronous loading of an image

Page 11: JavaFX – 10 things I love about you

2. Properties

Page 12: JavaFX – 10 things I love about you

StringProperty

String

StringProperty

String

Binding

StringProperty a = new SimpleStringProperty();StringProperty b = new SimpleStringProperty();a.bind(b);

High Level API

Properties - Binding

Page 13: JavaFX – 10 things I love about you

StringProperty

String

Change Notification (Events)

Reaction

StringProperty someString = new SimpleStringProperty();

someString.addListener(new ChangeListener<String>(){@Overridepublic void changed(ObservableValue<? extends String> source, String oldVal,

String newVal){System.out.println(oldVal+“ "+newVal);

}});

Properties – Event Listener

Page 14: JavaFX – 10 things I love about you

StringProperty

String

Change Notification (Events)

Reaction

Properties – Event Listener

StringProperty someString = new SimpleStringProperty();

someString.addListener((bean, oldVal, newVal) -> System.out

.println(oldVal + " " + newVal));

Page 15: JavaFX – 10 things I love about you

Live Coding:

Color - Binding

Captcha - Binding

Page 16: JavaFX – 10 things I love about you

eteoBoard Synchronisation via Remote Data Binding

Scrumboard Synchronization

Page 17: JavaFX – 10 things I love about you

Client 1

DoubleProperty positionX;

DoubleProperty positionY;

Server

DoubleProperty positionX;

DoubleProperty positionY;

Bidirectional

Binding

Synchronisation via Remote Data Binding

Page 18: JavaFX – 10 things I love about you

Client 1

DoubleProperty positionX;

DoubleProperty positionY;

Client 2

DoubleProperty positionX;

DoubleProperty positionY;

Server

DoubleProperty positionX;

DoubleProperty positionY;

Synchronisation via Remote Data Binding

Bidirectional

Binding

Page 19: JavaFX – 10 things I love about you

Synchronisation via Remote Databinding

Page 20: JavaFX – 10 things I love about you

3. FXML

Page 21: JavaFX – 10 things I love about you

The known is good –

Swing Style with JavaFX

works for youDon‘t listen to him,

use FXML

BorderPane border = new BorderPane();

Label topLabel = new Label(“Page Title“);

border.setTop(topLabel);

Label centerLabel = new Label(“Some Data Here“);

border.setCenter(centerLabel);

Page 22: JavaFX – 10 things I love about you

FXMLBorderPane border = new BorderPane();

Label topLabel = new Label(“Page Title“);

border.setTop(topLabel);

Label centerLabel = new Label(“Some Data Here“);

border.setCenter(centerLabel);

<BorderPane fx:id=“border“>

<top>

<Label text=“Page Titel“/>

</top>

<center>

<Label text =“Some Data Here“/>

</center>

</BorderPane>

Page 23: JavaFX – 10 things I love about you

Live Coding: FXML Captcha

Page 24: JavaFX – 10 things I love about you

4. CSS

Page 25: JavaFX – 10 things I love about you

CSS

Rectangle rectangle = new Rectangle();

Application.setUserAgentStylesheet("file:///style.css");

Set the Base CSS (Overrides Modena)

rectangle.setStyle("-fx-fill:red; -fx-

rotate:40;");

Page 26: JavaFX – 10 things I love about you

Live Coding: Captcha CSS

Page 27: JavaFX – 10 things I love about you

5. Effects

Page 28: JavaFX – 10 things I love about you
Page 29: JavaFX – 10 things I love about you

Live Coding: Captcha Button-Hover Effect

Page 30: JavaFX – 10 things I love about you

6. Animations

Page 31: JavaFX – 10 things I love about you

Timelines and Transitions

0 s 10 s

translateXProperty == 0 translateXProperty == 250

KeyValue targetPoint = new KeyValue(node.translateXProperty(), 250);

KeyFrame keyFrame = new KeyFrame(Duration.seconds(10), targetPoint);

Timeline moveTimeline = new Timeline(keyFrame);

moveTimeline.play();

TranslateTransition moveTransition = new TranslateTransition(

Duration.seconds(10), node);

moveTransition.setByX(250);

moveTransition.play();

Page 32: JavaFX – 10 things I love about you

FadeTransition

FillTransition

StrokeTransition

TranslateTransition

PathTransition

PauseTransition RotateTransition

ScaleTransition

SequentialTransition

ParallelTransition

Page 33: JavaFX – 10 things I love about you

Live Coding: Captcha Pulsing Button

Page 34: JavaFX – 10 things I love about you

7. Multi Touch

Page 35: JavaFX – 10 things I love about you

Pane taskPane = new TaskPane(task);

taskPane.setOnTouchMoved(new EventHandler<TouchEvent>(){@Overridepublic void handle(TouchEvent event){

calculateScaleOfTask(event.getTouchPoints());}

});

Multi Touch @ eteo

Page 36: JavaFX – 10 things I love about you

Shape

Shape

Shape

Rezizable

node.setOnSwipeRight(…);

node.setOnRotate(…);

node.setOnZoom(…);

node.setOnScroll(…);

Multi Touch and Gestures

Page 37: JavaFX – 10 things I love about you
Page 38: JavaFX – 10 things I love about you

8. Cool Charts

Page 39: JavaFX – 10 things I love about you
Page 40: JavaFX – 10 things I love about you

Example

Page 41: JavaFX – 10 things I love about you

9. WebView

Page 42: JavaFX – 10 things I love about you

WebEngine webEngine = new WebEngine();

JSObject jsobj = (JSObject) webEngine.executeScript(“window“);jsobj.setMember(“java“,new CatCallback());

protected class CatCallback{public void meow(String url){imageView.setView(new Image(url));

}}

1. Define a Java Callback

2. Register the Callback in the WebEngine

WebView - JavaScript -> Java Bridge

Page 43: JavaFX – 10 things I love about you

<!– HTML + JavaScript for callback to Java --><img src=“http://a.de/cat.jpg"

onclick="java.meow(‘http://a.de/cat.jpg‘);“/>

3. Call the Callback out of JavaScript

WebView - JavaScript -> Java Bridge

Page 44: JavaFX – 10 things I love about you

Example

Google Maps

Page 45: JavaFX – 10 things I love about you

Proven Concepts

Efficient API

= Modern Java UI-Toolkit

10. JavaFX is fun, efficient

and ready for use

+

Page 46: JavaFX – 10 things I love about you

[email protected] @sialcasa

Q&A

Ping me for a Swing2JavaFX Migration Whitepaper