Talk about the features of JavaFX (Devoxx BE 16)

1. ALEXANDER CASALL
JavaFX in Action

2. Alexander Casall
sialcasa

3. HISTORY OF JAVAFX USING GOOGLE TRENDS
JavaFX Script
1.0
F3
1.3
JavaFX
2.0
JavaFX
8
Classpath integration
3D API
Printing
8.X
Accessibility,
Controls...
Java API
OpenJFX
Script Language
Flash Successor

4. 0 20 40 60 80 100 120 140 160
I never used JavaFX before
I did some experiments with JavaFX
I use JavaFX in a productive application
I use JavaFX, but the project is still in
development
Poll: Do you use JavaFX?
Do you use JavaFX?
Jaxenter poll
38%
29%
20 %
10 %

5. Where can you use JavaFX?

6. Embedded
(even on ARM)

7. TODO Mobile Screenshot
Mobile

8. Web
(Demos later)

9. Even for boring
Desktop Apps

10. Office Management Software of the German AIDS Foundation

14. Where to start with FX?

15. Hello World

16. Stage
Scene
VBox
StackPane
Label Button
extends javafx.scene.Node
ImageView

17. Beyond Hello World

18. GridPane grid = new GridPane();
grid.setHgap(10);
grid.setVgap(10);
Text scenetitle = new Text("Antragsgegenstand");
scenetitle.setFont(Font.font("SegoeUI", FontWeight.BOLD, 13.0));
grid.add(scenetitle, 0, 0, 2, 1);
Label categoryLabel = new Label("Kategorie:");
grid.add(categoryLabel, 0, 1);
ComboBox<String> categoryCombo = new ComboBox<>();
grid.add(categoryCombo, 1, 1);
categoryCombo.setMaxWidth(Double.MAX_VALUE);
Label subjectLabel = new Label("Gegenstand:");
grid.add(subjectLabel, 0, 2);
TextField subjectTextField = new TextField();
grid.add(subjectTextField, 1, 2);
Label statusLabel = new Label("Status:");
grid.add(statusLabel, 0, 3);
ComboBox<String> statusCombo = new ComboBox<>();
grid.add(statusCombo, 1, 3);
statusCombo.setMaxWidth(Double.MAX_VALUE);

19. GridPane grid = new GridPane();
grid.setHgap(10);
grid.setVgap(10);
Text scenetitle = new Text("Antragsgegenstand");
scenetitle.setFont(Font.font("SegoeUI", FontWeight.BOLD,
13.0));
grid.add(scenetitle, 0, 0, 2, 1);
Label categoryLabel = new Label("Kategorie:");
grid.add(categoryLabel, 0, 1);
ComboBox<String> categoryCombo = new ComboBox<>();

21. FXML
Declaration of the UI

23. <GridPane fx:controller="de.aidsstiftung.aida.ContractView" …>
<columnConstraints>…</columnConstraints><rowConstraints>…</rowConstraints>
<children>
<TextField fx:id="subjectTextField" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
<ComboBox fx:id="statusCombo" onAction="#onStatusComboAction"
GridPane.columnIndex="1" GridPane.rowIndex="3" />
<ComboBox fx:id="categoryCombo" onAction="#onCategoryComboAction"
GridPane.columnIndex="1" GridPane.rowIndex="1" />
<Text strokeType="OUTSIDE" styleClass="headerlabel” text="Antragsgegenstand" />
<Label text="Kategorie" GridPane.rowIndex="1" />
<Label text="Gegenstand" GridPane.rowIndex="2" />
<Label text="Status" GridPane.rowIndex="3" />
</children>
</GridPane>

