JavaFX–10 thingsI loveaboutyou
Alexander Casall 
sialcasa 
QA
Today‘sTopics 
HelloJavaFX 
Whatwedo withJavaFX 
10 thingswelike mostaboutJavaFX
HelloJavaFX
F3 
(Form Follow FunctionsbySeeBeyond) 
2007 
JavaFXScript 
2011 
JavaFX2.0 
JavaFX2.2 JavaSE7u6 
JavaFX8 
JDK Integration...
Whatwedo withJavaFX
ScrumBoardin action: 
YouTube Video
Short StopHowmanylinesofcode? 
hugePaneWithStories.setScaleX(0.2); 
hugePaneWithStories.setScaleY(0.2);
1. Lesscodeformoreresults 
Swing Worker vs. JavaFXImageView 
Asynchronousloadingofan image
2. Properties
StringProperty 
String 
StringProperty 
String 
Binding 
StringPropertya = newSimpleStringProperty(); 
StringPropertyb = n...
StringProperty 
String 
Change Notification(Events) 
Reaction 
StringPropertysomeString= newSimpleStringProperty(); 
someS...
StringProperty 
String 
Change Notification(Events) 
Reaction 
Properties –Event Listener 
StringPropertysomeString= newSi...
Live Coding: 
Color -Binding 
Captcha-Binding
eteoBoardSynchronisation via Remote Data Binding 
ScrumboardSynchronization
Client 1 
DoublePropertypositionX; 
DoublePropertypositionY; 
Server 
DoublePropertypositionX; 
DoublePropertypositionY; 
...
Client 1 
DoublePropertypositionX; 
DoublePropertypositionY; 
Client 2 
DoublePropertypositionX; 
DoublePropertypositionY;...
Synchronisation via Remote Databinding
3. FXML
The knownisgood– Swing Style withJavaFXworksforyou 
Don‘tlisten tohim, 
useFXML 
BorderPaneborder= newBorderPane(); 
Label...
FXML 
BorderPaneborder= newBorderPane(); 
Label topLabel= newLabel(“Page Title“); 
border.setTop(topLabel); 
Label centerL...
Live Coding: FXML Captcha
4. CSS
CSS 
Rectanglerectangle= newRectangle(); Application.setUserAgentStylesheet("file:///style.css"); 
Set theBase CSS (Overri...
Live Coding: CaptchaCSS
5. Effects
Live Coding: CaptchaButton-HoverEffect
6. Animations
Timelines andTransitions 
0 s 
10 s 
translateXProperty== 0 
translateXProperty== 250 
KeyValuetargetPoint= newKeyValue(no...
FadeTransition 
FillTransition 
StrokeTransition 
TranslateTransition 
PathTransition 
PauseTransitionRotateTransitionScal...
Live Coding: CaptchaPulsingButton
7. Multi Touch
PanetaskPane= newTaskPane(task); 
taskPane.setOnTouchMoved(newEventHandler<TouchEvent>(){ 
@Override 
publicvoidhandle(Tou...
Shape 
Shape 
Shape 
Rezizable 
node.setOnSwipeRight(…); 
node.setOnRotate(…); 
node.setOnZoom(…); 
node.setOnScroll(…); 
...
8. Cool Charts
Example
9. WebView
WebEnginewebEngine= newWebEngine(); 
JSObjectjsobj= (JSObject) webEngine.executeScript(“window“); 
jsobj.setMember(“java“,...
<!–HTML + JavaScript forcallbacktoJava --> 
<imgsrc=“http://a.de/cat.jpg" 
onclick="java.meow(‘http://a.de/cat.jpg‘);“/> 
...
Example 
Google Maps
ProvenConcepts 
EfficientAPI 
= Modern Java UI-Toolkit 
10. JavaFXisfun, efficient 
andreadyforuse 
+
alexander.casall@saxsys.de@sialcasa 
Q&A 
Ping mefora Swing2JavaFX Migration Whitepaper
JavaFX – 10 things I love about you
JavaFX – 10 things I love about you
JavaFX – 10 things I love about you
JavaFX – 10 things I love about you
Nächste SlideShare
Wird geladen in …5
×

JavaFX – 10 things I love about you

4.638 Aufrufe

Veröffentlicht am

JavaFX 8 Introduction

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

Veröffentlicht in: Software

JavaFX – 10 things I love about you

  1. 1. JavaFX–10 thingsI loveaboutyou
  2. 2. Alexander Casall sialcasa QA
  3. 3. Today‘sTopics HelloJavaFX Whatwedo withJavaFX 10 thingswelike mostaboutJavaFX
  4. 4. HelloJavaFX
  5. 5. F3 (Form Follow FunctionsbySeeBeyond) 2007 JavaFXScript 2011 JavaFX2.0 JavaFX2.2 JavaSE7u6 JavaFX8 JDK Integration Evolution of
  6. 6. Whatwedo withJavaFX
  7. 7. ScrumBoardin action: YouTube Video
  8. 8. Short StopHowmanylinesofcode? hugePaneWithStories.setScaleX(0.2); hugePaneWithStories.setScaleY(0.2);
  9. 9. 1. Lesscodeformoreresults Swing Worker vs. JavaFXImageView Asynchronousloadingofan image
  10. 10. 2. Properties
  11. 11. StringProperty String StringProperty String Binding StringPropertya = newSimpleStringProperty(); StringPropertyb = newSimpleStringProperty(); a.bind(b); High Level API Properties -Binding
  12. 12. 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
  13. 13. StringProperty String Change Notification(Events) Reaction Properties –Event Listener StringPropertysomeString= newSimpleStringProperty(); someString.addListener((bean, oldVal, newVal) -> System.out .println(oldVal+ " "+ newVal));
  14. 14. Live Coding: Color -Binding Captcha-Binding
  15. 15. eteoBoardSynchronisation via Remote Data Binding ScrumboardSynchronization
  16. 16. Client 1 DoublePropertypositionX; DoublePropertypositionY; Server DoublePropertypositionX; DoublePropertypositionY; Bidirectional Binding Synchronisation via Remote Data Binding
  17. 17. Client 1 DoublePropertypositionX; DoublePropertypositionY; Client 2 DoublePropertypositionX; DoublePropertypositionY; Server DoublePropertypositionX; DoublePropertypositionY; Synchronisation via Remote Data Binding Bidirectional Binding
  18. 18. Synchronisation via Remote Databinding
  19. 19. 3. FXML
  20. 20. 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);
  21. 21. 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>
  22. 22. Live Coding: FXML Captcha
  23. 23. 4. CSS
  24. 24. CSS Rectanglerectangle= newRectangle(); Application.setUserAgentStylesheet("file:///style.css"); Set theBase CSS (OverridesModena) rectangle.setStyle("-fx-fill:red; -fx- rotate:40;");
  25. 25. Live Coding: CaptchaCSS
  26. 26. 5. Effects
  27. 27. Live Coding: CaptchaButton-HoverEffect
  28. 28. 6. Animations
  29. 29. 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();
  30. 30. FadeTransition FillTransition StrokeTransition TranslateTransition PathTransition PauseTransitionRotateTransitionScaleTransitionSequentialTransitionParallelTransition
  31. 31. Live Coding: CaptchaPulsingButton
  32. 32. 7. Multi Touch
  33. 33. PanetaskPane= newTaskPane(task); taskPane.setOnTouchMoved(newEventHandler<TouchEvent>(){ @Override publicvoidhandle(TouchEventevent){ calculateScaleOfTask(event.getTouchPoints()); } }); Multi Touch @ eteo
  34. 34. Shape Shape Shape Rezizable node.setOnSwipeRight(…); node.setOnRotate(…); node.setOnZoom(…); node.setOnScroll(…); Multi Touch andGestures
  35. 35. 8. Cool Charts
  36. 36. Example
  37. 37. 9. WebView
  38. 38. 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
  39. 39. <!–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
  40. 40. Example Google Maps
  41. 41. ProvenConcepts EfficientAPI = Modern Java UI-Toolkit 10. JavaFXisfun, efficient andreadyforuse +
  42. 42. alexander.casall@saxsys.de@sialcasa Q&A Ping mefora Swing2JavaFX Migration Whitepaper

×