By: Naol G.

METTU UNIVERSITY
FACULTY OF ENGINEERING & TECHNOLOGY
DEPARTMENT OF COMPUTER SCIENCE
Java programming Course
Chapter-3
Java GUI using JAVAFX
 By: Naol G. 2

Introduction
• JavaFX is a GUI toolkit for Java Graphical User Interface.
• JavaFX is a Java library used to build Rich Internet Applications.
• Rich Internet Applications are those web applications which provide similar
features and experience as that of desktop applications.
• The applications written using JavaFX library can run consistently
across multiple platforms.
• Windows, Linux, Mac, Android…
• The applications developed using JavaFX can run on various devices
such as Desktop Computers, Mobile Phones, TVs, Tablets, etc..
 By: Naol G. 3

JavaFX Features
• JavaFX
• comes with a large set of built-in GUI components, like buttons, text fields,
tables, trees, menus, charts and much more.
• can be styled via CSS and / or programmatically.
• comes with a built-in chart library you can use for simple charts.
• has support for 2D and 3D Graphics.
• has a WebView which can display modern web applications.
 By: Naol G. 4

JavaFX Structure
• It is useful to understand how JavaFX is designed and to have a good
overview of what features it contains.
• A JavaFX application contains one or more stages which corresponds to windows.
• Each stage has a scene attached to it.
• Each scene can have an object graph of controls, layouts etc. attached to it, called
the scene graph.
 By: Naol G. 5

Here is an illustration of the general structure of a JavaFX application:

 By: Naol G. 6

• Stage
• The stage is the outer frame for a JavaFX application.
• The stage typically corresponds to a window.
• A JavaFX application has a primary Stage object which is created for you
by the JavaFX runtime.

• Scene
• To display anything on a stage in a JavaFX application, you need a scene.
• A stage can only show one scene at a time, but it is possible to exchange
the scene at runtime.
• A scene is represented by a Scene object inside a JavaFX application.
 By: Naol G. 7

• Scene Graph
• All visual components (controls, layouts etc.) must be attached to a scene
to be displayed, and that scene must be attached to a stage for the whole
scene to be visible.
• The total object graph of all the controls, layouts etc. attached to a scene
is called the scene graph.

• Nodes
• All components attached to the scene graph are called nodes. All nodes
are subclasses of a JavaFX class called javafx.scene.Node .
• There are two types of nodes: Branch nodes and leaf nodes.
• A branch node: that can contain other nodes (child nodes). Branch nodes are
also referred to as parent nodes because they can contain child nodes.
• A leaf node: a node which cannot contain other nodes.
 By: Naol G. 8

• Controls
• JavaFX controls are JavaFX components which provide some kind of control
functionality inside a JavaFX application.
• For instance, a button, radio button, table, tree etc.
• For a control to be visible it must be attached to the scene graph of some
Scene object.

• Layouts
• JavaFX layouts are components that contains other components inside them.
• JavaFX layout components are also called parent components because they
contain child components.
• JavaFX layout components are subclasses of the class javafx.scene.Parent.
• Example: Hbox, Vbox, FlowPane, StackPane, TilePane, GridPane, AnchorPane
 By: Naol G. 9

Your First JavaFX Application

• The JavaFX Application Class
• A JavaFX application needs a primary launch class.
• This class has to extend the javafx.application.Application class which
is standard class in Java since Java 8.
• Here is an example subclass of Application
 By: Naol G. 10

• Implementing start()
• All subclasses of the JavaFX Application
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.
• It takes a single parameter of the type Stage
• The Stage object is created for you by the
JavaFX runtime.
• The example above sets a title on the stage
object and then calls show() on it.
• Here is the example from above, but with the
start() method implemented:
 By: Naol G. 11

• Adding a main() Method

• You can actually launch a JavaFX
application without a main() method.
• But it’s preferred to add a main() method
because it makes it more explicit which
code launches the application.
• As you can see, the main() method calls
the static launch() method with the
command line parameters.
• This method launches the JavaFX runtime
and your JavaFX application.
• Here is the example from above with a
main() method added:
 By: Naol G. 12

