JavaFX for Business Application Developers focuses on the possibilities that were added in JavaFX to make the process of developing business applications much more efficient in today's environment. In the past the whole user interface had to be implemented in Java, which meant that often times the developer became the bottle neck. In JavaFX the user interface can be specified in a new dataformat, FXML, which allows non technical people to use tools that work directly with the code base. In addition JavaFX applications can be styled with CSS, allowing designers to make changes directly, which gives them instant feedback. (JavaFX is an environment for building rich client applications. Using a scenegraph at its core and providing many advanced features, e.g. effects, animations, media-support, it greatly simplifies the task of implementing expressive user interfaces with engaging user experience. The API is entirely provided as a Java API making it also available for other programming languages that run on top of the JVM.)

1. JavaFX for Business Application Developers
Michael Heinrichs
Freitag, 8. Juni 2012

2. “charles bridge” by
hodgers (CC BY-SA 2.0)
Freitag, 8. Juni 2012

3. “Coo
k
kodo ing Eggs”
mut ( b
CC B y
Y 2.0
)
“charles bridge” by
hodgers (CC BY-SA 2.0)
Freitag, 8. Juni 2012

4. “Coo
k
kodo ing Eggs”
mut ( b
CC B y
Y 2.0
)
“charles bridge” by
hodgers (CC BY-SA 2.0)
Freitag, 8. Juni 2012

5. The following is intended to outline our general product
direction. It is intended for information purposes only, and may
not be incorporated into any contract. It is not a commitment to
deliver any material, code, or functionality, and should not be
relied upon in making purchasing decisions. The development,
release, and timing of any features or functionality described for
Oracle’s products remains at the sole discretion of Oracle.
Freitag, 8. Juni 2012

6. Freitag, 8. Juni 2012

7. JavaFX is the evolution of the Java rich client platform,
designed to provide a lightweight, hardware accelerated
UI platform that meets tomorrow’s needs.
Freitag, 8. Juni 2012

8. JavaFX is Swing in cool!
Freitag, 8. Juni 2012

9. •Examples
• Sample Application
• Process Overview
• Defining the View
• Hooking up Controllers
• Styling with CSS
Freitag, 8. Juni 2012

10. Examples
Freitag, 8. Juni 2012

11. Freitag, 8. Juni 2012

12. Freitag, 8. Juni 2012

13. Freitag, 8. Juni 2012

14. Freitag, 8. Juni 2012

15. Freitag, 8. Juni 2012

16. Freitag, 8. Juni 2012

17. Sample Application
Freitag, 8. Juni 2012

18. Freitag, 8. Juni 2012

19. Java EE
JavaDB
RESTful WS
Jersey
JavaFX UI
Freitag, 8. Juni 2012

20. Process Overview
Freitag, 8. Juni 2012

