Using JavaFX Scene graphs Stage and scenes Core Node classes 1 - - PowerPoint PPT Presentation

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.io You 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 of

the 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.Object javafx.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.Object javafx.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.Object javafx.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.