GCIS-124 Module 4: JavaFX GUIs

• GCIS-124 Software Development & Problem Solving, Module 4 explores Graphical User Interfaces (GUIs) using JavaFX
• Assignments 4.1 and 4.2 focus on GUIs

Accepting the Assignment

• New repository creation is required for each unit in the course
• The GitHub Classroom assignment must be accepted and the new repository cloned
• The instructor provides it via a GitHub classroom invitation
• Verify the repository's creation by confirming the URL is present after accepting the invitation
• Create a SoftDevII directory, if you have not already
• Navigate to the SoftDevII directory and clone the new repository there
• Open the repository in VSCode and make sure the PROBLEMS tab is visible in the terminal

Asking for Help

• Students have access to all the resources required to solve the problems
• Seeking help in the course is expected and encouraged
• Spending time attempting to resolve the problem is invaluable for the learning process
• When seeking assistance, provide comprehensive and detailed information to facilitate effective help.
• In this module, students should begin by reviewing lecture slides, and attempt similar class activities.

Overview of the Week

• The course transitions from command line interfaces to GUIs
• GUIs comprise graphical controls for displaying text, images, buttons, and even playing sounds and animations.
• JavaFX will be the GUI building toolkit of choice.
• Students will explore JavaFX controls and event-driven programming
• Students can begin by constructing basic JavaFX applications.

GUIs: What Are They?

• A user interface is how a user interacts with a program
• The course has used text-based user interfaces until now.
• CLIs are the same as a plain text user interfaces (PTUIs)
• Graphical User Interfaces (GUIs) allow user interaction using graphical controls
• GUIs combine controls (buttons, labels, etc.) with images, fonts, sounds, and animations
• GUIs can be built using existing GUI toolkits

Java GUIs

• Java initially included the Abstract Window Toolkit (AWT) in 1996
  • AWT used heavyweight windows and operating system specific controls
  • AWT made cross-platform GUI development hard to achieve
• Java Swing was introduced to solve the platform-dependent issues for GUIs, in Java version 1.2 (1998)
  • Swing GUIs are platform-independent
• JavaFX is a more modern GUI toolkit that was originally developed in 2005
  • JavaFX GUIs are platform-independent
  • JavaFX provides powerful and sophisticated controls with customizable features and advanced animations
  • JavaFX was bundled with Java 8, it was removed again in Java 11, but is still an open-source project

Hello, JavaFX!

• VSCode project has been preconfigured to use JavaFX, allowing for configuration testing
• Open the HelloFX application in the src/main/java/unit04 directory
• Run it in VSCode
• If the play button in VSCode fails, especially on macOS, use this command in the terminal: mvn clean compile javafx:run
• The Maven explorer can be used to run the app
• If the configuration is correct and the app is working then a blank, white window appears on desktop

JavaFX Applications

• JavaFX GUI development starts with extending the Application class
  • The Application class is abstract
  • start(Stage) method needs to be implemented _ The start method configures an application's Stage
• Stage shows a running JavaFX application within a window
• Stage is used to display a Scene
  • Multiple stages can be on-screen at once
  • primary Stage will be created and passed into the Application's start method
• Scene contains a single JavaFX control such as a button, label, or a text field
  • The scene element can be a pane which containers other controls
• Applications in Unit 4 start with similar boilerplates
• A main method allows VSCode to run programs

JavaFX Controls

• Control is the foundation of every JavaFX GUI
• Controls may also be called nodes in javaFX
• Adding a control to a GUI involves three things: construction, configuration, and addition
• A Label is one of the simplest controls in JavaFX
  • Used for displaying a string of text
  • Accepts a string parameter specifying the label's text
• setText(String) method changes text after Label creation
• setFont(Font) method changes the font
• setPadding(Insets) changes space between text and edges of label
• Customization options can cause code to grow, even in simple GUIs

A Closer Look at JavaFX Applications

• There is a need for the use of many imports
• The main Stage gets created and passed into the start method
• Every Stage owns a Scene, which is also need to be made
• The stage needs to be shown, which will display it to the user.

Taking Control

• Use lots of controls to build JavaFX GUIs
• Starting GUI construction with a single JavaFX control which is a label
• In a file named LabelActivity.java create a new JavaFX application
• Create a new Label with desired text
• The developer should set the scene, title, and remember to show the stage

Running JavaFX From the Terminal

• VSCode may have trouble with this aspect, due to it's macOS specifically
• Maven can be integrated to solve this issue
• The pom.xml file has already been configured to for this activity
• Use mvn compile javafx:run to run the application.
• Application naming is especially important when using Maven