• Adding a Scene
• The previous JavaFX examples only open a
window, but nothing is displayed inside this
window.
• 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.
• The names for "stage" and "scene" are
inspired by a theater.
• A stage can display multiple scenes, just like
in a theater play.
• Here is an example of how to add a Scene
object to the Stage along with a simple Label:
 By: Naol G. 13

• Three lines have been added to this

example.
• First a Label object is created.
• Then a Scene object is created, passing the
Label as parameter along with two parameters
representing the width and height of the scene.
• Here is how the opened window looks with
the Scene and Label added:
 By: Naol G. 14

JavaFX Stage
• Creating a Stage
• Showing a Stage
• show() vs. showAndWait()
• Set a Scene on a Stage
• Stage Title
• Stage Position
• Stage Width and Height
• Stage Full Screen Mode
• Stage Life Cycle Events
• Close Stage Event Listener
• Hiding Stage Event Listener
• Hidden Stage Event Listener
• Showing Stage Event Listener
• Shown Stage Event Listener
 By: Naol G. 15

• Creating a Stage
• You create a JavaFX Stage object just like any other Java object:
• Using the new command and the Stage constructor.
• Here is an example of creating a JavaFX Stage object.

• Showing a Stage
• Simple creating a JavaFX Stage object will not show it.
• In order to make the Stage visible you must call either its show() or
showAndWait() method.
• Here is an example of showing a JavaFX Stage:
 By: Naol G. 16

• show() vs. showAndWait()

• Their difference is, that show() makes the Stage visible and the exits the
show() method immediately, whereas the showAndWait() shows the Stage
object and then stays until the Stage is closed.
• Set a Scene on a Stage
• In order to display anything inside JavaFX Stage, you must set JavaFX
Scene object on Stage.
• The content of the Scene will then be displayed inside the Stage when the
Stage is shown.
• Here is an example of setting a Scene on a JavaFX Stage:
 By: Naol G. 17

• Stage Title
• You can set the JavaFX Stage title via the Stage setTitle() method.
• The Stage title is displayed in the title bar of the Stage window.
• Here is an example of setting the title of a JavaFX Stage:

• Stage Position
• You can set the position (X,Y) of a JavaFX Stage via its setX() and setY()
methods.
• Here is an example of setting the X and Y position of a JavaFX Stage object:

Note:
• It might be necessary to also set the width
and height of the Stage if you set the X and
Y position, or the stage window might
become very small.
 By: Naol G. 18

• Stage Width and Height

• You can set the width and of a JavaFX Stage via its setWidth() and setHeight()
methods. Here is an example:

• Stage Full Screen Mode

• JavaFX Stage can be changed into full-screen-mode via setFullScreen() method.
• Note: we may not get window in full screen mode unless set Scene on Stage.
• Here is an example:
 By: Naol G. 19

• Stage Life Cycle Events

• The JavaFX Stage can produce a few events you can listen for.
• These Stage events are:
• Close Request
• Hiding
• Hidden
• Showing
• Shown
• Close Stage Event Listener
• You can listen for close events on a JavaFX Stage, meaning you can be notified when the
user clicks the button with the X on, in the upper right corner of the Stage window. Here is an
example of listening for Stage close events:
 By: Naol G. 20

• Hiding Stage Event Listener

• The Stage hiding event listener is called before the
Stage is being hidden, but after it has been
requested hidden. Here is an example:

• Hidden Stage Event Listener

• The Stage hidden event listener is called after the
Stage is hidden. Here is an example:

• Showing Stage Event Listener

• The Stage showing event listener is called after
the Stage is requested shown, but before the
Stage is shown. Here is an example:

• Shown Stage Event Listener

• The Stage shown event listener is called after the
Stage is shown. Here is an example:
 By: Naol G. 21

JAVAFX SCENE
Create Scene
Set Scene on Stage
 By: Naol G. 22

• Create Scene
• You create a JavaFX Scene object via its
constructor.
• As parameter you must pass the root JavaFX
component to be displayed inside the Scene.
• Here is an example:

• Set Scene on Stage

