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 �  Extends JavaFX ‘Application’ �  Contains main() and launch() �  launch() will initialise and call

start() which must be defined �  FXML

�  XML based language �  Describes UI appearance �  Controlled by Scene Builder

�  RootPane �  Base for UI scene �  Can have a menu bar

�  AnchorPane �  Used to ‘anchor’ components

�  SplitPane �  TableView �  GridPane �  TilePane �  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