Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
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