• In order to make a JavaFX Scene visible, it must
be set on a JavaFX Stage. Here is an example:

A JavaFX Scene can be attached to only single Stage at a time, and Stage can also only display
one Scene at a time
 By: Naol G. 23

JavaFX Layouts
• In JavaFX, Layout defines the way in which the components are to be seen
on the stage.
• It basically organizes the scene-graph nodes.
• We have several built-in layout panes in JavaFX that are:
• HBox, VBox, StackPane, FlowBox, AnchorPane, etc.

• All these classes belong to  javafx.scene.layout package. 

• javafx.scene.layout.Pane class is the base class for all the built-in layout
classes in JavaFX.
 By: Naol G. 24

• VBox
• VBox helps in organizing the node in a
vertical column.
• In this, the content area’s default height
can display the children in its preferred
height and default width is the greatest of
the children’s width.
• Even though the locations cannot be set
for the children since it is automatically
computed, it can be controlled to an
extent by customization of VBox
properties.
 By: Naol G. 25

• HBox
• HBox works in the opposite
concept of VBox.
• That is, nodes will be organized
horizontally.
• Following is a program that helps
in understanding HBox.
 By: Naol G. 26

• BorderPane
• In this, layout structure has five
regions such as TOP, BOTTOM,
CENTRE, LEFT, and RIGHT.
 By: Naol G. 27

• FlowPane
• FlowPane permits the user to layout
the nodes in a consecutive manner
and wraps the nodes at the boundary.
• Here, the nodes can be in the vertical
direction (columns) or horizontal
direction (rows).
 By: Naol G. 28

• GridPane
• GridPane Layout pane allows us to add the multiple nodes in multiple rows
and columns.
• It is seen as a flexible grid of rows and columns where nodes can be
placed in any cell of the grid.
• It is represented by javafx.scence.layout.GridPane class. 
 By: Naol G. 29

JAVAFX FONTS
Create Font Instance
Using the Font Instance
List Installed Font Families and Names
 By: Naol G. 30

The JavaFX Font class, java.scene.text.Font, enables you to load different Fonts for use in your JavaFX
applications. A font is a text style. All text rendered with the same font will look similar.

• Create Font Instance

• To use fonts in JavaFX you must create a JavaFX Font instance.
• The following example shows how to create JavaFX Font instances using the
many variations of the Font class:

As you can see, the Font factory methods enable you to create Font instances representing different
font families, font sizes, font weights and font postures.
 By: Naol G. 31

JavaFX UI Controls

JAVAFX LABEL
Creating a Label
Changing the Text of a Label
Set Label Font
 By: Naol G. 32

The JavaFX Label control can display a text/image label inside JavaFX GUI. It must be added to
the scene graph to be visible. It is represented by the class javafx.scene.control.Label.

• Creating a Label
• You create a label control instance by creating an instance of Label class.
• Here is a JavaFX Label instantiation example:

• Changing the Text of a Label

• You can change the text of a label using its setText() method.
• Here is an example:

• Set Label Font

• You can change the font used by a JavaFX Label by calling its setFont() method.
• This is useful to change the size of the text or to use a different text style.
• Here is an example:

This example tells the Label to use the Arial font with a size of 24.
 By: Naol G. 33

JAVAFX BUTTON
Creating a Button
Button Text
Button Font
Button Size
Button Events
 By: Naol G. 34

 A JavaFX Button control enables a JavaFX application to have some action executed when the
application user clicks the button.It is represented by class javafx.scene.control.Button
It can have a text and an icon on it which indicate to the user what clicking the button will do.

• Creating a Button
• You create a button control by creating an instance of the Button class.
• Here is a JavaFX Button instantiation example:

• The text to be displayed on the button is passed as parameters to the Button

constructor. Or
• To set the button text is by calling the setText() method on the Button instance.
• Here is an example how calling setText() on a JavaFX Button looks:
 By: Naol G. 35

• Button Text
• There are two ways to set the text of a JavaFX button.
• The first way is to pass the text to the Button constructor.
• The second way to set the button text is by calling the setText() method on the
Button instance.
• Here is an example how how calling setText() on a JavaFX Button looks:

