JavaFX
Written by Liron Blecher
Agenda
• Important Links
• AWT, Swing and JavaFX History
• GUI Frameworks Concepts
• Application, Stage, Scene, Node
• UI Controls
• Layout
• CSS
• FXML
• Binding, Collections and more!
If you get lost - Important Links
JavaFX Tutorial:
http://docs.oracle.com/javafx/
JavaFX Architecture:
http://docs.oracle.com/javafx/2/architecture/jfxpubarchitecture.htm
Nice JavaFX Tutorial: http://edu.makery.ch/projects/learnjavafx/
3
Agenda
• Important Links
• AWT, Swing and JavaFX History
• GUI Frameworks Concepts
• Application, Stage, Scene, Node
• UI Controls
• Layout
• CSS
• FXML
• Binding, Collections and more!
JavaFX - History
UI  Platform specific
AWT (Advanced Windows Toolkit) was platform specific
• Delegated creation of UI components to the OS
• Heavy
• Not customizable
Swing
• Extends (some of) AWT
• Draws its own components
• Light weight
• Very customizable
• All classes start with ‘J’ (JPanel, JButton, etc.)
5
JavaFX - History
JavaFX 1.0 – Released on 2008
•
Was a scripting language to write GUI applications
that was complied to Java Byte Code
•
Was NOT widely adopted by the Java community
Java FX 2.0 – Released on 2011
•
Returned to Java code
•
Better API and tools than Swing
•
Underlying engines use native capabilities
6
Agenda
• Important Links
• AWT, Swing and JavaFX History
• GUI Frameworks Concepts
• Application, Stage, Scene, Node
• UI Controls
• Layout
• CSS
• FXML
• Binding, Collections and more!
UI Frameworks Concepts - Events
Events
• A way for components (in general) to communicate
with each other asynchronously (meaning, without
directly calling methods on each other or using
polling)
• In java, it simply means that you register an interface
(usually called a Handler or Listener) to an event
generator (usually a component or a model) and when
an event generator wants to notify all the registered
listeners it iterates over them and calls methods
define in them
The parameter passed to the interfaces methods is
called an Event object
8
examples.events
DEMO
9
GUI Frameworks Concepts - MVC
MVC (Model – View – Controller)
• A model that represents the data and logic for the application
• The view that is the visual representation of that data
• A controller that takes user input from the view and translates
that to changes in the model and vise versa
http://www.oracle.com/technetwork/articles/javase/index-142890.html
10
GUI Frameworks Concepts – GUI Thread
GUI runs in another thread (not the “main” thread)
• This is done in order to make the GUI responsive
• Separate UI code from Business Logic code
• User code can run in the GUI thread, but for long
loops and actions (like network operations, database
operations, etc.) it is usually preferred to run the code
in another thread
11
GUI Thread in JavaFX
JavaFX runs in two or more threads
•
JavaFX application thread: This is the primary thread used
by JavaFX application developers. A scene graph can be
created and manipulated in a background thread, but when
its root node is attached to any live object in the scene, that
scene graph must be accessed from the JavaFX application
thread.
•
Prism render thread: This thread handles the rendering
separately from the event dispatcher.
•
Media thread: This thread runs in the background and
synchronizes the latest frames through the scene graph by
using the JavaFX application thread.
12
Agenda
• Important Links
• AWT, Swing and JavaFX History
• GUI Frameworks Concepts
• Application, Stage, Scene, Node
• UI Controls
• Layout
• CSS
• FXML
• Binding, Collections and more!
Application
•
Unlike regular Java programs, JavaFX are not started
using main but instead using a wrapper launcher class
called Application
•
To create a new JavaFX application, subclass
Application and override the start method – this
method will be called after the JavaFX runtime is
loaded and before the application starts.
•
You can use the main method to start a JavaFX
application by calling the launch method (which is
defined in the Application class)
14
Stage
•
A Stage is the top level container of the application –
usually, an OS Window.
•
The main stage is created as part of the application
launch and it is passed as an argument in the start
method.
•
You can use the stage to set the application’s title,
icon, size, screen mode etc.
•
A single JavaFX application can have multiple Stages.
15
Scene
•
A Scene (also called Scene Graph) is the starting point
for constructing a JavaFX application.
•
It is a hierarchical tree of nodes that represents all of
the visual elements of the application's user interface.
•
It can handle input and can be rendered.
16
Scene – con’t
•
The javafx.scene API allows the creation and
specification of several types of content, such as:
•
Nodes: Shapes (2-D and 3-D), images, media,
embedded web browser, text, UI controls, charts,
groups, and containers
•
State: Transforms (positioning and orientation of
nodes), visual effects, and other visual state of the
content
•
Effects: Simple objects that change the appearance of
scene graph nodes, such as blurs, shadows, and color
adjustment
17
Node
•
A single element in a scene graph is called a Node.
•
Each node has an ID, style class, and bounding
volume.
•
Each node in a scene graph has a single parent and
zero or more children (except the root node of a scene
graph that does not have a parent).
Nodes can also have the following:
•
Effects, such as blurs and shadows
•
Event handlers (such as mouse, key and input
method)
18
JavaFX and NetBeans 7.4 BUG
! There is a bug in NetBeans 7.4 (and in previous
versions as well) that does not re-build JavaFX
Application Projects after changes are mode in the code.
•
19
Workaround - after you make changes in your code,
close your application (if open) and then choose to
Build your project (F11 or Menu: Run  Build Project
or right click the project in the Projects Tree and
choose Build)
examples.javafx.helloworld
http://docs.oracle.com/javafx/2/get_started/hello_world.htm
DEMO
20
Agenda
• Important Links
• AWT, Swing and JavaFX History
• GUI Frameworks Concepts
• Application, Stage, Scene, Node
• UI Controls
• Layout
• CSS
• FXML
• Binding, Collections and more!
UI Controls Nodes
There are a lot of UI controls that come out-of-the-box in JavaFX:
The list of controls can be found here:
http://docs.oracle.com/javafx/2/ui_controls/jfxpub-ui_controls.htm
22
examples.javafx.welcome
http://docs.oracle.com/javafx/2/get_started/jfxpub-get_started.htm
DEMO
23
Agenda
• Important Links
• AWT, Swing and JavaFX History
• GUI Frameworks Concepts
• Application, Stage, Scene, Node
• UI Controls
• Layout
• CSS
• FXML
• Binding, Collections and more!
Layout Nodes
•
Layout Nodes inherit from class Pane and are used to
group together nodes and other layout nodes.
•
Each Pane has an algorithm which automatically sets
the size and location of its child nodes.
•
The list of Layout Nodes can be found here:
http://docs.oracle.com/javafx/2/layout/jfxpub-layout.htm
25
examples.javafx.layout
DEMO
26
Complex Layout
A pane that contains child panes
When it resizes – all of its child panes will be resized as
well and then re-layout their child nodes (or panes)
recursively
You can mix different types of panes algorithms (for
example: a BorderPane that contains FlowPanes)
27
examples.javafx.complexlayout
DEMO
28
Agenda
• Important Links
• AWT, Swing and JavaFX History
• GUI Frameworks Concepts
• Application, Stage, Scene, Node
• UI Controls
• Layout
• CSS
• FXML
• Binding, Collections and more!
CSS
Reference:
http://docs.oracle.com/javafx/2/api/javafx/scene/docfiles/cssref.html
Tutorial:
http://docs.oracle.com/javafx/2/css_tutorial/jfxpubcss_tutorial.htm
30
CSS
•
CSS is a technology widely used in web development
•
A CSS file is a text file that contains design rules
which can be applied to a number of nodes.
•
Using CSS you can specify design properties (colors,
fonts, sizes, etc.) to multiple nodes without the need
to set each instance separately.
•
Furthermore, changes in design will not require recompiling the application – only changing the file.
Lastly, CSS files can be developed by designers while
the application itself is developed by developers
31
CSS
We will be covering CSS in more detail later in the
course, in the meantime lets review the following
subjects:
•
You can attached one or more CSS to a JavaFX
application
•
In a CSS file you write one or more design rules
•
A Design Rule consists of two parts:
32
•
Selector – determines which nodes will the rule apply to
•
Design Properties – one or more design properties (font, size,
color, background, border, etc.) and their values
CSS Selectors
We’ll discuss two types of selectors (there are many
more):
•
ID Selector – written as #id1 were id1 is a unique id
(represented as a string) of a Node
•
Class Selector – written as .class1 ; a lot of Nodes
instances might have the same class (for example,
.label is the class name of all Label Nodes).
The CSS engine in JavaFX knows how to merge
properties from several CSS rules (for example, a
Button with an id of “saveButton” will have properties
from both .button and #saveButton CSS rules).
33
CSS Properties
There are some properties which are shared for all
types of nodes (-fx-background-image) and some that
are unique to a class or an ID.
Examples:
.button { -fx-font-size: 16px;
-fx-font-weight: bold;
-fx-opacity: 0.5
}
#loginButton { -fx-backgound-color: blue }
34
examples.javafx.welcome.css
http://docs.oracle.com/javafx/2/get_started/css.htm
DEMO
35
Agenda
• Important Links
• AWT, Swing and JavaFX History
• GUI Frameworks Concepts
• Application, Stage, Scene, Node
• UI Controls
• Layout
• CSS
• FXML
• Binding, Collections and more!
FXML
Reference:
http://docs.oracle.com/javafx/2/api/javafx/fxml/docfiles/introduction_to_fxml.html
•
FXML enables the developer to create a static Scene
using an XML file and at runtime load the XML file
and create instances of Nodes according to its
content.
•
It is similar in nature to how HTML and Android work.
•
The benefits are that a designer can work on the GUI
while a developer can work on the logic without the
need to work on the same file.
37
examples.javafx.welcome.fxml
http://docs.oracle.com/javafx/2/get_started/fxml_tutorial.htm
DEMO
38
FXML
•
Another feature of FXML is the ability to specify in the
FXML file itself the name of a class (usually called
Controller) which will be implementing all the events
handlers defined in the FXML itself – thus reducing
the amount of boilerplate code needed in order to
create and register Nodes.
•
Some great tips can be found here:
http://stackoverflow.com/questions/9717852/how-topass-object-created-in-fxml-controller1-to-controller2of-inner-fxml-cont
39
Scene Builder
The Scene Builder is an external editor for FXML files.
It can be integrated with NetBeans in order to open
FXML file directly from the IDE.
http://docs.oracle.com/javafx/scenebuilder/1/overview/js
bpub-overview.htm
40
Scene Builder – con’t
Important Tip!
If after updating a FXML file you see errors in the file
and your code won’t compile – open the FXML in side
NetBeans as a text file (right click -> Edit) and edit
your root element (usually some Pane) as follows:
1.
Remove these attributes:
xmlns:fx="http://javafx.com/fxml/1"
xmlns="http://javafx.com/javafx/2.2"
2.
Add this attribute instead:
xmlns:fx="http://javafx.com/fxml"
41
Agenda
• Important Links
• AWT, Swing and JavaFX History
• GUI Frameworks Concepts
• Application, Stage, Scene, Node
• UI Controls
• Layout
• CSS
• FXML
• Binding, Collections and more!
More Stuff!
There are a lot of more stuff to explore and use in JavaFX (that
make life more convenient for the developer):
•
Builders for all types of Nodes and Panes
•
Observable Properties
•
Binding
•
Collections
•
Animations
•
A lot of free, open source components libraries
43
examples.javafx.LostExmaple
DEMO
44