Object Oriented Programming

Albaha University

College of Computer Science and Information Technology

Level 5 Semester 1

2021-2022

1
 CHAPTER 6

Graphical User
Interfaces

1.2
 Introduction

Graphical User Interfaces (GUIs) are standard for many computer applications.
oThey represent information with graphical elements like images, icons and
visual indicators.
o Actions can often be carried out through direct manipulation of graphical
elements.
o Java has different APIs to create GUIs.
o Notably Swing and JavaFX
o We will use JavaFX in this module
o The JavaFX API is large and complex
o We will look at some core graphical components and programming
techniques.

3
JavaFX

4
JavaFX Features

5
 JavaFX Application Structure
• In general, a JavaFX
application will have three
major components
namely Stage,
Scene and Nodes as shown
in the following diagram.

6
 JavaFX Application Structure: Stage
• Stage: A stage (a window) contains all the objects of a JavaFX
application. It is represented by Stage class of the
package javafx.stage.
• created stage object is passed as an argument to
the start() method of the Application class
• A stage has two parameters determining its position
namely Width and Height. It is divided as Content Area and
Decorations (Title Bar and Borders).
• You have to call the show() method to display the contents of
a stage.

7
 JavaFX Application Structure: Scene
• A scene represents the physical contents of a JavaFX
application. It contains all the contents of a scene graph.
• The class Scene of the package javafx.scene represents
the scene object. At an instance, the scene object is
added to only one stage.
• You can create a scene by instantiating the Scene Class.
You can opt for the size of the scene by passing its
dimensions (height and width) along with the root
node to its constructor.

8
 JavaFX Application Structure: Scene
Graph and Nodes
• A scene graph is a tree-like data
structure (hierarchical) representing
the contents of a scene. In contrast,
a node is a visual/graphical object of
a scene graph.
– Geometrical (Graphical) objects − (2D and
3D) such as circle, rectangle, polygon, etc.
– UI controls − such as Button, Checkbox,
Choice box, Text Area, etc.
– Containers − (layout panes) such as Border
Pane, Grid Pane, Flow Pane, etc.
– Media elements − such as audio, video and
image objects.

9
Creating a JavaFX Application

10
UML Relationships

11
12
 The JavaFX Application Class
A JavaFX application needs a primary launch class.
This class has to extend the javafx.application.Application class
which is a standard class in Java since Java 8.

package com.javafx.helloworld;
import javafx.application.Application;
public class MyFxApp extends Application { }

Example subclass of Application

13
 Implementing start()
All subclasses of the JavaFXApplication class must implement the
abstract start() method of the Application class (or be an abstract subclass
of Application itself).
The start() method is called when the JavaFX application is started. Here is the example
from above, but with the start() method implemented:

sets a title on the stage object

and then calls show() on it

The start() method takes a single parameter of the type Stage .

The stage is where all the visual parts of the JavaFX application are displayed.
The Stage object is created for you by the JavaFX runtime.
14
 Adding a Scene
To display something inside the JavaFX application window you must add a Scene to
the Stage object. This is done inside the start() method.
All components to be displayed inside a JavaFX application must be located inside a scene.

a Label object is created

a Scene object is created

the root element of the scene graph

width and height parameters sets
the width and height of the
JavaFX window
15
 Preparing the Scene Graph
• As per your application, you need to prepare a scene graph
with required nodes. Since the root node is the first node, you
need to create a root node. As a root node, you can choose
from the Group, Region or WebView.
• A Region is a base class of Pane − A Pane is the base class of
all the layout panes such as AnchorPane, BorderPane,
DialogPane, etc. This class belong to a package that is called
as − javafx.scene.layout.

16
Layout Panes

17
 Adding a main() Method
You can actually launch a JavaFX application without a main() method.
But, if you want to pass command line parameters to the application you need to add
a main() method.
to add a main() method ➔make it more explicit which code launches the application.

only open a window

The main() method calls the static launch() method with the command line parameters.
The launch() method is a static method located in the Application class. This method
launches the JavaFX runtime and your JavaFX application.
The launch() method will detect from which class it is called, so you don't have to tell it
explicitly what class to launch.
18
Example 1

19
Multiple Windows

20
Another Example

21
The Color Class

22
Example

23
The Font Class

24
Example

25
The Image Class

26
The ImageView Class

27
Example

28
The MediaPlayer Class

29
Shapes

31
Text

32
Line

33
Rectangle

34
Circle

35
Ellipse

36
Arc (1)

37
 SceneBuilder

https://gluonhq.com//products/scene-builder/

38
Using SceneBuilder

39
Example

40
Corresponding FXML

41
Code

42