The document discusses using JavaFX for enterprise application development. It introduces JavaFX basics and best practices for enterprise development including using background threads to load data from servers. It also discusses client architectures like MVVM and frameworks that support JavaFX and integration with Java EE.

1. HENDRIK EBBERS
JAVAFX ENTERPRISE
Do they match?

2. ABOUT ME
• Hendrik Ebbers
!
• Senior Java Architect @ Canoo Engineering AG
• Lead of JUG Dortmund
@hendrikEbbers
www.guigarage.com
hendrik.ebbers@web.de

3. CONTENT
• JavaFX
• Enterprise Development
• JavaFX Enterprise
some basics
Best of JEE Spec
Let’s test the mix

4. NEXT GENERATION UI WITH
JAVAFX

5. BASICS
• Scene Graph
• Property API
• FXML
• CSS
Controls, Layout, Rendering
Bind the Data model
& the UI
Separation of
View & Controller
Flexible & Skinnable

6. DEMO

7. THERE IS A LOT MORE STUFF
• Controls
• Animation
• 3D Support
• Printing
• …

8. ORACLE PRESS
MASTERING
JAVAFX 8
CONTROLS
Sorry for the ad

9. BEST PRACTICE
ENTERPRISE
DEVELOPMENT

10. JAVA EE SPECIFICATIONS
• JAX-RS
• JAX-WS
• JAVA BEAN VALIDATION
• EJB
• CDI
• JSF Flow
Data CRUD
operations
bidirectional
communication
just
annotations
Local & Remote
manage the lifecycle &
inject the data
structure of view

11. THE SEXY MIX
JAVAFX
ENTERPRISE

12. LET’S START WITH A
BIG PROBLEM
CLIENT
SERVER
The hard part

13. DESKTOP DEVELOPERS NEED TO KNOW
MULTITHREADING…
JAVAFX APPLICATION THREAD
REPAINT REPAINT REPAINT REPAINT
KEY
PRESSED REPAINT REPAINT REPAINT MOUSE
CLICKED
Animation
REPAINT REPAINT REPAINT REPAINT
Interaction
Layout

14. LET’S HAVE A LOOK AT A
SMALL USE CASE
STORYBOARD
„LOAD“
CLICKED
BLOCK
Loading
Animation
starts
U I
START
GLOW
LOAD
DATA
STOP
GLOW
RELEASE
U I
UPDATE
U I
Call a
Webservice
Stop
Animation
No user
input

15. OH, THAT ONE IS SIMPLE
CODE SNIPPET
blockUI();
data = loadFromServer();
updateUI(data);
unblockUI();

16. IT’S WORKING LIKE CHARM IN MY
DEV ENVIRONMENT
STORYBOARD
„LOAD“
CLICKED
BLOCK
U I
START
GLOW
LOAD
DATA
STOP
GLOW
RELEASE
U I
UPDATE
U I
DONE

17. BUT THE CUSTOMER HAS PROBLEMS IN THE
REAL ENVIRONMENT
STORYBOARD

18. BUT THE CUSTOMER HAS PROBLEMS IN THE
REAL ENVIRONMENT
STORYBOARD
56K modem…
JavaFX Application
Thread

19. SO WE NEED A
BACKGROUND THREAD
APPLICATION THREAD
„LOAD“
CLICKED
BLOCK
U I
START
GLOW
REPAINT REPAINT REPAINT REPAINT REPAINT
LOAD
DATA
STOP
GLOW
RELEASE
U I
UPDATE
U I
DONE
Background thread

20. LET’S START AND CREATE SOME
HACKED CODE
blockUI();
new Thread(backgroundRunnable).start();
Runnable backgroundRunnable = () -> {
data = loadFromServer();
!
!
!
}
Platform.runLater(() -> {
updateUI(data);
unblockUI();
});
How to go back to
application thread?
What happens if this
throws an Exception?

