Programming with JavaFX

Tecniche di Programmazione A.A. 2013/2014

Summary
1.

2.
3.
4.

5.
6.
7.
8.
9.

About and History

Basic concepts
Minimal JavaFX Application
Application structure
The Scene Graph
Events
Model-View-Controller
The Controller in FXML
Resources

Tecniche di programmazione

A.A. 2013/2014

About and History

Introduction to JavaFX

GUI in Java
Graphic framework available in Java

Swing
Extremely powerful, many extensions available
Complex to master, requires low-level handling
Hard to create visually pleasing applications

Alternatives available

Most notable: SWT (Eclipse)

Still cumbersome to master

On a different Universe, web-based user interfaces

became nicer and faster to create

Tecniche di programmazione

A.A. 2013/2014

JavaFX 1.0 forget it

JavaFX 1 and JavaFX 2 are completely different
Version 1 relied on a scripting language to describe
scenes, with hooks to activate Java code
JavaFX 1.x is now deprecated

Tecniche di programmazione

A.A. 2013/2014

JavaFX 2.x
Redesigned from scratch
The JavaFX 2.x framework is entirely written in Java
For visual layout, an XML file may also be used (called
FXML)
Graphic appearance borrows from web-standard CSS
style sheets
UI programming is based on easy to handle events and
bindings

Oracle plans to deprecate Swing in favor of JavaFX 2

Tecniche di programmazione

A.A. 2013/2014

Getting and running JavaFX

JavaFX is already included in Oracle JDK 7

Not in JDK 6.x

Not in OpenJDK (beware, Linux users!)

The new JDK 8 will include significant JavaFX

improvements. Not used in this course (not yet
published)
Recommended:

JavaFX Scene Builder

Eclipse: e(fx)clipse plugin, available in the Eclipse Marketplace

Download links are in the course webpage

Tecniche di programmazione

A.A. 2013/2014

Basic concepts
Introduction to JavaFX

Key concepts in JavaFX

Stage: where the application will be displayed (e.g., a
Windows window)
Scene: one container of Nodes that compose one page
of your application
Node: an element in the Scene, with a visual appearance
and an interactive behavior. Nodes may be hierarchically
nested

My best friend is the JavaFX JavaDoc API

http://docs.oracle.com/javafx/2/api/index.html
9

Tecniche di programmazione

A.A. 2013/2014

Some Leaf Nodes (Controls)

10

Tecniche di programmazione

A.A. 2013/2014

Some Parent Nodes (Container Panes)

BorderPane (5-areas)
Hbox,Vbox (linear sequence)
StackPane (overlay all children)
GridPane (row x columns)
FlowPane (flowing boxes, wrap around)
TilePane (flowpane with equally sized boxes)
AnchorPane (magnetically attach nodes at corners or
sides)

11

Tecniche di programmazione

A.A. 2013/2014

Some Nodes (Charts)

12

Tecniche di programmazione

A.A. 2013/2014

ChoiceBox
ColorPicker
ComboBoxBase

Nodes family

Button

ComboBox
CheckBox
ButtonBase
MenuButton
Cell
Labeled

ToggleButton
Label

ListView
TitledPane

Control

MenuBar

Group

Separator
Slider
TabPane
TextArea
TextInputControl

Parent

TextField
ToolBar
AnchorPane
TreeView
BorderPane
Axis
FlowPane
Region

Chart

WebView

Pane

GridPane
HBox

javafx.scene.Node

Focus on
Panes
and
Controls

Arc
StackPane
Circle

TilePane
Line
VBox
Shape

Polygon

Canvas

Polyline

Imageview

Rectangle

Text

13

Tecniche di programmazione

A.A. 2013/2014

And more coming

14

Tecniche di programmazione

A.A. 2013/2014

Empty JavaFX window

