DataFXFrom External Data to a UI Flow

and Back

8

About us

Hendrik Ebbers@hendrikEbberswww.guigarage.com

Johan Vos@johanvoswww.lodgon.com..

Jonathan Giles@JonathanGileswww.fxexperience.com

Overview

Overview

DataSources Websocket

Injection

Flow

DataSources

DataSources

Facilitate the interaction between a JavaFX Application and Enterprise Data, respecting the commonalities and differences between the Enterprise World and the Client World.

Goal:

DataSourcesData

Observable /ObservableList

DataFX

DataProvider

DataReader

Converter

DataSourcesiOS Desktop Client

Business Layer

Server

Persistence

REST

Android

Well-known,

Well-documented

Non-proprietary

protocols

Web

ProtocolsRESTSSEWebSocketsXMLJSONJDBCFile

JFX characteristicsObservable, ObservableList

Leverage dynamic updates to objects and lists. Modifications can be propagated immediately to JavaFX Controls. No error-prone wiring needed.

JavaFX Application Thread Modifactions that result in UI changes should only happen on the JavaFX Application Thread. Apart from those, nothing should happen on the JavaFX Application Thread

DataSourcesRead Data

REST, SSE, WebSocket

Convert Data Into Java ObjectsXMLConverter, JsonConverter

Provide Data As Observable instances or ObservableList instances

JavaFX IntegrationUsing DataSources, your data (Observable) and data containers (ObservableList) can be kept up-to-date.

JavaFX Controls often use Observable or ObservableList:

Label: Label.textProperty();ListView: ListView.setItems(ObservableList);

ExamplesProject AvatarJS on the backendJS on the clientREST, SSE, WebSockets with JSON in betweenAvatarfx demonstrates avatar examples in JavaFX client

RESTSimilarity with JAX-RS 2.0 Client APISimpleBuilders or get/setOAuth supportGET/POST/PUT/DELETEClasses:

io.datafx.io.RestSource and io.datafx.io.RestSourceBuilder

Demo Time

SSE

Wikipedia:Server-sent events is a standard describing how servers can initiate data transmission towards clients once an initial client connection has been established.

SSEClient initiates connection

Server sends data, DataFX creates an Object with Observable fields

Every now and then, server sends updated dataDataFX makes sure the Observable fields are updated

Demo Time

WebSocketsLeverage client-part of JSR 356, Java standard for WebSocket protocol.

DataFX retrieves incoming messages, and populates an ObservableList

Works with any service that supports the WebSocket protocol

Demo Time

Add

Concurrency

Concurrency API

JavaFX is a single threaded toolkit

You should not block the platform thread

Rest calls may take some time...

...and could freeze the application

DataFX Executor

supports title, message and progress for each servicesupports Runnable, Callable, Service & Task

cancel services on the gui

Configurable Thread Pool

Executor implementation

Demo Time

Let‘s wait

void ConcurrentUtils.runAndWait(Runnable runnable)

T ConcurrentUtils.runAndWait(Callable<T> callable)

like SwingUtilities.invokeAndWait(...)

we will collect all concurrent helper

methods here

Stream Support

JDK 8 has Lambdas and the awesome Stream APIMap and reduce your collections in parallelBut how to turn into the JavaFX application thread?

Stream SupportStreamFX<T> streamFX = new StreamFX<>(myStream);

it is a wrapper

ObservableList<T> list = ...; streamFX.publish(list); !!!streamFX.forEachOrdered(final Consumer<ObjectProperty<? super T>> action)

this will happen in the application thread

Process Chain

Like SwingWorker on steroids

Support for an unlimited chain of background and application tasks

ExceptionHandling

Publisher support

Process Chain

ProcessChain.create(). addRunnableInPlatformThread(() -> blockUI()). addSupplierInExecutor(() -> loadFromServer()). addConsumerInPlatformThread(d -> updateUI(d)). onException(e -> handleException(e)). withFinal(() -> unblockUI()). run();

Demo Time

Concurrency APIDataFX core contains all basic classes

Exception Handling

Can be integrated in all applications

Java8 Lambda supportConfiguration of thread poolAdd async operations the easy way

Flow API

JavaFX BasicsIn JavaFX you should use FXML to define your viewsYou can define a controller for the view

Link from (FXML-) view to the controller

<HBox fx:controller="com.guigarage.MyController">     <TextField fx:id="myTextfield"/>     <Button fx:id="backButton" text="back"/> </HBox>

