GRAPHICAL USER INTERFACE (GUI) USING JAVAFX 14 / 17 1 / 17 WHAT - - PowerPoint PPT Presentation

GRAPHICAL USER INTERFACE (GUI) USING JAVAFX

14 / 17 1 / 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 / 17 2 / 17

WOULD YOU RATHER SEE

• r

2 / 17 3 / 17

GUIS loop and respond to events

14 / 17 4 / 17

BUILDING GUIS IN JAVA

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

14 / 17 5 / 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 / 17 6 / 17

BASIC WORKFLOW OF CREATING GUI USING JAVAFX

You 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 visual element 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 that denes 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 / 17 7 / 17

BASIC WORKFLOW OF CREATING GUI USING JAVAFX

To make an application class:

import javafx.application.Application extend the Application class JavaFX 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.Stage This 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 the container for all content in a scene graph You will import other things based on what content you want to add to your scene.

4 / 17 8 / 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 Window JavaFX Java GUI Tutorial - 1 - Creating a Basic Window

5 / 17 9 / 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 / 17 10 / 17

EVENT HANDLERS

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

7 / 17 11 / 17

EXAMPLE OF HANDLING BUTTON CLICK

We make HiByeEventHandler implement EventHandler<ActionEvent> so it can act as an event handler The code new HiByeEventHandler() creates an instance of the handler The setOnAction hooks up the button to the handler; this tells the button who they should call when they are pressed Some optional resources to read to nd out more information about these things:

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

8 / 17 12 / 17

EXAMPLE OF AN EVENT HANDLER

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

9 / 17 13 / 17

DIFFERENT LAYOUTS

The layout denes the relative positions of the UI components. See this link to explore: https://docs.oracle.com/javafx/2/layout/builtin_layouts.htm#CHDGHCDG

10 / 17 14 / 17

EXAMPLE OF BORDERPANE

Source code here

11 / 17 15 / 17

EXAMPLE OF FLOW

Source code here

12 / 17 16 / 17

EXAMPLE OF GRID

Source code here

13 / 17 17 / 17