JavaFX

JavaFX

Written by Liron Blecher

Age

nda

• 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/jfxpub-architecture.htm

Nice JavaFX Tutorial: http://edu.makery.ch/projects/learn-javafx/

3

Age

nda

• 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

Age

nda

• 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 themThe parameter passed to the interfaces methods is called an Event object

8

DEMO

examples.events

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

10

http://www.oracle.com/technetwork/articles/javase/index-142890.html

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

Age

nda

• 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.• 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)

19

DEMO

examples.javafx.helloworldhttp://docs.oracle.com/javafx/2/get_started/hello_world.htm

20

Age

nda

• 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

DEMO

examples.javafx.welcomehttp://docs.oracle.com/javafx/2/get_started/jfxpub-get_started.htm

23

Age

nda

• 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

DEMO

examples.javafx.layout

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

DEMO

examples.javafx.complexlayout

28

Age

nda

• 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/doc-files/cssref.html

Tutorial: http://docs.oracle.com/javafx/2/css_tutorial/jfxpub-css_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 re-compiling 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:

• 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

32

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

34

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 }

DEMO

examples.javafx.welcome.csshttp://docs.oracle.com/javafx/2/get_started/css.htm

35

Age

nda

• 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/doc-files/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

DEMO

examples.javafx.welcome.fxmlhttp://docs.oracle.com/javafx/2/get_started/fxml_tutorial.htm

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-to-pass-object-created-in-fxml-controller1-to-controller2-of-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/jsbpub-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

Age

nda

• 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

DEMO

examples.javafx.LostExmaple

44