View ControllerSome kind of inversion of control

Define the FXML in your controller class

Create a view by using the controller class

@FXMLController("Details.fxml") public class DetailViewController {            @FXML         private TextField myTextfield;            @FXML         private Button backButton;               @PostConstruct         public void init() {             myTextfield.setText("Hello!");         } }

define the FXML file

default Java annotation

View Controller

View Context

Support of different contexts

Inject context by using Annotation

Register your model to the context

PlugIn mechanism

Flow APIThe View Controller is good for one view

How to link different view?

Flow APIopenView View

View

View

View

View

search

details

open

diagram

setting*

Master Detailtwo views: master and detail

use FXML

switch from one view to the other one

delete data on user action

decoupling all this stuff!!

Master Detail

MasterView DetailsViewback

detailsdelete

Master Detail

MasterView DetailsViewback

details

FXML Controller FXML Controller

delete

Master Detail

Flow flow = new Flow(MasterViewController.class). withLink(MasterViewController.class, "details", DetailsViewController.class). withLink(EditViewController.class, "back", MasterViewController.class).

direct link between the views

action id

MasterView DetailsViewback

detailsdelete

Flow flow = new Flow(MasterViewController.class). . . . withTaskAction(MasterViewController.class, "delete", RemoveAction.class); !!!withTaskAction(MasterViewController.class, "delete", () -> . . .);

Master Detail

define a custom action …

action name

delete

MasterView DetailsViewback

detailsdelete

… or a Lambda

Master DetailUse controller API for all views

Define a Flow with all views

link with by adding an action

add custom actions to your flow

but how can I use them?

Master Detail@FXMLController("Details.fxml") public class DetailViewController { ! @FXML @ActionTrigger("back") private Button backButton; @PostConstruct public void init() { //... } @PreDestroy public void destroy() { //... } }

controller API

defined

in FXMLbind your flow

actions by annotation

listen to the

flow

Master Detail

bind it by id

@FXMLController("Details.fxml") public class DetailViewController { ! @FXML @ActionTrigger("delete") private Button backButton; @PostConstruct public void init() { //... } @ActionMethod("delete") public void delete() { //... } }

Flow APIshare your data model by using contexts

ViewFlowContext added@FXMLViewFlowContext private ViewFlowContext context;

You can inject contexts in your

action classes, too

@PostConstruct and @PreDestroy are covered by the view livecycle

Flow APIProvides several action types like BackAction

(Animated) Flow Container as a wrapper

DataFX Core ExceptionHandler is used

Flows are reusable

@BackAction private Button backButton;

Demo Time

Flow APIBy using the flow API you don‘t have dependencies between the viewsReuse views and actions Use annotations for configuration

Injection API

Injection APIBy using the flow api you can inject DataFX related classesBut how can you inject any data?

Injection APIBased on JSR 330 and JSR 299

Developed as plugin of the flow API

Use default annotations

Injection APIViewScope: Data only lives in one View

FlowScope: Data only lives in one Flow

ApplicationScope: Data lives in one App

DependentScope: Data will be recreated

Demo Time

Injection APIIt’s not a complete CDI implementation!

Qualifier, etc. are currently not supported

No default CDI implementation is used

Weld and OpenWebBeans core modules are Java EE specific

Injection APIInject your data in the view controller

Define the scope of data types

Add your own scope

DataFX Labs

Validation APIUse of Java Bean Validation (JSR 303)

Supports the JavaFX property API

Developed as a Flow API plugin

public class ValidateableDataModel { @NotNull private StringProperty name; }

Validation API@FXMLController("view.fxml") public class ValidationController { @Valid private ValidateableDataModel model; @Validator private ValidatorFX<ValidationController> validator; public void onAction() { validator.validateAllProperties(); } }

EJB SupportAccess remote EJBs on your client

API & a experimental WildFly implementation

Developed as a Flow API plugin

EJB Support@FXMLController("view.fxml") public class ViewController { ! @RemoteEjb() RemoteCalculator calc; ! @FXML @ActionTrigger("add") Button myButton; ! @ActionMethod("add") public void add() { runInBackground(() -> sysout(calc.add(3, 3))); } !}

Feature TogglesIntegrate feature toggles in the view

Developed as a Flow API plugin@FXMLController("featureView.fxml") public class FeatureController { ! @FXML @HideByFeature("PLAY_FEATURE") private Button playButton; ! @FXML @DisabledByFeature("FEATURE2") private Button button2; !}

www.datafx.io

QA