public class Main extends Application {
@Override
public void start(Stage stage) {
Group root = new Group(); // the root is Group or Pane
Scene scene = new Scene(root, 500, 500, Color.BLACK);
stage.setTitle("JavaFX Demo");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}

15

Tecniche di programmazione

A.A. 2013/2014

Adding some shape

public class Main extends Application {
@Override
public void start(Stage stage) {
Group root = new Group();
Scene scene = new Scene(root, 500, 500, Color.BLACK);
stage.setTitle("JavaFX Demo");
Rectangle r = new Rectangle(25,25,250,250);
r.setFill(Color.BLUE);
root.getChildren().add(r);
stage.setScene(scene);
stage.show();
}
}
16

Tecniche di programmazione

A.A. 2013/2014

How to add scene content

In Java code

By creating and adding new Node subclasses

By using node Builder classes

Standard way, in Java (boring and error-prone)

Programming pattern, later on

In FXML

17

By writing XML directly

By using the Scene Editor
And loading the FXML into the application

Tecniche di programmazione

A.A. 2013/2014

JavaFX Scene Builder

18

Tecniche di programmazione

A.A. 2013/2014

FXML fragment
. . .
<HBox id="HBox" alignment="CENTER" spacing="15.0"
AnchorPane.rightAnchor="23.0" AnchorPane.topAnchor="22.0">
<children>
<Button id="button1" fx:id="newIssue" onAction="#newIssueFired"
text="New" />
<Button id="button2" fx:id="saveIssue" onAction="#saveIssueFired"
text="Save" />
<Button id="button3" fx:id="deleteIssue" onAction="#deleteIssueFired"
text="Delete" />
</children>
</HBox>
<ImageView id="IssueTrackingLite" layoutX="14.0" layoutY="20.0">
<image>
<Image url="@IssueTrackingLite.png" preserveRatio="true" smooth="true" />
</image>
</ImageView>
. . .
19

Tecniche di programmazione

A.A. 2013/2014

Building a scene from FXML

public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(
getClass().getResource("circle.fxml"));
stage.setTitle("Circle Demo");
stage.setScene(new Scene(root, 500, 150));
stage.show();
}

20

Tecniche di programmazione

A.A. 2013/2014

Application structure
Introduction to JavaFX

Separation of concerns

22

Tecniche di programmazione

A.A. 2012/2013

Typical Class Diagram

24

Tecniche di programmazione

A.A. 2013/2014

General rules

A JavaFX application extends

javafx.application.Application
The main() method should call Application.launch()
The start() method is the main entry point for all JavaFX
applications

Called with a Stage connected to the Operating Systems

window

The content of the scene is represented as a hierarchical

scene graph of nodes

25

Stage is the top-level JavaFX container

Scene is the container for all content
Tecniche di programmazione

A.A. 2012/2013

Minimal example
public class HelloWorld extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("Hello World!");

StackPane root = new StackPane();

Button btn = new Button();
btn.setText("Say 'Hello World'");
root.getChildren().add(btn);
primaryStage.setScene(new Scene(root, 300, 250));
primaryStage.show();
}
}
26

Tecniche di programmazione

A.A. 2012/2013

Stage vs. Scene

javafx.stage.Stage

javafx.scene.Scene

The JavaFX Stage class is the

top level JavaFX container.
The primary Stage is
constructed by the platform.
Additional Stage objects may
be constructed by the
application.
A stage can optionally have
an owner Window.
27

The container for all content

in a scene graph
The application must specify
the root Node for the scene
graph
Root may be Group (clips),
Region, Control (resizes)
If no initial size is specified, it
will automatically compute it

Tecniche di programmazione

A.A. 2012/2013

Nodes

The Scene is populated with a tree of Nodes

Nodes have Properties

Visual (size, position, z-order, color, ...)

Contents (text, value, data sets, ...)
Programming (event handlers, controller)

Nodes generate Events

Layout components
UI Controls
Charts
Shapes

UI events

Nodes can be styled with CSS

28

Tecniche di programmazione

A.A. 2012/2013

Events

FX Event (javafx.event.Event):