21. UX Graphical
Developer
Designer Designer
package com.oracle.conferenceplanner.controller;
import com.oracle.conferenceplanner.Env;
import com.oracle.conferenceplanner.Messages;
import com.oracle.conferenceplanner.entities.Session;
import com.oracle.conferenceplanner.entities.Speaker;
import com.oracle.conferenceplanner.view.GenericListCell;
import com.sun.javafx.util.MessageBus;
import java.net.URL;
import java.util.Collection;
import java.util.ResourceBundle;
import javafx.animation.Animation;
import javafx.animation.PauseTransitionBuilder;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.concurrent.Service;
import javafx.concurrent.Task;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.*;
import javafx.scene.input.KeyEvent;
import javafx.util.Callback;
import javafx.util.Duration;
/**
*
* @author Michael Heinrichs
*/
public class MainScreen implements Initializable {
@FXML private TextField searchField;
@FXML private ToggleGroup toggleSearch;
@FXML private Toggle toggleSession;
@FXML private ProgressIndicator progressIndicator;
@FXML private ListView searchResultList;
private final Service<Collection<?>> dataFetcher = new
Service<Collection<?>>() {
@Override
protected Task<Collection<?>> createTask() {
final String currentSearchString = searchField.getText();
final boolean getSessions =
toggleSearch.getSelectedToggle().equals(toggleSession);
return new Task<Collection<?>>() {
@Override
protected Collection<?> call() throws Exception {
return getSessions?
Session.findLike(Env.getInstance
().getWebResource(), currentSearchString)
: Speaker.findLike(Env.getInstance
().getWebResource(), currentSearchString);
}
};
}
@Override
Java Code
Freitag, 8. Juni 2012

22. UX Graphical
Developer
Designer Designer
<?xml version="1.0" encoding="UTF-8"?> package com.oracle.conferenceplanner.controller;
.root {
<?import com.oracle.conferenceplanner.view.*?> import com.oracle.conferenceplanner.Env; -fx-background-color: black;
<?import java.lang.*?> import com.oracle.conferenceplanner.Messages; -fx-font-family: 'Impact';
<?import java.util.*?> import com.oracle.conferenceplanner.entities.Session; /* -fx-font-fill: #99C0D0;*/
<?import javafx.geometry.*?> import com.oracle.conferenceplanner.entities.Speaker; -fx-font-fill: black;
<?import javafx.scene.control.*?> import com.oracle.conferenceplanner.view.GenericListCell; }
<?import javafx.scene.layout.*?> import com.sun.javafx.util.MessageBus; .label {
<?import javafx.scene.paint.*?> import java.net.URL; -fx-text-fill: #7C5FDD;
<?import javafx.scene.shape.*?> import java.util.Collection; }
import java.util.ResourceBundle; .text-area {
<SplitPane dividerPositions="0.3" focusTraversable="true" import javafx.animation.Animation; -fx-text-fill: #7C5FDD;
xmlns:fx="http://javafx.com/fxml" import javafx.animation.PauseTransitionBuilder; }
fx:controller="com.oracle.conferenceplanner.controller.MainScreen"> import javafx.beans.value.ChangeListener; .text-field {
<items> import javafx.beans.value.ObservableValue; -fx-background-color: transparent;
<AnchorPane> import javafx.concurrent.Service; -fx-border-color: #7C5FDD;
<children> import javafx.concurrent.Task; -fx-text-fill: #D99C10;
<VBox spacing="10.0" AnchorPane.bottomAnchor="0.0" import javafx.event.ActionEvent; -fx-prompt-text-fill: #7C5FDD;
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" import javafx.event.EventHandler; -fx-cursor: text;
AnchorPane.topAnchor="0.0"> import javafx.fxml.FXML; }
<children> import javafx.fxml.Initializable;
<TextField fx:id="searchField" minHeight="-Infinity" import javafx.scene.control.*; .toggle-button {
onKeyTyped="#handleSearchBoxTyped" promptText="Search" /> import javafx.scene.input.KeyEvent; -fx-background-color: #7C5FDD;
<HBox spacing="10.0"> import javafx.util.Callback; -fx-background-radius: 0;
<children> import javafx.util.Duration; -fx-text-fill: black;
<ToggleButton fx:id="toggleSession" selected="true" -fx-alignment: CENTER;
text="Session"> /** -fx-content-display: LEFT;
<toggleGroup> * }
<ToggleGroup fx:id="toggleSearch" /> * @author Michael Heinrichs
</toggleGroup> */ .toggle-button:selected {
</ToggleButton> public class MainScreen implements Initializable { -fx-background-color: #D99C10;
<ToggleButton fx:id="toggleSpeaker" text="Speaker" }
toggleGroup="$toggleSearch" /> @FXML private TextField searchField;
</children> @FXML private ToggleGroup toggleSearch; .list-view {
</HBox> @FXML private Toggle toggleSession; -fx-background-color: transparent;
<StackPane VBox.vgrow="ALWAYS"> @FXML private ProgressIndicator progressIndicator; }
<children> @FXML private ListView searchResultList;
<ListView fx:id="searchResultList" /> .list-view:vertical .list-cell {
<ProgressIndicator fx:id="progressIndicator" private final Service<Collection<?>> dataFetcher = new -fx-background-insets: 0, 5 0, 10 15, 0 25;
maxHeight="-Infinity" maxWidth="-Infinity" visible="false" /> Service<Collection<?>>() { -fx-padding: 15 20;
</children> @Override }
</StackPane> protected Task<Collection<?>> createTask() {
</children> final String currentSearchString = searchField.getText(); .list-view:horizontal .list-cell {
</VBox> final boolean getSessions = -fx-background-insets: 0, 0 5, 5 20, 0 30;
</children> toggleSearch.getSelectedToggle().equals(toggleSession); -fx-padding: 10 25;
<padding> return new Task<Collection<?>>() { }
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" /> @Override
</padding> protected Collection<?> call() throws Exception { .list-cell {
</AnchorPane> return getSessions? -fx-background-color: black, #7C5FDD, black, black;
<AnchorPane> Session.findLike(Env.getInstance -fx-background-radius: 0, 10, 5, 0;
<children> ().getWebResource(), currentSearchString) }
<StackPane fx:id="detailsPane" AnchorPane.bottomAnchor="0.0" : Speaker.findLike(Env.getInstance
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" ().getWebResource(), currentSearchString); .list-cell .label {
AnchorPane.topAnchor="0.0"> } -fx-text-fill: #7C5FDD;
<children> }; }
<fx:include source="session_details.fxml"/> }
<fx:include source="speaker_details.fxml"/> .list-cell .title {
</children> @Override -fx-text-fill: #D99C10;
FXML Java Code CSS
Freitag, 8. Juni 2012

23. Developer
package com.oracle.conferenceplanner.controller;
import com.oracle.conferenceplanner.Env;
import com.oracle.conferenceplanner.Messages;
import com.oracle.conferenceplanner.entities.Session;
import com.oracle.conferenceplanner.entities.Speaker;
import com.oracle.conferenceplanner.view.GenericListCell;
import com.sun.javafx.util.MessageBus;
import java.net.URL;
import java.util.Collection;
import java.util.ResourceBundle;
import javafx.animation.Animation;
import javafx.animation.PauseTransitionBuilder;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.concurrent.Service;
import javafx.concurrent.Task;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.*; .root {
import javafx.scene.input.KeyEvent; -fx-background-color: black;
import javafx.util.Callback; -fx-font-family: 'Impact';
import javafx.util.Duration; /* -fx-font-fill: #99C0D0;*/
-fx-font-fill: black;
/** }
<?xml version="1.0" encoding="UTF-8"?> * .label {
* @author Michael Heinrichs -fx-text-fill: #7C5FDD;
<?import com.oracle.conferenceplanner.view.*?> */ }
<?import java.lang.*?> public class MainScreen implements Initializable { {
.text-area
<?import java.util.*?> -fx-text-fill: #7C5FDD;
<?import javafx.geometry.*?> @FXML private TextField searchField; }
<?import javafx.scene.control.*?> .text-field {
@FXML private ToggleGroup toggleSearch;
<?import javafx.scene.layout.*?> @FXML private Toggle toggleSession; -fx-background-color: transparent;
<?import javafx.scene.paint.*?> -fx-border-color: #7C5FDD;
@FXML private ProgressIndicator progressIndicator;
<?import javafx.scene.shape.*?> @FXML private ListView searchResultList; -fx-text-fill: #D99C10;
-fx-prompt-text-fill: #7C5FDD;
<SplitPane dividerPositions="0.3" focusTraversable="true" -fx-cursor: text;
private final Service<Collection<?>> dataFetcher = new
xmlns:fx="http://javafx.com/fxml" Service<Collection<?>>() { }
fx:controller="com.oracle.conferenceplanner.controller.MainScreen">
@Override
<items> .toggle-button {
protected Task<Collection<?>> createTask() {
<AnchorPane> -fx-background-color: #7C5FDD;
final String currentSearchString = searchField.getText();
<children> final boolean getSessions = -fx-background-radius: 0;
<VBox spacing="10.0" AnchorPane.bottomAnchor="0.0" -fx-text-fill: black;
toggleSearch.getSelectedToggle().equals(toggleSession);
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" -fx-alignment: CENTER;
return new Task<Collection<?>>() {
AnchorPane.topAnchor="0.0"> @Override -fx-content-display: LEFT;
<children> protected Collection<?> }call() throws Exception {
<TextField fx:id="searchField" minHeight="-Infinity" return getSessions?
onKeyTyped="#handleSearchBoxTyped" promptText="Search" /> .toggle-button:selected {
Session.findLike(Env.getInstance
<HBox spacing="10.0"> ().getWebResource(), currentSearchString) -fx-background-color: #D99C10;
<children> }
: Speaker.findLike(Env.getInstance
<ToggleButton fx:id="toggleSession" selected="true"
().getWebResource(), currentSearchString);
text="Session"> } .list-view {
<toggleGroup> }; -fx-background-color: transparent;
<ToggleGroup fx:id="toggleSearch" /> } }
</toggleGroup>
</ToggleButton> @Override .list-view:vertical .list-cell {
<ToggleButton fx:id="toggleSpeaker" text="Speaker" -fx-background-insets: 0, 5 0, 10 15, 0 25;
toggleGroup="$toggleSearch" /> -fx-padding: 15 20;
</children> }
</HBox>
<StackPane VBox.vgrow="ALWAYS"> .list-view:horizontal .list-cell {
<children> -fx-background-insets: 0, 0 5, 5 20, 0 30;
<ListView fx:id="searchResultList" /> -fx-padding: 10 25;
<ProgressIndicator fx:id="progressIndicator" }
maxHeight="-Infinity" maxWidth="-Infinity" visible="false" />
</children> .list-cell {
</StackPane> -fx-background-color: black, #7C5FDD, black, black;
</children> -fx-background-radius: 0, 10, 5, 0;
</VBox> }
</children>
<padding> .list-cell .label {
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" /> -fx-text-fill: #7C5FDD;
</padding> }
</AnchorPane>
<AnchorPane> .list-cell .title {
<children> -fx-text-fill: #D99C10;
<StackPane fx:id="detailsPane" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<children>
<fx:include source="session_details.fxml"/>
<fx:include source="speaker_details.fxml"/>
</children>
UX Graphical
JavaFX
Designer Designer
Freitag, 8. Juni 2012

24. Defining the view
Freitag, 8. Juni 2012

25. Freitag, 8. Juni 2012

26. Stage
Freitag, 8. Juni 2012

27. Stage
Scene
Freitag, 8. Juni 2012

28. Stage
Scene
Scenegraph
Freitag, 8. Juni 2012

29. JFrame
Name
Adress
Mail
OK Cancel
Freitag, 8. Juni 2012

30. JFrame
Name JFXPanel : JComponent
Adress
Mail
OK Cancel
Freitag, 8. Juni 2012

31. JFrame
Name JFXPanel : JComponent
Adress Scene
Mail
OK Cancel
Freitag, 8. Juni 2012

32. JFrame
Name JFXPanel : JComponent
Adress Scene
Mail
Scenegraph
OK Cancel
Freitag, 8. Juni 2012

33. Freitag, 8. Juni 2012

34. Freitag, 8. Juni 2012

35. Hooking up Controllers
Freitag, 8. Juni 2012

36. Freitag, 8. Juni 2012

37. Freitag, 8. Juni 2012

38. Freitag, 8. Juni 2012

39. Freitag, 8. Juni 2012

40. Freitag, 8. Juni 2012

41. Styling with CSS
Freitag, 8. Juni 2012

42. Freitag, 8. Juni 2012

43. Freitag, 8. Juni 2012

44. Freitag, 8. Juni 2012

45. Freitag, 8. Juni 2012

46. Freitag, 8. Juni 2012

47. Freitag, 8. Juni 2012

48. Freitag, 8. Juni 2012

49. Summary
Freitag, 8. Juni 2012

50. Freitag, 8. Juni 2012

51. Freitag, 8. Juni 2012

52. Freitag, 8. Juni 2012

53. Freitag, 8. Juni 2012

54. Freitag, 8. Juni 2012

55. Freitag, 8. Juni 2012

56. UX Graphical
Developer
Designer Designer
package com.oracle.conferenceplanner.controller;
import com.oracle.conferenceplanner.Env;
import com.oracle.conferenceplanner.Messages;
import com.oracle.conferenceplanner.entities.Session;
import com.oracle.conferenceplanner.entities.Speaker;
import com.oracle.conferenceplanner.view.GenericListCell;
import com.sun.javafx.util.MessageBus;
import java.net.URL;
import java.util.Collection;
import java.util.ResourceBundle;
import javafx.animation.Animation;
import javafx.animation.PauseTransitionBuilder;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.concurrent.Service;
import javafx.concurrent.Task;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.*;
import javafx.scene.input.KeyEvent;
import javafx.util.Callback;
import javafx.util.Duration;
/**
*
* @author Michael Heinrichs
*/
public class MainScreen implements Initializable {
@FXML private TextField searchField;
@FXML private ToggleGroup toggleSearch;
@FXML private Toggle toggleSession;
@FXML private ProgressIndicator progressIndicator;
@FXML private ListView searchResultList;
private final Service<Collection<?>> dataFetcher = new
Service<Collection<?>>() {
@Override
protected Task<Collection<?>> createTask() {
final String currentSearchString = searchField.getText();
final boolean getSessions =
toggleSearch.getSelectedToggle().equals(toggleSession);
return new Task<Collection<?>>() {
@Override
protected Collection<?> call() throws Exception {
return getSessions?
Session.findLike(Env.getInstance
().getWebResource(), currentSearchString)
: Speaker.findLike(Env.getInstance
().getWebResource(), currentSearchString);
}
};
}
@Override
Freitag, 8. Juni 2012

57. Developer
package com.oracle.conferenceplanner.controller;
import com.oracle.conferenceplanner.Env;
import com.oracle.conferenceplanner.Messages;
import com.oracle.conferenceplanner.entities.Session;
import com.oracle.conferenceplanner.entities.Speaker;
import com.oracle.conferenceplanner.view.GenericListCell;
import com.sun.javafx.util.MessageBus;
import java.net.URL;
import java.util.Collection;
import java.util.ResourceBundle;
import javafx.animation.Animation;
import javafx.animation.PauseTransitionBuilder;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.concurrent.Service;
import javafx.concurrent.Task;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.*; .root {
import javafx.scene.input.KeyEvent; -fx-background-color: black;
import javafx.util.Callback; -fx-font-family: 'Impact';
import javafx.util.Duration; /* -fx-font-fill: #99C0D0;*/
-fx-font-fill: black;
/** }
<?xml version="1.0" encoding="UTF-8"?> * .label {
* @author Michael Heinrichs -fx-text-fill: #7C5FDD;
<?import com.oracle.conferenceplanner.view.*?> */ }
<?import java.lang.*?> public class MainScreen implements Initializable { {
.text-area
<?import java.util.*?> -fx-text-fill: #7C5FDD;
<?import javafx.geometry.*?> @FXML private TextField searchField; }
<?import javafx.scene.control.*?> .text-field {
@FXML private ToggleGroup toggleSearch;
<?import javafx.scene.layout.*?> @FXML private Toggle toggleSession; -fx-background-color: transparent;
<?import javafx.scene.paint.*?> -fx-border-color: #7C5FDD;
@FXML private ProgressIndicator progressIndicator;
<?import javafx.scene.shape.*?> @FXML private ListView searchResultList; -fx-text-fill: #D99C10;
-fx-prompt-text-fill: #7C5FDD;
<SplitPane dividerPositions="0.3" focusTraversable="true" -fx-cursor: text;
private final Service<Collection<?>> dataFetcher = new
xmlns:fx="http://javafx.com/fxml" Service<Collection<?>>() { }
fx:controller="com.oracle.conferenceplanner.controller.MainScreen">
@Override
<items> .toggle-button {
protected Task<Collection<?>> createTask() {
<AnchorPane> -fx-background-color: #7C5FDD;
final String currentSearchString = searchField.getText();
<children> final boolean getSessions = -fx-background-radius: 0;
<VBox spacing="10.0" AnchorPane.bottomAnchor="0.0" -fx-text-fill: black;
toggleSearch.getSelectedToggle().equals(toggleSession);
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" -fx-alignment: CENTER;
return new Task<Collection<?>>() {
AnchorPane.topAnchor="0.0"> @Override -fx-content-display: LEFT;
<children> protected Collection<?> }call() throws Exception {
<TextField fx:id="searchField" minHeight="-Infinity" return getSessions?
onKeyTyped="#handleSearchBoxTyped" promptText="Search" /> .toggle-button:selected {
Session.findLike(Env.getInstance
<HBox spacing="10.0"> ().getWebResource(), currentSearchString) -fx-background-color: #D99C10;
<children> }
: Speaker.findLike(Env.getInstance
<ToggleButton fx:id="toggleSession" selected="true"
().getWebResource(), currentSearchString);
text="Session"> } .list-view {
<toggleGroup> }; -fx-background-color: transparent;
<ToggleGroup fx:id="toggleSearch" /> } }
</toggleGroup>
</ToggleButton> @Override .list-view:vertical .list-cell {
<ToggleButton fx:id="toggleSpeaker" text="Speaker" -fx-background-insets: 0, 5 0, 10 15, 0 25;
toggleGroup="$toggleSearch" /> -fx-padding: 15 20;
</children> }
</HBox>
<StackPane VBox.vgrow="ALWAYS"> .list-view:horizontal .list-cell {
<children> -fx-background-insets: 0, 0 5, 5 20, 0 30;
<ListView fx:id="searchResultList" /> -fx-padding: 10 25;
<ProgressIndicator fx:id="progressIndicator" }
maxHeight="-Infinity" maxWidth="-Infinity" visible="false" />
</children> .list-cell {
</StackPane> -fx-background-color: black, #7C5FDD, black, black;
</children> -fx-background-radius: 0, 10, 5, 0;
</VBox> }
</children>
<padding> .list-cell .label {
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" /> -fx-text-fill: #7C5FDD;
</padding> }
</AnchorPane>
<AnchorPane> .list-cell .title {
<children> -fx-text-fill: #D99C10;
<StackPane fx:id="detailsPane" AnchorPane.bottomAnchor="0.0"
AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"
AnchorPane.topAnchor="0.0">
<children>
<fx:include source="session_details.fxml"/>
<fx:include source="speaker_details.fxml"/>
</children>
UX Graphical
JavaFX
Designer Designer
Freitag, 8. Juni 2012

58. • http://blog.netopyr.com, @net0pyr
• JavaFX Website
http://javafx.com
• OTN Forum
http://forums.oracle.com
• Bugs and Feature Requests
http://javafx-jira.kenai.com
• API Discussions
openjfx-dev@openjdk.java.net
Freitag, 8. Juni 2012