lab 9: javafx
TRANSCRIPT
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