Event Source => a Node

Event Target
Event Type

Usually generated after some user action

ActionEvent, TreeModificationEvent, InputEvent, ListView.E
ditEvent, MediaErrorEvent, TableColumn.CellEditEvent,Tre
eItem.TreeModificationEvent, TreeView.EditEvent, WebEve
nt, WindowEvent, WorkerStateEvent
You can define event handlers in your application

29

Tecniche di programmazione

A.A. 2012/2013

Properties

Extension of the Java Beans convention

Encapsulate properties of an object

May be used also outside JavaFX

Different types (string, number, object, collection, ...)
Set/Get
Observe changes
Supports lazy evaluation

Each Node has a

large set of Properties

30

Tecniche di programmazione

A.A. 2012/2013

Bindings

Automatically connect (bind) one Property to another

Property

Whenever the source property changes, the bound one is

automatically updated
Multiple bindings are supported
Lazy evaluation is supported
Bindings may also involve computations (arithmetic operators,
if-then-else, string concatenation, ...) that are automatically
evaluated

May be used to automate UI

May be used to connect the Model with the View
31

Tecniche di programmazione

A.A. 2012/2013

The Scene graph

Introduction to JavaFX

Nodes

Root node: top level container

Intermediate nodes:

Leaf (terminal) nodes:

Containers
Layout managers
UI Composite controls
Shapes
UI Controls

Organized as a Hierarchical tree

33

Tecniche di programmazione

A.A. 2012/2013

ChoiceBox
ColorPicker
ComboBoxBase

Button
ComboBox

Nodes family

CheckBox
ButtonBase
MenuButton
Cell
Labeled

ToggleButton
Label

ListView
Control

TitledPane

Focus on
Panes
and
Controls

MenuBar
Group
Slider

TabPane
TextArea
TextInputControl
TextField

Parent

ToolBar
AnchorPane
TreeView
BorderPane
Axis
FlowPane
Region

Chart

WebView

Pane

GridPane

JavaDoc
is your
friend

HBox

javafx.scene.Node
Arc

StackPane
Circle
TilePane
Line
Shape

VBox
Polygon

Canvas

Rectangle

34

Imageview
Text

Tecniche di programmazione

A.A. 2012/2013

Exploring Controls and Examples

JavaFX Ensemble demo

application
Download from Oracle
site: JavaFX Demos and
Samples Downloads
Run Ensemble.jnlp

35

Tecniche di programmazione

A.A. 2012/2013

UI Form Controls

Controls may be
combined to construct
Forms
Control Nodes have a
value property

May be linked to application

code

Control Nodes generate

UI Events

36

Button: ActionEvent
Text: ActionEvent,
KeyTyped, KeyPressed,
MouseClicked, ...
Tecniche di programmazione

A.A. 2012/2013

37

Tecniche di programmazione

A.A. 2012/2013

Layout Class Hierarchy

Group:

Region:

Doesnt perform any positioning of children.

To statically assemble a collection of nodes in fixed positions
To apply an effect or transform to that collection.
base class for all general purpose layout panes
resizable and stylable via CSS
Supports dynamic layout by sizing and positioning children

Control:

the base class for all skinnable controls

resizable and subclasses are all stylable via CSS
Controls delegate layout to their skins (which are Regions)
Each layout Control subclass provides API for adding content in the
appropriate place within its skin

38

you do not add children to a control directly.

Tecniche di programmazione

A.A. 2012/2013

39

Tecniche di programmazione

A.A. 2012/2013

40

Tecniche di programmazione

A.A. 2012/2013

41

Tecniche di programmazione

A.A. 2012/2013

42

Tecniche di programmazione

A.A. 2012/2013

43

Tecniche di programmazione

A.A. 2012/2013

44

Tecniche di programmazione

A.A. 2012/2013

45

Tecniche di programmazione

A.A. 2012/2013

46

Tecniche di programmazione

A.A. 2012/2013

Creating the Scene Graph