24. public class ContractView{
@FXML
private TextField subjectTextField;
@FXML
private ComboBox<String> statusCombo;
@FXML
private ComboBox<String> categoryCombo;
@FXML
void onCategoryComboAction(ActionEvent event) {
System.out.println("Category changed: " + categoryCombo.valueProperty());
}
@FXML
void onStatusComboAction(ActionEvent event) {
System.out.println("Status changed" + statusCombo.valueProperty());
}

25. URL fxml = getClass().getResource("ContractView.fxml");
FXMLLoader loader = new FXMLLoader(fxml);
loader.setController(new ContractView());
GridPane grid = loader.load();

26. http://gluonhq.com/products/downloads/
Use Scene Builder to create UI-Components

27. How many FXML Files were used?

30. <?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.StackPane?>
<StackPane xmlns="http://javafx.com/javafx/8.0.65" xmlns:fx=…>
<children>
<fx:include source="child1.fxml" />
<fx:include source="child2.fxml" />
</children>
</StackPane>

31. Back to our component

32. Coded FXML

33. CSS
Styling

34. <GridPane styleClass="contentgrid">
<columnConstraints>…</columnConstraints><rowConstraints>…</rowConstraints>
<children>
<TextField fx:id="subjectTextField" GridPane.columnIndex="1" GridPane.rowIndex="2"/>
<ComboBox fx:id="statusCombo" onAction="#onStatusComboAction"
GridPane.columnIndex="1" GridPane.rowIndex="3" />
<ComboBox fx:id="categoryCombo" onAction="#onCategoryComboAction"
GridPane.columnIndex="1" GridPane.rowIndex="1" />
<Text strokeType="OUTSIDE" styleClass="headerlabel” text="Antragsgegenstand" />
<Label text="Kategorie" GridPane.rowIndex="1" />
<Label text="Gegenstand" GridPane.rowIndex="2" />
<Label text="Status" GridPane.rowIndex="3" />
</children>
</GridPane>

35. .headerlabel{
-fx-font-width:15pt;
-fx-font-weight:bold;
}
.contentgrid{
-fx-hgap: 10px;
-fx-vgap: 10px;
}
.contentgrid > .combo-box{
-fx-max-width: infinity;
}

37. SceneBuilder CSS Debugger

38. CSS Scopes
Application, Scene, FXML, Control

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

41. NODE SCOPE

42. CONTROL SCOPE
public class Calendar extends Control {
…
@Override
public String getUserAgentStylesheet(){
return "calendar.css";
}
}

43. Property API
Bindings, Listener

44. StringProperty
String
StringProperty
String
Binding
Observer
Property API

46. textfield1.textProperty().bindBidirectional(textfield2.textProperty());

47. ColorPicker Example

49. TextField searchTextField = new TextField();
Button searchButton = new Button();
searchButton.disableProperty().bind(searchTextField.textProperty().isNotEmpty());

50. Button searchButton = new Button();
TextField searchTextField = new TextField();
BooleanBinding isNumberBinding =
Bindings.createBooleanBinding(() ->
searchTextField.getText().matches(".*d+.*"),
searchTextField.textProperty());
searchButton.disableProperty().bind(searchTextField
.textProperty().isNotEmpty()
.and(isNumberBinding));

51. Fancy Stuff

52. Dropshadow

53. Effects

54. Animation

56. TIMELINES AND TRANSITIONS
0 s 10 s
layoutXProperty == 0 layoutXProperty == 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.setByY(250);
moveTransition.play();

57. More helpful Features

58. Multi Touch
Gestures and More

59. Pane taskPane = new TaskPane(task);
taskPane.setOnTouchMoved(new EventHandler<TouchEvent>(){
@Override
public void handle(TouchEvent event){
calculateScaleOfTask(event.getTouchPoints());
}
});

60. Shape
Shape
Shape
Rezizable
node.setOnSwipeRight(…);
node.setOnRotate(…);
node.setOnZoom(…);
node.setOnScroll(…);
Multi Touch and Gestures

61. WEBVIEW
Embed Webcontent into JavaFX Applications

62. Maps Example

63. WebView
WebEngine
Loads a Webpage
Manages DOM
Executes JavaScript
JavaScript <-> Java
Node in GraphScene
STRUCTURE
WebView

64. System.out.println(webEngine.getUserAgent());
Mozilla/5.0 (Windows NT 6.3; Win64; x64)
AppleWebKit/538.19 (KHTML, like Gecko)
JavaFX/8.0 Safari/538.19
TYP / VERSION
WebEngine

65. webEngine.load("http://google");
webEngine.loadContent("<html><body>hello</body></html>");
webEngine.loadHtml("/hello.html");
LOAD CONTENT
WebEngine

66. INTERACTION
WebView

67. LAST BUT NOT LEAST

68. Test & Deployment

69. Test-Pyramid
Unit Tests
Integration Tests
Acceptance Tests

70. TestFX
rightClickOn("#desktop").moveTo("New").clickOn("Text Document");
write("myTextfile.txt").push(ENTER); // when: drag(".file").dropTo("#trash-can");
verifyThat("#desktop", hasChildren(0, ".file"));

71. QF-Test

72. DEPLOYMENT

73. Webstart is an Option

74. Package a native app is another option

75. javapackager -makeall -appclass src/de/saxsys/javafx/Starter.java
-name Example -width 600 -height 600
1. Package

76. https://github.com/edvin/fxlauncher
Launcher App.v1
2. Distribute
Über URL erreichbare Ablage

77. https://github.com/edvin/fxlauncher
Launcher App.v1
2. Distribute
via URL accessible Space

78. https://github.com/edvin/fxlauncher
Launcher App.v1
2. Distribute
App.v1

79. https://github.com/edvin/fxlauncher
Launcher App.v2
2. Distribute
App.v1

80. Break :-)

81. JavaFX runs on mobile using

82. JavaFX runs also in the browser using

83. Hello World

84. controller and model tier
(business logic)
Server
JavaFX
(JAVA, FXML, CSS)
JVM
Client
HTML5
(CSS, JS, SVG)
view tier
(rendering)
Browser
Architecture

85. Java Virtual Machine
JDK API Libraries & Tools
Java 2D / OpenGL / D3D
Prism / Glass Windowing Toolkit / Media Engine / Web Engine
Quantum Toolkit
JavaFX Public APIs and Scene Graph
How does the magic works

86. Java Virtual Machine
JDK API Libraries & Tools
Java 2D / OpenGL / D3D
Prism / Glass Windowing Toolkit / Media Engine / Web Engine
Quantum Toolkit
JavaFX Public APIs and Scene Graph
How does the magic works

87. ● Reasonable new browser
● Websocket supported
● JavaScript enabled
● Usage of Web specific APIs
Prerequisites

88. Multiview Demo
http://multiview.jpro.io

89. jpro.io

90. Let‘s answer the question:
Who uses JavaFX?