Upload
alexander-casall
View
839
Download
3
Embed Size (px)
DESCRIPTION
JavaFX 8 Introduction Live-Coding Examples here: https://github.com/sialcasa/JAX2014
Citation preview
JavaFX – 10 things I love about you
Alexander Casall
sialcasa
QA
Today‘s Topics
Hello JavaFX
What we do with JavaFX
10 things we like most about JavaFX
Hello JavaFX
F3 (Form Follow Functions
by SeeBeyond)
2007
JavaFX Script
2011
JavaFX 2.0
JavaFX 2.2
JavaSE 7u6
JavaFX 8
JDK Integration
Evolution of
What we do with JavaFX
Short Stop How many lines of code?
hugePaneWithStories.setScaleX(0.2);hugePaneWithStories.setScaleY(0.2);
1. Less code for more results
Swing Worker vs. JavaFX ImageView
Asynchronous loading of an image
2. Properties
StringProperty
String
StringProperty
String
Binding
StringProperty a = new SimpleStringProperty();StringProperty b = new SimpleStringProperty();a.bind(b);
High Level API
Properties - Binding
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
StringProperty
String
Change Notification (Events)
Reaction
Properties – Event Listener
StringProperty someString = new SimpleStringProperty();
someString.addListener((bean, oldVal, newVal) -> System.out
.println(oldVal + " " + newVal));
Live Coding:
Color - Binding
Captcha - Binding
eteoBoard Synchronisation via Remote Data Binding
Scrumboard Synchronization
Client 1
DoubleProperty positionX;
DoubleProperty positionY;
Server
DoubleProperty positionX;
DoubleProperty positionY;
Bidirectional
Binding
Synchronisation via Remote Data Binding
Client 1
DoubleProperty positionX;
DoubleProperty positionY;
Client 2
DoubleProperty positionX;
DoubleProperty positionY;
Server
DoubleProperty positionX;
DoubleProperty positionY;
Synchronisation via Remote Data Binding
Bidirectional
Binding
Synchronisation via Remote Databinding
3. FXML
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);
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>
Live Coding: FXML Captcha
4. CSS
CSS
Rectangle rectangle = new Rectangle();
Application.setUserAgentStylesheet("file:///style.css");
Set the Base CSS (Overrides Modena)
rectangle.setStyle("-fx-fill:red; -fx-
rotate:40;");
Live Coding: Captcha CSS
5. Effects
Live Coding: Captcha Button-Hover Effect
6. Animations
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();
FadeTransition
FillTransition
StrokeTransition
TranslateTransition
PathTransition
PauseTransition RotateTransition
ScaleTransition
SequentialTransition
ParallelTransition
Live Coding: Captcha Pulsing Button
7. Multi Touch
Pane taskPane = new TaskPane(task);
taskPane.setOnTouchMoved(new EventHandler<TouchEvent>(){@Overridepublic void handle(TouchEvent event){
calculateScaleOfTask(event.getTouchPoints());}
});
Multi Touch @ eteo
Shape
Shape
Shape
Rezizable
node.setOnSwipeRight(…);
node.setOnRotate(…);
node.setOnZoom(…);
node.setOnScroll(…);
Multi Touch and Gestures
8. Cool Charts
Example
9. WebView
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
<!– 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
Example
Google Maps
Proven Concepts
Efficient API
= Modern Java UI-Toolkit
10. JavaFX is fun, efficient
and ready for use
+