The Java way

Create Control Nodes

Set properties to new nodes
Add new nodes to parent node
With Constructors and/or with Builders

The FXML way

47

Create a FXML file

Define Nodes and Properties in FXML
Load the FXML
(Optionally, add new nodes/properties the Java way)

Tecniche di programmazione

A.A. 2012/2013

Example: one text input field

Constructors

TextField text = new TextField("Text");

text.setMaxSize(140, 20);
root.getChildren().add(text);

TextField text = TextFieldBuilder().create()

.maxHeight(20).maxWidth(140)
.text("Text")
.build() ;
Builders

root.getChildren().add(text);
48

Tecniche di programmazione

A.A. 2012/2013

public class HelloDevoxx extends Application {

public static void main(String[] args)
{
launch(args);
}
@Override
public void start(Stage primaryStage)
{
primaryStage.setTitle("Hello Devoxx");
Group root = new Group();
Scene scene = new Scene(root, 400, 250,
Color.ALICEBLUE);
Text text = new Text();
text.setX(105);
text.setY(120);
text.setFont(new Font(30));
text.setText("Hello Devoxx");
root.getChildren().add(text);
primaryStage.setScene(scene);
primaryStage.show();
}
}

49

Tecniche di programmazione

A.A. 2012/2013

public void start(Stage primaryStage)

{
primaryStage.setTitle("Hello Devoxx");
primaryStage.setScene(SceneBuilder.create()
.width(400).height(250).fill(Color.ALICEBLUE)
.root(GroupBuilder.create().children(
TextBuilder.create()
.x(105).y(120)
.text("Hello Devoxx")
.font(new Font(30)).build()
).build()
).build());
primaryStage.show();
}

50

Tecniche di programmazione

A.A. 2012/2013

The FXML way...

XML-based format
Nested tree of XML Elements, corresponding to Nodes
XML Attributes corresponding to (initial) properties of
nodes

JavaFX Scene Builder is a GUI for creating FXML files

The FXMLLoader class reads a FXML file and creates all

the Nodes

51

Tecniche di programmazione

A.A. 2012/2013

Example

52

Tecniche di programmazione

A.A. 2012/2013

JavaFX Scene Builder

53

Tecniche di programmazione

A.A. 2012/2013

FXMLLoader
@Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(
getClass().getResource("fxml_example.fxml"));
stage.setTitle("FXML Welcome");
stage.setScene(new Scene(root, 300, 275));
stage.show();
}

54

Tecniche di programmazione

A.A. 2012/2013

Linking FXML and Java

FXML element may have an associated attribute fx:id

Nodes may be later retrieved by

public Node lookup(java.lang.String selector)

Finds a node with a specified ID in the current sub-tree
Example:

scene.lookup("#myId");

Node references can also be injected using the

@FXML annotation (see later)

55

Tecniche di programmazione

A.A. 2012/2013

Events
Introduction to JavaFX

Interacting with Nodes

In JavaFX applications, events are notifications that

something has happened.

An event represents an occurrence of something of interest to

the application
As a user clicks a button, presses a key, moves a mouse, or
performs other actions, events are dispatched.

Registered event filters and event handlers within the

application

57

receive the event and

provide a response.

Tecniche di programmazione

A.A. 2012/2013

What is an event?

58

Tecniche di programmazione

A.A. 2012/2013

Event propagation

Events are generated on the source node

Events propagated in the scene graph hierarchy (dispatch
chain), in two phases

Dispatching: downwards, from root to source node

Bubbling: upwards, from source node to root

Processes Event Filters registered in the nodes

Processes Event Handlers registered in the nodes

If you want an application to be notified

when an event occurs, register a filter
or a handler for the event
Handlers may consume the event
59

Tecniche di programmazione

A.A. 2012/2013

Event Handlers

Implements the EventHandler interface

Executed during the event bubbling phase.
If does not consume the event, it is propagated to the
parent.
A node can register more than one handler.
Handlers for a specific event type are executed before
handlers for generic event types.