Customization

• JavaFX controls are very customizable
• Height & Width, Padding, Text Alignment and Font
• background Color, etc. are all customizable
• Most customization options are available programmatically
  • setHeight(double) and setFont(Font) can be used to control specific properties.
• To customize controls JavaFX supports the use of cascading style sheets (CSS)
  • The setStyle(String) method can be used to specify a CSS string
• You can also apply transforms to animate your controls, e.g. fade in/out, blink, shrink/grow, and so on.

Customize Your Label

• Default control appearances are seldom used in contrast to custom ones
• Look and feel are customised for GUI appeal and usability
• A Label object is good for this
• Customise the label, by using font, size and color
• Pad and alignment may also be altered

Layouts

• Layouts allow to create a GUI with way more than one control
• Layouts allow to define a the positions of elements within said Layout
• A Layout such as HBox and VBox do not fill in any extra space by default
• The setMaxWidth(double) or setMaxHeight(double) methods can be used to change the maximum widget stretching size, to for example Double.POSITIVE_INFINITY.

Adding a Layout

• The single control limit of JavaFX scenes can be overcome by using layouts
• HBox and VBox are the most basic types of layouts
• Open the LabelActivity class, and create an HBox or VBox,
• Create some labels to add to the new HBox or VBox
• To have them fill the available space, maximise the width or height

Factory Methods

• GUIs quickly lead to lots of code
• The look and feel must be customized, leading to very similar code for each element
• Blocks of customization code can be placed into its own factory method
• The parameter for labels can then be passed to the factory method

A Factory Method

• Many controls see the customization of the same aspects, which leads to a lot of duplicated (copy/pasted) code
• Use a factory method for customized labels to follow the DRY principle.
• Open the LabelActivity class
  • Define a factory method to create labels
  • Stub out the method but make sure it is still returning a label
  • Copy and paste the code to customize a previous label into it
  • Add parameters for any attribute that varies, and return your customized label
  • Then replace every other label section of code with the new makeLabel static method

Insets, Corner Radii, and Borders

• Insets add padding as extra space around the content in a control
• These are used to define extra space on the top, bottom, left and right side of something
• CornerRadii are used to round corners on an otherwise rectangular shape
• Borders are drawn around the outside edges of a component
• Borders and Backgrounds can be set to use the same corner radii, so that the background does not bleed over.

An Illustrated Example

• Space can be defined with Insets on how much the content is separated in a control and its edges
• The top, the bottom, the left, and right can be configured independently
• Corner Radius specifies circles that are used to create rounded edges
• Borders can be customized to any border color.

Border Practice

• Playing with borders can change UI appearance
• Open LabelActivity
• Begin adding borders for each button
• Play with different customization styles

BorderPane

• Can position up to five nodes including top, bottom, left, right, and center.
• HBox and VBox both display in a sequential order, with unlimited children.
• BorderPane has five regions top, bottom, left, right, and center, each taking only one child node
• There is a different setter for each region, i.e. setTop(), setLeft(), etc.
• An empty region will not occupy any space.

Make a BorderPane

• Practice quick layouts with five labels and different background colors using it
• In start(Stage) method, create a BorderPane containing five labels.
• Use factory method for each label that defines text, and background color.
• Set the text, and a unique background color for each label

GridPane

• Organizes child nodes in a grid of columns and rows
• When used together columns need to come before rows, ensure that you read this twice as this is important
• Columns and rows number doesn't need stating
• They are worked out when the children are added, using Gridpane.add(<Child, col, row>);
• Node children are configured to span multiple columns and rows
• Can use the max width and max Hieght to stretch out the grid

A GridPane

• Useful for creating a calculator GUI
• Create the labels and follow the logic in the example
• Most of the labels have the same settings (font, alignment, background color, min/max size, etc.); this lends itself to a factory method.
• Try and use Insets of (I.e. 1) to create the background border, instead of Insets.EMPTY

TextField & Button

• TextField allows for a single line of text input
• This can be created using String passed into a contructor or an empty constructor
• The prompt text, i.e. What is displayed before you type, text, and all that can be set using methods
• A button can react to mouse or keyboard presses
• Buttons do not need text to be created
• set Text() and get Text() set text or get it.
• Setting the background will get rid of any default effects or shading.

Say Hello

• Combines GUI skills
• Creates JavaFX UI using button, lable, fields and layouts
• The application can have on label to be updated with the given text, and buttons to update or clear it.
• The styling can have different colors too.

The Observer Design Pattern

