1. 2
Developing RIA with Java
Dan Vulpe
Software Engineer
Centric
@dvulpe
dvulpe@gmail.com

2. History
Apr 2012 Aug 2012
JavaFX JavaFX
Oct 2011 2.1 2.2
JavaFX LCD text Canvas
2.0 UI elements UI elements
Dec 2008 Apr 2010
Java API Video h264 Touch events
JavaFX 1.0 JavaFX 1.3 Windows Mac Linux

3. Scene graph design
Scene
Parent
Parent Parent Parent
Leaf Leaf Leaf Leaf Leaf

4. Scene graph design
Scene
Parent
Parent Parent Parent
Leaf Leaf Leaf Leaf Leaf

5. Nodes have Properties
• parent
• scene
• translate (X,Y, Z)
• scale (X,Y, Z)
• opacity
• ... see JavaDoc for javafx.scene.Node

6. Observable Properties
service.valueProperty().addListener(new ChangeListener<WorkItemUI>()
{
@Override
public void changed(ObservableValue<? extends WorkItemUI> value,
WorkItemUI oldValue,
WorkItemUI newValue) {
itemsPane.getChildren().add(newValue);
}
});

7. Binding
public void bindTo(WorkItemModel workItem) {
title.bindBidirectional(workItem.title);
issueType.bind(workItem.issueType);
workItemInfo.bindBidirectional(workItem.workItemInfo);
asignee.bindBidirectional(workItem.asignee);
dueDate.bindBidirectional(workItem.dueDate);
priority.bindBidirectional(workItem.priority);
}

8. Hello JavaFX

9. Layouts

10. FXML
<VBox alignment="CENTER" prefHeight="250.0" prefWidth="450.0" spacing="5.0"
xmlns:fx="http://javafx.com/fxml">
<children>
<Label text="Enter your credentials" textFill="WHITE"/>
<GridPane fx:id="formContainer" hgap="10.0" vgap="10.0">
<children>
<Label text="Username" GridPane.columnIndex="0" GridPane.rowIndex="0"/>
<Label text="Password" GridPane.columnIndex="0" GridPane.rowIndex="1" />
<TextField GridPane.columnIndex="1" GridPane.rowIndex="0" />
<TextField GridPane.columnIndex="1" GridPane.rowIndex="1" />
<Button text="Log In" GridPane.columnIndex="1" GridPane.rowIndex="2" />
</children>
</GridPane>
</children>
</VBox>

11. Scene Builder - Oracle

12. GUI Editor: Preview

13. CSS Styling
.root {
-fx-font-size: 15px;
-fx-base: #eee;
-fx-font-family: "Trebuchet MS";
}
.workItem {
-fx-border-radius: 5;
-fx-background-radius: 5;
-fx-effect: dropshadow(gaussian, #ccc, 10, 0.1, 5, 2);
-fx-border-color: #666;
-fx-border-weight: 1px;
-fx-font-size: 1em;
-fx-opacity: 0.9;
-fx-base: #333;
}

14. Bindings
public class DemoController {
@FXML
private TextField textField;
@FXML
private Label label;
@FXML
private ListView<String> listView;
@FXML
private Pane rootPane;
@FXML
private Pane formPane;
@FXML
private Button aButton;
public void setDataModel(DataModel dataModel) {
label.textProperty().bind(dataModel.titleProperty());
textField.textProperty().bindBidirectional(dataModel.textProperty());
Bindings.bindContent(dataModel.aPlainList(), listView.getItems());
aButton.disableProperty().bind(textField.textProperty().isEqualTo(""));
formPane.prefWidthProperty().bind(rootPane.widthProperty().divide(2));
}
}

15. Application Structure
FXML
(layout)
FX CSS JavaFX
JavaFX Scene
(styling) Stage
Rendered On Rendered On
Java
Controller

16. Best Practices?

17. GUI components
External Sends Actions To
Business
Services Presenter View
Logic
Client
Updates Binds To
Application
State Model
Core UI

18. JavaFX approach
External Business Sends Actions To
Services Logic Presenter View
Client
Updates Binds To
Application
State
Model
Core UI

19. JavaFX approach
External Business Sends Actions To
Services Logic Presenter View
Client
Updates Binds To
Application
State
Model
Core UI
Async
Services

20. JavaFX approach
External Business Sends Actions To
Services Logic Presenter View
Client
Updates Binds To
Application
State
Model
Core UI
Async
Services

21. JavaFX approach
Use
Case 1
External Business Sends Actions To
Services Logic Presenter View
Client
Updates Binds To
Application
State
Model
Core UI
Async
Services

22. JavaFX approach
Use
Case 1
External Business Use Sends Actions To
Services Logic Case 2 Presenter View
Client
Updates Binds To
Application
State
Model
Core UI
Async
Services

23. JavaFX approach
Use
Case 1
External Business Use Sends Actions To
Services Logic Case 2 Presenter View
Client
Use
Case 3 Updates Binds To
Application
State
Model
Core UI
Async
Services

24. JavaFX approach
Use
Case 1
External Business Use Sends Actions To
Services Logic Case 2 Presenter View
Client
Use
Case 3 Updates Binds To
Application
State
Model
Use
Case N
Core UI
Async
Services

25. DEMO

26. JavaFX App Structure
FXML
(layout)
FX CSS JavaFX
JavaFX Scene
(styling) Stage
Rendered On Rendered On
Java
Controller

27. Swing Integration
FXML
(layout)
swing Component
FX CSS JavaFX Scene JFXPanel
(styling)
Rendered On Rendered On
Java
Controller

28. Deploy
• applets
• Java WebStart
• standalone applications (natively packaged
Windows, Mac)
• ... using JavaFX SDK tools (ant tasks)

29. Why JavaFX?
• available on the JVM (Java, JRuby, Scala, Groovy,
Clojure)
• portability (Mac, Linux, Windows)
• scene-graph
• rapid development

30. Resources
• http://fxexperience.com
• http://github.com/dvulpe/codecamp-javafx

31. ?

32. Thank you!
Please fill in the feedback form!