Unit 6: GUI with JavaFX
An Introduction to JavaFX Layouts and UI Controls
A Presentation By : Pujan Simkhada & Samrakshan Sitaula.
Introduction to JavaFX
• JavaFX is a Java library for developing Desktop
applications and Rich Internet Applications (RIAs).
• Applications built with JavaFX can run on multiple
platforms, including Web, Mobile, and Desktops.
• It is intended to replace Swing as a modern GUI
framework in Java.
• It provides more functionalities than Swing and
supports operating systems like Windows, Linux,
and Mac OS.
JavaFX vs. Swing: Key Differences
JavaFX Layouts:
• Layouts are used to organize the UI elements on
the screen.
• JavaFX has several built-in layout panes to arrange
nodes (components).
• The primary layout panes are:
– FlowPane
– BorderPane
– GridPane
– HBox (Horizontal Box)
– VBox (Vertical Box)
Layout Panes: FlowPane & BorderPane
• FlowPane:
– Organizes nodes in a flow, wrapping them at the pane's
boundary.
– A horizontal FlowPane arranges nodes in a row. A vertical
FlowPane arranges them in a column.
• BorderPane:
– Arranges nodes into five regions: top, bottom, left, right,
and center.
– Uses methods
like setTop(), setBottom(), setLeft(), setRight(),
and setCenter() to place nodes.
Layout Panes: GridPane, HBox, & VBox
• GridPane:
– Allows nodes to be placed in any cell of a flexible
grid of rows and columns.
• HBox:
– Arranges all nodes in a single horizontal row.
• VBox:
– Arranges all nodes in a single vertical column.
JavaFX UI Controls
• UI elements are the components shown to the
user for interaction or information exchange.
• The javafx.scene.control package provides the
necessary classes for UI components like
Buttons, Labels, etc.
• Let's look at some common controls.
Basic Controls: Label, TextField, and Button
• Label: A component used to display simple,
non-editable text on the screen.
• TextField: Used to get text input from the user.
• Button: A component that controls the
function of an application. It generates an
event when clicked.
User Choices: RadioButton and CheckBox
• RadioButton:
– Used to provide several options where the user
can only select one.
– A radio button is either selected or deselected.
• CheckBox:
– Used to get information from the user, who can
select or deselect the option (true/false).
– Used in scenarios where the user can select more
than one option.
Other Useful Controls
• Hyperlink: Used to refer to a webpage, similar
to an anchor link in HTML.
• Menu: The main component used to
implement menus in an application.
• Tooltip: Provides a helpful hint to the user
about a component, like a text field or button.
• FileChooser: Enables the user to browse their
file system to open or save a file.
7 Steps for Creating a JavaFX GUI
• Extend the javafx.application.Application class and override
the start() method.
• Create the necessary UI control components (Buttons, Labels,
etc.).
• Create a Layout pane and add the UI components to it.
• Create a Scene by instantiating the javafx.scene.Scene class,
adding the layout to it.
• Prepare the Stage (the main window) using
the javafx.stage.Stage class.
• Create events for UI components, such as using
the setOnAction() method for a button.
• Create the main method to launch the application.
Key Takeaways:
• JavaFX is a modern framework for building platform-
independent GUI applications.
• It offers significant advantages over Swing,
especially in customization (CSS) and 3D capabilities.
• Applications are built using a hierarchy of Stage ->
Scene -> Layout -> Controls.
• JavaFX provides a versatile set of Layouts
(BorderPane, GridPane, etc.) and UI Controls
(Button, TextField, etc.) to build rich user interfaces.
Old Question:
Answer:
• The JavaFX Hyperlink control presents text styled to look like a traditional web link
(typically blue and underlined) but is fundamentally designed to function like
a Button. This is achieved through its class inheritance and event handling mechanism.
• 1. How it Functions as a Button:
• The key is that the Hyperlink class inherits from ButtonBase, which is the same parent
class for Button, ToggleButton, and CheckBox. This inheritance gives it core button-like
features:
• ActionEvent: Just like a button, when a user clicks a Hyperlink, it fires an ActionEvent.
• setOnAction() Method: To make the hyperlink perform an action, you attach an event
handler to it using the .setOnAction() method. The code inside this handler is
executed upon clicking the link.
• Versatile Actions: The action you perform is not limited to opening a web page. You
can write any application logic inside the setOnAction block, such as changing the text
of a label, running a calculation, switching to a new window, or saving a file. This is
precisely how it functions as a button.
The End.
-By Samrakshan Sitaula & Pujan Simkhada.
