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

1. JavaFX–10 thingsI loveaboutyou

2. Alexander Casall
sialcasa
QA

3. Today‘sTopics
HelloJavaFX
Whatwedo withJavaFX
10 thingswelike mostaboutJavaFX

4. HelloJavaFX

5. F3
(Form Follow FunctionsbySeeBeyond)
2007
JavaFXScript
2011
JavaFX2.0
JavaFX2.2 JavaSE7u6
JavaFX8
JDK Integration
Evolution of

6. Whatwedo withJavaFX

8. ScrumBoardin action:
YouTube Video

9. Short StopHowmanylinesofcode?
hugePaneWithStories.setScaleX(0.2);
hugePaneWithStories.setScaleY(0.2);

10. 1. Lesscodeformoreresults
Swing Worker vs. JavaFXImageView
Asynchronousloadingofan image

11. 2. Properties

12. StringProperty
String
StringProperty
String
Binding
StringPropertya = newSimpleStringProperty();
StringPropertyb = newSimpleStringProperty();
a.bind(b);
High Level API
Properties -Binding

13. StringProperty
String
Change Notification(Events)
Reaction
StringPropertysomeString= newSimpleStringProperty();
someString.addListener(newChangeListener<String>(){
@Override
publicvoidchanged(ObservableValue<? extendsString> source, String oldVal,
String newVal){
System.out.println(oldVal+“ "+newVal);
}
});
Properties –Event Listener

14. StringProperty
String
Change Notification(Events)
Reaction
Properties –Event Listener
StringPropertysomeString= newSimpleStringProperty();
someString.addListener((bean, oldVal, newVal) -> System.out
.println(oldVal+ " "+ newVal));

15. Live Coding:
Color -Binding
Captcha-Binding

16. eteoBoardSynchronisation via Remote Data Binding
ScrumboardSynchronization

17. Client 1
DoublePropertypositionX;
DoublePropertypositionY;
Server
DoublePropertypositionX;
DoublePropertypositionY;
Bidirectional
Binding
Synchronisation via Remote Data Binding

18. Client 1
DoublePropertypositionX;
DoublePropertypositionY;
Client 2
DoublePropertypositionX;
DoublePropertypositionY;
Server
DoublePropertypositionX;
DoublePropertypositionY;
Synchronisation via Remote Data Binding
Bidirectional
Binding

19. Synchronisation via Remote Databinding

20. 3. FXML

21. The knownisgood– Swing Style withJavaFXworksforyou
Don‘tlisten tohim,
useFXML
BorderPaneborder= newBorderPane();
Label topLabel= newLabel(“Page Title“);
border.setTop(topLabel);
Label centerLabel= newLabel(“SomeData Here“);
border.setCenter(centerLabel);

22. FXML
BorderPaneborder= newBorderPane();
Label topLabel= newLabel(“Page Title“);
border.setTop(topLabel);
Label centerLabel= newLabel(“SomeData Here“);
border.setCenter(centerLabel);
<BorderPanefx:id=“border“>
<top>
<Label text=“Page Titel“/>
</top>
<center>
<Label text=“SomeData Here“/>
</center>
</BorderPane>

23. Live Coding: FXML Captcha

24. 4. CSS

25. CSS
Rectanglerectangle= newRectangle(); Application.setUserAgentStylesheet("file:///style.css");
Set theBase CSS (OverridesModena)
rectangle.setStyle("-fx-fill:red; -fx- rotate:40;");

26. Live Coding: CaptchaCSS

27. 5. Effects

29. Live Coding: CaptchaButton-HoverEffect

30. 6. Animations

31. Timelines andTransitions
0 s
10 s
translateXProperty== 0
translateXProperty== 250
KeyValuetargetPoint= newKeyValue(node.translateXProperty(), 250);
KeyFramekeyFrame= newKeyFrame(Duration.seconds(10), targetPoint);
Timeline moveTimeline= newTimeline(keyFrame);
moveTimeline.play();
TranslateTransitionmoveTransition= newTranslateTransition(
Duration.seconds(10), node);
moveTransition.setByX(250);
moveTransition.play();

32. FadeTransition
FillTransition
StrokeTransition
TranslateTransition
PathTransition
PauseTransitionRotateTransitionScaleTransitionSequentialTransitionParallelTransition

33. Live Coding: CaptchaPulsingButton

34. 7. Multi Touch

35. PanetaskPane= newTaskPane(task);
taskPane.setOnTouchMoved(newEventHandler<TouchEvent>(){
@Override
publicvoidhandle(TouchEventevent){ calculateScaleOfTask(event.getTouchPoints());
}
});
Multi Touch @ eteo

36. Shape
Shape
Shape
Rezizable
node.setOnSwipeRight(…);
node.setOnRotate(…);
node.setOnZoom(…);
node.setOnScroll(…);
Multi Touch andGestures

38. 8. Cool Charts

40. Example

41. 9. WebView

42. WebEnginewebEngine= newWebEngine();
JSObjectjsobj= (JSObject) webEngine.executeScript(“window“);
jsobj.setMember(“java“,newCatCallback());
protectedclassCatCallback{
publicvoidmeow(String url){
imageView.setView(newImage(url));
}
}
1. Definea Java Callback
2. Register theCallback in theWebEngine
WebView-JavaScript -> Java Bridge

43. <!–HTML + JavaScript forcallbacktoJava -->
<imgsrc=“http://a.de/cat.jpg"
onclick="java.meow(‘http://a.de/cat.jpg‘);“/>
3. Call theCallback out ofJavaScript
WebView-JavaScript -> Java Bridge

44. Example
Google Maps

45. ProvenConcepts
EfficientAPI
= Modern Java UI-Toolkit
10. JavaFXisfun, efficient
andreadyforuse
+

46. alexander.casall@saxsys.de@sialcasa
Q&A
Ping mefora Swing2JavaFX Migration Whitepaper