21. WE NEED TO ADD SOME
EXCEPTION HANDLING
Runnable backgroundRunnable = () -> {
try {
data = loadFromServer();
} catch(Exception e) {
Platform.runLater(() -> {
handleException(e);
});
} finally {
Platform.runLater(() -> {
updateUI(data);
unblockUI();
});
}
}
This doesn’t work!

22. WHO WANTS SOME
SPAGHETTI CODE?
Runnable backgroundRunnable = () -> {
try {
data = loadFromServer();
Platform.runLater(() -> {
updateUI(data);
});
} catch(Exception e) {
Platform.runLater(() -> {
handleException(e);
});
} finally {
Platform.runLater(() -> {
unblockUI();
});
}
}

23. DON’T LIKE IT? UNTIL LAST YEAR THIS WAS
SPAGHETTI CODE XXL
Runnable backgroundRunnable = new Runnable() {
!
@Override
public void run() {
try {
data = loadFromServer();
Platform.runLater(new Runnable() {
!
@Override
public void run() {
updateUI(data);
}
});
} catch(Exception e) {
Platform.runLater(new Runnable() {
!
@Override
public void run() {
handleException(e);
}
});
} finally {
Platform.runLater(new Runnable() {
!
@Override
public void run() {
unblockUI();
}
});
}
}
}
< Java 8

24. WE NEED A
BETTER SOLUTION
DataFX 8
ProcessChain.create().
addRunnableInPlatformThread(() -> blockUI()).
addSupplierInExecutor(() -> loadFromServer()).
addConsumerInPlatformThread(d -> updateUI(d)).
onException(e -> handleException(e)).
withFinal(() -> unblockUI()).
run();

25. DEMO

26. WE CAN EVEN DO IT BETTER BY USING
REACTIVE PROGRAMMING
ListView<Data> listView = new ListView<>();
!
ProcessChain.create().
addRunnableInPlatformThread(() -> listView.getItems().clear()).
addPublishingTask(() -> listView.getItems(),
publisher -> getDataWithCallback(elem -> publisher.publish(elem)).
onException(e -> handleException(e)).
run();
use callbacks!

27. TRY IT TODAY AND ADD THE
DATAFX CORE MODULE
<dependency>
<groupId>io.datafx</groupId>
<artifactId>core</artifactId>
<version>X.Y</version>
</dependency>

28. LET’S PIMP THE APP BY ADDING
TIMEOUT CHECKS
class CommandGetData extends HystrixCommand<List<String>> {
!
public CommandGetData() {
super(Config.withExecutionIsolationThreadTimeoutInMilliseconds(6000)
.withExecutionIsolationThreadInterruptOnTimeout(true)
.withFallbackEnabled(false)));
}
!
@Override
protected List<String> run() {
List<String> list = new ArrayList<>();
for (int i = 0; i < 10; i++) {
list.add("Value " + i);
sleep();
}
return list;
}
!
}
Netflix Hystrix

29. DEMO

30. YOU ONLY NEED TO ADD THE
HYSTRIX DEPENDENCY
<dependency>
<groupId>com.netflix.hystrix</groupId>
<artifactId>hystrix-core</artifactId>
<version>1.3.18</version>
</dependency>

31. LET’S HAVE A LOOK AT THE
CLIENT ARCHITECTURE
APPLICATION
APPLICATION FRAMEWORK
UI TOOLKIT
Moduls &
Workflow based
Best Practice
Open Source
Extendable
Basics
Rendering Pipeline

32. ALL THE COOL PEOPLE TALK ABOUT
MVVM ARCHITECTURE
VIEW MODEL
MODEL
CLIENT
VIEW
Shared between
Server and all clients
SERVER
CLIENT
VIEW
CLIENT
VIEW
Persistence

33. USE IT TODAY WITH THE HELP OF
MVVM FRAMEWORKS
ANKOR.IO MVVMFX

34. PMVC LIBRARY
OPENDOLPHIN
ANOTHER OPTION IS AN
an architecture for the communication between
view and controller in an async [remote] fashion
with presentation models.

35. PRESENTATION MODEL
Client
VIEW
Server
CONTROLLER
Model Model
MODEL
MODEL
SHARED