For example, a handler for the KeyEvent.KEY_TYPED event is

called before the handler for the InputEvent.ANY event.

To consume an event, call the consume() method

60

Tecniche di programmazione

A.A. 2012/2013

Registering Event Handlers

setOnEvent-type(
EventHandler<? super event-class> value )

Event-Type

Event-class

The class that defines the event type (e.g., KeyEvent , MouseEvent, ...)

Value

61

The type of event that the handler processes (e.g. setOnKeyTyped,

setOnMouseClicked, ...)

The event handler for event-class (or for one of its super classes)
Must implement: public void handle(ActionEvent event)
May be a regular class or an anonymous inline class

Tecniche di programmazione

A.A. 2012/2013

Example
class ButtonActionHandler implements
javafx.event.EventHandler<ActionEvent> {

Event Handler

public ButtonActionHandler (/*params*/) {

// constructor - if needed
}
@Override
public void handle(ActionEvent event) {
Button b = (Button)event.getSource() ;
//...do something
String buttonText = b.getText() ;
// ...
}

Registration

Button btn = new Button() ;

btn.setOnAction(new ButtonActionHandler()) ;
62

Tecniche di programmazione

A.A. 2012/2013

Example (inline definition)

Registration &
Anonymous event handler
btn.setOnAction(new EventHandler<ActionEvent>() {
public void handle(ActionEvent event) {
System.out.println("Hello World");
}
});

63

Tecniche di programmazione

A.A. 2012/2013

Model-View-Controller
JavaFX programming

Application complexity and MVC

Interactive, graphical applications exhibit complex

interaction patterns
Flow of control is in the hand of the user
Actions are mainly asynchronous
How to organize the program?
Where to store data?
How to decouple application logic from interface details?
How to keep in sync the inner data with the visibile
interface?
65

Tecniche di programmazione

A.A. 2012/2013

Media Player example

66

Tecniche di programmazione

A.A. 2012/2013

MVC pattern defined

67

Tecniche di programmazione

A.A. 2012/2013

Normal life-cycle of interaction

68

Tecniche di programmazione

A.A. 2012/2013

Mapping concepts to JavaFX

View: presenting the UI

Controller: reacting to user actions

FXML
The Nodes in the Scene Graph
Set of event handlers

Model: handling the data

69

Class(es) including data

Persistent data in Data Bases

Tecniche di programmazione

A.A. 2012/2013

Design Exercise

Imagine an application managing a list of items (e.g.,

names)
Different items in the user interface should manage the
same set of data, with different criteria and actions
Where do you declare the data class?
Which class should have access to which?
Who creates what objects?

70

Tecniche di programmazione

A.A. 2012/2013

A possible
solution

71

Tecniche di programmazione

A.A. 2012/2013

The Controller in FXML

JavaFX programming

The Controller in FXML

Several attributes in FXML help in the definition of the

Controller behavior associated to a scene

Identification of the Controller class

Injection of Node identifiers (references)
Registration of event handlers

Additionally, the JavaFX Scene Builder may generate a

controller skeleton for inclusion in the project

73

Tecniche di programmazione

A.A. 2012/2013

Defining the Controller class

The Root element of the scene

graph may specify a fx:
controller attribute

74

<BorderPane
id="BorderPane"
xmlns:fx="http://javafx.com
/fxml"
fx:controller="it.polito.te
cnprogr.RuzzleController">

Tecniche di programmazione

A.A. 2012/2013

fx:controller attribute

Associate a "controller" class with an FXML document

Automatically create the instance when FXML is loaded

Should include event handler methods

May include an initialize() method

75

public void initialize();

called once when the contents of its associated document have
been completely loaded
any necessary post-processing on the content

Tecniche di programmazione

A.A. 2012/2013

Accessing the controller instance

The Application often needs to communicate with the

controller object

E.g., to call setModel()

FXMLLoader provides this information

URL location = getClass().getResource("example.fxml");
FXMLLoader fxmlLoader = new FXMLLoader(location);
Pane root = (Pane)fxmlLoader.load();
MyController controller =
(MyController)fxmlLoader.getController();

76

Tecniche di programmazione

A.A. 2012/2013

Injection of Node references

The controller code may directly access various Nodes in

the associated scene graph
The attribute @FXML associates a Node variable with
the corresponding node, with the same fx:id value as the
variable name

No more error-prone lookup calls...

Local variables in the controller instance

Try:View | Show Sample Controller Skeleton on the

Scene Builder!
@FXML // fx:id="theTitle"
private Label theTitle;
77

Tecniche di programmazione

A.A. 2012/2013

Registration of Event Handlers

In FXML, you may set a event handler

through attributes

onAction, onKeyTyped, onMouseClicked,

... hundreds more ...

The value should be the #name of a

method in the controller class

With the right signature for the event

type

<Button fx:id="cercaBtn"
onAction="#doCercaParola"
text="Cerca" />
78

@FXML
void doCercaParola (
ActionEvent event ) {

Tecniche di programmazione

A.A. 2012/2013

Resources
Introduction to JavaFX

Resources

Official

Documents

http://www.oracle.com/us/technologies/java/fx/overview/index.
html
http://www.oracle.com/technetwork/java/javafx/overview/index
.html
http://docs.oracle.com/javafx/
http://docs.oracle.com/javafx/2/api/index.html

Blogs

80

http://fxexperience.com/
http://www.learnjavafx.typepad.com/weblog/
http://community.java.net/community/javafx
Tecniche di programmazione

A.A. 2013/2014

Resources

API

Slides/Tips

http://www.slideshare.net/steveonjava/java-fx-20-a-developers-guide
http://refcardz.dzone.com/refcardz/getting-started-javafx

Tutorials/Articles

http://docs.oracle.com/javafx/2/api/index.html

http://docs.oracle.com/javafx/2/events/jfxpub-events.htm
http://amyfowlersblog.wordpress.com/2011/06/02/javafx2-0-layout-aclass-tour/

Examples (Downloads)

81

JavaFX Demos and Samples, at

http://www.oracle.com/technetwork/java/javase/downloads/jdk7downloads-1880260.html
Tecniche di programmazione

A.A. 2012/2013

Resources

FXML Controller

Charts

http://docs.oracle.com/javafx/2/api/javafx/fxml/docfiles/introduction_to_fxml.html#controllers
Using JavaFX Charts tutorial:
http://docs.oracle.com/javafx/2/charts/jfxpub-charts.htm

Books

82

Head First Design Patterns, chapter 12

Tecniche di programmazione

A.A. 2012/2013

Resources

Properties and Bindings

83

http://docs.oracle.com/javafx/2/binding/jfxpub-binding.htm
http://thierrywasyl.wordpress.com/2012/07/29/properties-andbindings-in-javafx/

Tecniche di programmazione

A.A. 2012/2013

Licenza duso

Queste diapositive sono distribuite con licenza Creative Commons

Attribuzione - Non commerciale - Condividi allo stesso modo (CC
BY-NC-SA)
Sei libero:

Alle seguenti condizioni:

di riprodurre, distribuire, comunicare al pubblico, esporre in pubblico,

rappresentare, eseguire e recitare quest'opera
di modificare quest'opera
Attribuzione Devi attribuire la paternit dell'opera agli autori
originali e in modo tale da non suggerire che essi avallino te o il modo in
cui tu usi l'opera.
Non commerciale Non puoi usare quest'opera per fini
commerciali.
Condividi allo stesso modo Se alteri o trasformi quest'opera, o se
la usi per crearne un'altra, puoi distribuire l'opera risultante solo con una
licenza identica o equivalente a questa.

http://creativecommons.org/licenses/by-nc-sa/3.0/
84

Tecniche di programmazione

A.A. 2013/2014