Dan VulpeSoftware EngineerCentric

@dvulpedvulpe@gmail.com

Developing RIA with Java

2

History

Dec 2008JavaFX 1.0

Apr 2010JavaFX 1.3

Oct 2011JavaFX

2.0Java API

Windows

Apr 2012JavaFX

2.1LCD text

UI elementsVideo h264

Mac

Aug 2012JavaFX

2.2Canvas

UI elementsTouch events

Linux

Scene graph design

Parent

Parent ParentParent

Leaf LeafLeafLeaf Leaf

Scene

Scene graph design

Parent

Parent ParentParent

Leaf LeafLeafLeaf Leaf

Scene

Nodes have Properties

• parent

• scene

• translate (X, Y, Z)

• scale (X, Y, Z)

• opacity

• ... see JavaDoc for javafx.scene.Node

Observable Properties

service.valueProperty().addListener(new ChangeListener<WorkItemUI>() {

@Overridepublic void changed(ObservableValue<? extends WorkItemUI> value,

WorkItemUI oldValue, WorkItemUI newValue) {

itemsPane.getChildren().add(newValue); }});

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); }

Hello JavaFX

Layouts

<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>

FXML

Scene Builder - Oracle

GUI Editor: Preview

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;}

Bindingspublic 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)); }}

Application Structure

FXML(layout)

FX CSS(styling)

Java Controller

Rendered OnJavaFX Scene

JavaFXStage

Rendered On

Best Practices?

GUI components

ExternalServicesClient

Application State

Presenter View

Model

Updates Binds To

Sends Actions To

Core UI

BusinessLogic

JavaFX approach

ExternalServicesClient

BusinessLogic

Application State

Presenter View

Model

Updates Binds To

Sends Actions To

Core UI

JavaFX approach

ExternalServicesClient

BusinessLogic

Application State

Presenter View

Model

Updates Binds To

Sends Actions To

Core UIAsync

Services

JavaFX approach

ExternalServicesClient

BusinessLogic

Application State

Presenter View

Model

Updates Binds To

Sends Actions To

Core UIAsync

Services

JavaFX approach

ExternalServicesClient

BusinessLogic

Application State

Presenter View

Model

Updates Binds To

Sends Actions To

Core UI

Use Case 1

AsyncServices

JavaFX approach

ExternalServicesClient

BusinessLogic

Application State

Presenter View

Model

Updates Binds To

Sends Actions To

Core UI

Use Case 1

Use Case 2

AsyncServices

JavaFX approach

ExternalServicesClient

BusinessLogic

Application State

Presenter View

Model

Updates Binds To

Sends Actions To

Core UI

Use Case 1

Use Case 2

Use Case 3

AsyncServices

JavaFX approach

ExternalServicesClient

BusinessLogic

Application State

Presenter View

Model

Updates Binds To

Sends Actions To

Core UI

Use Case 1

Use Case 2

Use Case N

Use Case 3

AsyncServices

DEMO

JavaFX App Structure

FXML(layout)

FX CSS(styling)

Java Controller

Rendered OnJavaFX Scene

JavaFXStage

Rendered On

Swing Integration

FXML(layout)

FX CSS(styling)

Java Controller

Rendered OnJavaFX Scene JFXPanel

Rendered On

swing Component

Deploy

• applets

• Java WebStart

• standalone applications (natively packaged Windows, Mac)

• ... using JavaFX SDK tools (ant tasks)

Why JavaFX?

• available on the JVM (Java, JRuby, Scala, Groovy, Clojure)

• portability (Mac, Linux, Windows)

• scene-graph

• rapid development

Resources

• http://fxexperience.com

• http://github.com/dvulpe/codecamp-javafx

?

Thank you!Please fill in the feedback form!