GRAPHICAL USER INTERFACE (GUI) USING JAVAFX

14 / 171 / 17

WHAT IS A GRAPHICAL INTERFACE (GUI)?A GUI is important for anyone who isn’t a programmer to use your software! Imagine if everyone had to type

their interactions with a PC in a command line… Very few people could use your software.

1 / 172 / 17

WOULD YOU RATHER SEE

or

2 / 173 / 17

GUIS loop and respond to events

14 / 174 / 17

BUILDING GUIS IN JAVAJavaFX is the latest framework for building Graphical User Interfaces(GUI’s) in Java Some background information:https://stackover�ow.com/questions/7358775/java-gui-frameworks-what-to-choose-swing-swt-awt-swingx-jgoodies-javafx

14 / 175 / 17

JAVAFX APPLICATION STRUCTURE

It's like a theater play:The Stage is the main container which is usually a Window with a border and the typical minimize,maximize and close buttons.Inside the Stage you add a Scene which can, of course, be switched out by another Scene.Inside the Scene the actual JavaFX nodes like AnchorPane, TextBox, etc. are added.

14 / 176 / 17

BASIC WORKFLOW OF CREATING GUI USING JAVAFXYou will populate a stage object passed to the start method.A stage has a scene.A scene is a hierarchal tree of nodes -- each node represents a single visualelement of the application's user interface.A node can be layout panes, UI controls, Shapes, images, text, charts, etc.An application can be made to handle events: e.g., callback methods thatde�nes what happens when key is pressed, mouse is clicked, etc

More here (optional reading): https://docs.oracle.com/javase/8/javafx/get-started-tutorial/jfx-architecture.htm

3 / 177 / 17

BASIC WORKFLOW OF CREATING GUI USING JAVAFXTo make an application class:

import javafx.application.Applicationextend the Application classJavaFX creates an application thread for running the application start method, processing input events,etc.You must override the start(Stage) method

Each application has a stage:import javafx.stage.StageThis is the top level JavaFX container -- the main window of the application

To create a scene to put on the stage, import javafx.scene.Scene; this is thecontainer for all content in a scene graphYou will import other things based on what content you want to add to yourscene.

4 / 178 / 17

To see a basic setup of a GUI with a stage, a scene and a “event” with no handler, check out the video below:

JavaFX Java GUI Tutorial - 1 - Creating a Basic WindowJavaFX Java GUI Tutorial - 1 - Creating a Basic Window

5 / 179 / 17

ANOTHER BASIC GUI EXAMPLE

Some more basic examples

public class HelloWorld extends Application { public static void main(String[] args) { launch(args); // static method of Application which creates Application // this starts the GUI thread and calls Application.start(stage) } @Override public void start(Stage stage) { // override this with your GUI stuff initUI(stage); } private void initUI(Stage stage) { // sets the stage and scene // scene is a tree/graph of nodes; nodes = all visual components of the Label label = new Label("Hello World!!"); VBox root = new VBox(); // LAYOUT - organizes how your subtrees appear root.setPadding(new Insets(5)); root.getChildren().add(label); Scene scene = new Scene(root, 280, 200); // SCENE stage.setTitle("Hello World JavaFX"); stage.setScene(scene); stage.show(); }

here

6 / 1710 / 17

EVENT HANDLERSIn the previous examples, the GUI was nice… but what if we wanted the GUIto react to user actions? Solution?    EventHandler<ActionEvent> This class de�nes how a detected event is handled.A handler is attached to certain events, when the event is detected, thehandle method of the handler is invoked.

7 / 1711 / 17

EXAMPLE OF HANDLING BUTTON CLICK

We make HiByeEventHandler implement EventHandler<ActionEvent> so itcan act as an event handlerThe code new HiByeEventHandler() creates an instance of the handlerThe setOnAction hooks up the button to the handler; this tells the buttonwho they should call when they are pressedSome optional resources to read to �nd out more information about thesethings:

https://docs.oracle.com/javase/8/javafx/api/javafx/event/Event.htmlhttps://docs.oracle.com/javase/8/javafx/api/javafx/event/EventHandler.html

8 / 1712 / 17

EXAMPLE OF AN EVENT HANDLER

JavaFX Java GUI Tutorial - 2 - Handle User EventsJavaFX Java GUI Tutorial - 2 - Handle User Events

9 / 1713 / 17

DIFFERENT LAYOUTSThe layout de�nes the relative positions of the UI components.

See this link to explore: https://docs.oracle.com/javafx/2/layout/builtin_layouts.htm#CHDGHCDG

10 / 1714 / 17

EXAMPLE OF BORDERPANE

Source code here

11 / 1715 / 17

EXAMPLE OF FLOW

Source code here

12 / 1716 / 17

EXAMPLE OF GRID

Source code here

13 / 1717 / 17