• Button Font
• You can specify what font the text on a JavaFX Button should be rendered with via
its setFont() method. Here is an example of setting a font on a JavaFX Button:
 By: Naol G. 36

• Button Size
• The JavaFX Button class contains a set of methods you can use to set the
button size.
• The methods controlling the button size are:
 By: Naol G. 37

• The methods setMinSize(), setMaxSize() and setPrefSize() sets both width and height
for the button in a single call.
• Thus, these methods takes both a width and a height parameter. For instance, calling

• is equivalent to calling

• Here is a screenshot of two JavaFX buttons.

• The first button has the default size calculated from its button text and the layout component it
is nested inside. The second button has a preferred width of 200 and height of 48 set on it:
 By: Naol G. 38

• Button Events
• In order to respond to the click of a button you need to attach an event listener to
the Button object. Here is how that looks:

• Here is how attaching a click event listener looks with a Java Lambda expression:
 By: Naol G. 39

• Let us see a full example that

changes the text of a JavaFX
Label when the button is clicked:
 By: Naol G. 40

JAVAFX TEXTFIELD
Creating a TextField
Setting the Text of a TextField
 By: Naol G. 41

A JavaFX TextField control enables users of a JavaFX application to enter text which can
then be read by the application. It is represented by the
class javafx.scene.control.TextField .

• Creating a TextField
• You create a TextField control by creating an instance of the TextField class.
• Here is a JavaFX TextField instantiation example:

• Setting the Text of a TextField

• You can set the text of a TextField using its setText() method.
• Here is a simple example of setting the text of a JavaFX TextField:
 By: Naol G. 42

• Setting the width of a TextField

• The prefColumnCount property determines the width of the control.

// Both fields should be wide enough to display 15 chars

txtfield1.setPrefColumnCount(15);
txtfield2.setPrefColumnCount(15);
 By: Naol G. 43

JAVAFX PASSWORDFIELD
Creating a PasswordField
Adding a PasswordField to the Scene Graph
 By: Naol G. 44

A JavaFX PasswordField control enables users of a JavaFX application to enter password which can then be
read by the application. The PasswordField control does not show the texted entered into it. Instead it shows a circle
for each character entered. It is represented by the class javafx.scene.control.PasswordField .

• Creating a PasswordField
• You create a PasswordField control by
creating an instance of the PasswordField
class.
• Here is a JavaFX PasswordField instantiation
example:
PasswordField passwordField = new PasswordField();

• Adding a PasswordField to the Scene Graph

• For  PasswordField to be visible its object must be
added to the scene graph.
• This means adding it to a Scene object.
• Here is full code example of it:
 By: Naol G. 45

JAVAFX TEXTAREA
Creating a TextArea
Adding a TextArea to the Scene Graph
Reading the Text of a TextArea
Setting the Text of a TextArea
 By: Naol G. 46

A JavaFX TextArea control enables users of a JavaFX application to enter text spanning multiple
lines, which can then be read by the application.
The JavaFX TextArea control is represented by the class javafx.scene.control.TextArea .

• Creating a TextArea
• You create a TextArea control by creating
an instance of the TextArea class. Here is
a JavaFX TextArea instantiation example:

TextArea textArea = new TextArea();

• Adding a TextArea to the Scene Graph

• For a JavaFX TextArea to be visible
the TextArea object must be added to the
scene graph. This means adding it to
a Scene object. Here is an example:

Output
 By: Naol G. 47

• Reading the Text of a TextArea

• You can read the text entered into
a TextArea via its getText() method.
• Here is an example of reading text of
a JavaFX TextArea control via
its getText() method:

String text = textArea.getText();

• Setting the Text of a TextArea

• You can set the text of a TextArea control
via its setText() method.
• Here is an example of setting the text of
a TextArea control via setText() :
textArea.setText("New Text");
 By: Naol G. 48

• RadioButton
• An instance of the RadioButton class represents a radio button.
• It inherits from the ToggleButton class.
• Therefore, it has all of the features of a toggle button.
• A radio button is rendered differently compared to a toggle button.
• Like a toggle button, a radio button can be in one of the two states: •
• Selected
• Unselected
 By: Naol G. 49