• A button being pressed must be reflected in the UI itself
• To do this the Observers design is used
• The Observer Design Pattern includes Subject and Observer
• Subject contains object information
• Observer must be registered to the subject
• A concrete object occurs when the button is pressed
• This interfaces implements notify

Event Handlers

• EventHandler is the observer interface that must be implemented to allow the buttons to notify actions to other parts of the UI
• Even subclasses are called events such as Action Event, or the more general class Event
• The button is set to be the subject
• Event handler (ActionEvent) can be determined using subject button press. setOnAction(theHandler)

Event Handlers

• Now we need the button to update when pressed
• To do this the code needs the EventHandler<ActionEvent>
• And the Event must use a text field, then a label, with some constructor
• Make sure to set the text to then equal something

Image & ImageView

• Image class loads the image, in either PNG, JPG, GIF, or BMP.
• Two methods will load
• "file:media/images/sunflowers.jpg." which loads relative.
• Stream for loading from the directory.
• ImageView is just a graphic and must be placed in a layout.

Image Viewer

• Java FX doesn't need to be all buttons labels, or images.
• We can display singular images.
• Start a new JavaFX project, add an image view and display set stage.

StackPane

• A possible use for putting multiple images on top of each other
• First on the bottom and last on the top
• Like all images, must be part of all children in scene.
• Care must be taken as to not have occluding images, closer to the screen, closer to the start.

A StackPane

• In order to display multiple images make sure to combine the stack pane
• Create the file path in the repository
• The image must show the same component and emoji
• Must include all face items

Media Player

• Music and can be added into project
• Add the media by getting the file path
• Then create file in the directory to load the media
• Then add a media player to control the sound using Play()
• There is no media view so you will have to handle this yourself.

Waka Waka

• This uses soundboards, but the sound can overlap itself
• The folder sounds has “start, chomp, eat, and end .wav files.
• Each button must apply a sound.
• Each button will create an event.
• This should cause and echo for each media being played.

Advanced Controls

• When sound button clicked we can create and set Media Players
• To create one media players need to be made once, and be saved and set as field in an event.
• But will only play one click at time and wont over lap.
• The event will make sure sound restarts upon clicking.

Play It Once, Sam.

• Right now there is a strident effect due to the buttons looping
• By adding the method the button will be one click at a time
• The button must be passed for clip to continue.
• After set new variable to print before each event

Graphics

• It can be displayed with images as well as button
• JavaFX labels the the bottom to help
• Use new Graphics(Test,graphic)
• The image will be displayed with text to help

HGrow and VGrow

• Will stretch the heights on the nodes
• The method used will signal that is OK to stretch
• If node only wants stretched sometimes, new HBox will be fine

Graphics

• After the setting on horizontal or set on verticial node
• The items can set to use the growing images with the same node

Graphics & Growing

• Put the new created images into the application
• Set to know graphic settings such in labels, and can set with set nodes.

Reversi

• Very classical circle black and white pieces
• Chose what ever to be black or the other color
• four pieces In the middle, and each player make a move to valid if player connect
• This can be flipped and passed to another player

Play a Game of Versi

• The new GUI is great way to learn and be understood
• Command interface it to be understood.
• If stuck make make a few move then ask question to then know what to do.

Model View Controller

• It is a important point that needs to be know in order to better display the different type GUI types
• In jAVA it needs to be to the different class place
• And it will also need to up the data so make sure to up
• In data base it all will be up dated on models.

Bootstrapping

• Bootstrapping is good and build GUI on top of of other models, setting be one of the newest views.
• Making new JAX and the models needs to not be the same images
• set all new private fields then
• set all stage and run app.

Background Images

• Java fix requires 5 different types when setting
• It can be controlled and repeated.
• Set the defaults to change depending
• If default button change color it will lose functions

A Button factory

• Many squares will used same button but all sounds the same
• Make a square button and use what has alread been setup
• With color , back ground set.
• Can create buttons to then show set

Building the Board

• Now you has gotten squares to you get a new grid
• Which has 8 rows and collums.
• After creating add set the new factory
• Add to new GUI in method and run file.

Adding the Graphics

• The graphics to be white needs to be set depending on if black or white.
• If are played on the boards then there can be different
• Add mage new with get to show
• And load if to show that either empty or full
• Make sure to now add and new file.

Implementing a SquareObserver

• The new pieces does not know board is all that Needs to be made, new class SquareChanging file is created.
• Needs a image to display on button.
• And contructers.
• New images can be create on the side image.

Updating the GUI

• Now needs new JAV files that need to be pushed.
• After pushing that the GUI needs a button code, and check if the code has been done yet