Using JavaFX

Scene graphs

Stage and scenes

Core Node classes

1

History of Java FX

2

§ Java 1.0 (1996)

§ Cross-platform

§ Java wrappers for native widgets

§ In practice, underlying platform differences meant that they looked and behaved differently across platforms

§ Support imperative programming

§ “heavyweight” toolkit

§ Java 1.1 (1998)

§ Cross-platform

§ Java implementations of core widgets

§ Often lower than native widgets, and missing modern features like animations, shading and so on.

§ Support imperative programming

§ “lightweight” toolkit

§ Java 6 (2007)

§ Cross-platform

§ Java implementation of full framework + widgets

§ Competitor w. Adobe Flash; designed for “rich multimedia apps”

§ A “better Swing” with 3D, graphs, more controls.

§ Imperative + declarative programming with GUI builder

§ Hardware acceleration

§ “lightweight” toolkit

Swing

Reasons to use Java FX instead of Swing

3

§ Improvements- Better API for many controls- Layout is greatly simplified- Hardware acceleration makes it more responsive

§ New features- 3D API- Graphics and animation support- Playback of audio and video media- Graphs and charting capabilities- GUI Builder!

Installing JavaFX

4

It’s not included in the Java JDK, so you need to install: https://openjfx.ioYou need to include JavaFK libraries in IntelliJ:

1. In your IntelliJ project, open Project Settings and add libraries.

2. Edit Configurations and add a line to the VM options:

--module-path /Users/javery/lib/javafx-sdk-11.0.2/lib --add-modules javafx.controls, javafx.base, javafx.graphics

Application Workflow

5

Step 0: Main - optional

Step 1: init() - optional

Step 2: start()

Step 3: stop() - optional

Java FX Application base

class contains these methods

This is the only required method.

Derive from Application

(Full) Hello JavaFX

6

We don’t need a main() method!!

(Minimal) Hello JavaFX

7

§ JavaFX apps only require a start() method. - main(), init(), stop() are optional- if you extend Application (base class) it will run with just a start() method

HelloFX.java

Key Concept: Scene Graph

8

§ In computer graphics, a scene graph is a tree structure that arranges all ofthe elements of a screen into a hierarchy.- Lets us manage dependencies between objects on the screen- Makes drawing and other operations much more efficient!

Home

Copy-Paste Tools

Paste

Cut

Copy

Slide Tools. . .

Stages and Scenes

9

§ JavaFX composes an interface as a scene graph – a tree where every item has zero or one parent.

§ One “root” node, typically a top-level layout.- Stage is the main window- Scene is the scene-graph that you want to display- Everything in a scene is a Node, ordered in a hierarchy

Scene graph == View hierarchy (other toolkits)

Stage

10

java.lang.Objectjavafx.stage.Window

javafx.stage.Stage

§ Automatically created by the platform

§ Stage is the top-level container, representing the application window.

§ Methods- setMinWidth (double)- setMaxWidth (double)- setResizable (boolean)- setTitle (String)- setScene(Scene)- show()

Stage replaces JFrame from

Swing

Scene

11

java.lang.Objectjavafx.scene.Scene

§ Container for the content in a scene-graph.

§ Must specify the root Node for the scene graph by setting the root property.

§ Methods- setRoot (Parent)- setFill(Paint)- getX()- getY()

Scene replaces any top-level

container from Swing

Nodes

12

java.lang.Objectjavafx.scene.Node

§ Base class for scene graph nodes.

§ These are the displayable objects!

§ Root Nodes- If a Group is used as the root, the contents of the scene graph will be clipped

by the scene's width and height.- If a resizable node (layout Region or Control is set as the root, then the

root's size will track the scene's size, causing the contents to be resized as necessary.

§ Leaf Nodes- Circle, Line, Polygon, Rectangle, Text (javafx.scene.shape)- Button, Choicebox, Label, Slider, Spinner (javafx.scene.control)

Building a UI

13

§ Construct Nodes and add to the scene graph

HelloFX.java

Building a UI (cont’d)

14

§ You can use any of the Node classes when building a UI.

JavaVersion.java

Managing Scenes

15

§ You can have multiple stages (windows) and multiple scenes for each stage.

§ Stage.setScene() allows you to dynamically load different scenes.

SwitchScenes.java

What can we draw on a Scene?

16

§ Node is the base class for all Leaf nodes in the Scene Graph- Camera, Canvas, ImageView, LightBase, MediaView, Parent, Shape,

Shape3D, SubScene, SwingNode

§ Graphics Primitives (Shape subclass)- Arc, Circle, CubicCurve, Ellipse, Line, Path, Polygon, Polyline, QuadCurve,

Rectangle, SVGPath, Text

§ Widgets (Control subclass)- Accordion, ButtonBar, ChoiceBox, ComboBoxBase, HTMLEditor, Labeled,

ListView, MenuBar, Pagination, ProgressIndicator, ScrollBar, ScrollPane, Separator, Slider, Spinner, SplitPane, TableView, TabPane, TextInputControl, ToolBar, TreeTableView, TreeView

§ We’ll talk about each of these in order starting with graphics primitives.