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 or 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://stackover�ow.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 de�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 / 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 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(); } Some more basic examples here 10 / 17 6 / 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 de�nes 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. 11 / 17 7 / 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 12 / 17 8 / 17

EXAMPLE OF AN EVENT HANDLER JavaFX Java GUI Tutorial - 2 - Handle User Events JavaFX Java GUI Tutorial - 2 - Handle User Events 13 / 17 9 / 17

DIFFERENT LAYOUTS The 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 / 17 14 / 17

EXAMPLE OF BORDERPANE Source code here 15 / 17 11 / 17

EXAMPLE OF FLOW Source code here 12 / 17 16 / 17

EXAMPLE OF GRID Source code here 13 / 17 17 / 17