JavaFX and Scene Builder

http://www.cs.nott.ac.uk/~bai/teaching/g52gui/tutorials.html
JavaFX
JavaFX is a built in Java API for creating
content-rich user interface applications
Designed to replace Swing libraries as main
GUI library
though Swing is still available
Integrated with main Java so cross-library
linking possible
Can integrate with external programs such as
Scene Builder
Now in version 8, released as part of Java 8
Scene Builder 2
Program for designing interfaces
Uses drag-and-drop features to create
components in your application
Allows to set properties and callbacks of
individual features
Can setup link to JavaFX Controller
class
Plugins allow seamless linking with
Eclipse
Scene Builder 2
Getting JavaFX and Scene Builder
Setup
Check default jdk is v1.8.0 or above
Run Eclipse
To install e(fx)clipse plugin:
Help > Install New Software
Add Repository: http://download.eclipse.org/
efxclipse/updates-released/1.0.0/site
Check e(fx)clipse IDE to install
Confirm and restart Eclipse
Link Scene Builder to Eclipse
Install Scene Builder 2
it is already installed on
lab machines
Locate the
scenebuilder.exe file
In Eclipse, open the
Preferences pane
Under JavaFX, set the
Scene Builder
executable path to
where your .exe is
Example JavaFX Types
Classes UI Layouts

JavaFX Main Class RootPane

Base for UI scene
Extends JavaFX Application
Can have a menu bar
Contains main() and launch()
AnchorPane
launch() will initialise and call Used to anchor components
start() which must be defined
SplitPane
FXML TableView
XML based language GridPane
Describes UI appearance TilePane
Controlled by Scene Builder Hbox
Sets box wrapper to contain
horizontal components
Basic Hierarchy of JavaFX
Interface
JavaFX Classes
Stage
Represents the main container and window
Scene
Adds features to Stage, representing FXML layouts
FXMLLoader
Handles parsing of FXML files into Java Class
@FXML keyword links private Java variables to
corresponding FXML components
@FXML private TableView<Person> personTable;
JavaFX Collections
Data Structures that have Event Listeners
Can handle changes made in GUI automatically
ObservableList is example of array with Listener
FXML UI Components
CSS Styling
Can style FXML features with CSS
Edit appearance using controls for colour,
background, text and sizing
Similar to using CSS with HTML
Advanced JavaFX Components
FileChooser
Opens Directory Browser
TreeView
Creates hierarchical list views for nest features
HTMLEditor
Advanced text editor with HTML features
WebViewer
Inbuilt web display
Handles HTML5, CSS, JavaScript, DOM, SVG