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 Swing § Java 6 (2007) § Java 1.0 (1996) § Java 1.1 (1998) § Cross-platform § Cross-platform § Cross-platform § Java implementation of § Java wrappers for native § Java implementations of full framework + widgets widgets core widgets § Competitor w. Adobe § In practice, underlying § Often lower than native Flash; designed for “rich platform differences widgets, and missing multimedia apps” meant that they looked modern features like § A “better Swing” with 3D, and behaved differently animations, shading and graphs, more controls. across platforms so on. § Imperative + declarative § Support imperative § Support imperative programming with GUI programming programming builder § “heavyweight” toolkit § “lightweight” toolkit § Hardware acceleration § “lightweight” toolkit 2

Reasons to use Java FX instead of Swing § 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! 3

Installing JavaFX 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 4

Application Workflow Java FX Application base class contains these methods Derive from Application Step 0: Main - optional Step 1: init() - optional Step 2: start() This is the only required method. Step 3: stop() - optional 5

(Full) Hello JavaFX We don’t need a main() method!! 6

(Minimal) Hello JavaFX HelloFX.java § 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 7

Key Concept: Scene Graph § 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 . . . 8

Stages and Scenes § JavaFX composes an interface as a scene graph – a tree where every item has zero or one parent. Scene graph == § One “root” node, typically a top-level layout. View hierarchy - Stage is the main window (other toolkits) - Scene is the scene-graph that you want to display - Everything in a scene is a Node , ordered in a hierarchy 9

Stage 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) Stage replaces - setMaxWidth (double) JFrame from - setResizable (boolean) Swing - setTitle (String) - setScene(Scene) - show() 10

Scene 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) Scene replaces - setFill(Paint) any top-level - getX() container from - getY() Swing 11

Nodes 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) 12

Building a UI § Construct Nodes and add to the scene graph HelloFX.java 13

Building a UI (cont’d) § You can use any of the Node classes when building a UI. JavaVersion.java 14

Managing Scenes § You can have multiple stages (windows) and multiple scenes for each stage. § Stage.setScene() allows you to dynamically load different scenes. SwitchScenes.java 15

What can we draw on a Scene? § 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. 16