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
