JavaFX Basics Using Scene Builder

Lab 9: JavaFX

JavaFX Basics Using Scene Builder

Lab 9: JavaFXCS 2112 Fall 2020

November 9 / 11, 2020

Lab 9: JavaFX

JavaFX Basics Using Scene Builder

JavaFX

I JavaFX is a modern object-oriented graphics library thatprovides the ability to create and manipulate cross-platformcompatible graphical user interfaces

I Other Java GUI libraries include AWT (Abstract WindowToolkit) and Swing

Lab 9: JavaFX

JavaFX Basics Using Scene Builder

Scene Graph

JavaFX manages the user interface as a scene graph, which isactually a tree of nodes. At the root of the scene graph is somenode; the node is registered with a Scene object that is in turnregistered with a Stage, which corresponds to a top-level windowin the application.

Lab 9: JavaFX

JavaFX Basics Using Scene Builder

Scene Graph Advantages

The benefit of a scene graph is that child nodes can be positionedrelative to their parents. This means when the parent nodes aremoved and scaled, the child nodes adjust automatically

Lab 9: JavaFX

JavaFX Basics Using Scene Builder

Layout Panes

I Scene graph nodes designed to act as parents

I Automatically positions its children in logical and consistentways

I Helps facilitate resizable windows

Lab 9: JavaFX

JavaFX Basics Using Scene Builder

Layout Pane Examples

An overview of various layout panes can be found athttps://docs.oracle.com/javafx/2/layout/builtin layouts.htmWe will highlight just a few examples:

I Border Pane: provides a header and footer, along with threecolumns to place children in

I HBox / VBox: horizontally and vertically aligned children

I Stack Pane: multiple children at the same location (forinstance, a picture on a button)

I Grid Pane: layout children in a customizable grid

I Flow Pane: automatically flow children based on availablespace, adding more columns as space is available

Lab 9: JavaFX

JavaFX Basics Using Scene Builder

Layout Panes: Anchor Pane

I Anchor nodes relative to the edges of the anchor pane

I If anchored to two opposing edges, will make child nodestretch

I Example: anchor with distance 0 to all edges to force childnode to fill entire pane

I Common Use: anchor pane inside another layout pane

Lab 9: JavaFX

JavaFX Basics Using Scene Builder

A Note on Performance

Unlike most of the rest of this course, GUIs are unique in thatthere is a hard numerical performance target.

Most computer monitors refresh at 60 Hertz, or 60 times persecond. This means your program has at most 16.666 millisecondsto draw the next frame, or else your app will lag.

Scene graph nodes add overhead to your program. While they arefine for fixed UI, if you have a large number of procedurallygenerated elements, consider drawing directly onto a Canvas nodeinstead of rendering them in the scene graph.

Lab 9: JavaFX

JavaFX Basics Using Scene Builder

Adding Components

Components can be created and added programatically. Bymodifying their properties through calling their appropriatemethods, the entire GUI can be constructed through code.

1 Parent p;

2 Node n;

3 p.getChildren ().add(n);

Lab 9: JavaFX

JavaFX Basics Using Scene Builder

Scene Builder

Alternatively, Scene Builder provides a graphical interface fordesigning and constructing user interfaces. Scene Builder allows forcomponents to be created, placed, and for many of their propertiesto be modified.

Lab 9: JavaFX

JavaFX Basics Using Scene Builder

Download Scene Builder

Scene Builder can be downloaded at the following link:

https://gluonhq.com/products/scene-builder/

Lab 9: JavaFX

JavaFX Basics Using Scene Builder

FXML

Scene Builder will save your layouts into an FXML file, which canbe read in through Eclipse to create the GUI.

1 final URL r = getClass (). getResource("main.fxml");

2 final Parent node = FXMLLoader.load(r);

3 final Scene scene = new Scene(node);

4 stage.setTitle("Lab 9 Demo");

5 stage.setScene(scene);

6 stage.sizeToScene ();

7 stage.show ();

Lab 9: JavaFX

JavaFX Basics Using Scene Builder

Autogenerating Controller

Eclipse can automatically generate the Controller class for you withall variables and annotations. Open the .fxml file in Eclipse, thenright click and choose ”Source > Generate Controller”.

You may need the e(fx)clipse plugin for this.

Lab 9: JavaFX

JavaFX Basics Using Scene Builder

Exercise

I Build a Tic-Tac-Toe game.

I Starter code can be found on the course website under today’slab.

I You dont have to detect winners and losers (though you mayif you wish).

I Try to leverage JavaFXs scene graph to build an intuitive andflexible UI.

Lab 9: JavaFX