• Create the RadioButtons

RadioButton fordBtn = new RadioButton("Ford");
RadioButton audiBtn = new RadioButton("Audi");
RadioButton ferrariBtn = new RadioButton("Ferrari");
RadioButton porscheBtn = new RadioButton("Porsche");

• Create a ToggleGroup ToggleGroup group = new ToggleGroup();

• Add all RadioButtons to a ToggleGroup

group.getToggles().addAll(fordBtn, audiBtn, ferrariBtn, porscheBtn);

• Add a listener to the ToggleGroup

Label label = new Label(“Select: “);

• group.selectedToggleProperty().addListener(new ChangeListener<Toggle>(){
public void changed(ObservableValue<? extends Toggle> ov, final Toggle toggle, final Toggle new_toggle) {
String toggleBtn = (ToggleButton)new_toggle.getText();
label.setText("Your selection: " + toggleBtn);
}});
 By: Naol G. 50

JAVAFX CHECKBOX
Creating a CheckBox
Reading Selected State
 By: Naol G. 51

A JavaFX CheckBox is a button which can be in three different states: Selected, not selected and
unknown (indeterminate). The JavaFX CheckBox control is represented by the
class javafx.scene.control.CheckBox.

• Creating a CheckBox
• You create a JavaFX CheckBox control via the CheckBox constructor. Here is a
JavaFX CheckBox instantiation example:

CheckBox checkBox1 = new CheckBox("Green");

• Reading Selected State

• You can read the selected state of a CheckBox via its method isSelected().
• Here is an example of how calling isSelected() looks:

boolean isSelected = checkBox1.isSelected();

By: Naol G. 52
 By: Naol G. 53

• Add a ChangeListener to the CheckBox

Label label = new Label(“Select: );

CheckBox typeOnechbx = new CheckBox(“Your type CheckBox);

typeOnechbx.selectedProperty().addListener(new ChangeListener<Boolean>() {
public void changed(ObservableValue<? extends Boolean> ov, final Boolean value, final Boolean newValue){
if(newValue != null && newValue){
label.setText(“You selected t your type CheckBox“);
}
}
});
 By: Naol G. 54

JAVAFX COMBOBOX
Creating a ComboBox
Adding Choices to a ComboBox
Adding a ComboBox to the Scene Graph
 By: Naol G. 55

• Reading the Selected Value

• You can read the selected value of a ComboBox via its getValue() method.
• If no choice is selected, the getValue() method returns null.
• Here is an example of calling getValue(): String value = (String) comboBox.getValue();

• Listening for Selection

• It is possible to listen for selection changes in a JavaFX ComboBox by setting an action
listener on the ComboBox via its setOnAction() method.
• Here is an example of setting an action listener on a ComboBox which reads what value was
selected in the ComboBox:
 By: Naol G. 56

The JavaFX ComboBox control enables users to choose an option from a predefined list of choices,
or type in another value if none of the predefined choices matches what the user want to select. The
JavaFX ComboBox control is represented by the class javafx.scene.control.ComboBox.

• Creating a ComboBox
• You create a ComboBox simply by creating a new instance of the ComboBox class.
• Here is a JavaFX ComboBox instantiation example:

ComboBox comboBox = new ComboBox();

• Adding Choices to a ComboBox

• You can add choices to a ComboBox by obtaining its item collection and add items to it.
• Here is an example that adds choices to a JavaFX ComboBox:
comboBox.getItems().add("Choice 1");
comboBox.getItems().add("Choice 2");
comboBox.getItems().add("Choice 3")
 By: Naol G. 57

• Add a ChangeListener to the ComboBox

cbx.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<String>(){
public void changed(ObservableValue<? extends String> ov, final String oldValue, final String newValue){
//code
}});

Example:
 By: Naol G. 58

JAVAFX MENUBAR
Creating a MenuBar Instance
Creating Menu Instances
Adding Menu Items
Submenus
Check Menu Items
Menu Item Separators
 By: Naol G. 59

