The DataFX 8 Keynote at JavaOne 2014

1. DataFX
From External Data to a UI Flow
and Back
8

2. About us
Johan Vos
@johanvos
. www.lodgon.com
Hendrik Ebbers
@hendrikEbbers
www.guigarage.com
.
Jonathan Giles
@JonathanGiles
www.fxexperience.com

3. Overview

4. Overview
DataSources Websocket
Injection
Flow

5. DataSources

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

7. DataSources
Data
DataFX
DataReader
Converter
DataProvider
Observable /
ObservableList

8. DataSources
iOS Desktop Client
REST
Business Layer
Server
Persistence
Android
Web
Well-known,
Well-documented
Non-proprietary
protocols

9. Protocols
REST
SSE
WebSockets
XML
JSON
JDBC
File

10. JFX characteristics
Observable, 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

11. DataSources
Read Data
REST, SSE, WebSocket
Convert Data
Into Java Objects
XMLConverter, JsonConverter
Provide Data
As Observable instances or ObservableList
instances

12. JavaFX Integration
Using 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);

13. Examples
Project Avatar
JS on the backend
JS on the client
REST, SSE, WebSockets with JSON in
between
Avatarfx demonstrates avatar examples in
JavaFX client

14. REST
Similarity with JAX-RS 2.0 Client API
Simple
Builders or get/set
OAuth support
GET/POST/PUT/DELETE
Classes:
io.datafx.io.RestSource and
io.datafx.io.RestSourceBuilder

15. Demo Time

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

17. SSE
Client initiates connection
Server sends data, DataFX creates an
Object with Observable fields
Every now and then, server sends updated
data
DataFX makes sure the Observable fields
are updated

18. Demo Time

19. WebSockets
Leverage client-part of JSR 356, Java
standard for WebSocket protocol.
Works with any service that supports the
WebSocket protocol
DataFX retrieves incoming messages, and
populates an ObservableList

20. Demo Time

21. Add

22. Concurrency

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

24. DataFX Executor
Executor implementation
supports title, message and progress for
each service
supports Runnable, Callable, Service &
Task
cancel services on the gui
Configurable Thread Pool

25. Demo Time

26. Let‘s wait
like SwingUtilities.invokeAndWait(...)
void ConcurrentUtils.runAndWait(Runnable runnable)
T ConcurrentUtils.runAndWait(Callable<T> callable)
we will collect all
concurrent helper
methods here

27. Stream Support
JDK 8 has Lambdas and the awesome
Stream API
Map and reduce your collections in
parallel
But how to turn into the JavaFX
application thread?

28. Stream Support
StreamFX<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

29. Process Chain
Like SwingWorker on steroids
Support for an unlimited chain of
background and application tasks
ExceptionHandling
Publisher support

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

31. Demo Time

32. Concurrency API
DataFX core contains all basic classes
Can be integrated in all applications
Exception Handling
Java8 Lambda support
Configuration of thread pool
Add async operations the easy way

33. Flow API

34. JavaFX Basics
In JavaFX you should use FXML to
define your views
You 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>

35. View Controller
Some kind of inversion of control
Define the FXML in your controller class
Create a view by using the controller class

36. View Controller
@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

37. View Context
Support of different contexts
Inject context by using Annotation
Register your model to the context
PlugIn mechanism

38. Flow API
The View Controller is good for one view
How to link different view?

39. Flow API
open View View
View
View
View
View
search
details
open
diagram
setting *

40. Master Detail
two views: master and detail
use FXML
switch from one view to the other one
delete data on user action
decoupling all this stuff!!

41. Master Detail
details
MasterView DetailsView
back
delete

42. Master Detail
details
delete
MasterView DetailsView
back
FXML Controller FXML Controller

43. Master Detail
details
MasterView DetailsView
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
back
delete

44. Master Detail
details
MasterView DetailsView
define a custom action …
Flow flow = new Flow(MasterViewController.class).
. . .
withTaskAction(MasterViewController.class, "delete", RemoveAction.class);
!
!
!
action name
withTaskAction(MasterViewController.class, "delete", () -> . . .);
delete
back
delete
… or a Lambda

45. Master Detail
Use 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?

46. 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 FXML bind your flow
actions by annotation
listen to the
flow

47. 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() {
//...
}
}

48. Flow API
share 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

49. Flow API
Provides several action types like
BackAction
@BackAction
private Button backButton;
(Animated) Flow Container as a wrapper
DataFX Core ExceptionHandler is used
Flows are reusable

50. Demo Time

51. Flow API
By using the flow API you don‘t have
dependencies between the views
Reuse views and actions
Use annotations for configuration

52. Injection API

53. Injection API
By using the flow api you can inject
DataFX related classes
But how can you inject any data?

54. Injection API
Based on JSR 330 and JSR 299
Developed as plugin of the flow API
Use default annotations

55. Injection API
ViewScope: Data only lives in one View
FlowScope: Data only lives in one Flow
ApplicationScope: Data lives in one App
DependentScope: Data will be recreated

56. Demo Time

57. Injection API
It’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

58. Injection API
Inject your data in the view controller
Define the scope of data types
Add your own scope

59. DataFX Labs

60. Validation API
Use of Java Bean Validation (JSR 303)
Developed as a Flow API plugin
Supports the JavaFX property API
public class ValidateableDataModel {
@NotNull
private StringProperty name;
}

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

62. EJB Support
Access remote EJBs on your client
Developed as a Flow API plugin
API & a experimental WildFly
implementation

63. 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)));
}
!
}

64. Feature Toggles
Integrate 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;
!
}

65. www.datafx.io

66. QA