36. SHARE IT ON
MULTIPLE CLIENTS

37. BUT I HAVE A JAVA ENTERPRISE BACKEND AND NEED A
CLASSIC ARCHITECTURE
CLIENT
MVC MVC MVC
BUSINESS-LAYER
PERSISTENCE
SERVER
MIDDLEWARE
JavaFX
AngularJS
Android
Modularization of
Views and Workflows
REST,
WS & SSE
EJB & CDI
JPA

38. USE ONE OF THESE
FRAMEWORKS
DATAFX AFTERBURNER.FX JACPFX

39. OVERVIEW
AFTERBURNER.FX
• apache licensed
• as lean as possible: 3 classes, no external
dependencies
• combines: FXML, Convention over Configuration and
JSR-330 / @Inject
• integrated with maven 3

40. OVERVIEW
DATAFX
• Core API with concurrency tools
• DataReader API for fast & easy data access
• REST, SSE, WebSocket, …
• Flow API to create workflows
• Injection API

41. MOST OF THEM PROVIDE
• Application Framework for JavaFX
• Supports JEE Middleware standards
• MVC Concept
• Implement Workflows by Flows
• (C)DI Support
Inject the data model
in the view controller
REST
WebSocket
RemoteEJB
Like in JSF 2.2 or
Spring Flow
COOL FEATURES

42. APPLICATION FLOW
OVERVIEW ITEM VIEW
SHOPPING
CART
CHECK OUT
START CREATING AN

43. WE CAN USE THE
OVERVIEW ITEM VIEW
FXML JAVA FXML JAVA
View
Model &
Controller
MVC PATTERN

44. DEMO

45. CURRENT STATE OF THE
(C)DI IMPLEMENTATIONS
• Afterburner.fx and DataFX supports injection
• Afterburner.fx supports the singleton scope
• Afterburner.fx provides injection of properties
• DataFX supports different scopes
(dependent, view, flow, application)
• DataFX provides a plugin mechanism for custom scopes

46. THE DARK SIDE OF
CDI IMPLEMENTATIONS
• Qualifier, etc. are currently not supported
• No default CDI implementation is used
• CDI-Spec is currently Java EE specific
• Weld and OpenWebBeans core modules
are Java EE specific
Hackergarten?
We don’t need a
RequestScope
lots of http apis inside…

47. THERE ARE COOL
BUSINESS CONTROLS
• The community created a lot of cool
controls
• ControlsFX
• FlexGanttFX

48. DEMO

49. LOGIN WITH TWITTER
CLIENT
AUTH
AUTH
user data is
stored here
SHIT! MY HIP CUSTOMER WANTS TO

50. WEB APPS SIMPLY IMPLEMENT THE
CLIENT SERVICE PROVIDER
REQUEST
REQUEST TOKEN
DIRECT USER TO
SERVICE PROVIDER
GRANT
REQUEST TOKEN
OBTAIN USER
AUTHORIZATION
DIRECT USER TO
CONSUMER
REQUEST
ACCESS TOKEN
GRANT
ACCESS TOKEN
Oh, we don’t
have a web app
OAUTH WORKFLOW

51. DEMO

52. BUT JAVAFX CAN
CONTROL THE WEBVIEW
DIRECT USER TO
CONSUMER
GRANT
ACCESS TOKEN
WEBVIEW
LISTENER
extract access token
from URL

53. INTRODUCING A
GUIGARAGE MODULE
<dependency>
<groupId>com.guigarage</groupId>
<artifactId>login-with-fx</artifactId>
<version>X.Y</version>
</dependency>

54. THERE ARE MORE NEW
GUIGARAGE MODULES
WINDOW
STYLER
FLATTER
RESPONSIVE-FX
ANIMATIONS
MATERIAL
DESIGN
Extreme Gui
Makeover
Extreme Gui
Makeover
Extreme Gui
Makeover
Smart UIs for
Mobile and Embedded

55. THX FOR WATCHING
QUESTIONS?