The JavaFX MenuBar provides JavaFX applications with a visual drop down menu similar to that most desktop
applications have at the top of their application window. The JavaFX MenuBar is represented by the
class javafx.scene.control.MenuBar

• Creating a MenuBar Instance

• Before you can use the JavaFX MenuBar you must create a MenuBar instance.
• Here is an example of creating a JavaFX MenuBar instance:

MenuBar menuBar = new MenuBar();

• Notice how the MenuBar is added to the root layout (e.g. VBox) of the JavaFX scene.
• This places the MenuBar at the top of the application window.
• Creating Menu Instances
• Once the MenuBar instance is created, you can add Menu instances to it.
• A Menu instance represents a single vertical menu with nested menu items.
• Thus, you can add multiple Menu instances to a MenuBar. Here is an example of adding
a Menu to a MenuBar :
Menu menu1 = new Menu("Menu 1");

MenuBar menuBar = new MenuBar();

menuBar.getMenus().add(menu1);
 By: Naol G. 60

• Adding Menu Items

• Once you have created a Menu instance you must add one or more MenuItem instances to it.
• Each MenuItem corresponds to a menu item in the menu it is added to.
• Here is example of adding 2 MenuItem instances to a Menu, which then added to a MenuBar:

Menu menu = new Menu("Menu 1");

MenuItem menuItem1 = new MenuItem("Item 1");
MenuItem menuItem2 = new MenuItem("Item 2");

menu.getItems().add(menuItem1);
menu.getItems().add(menuItem2);

MenuBar menuBar = new MenuBar();

menuBar.getMenus().add(menu);
 By: Naol G. 61

• Submenus
• The JavaFX MenuBar supports multiple layers of menus.
• A menu nested inside another menu is called a submenu.
• The Menu class extends the MenuItem class and can therefore be used as a menu item
inside another Menu instance.
• Here is an example that creates a single JavaFX menu with a submenu inside:

Menu menu = new Menu("Menu 1");

Menu subMenu = new Menu("Menu 1.1");

MenuItem menuItem11 = new MenuItem("Item 1.1.1");
subMenu.getItems().add(menuItem11);
menu.getItems().add(subMenu);

MenuItem menuItem1 = new MenuItem("Item 1");

menu.getItems().add(menuItem1);

MenuItem menuItem2 = new MenuItem("Item 2");

menu.getItems().add(menuItem2);

MenuBar menuBar = new MenuBar();

menuBar.getMenus().add(menu);
By: Naol G. 62
 By: Naol G. 63

JavaFX CSS styling

• JavaFX enables you to style JavaFX components using CSS, just like you
can style HTML element in web pages with CSS.
• JavaFX uses the same CSS syntax as CSS for the web, but the CSS
properties are specific to JavaFX and therefore have slightly different names
than their web counterparts.
• Styling your JavaFX applications using CSS helps you separate styling
(looks) from the application code.
• You can change the styling for many components at once, by using shared
CSS stylesheets.
 By: Naol G. 64

• Scene Specific CSS Stylesheet

• You can set a CSS stylesheet for a JavaFX Scene object.
• This CSS stylesheet is then applied to all JavaFX components added to
the scene graph for that Scene object.
• The scene specific CSS stylesheet will override the styles specified in the
default stylesheet, in case both stylesheets sets the same CSS properties.
• Here is an example of setting a CSS stylesheet on a Scene object:
• Component Style Property
• You can set CSS styles for a specific component by setting the CSS
properties directly on the component.
• This is done by setting a String containing the CSS properties in the
component's style property.
• CSS properties set via the style property take precedence over CSS
properties specified in any Parent subclasses the component is nested
inside, the scene stylesheet and the default stylesheet.
• Here is an example that sets the style property for a JavaFX Button :
 By: Naol G. 66

• You can set multiple CSS properties inside the same style string. Here is an
example of how that looks:
 By: Naol G. 67

• Reading assignment:
• JavaFX Animations
• Translation
• Transformation
• Scaling

• There a number of features of JavaFX that I expect to revise them by

yourself more and more…
 By: Naol G. 68

• Reference: http://tutorials.jenkov.com/javafx/index.html

Thank you!