Framework JavaFX tạo giao

diện người dùng (GUI) trong

Java
Nhóm 14
 Thành viên nhóm

Trần Danh Vinh (leader) Hoàng Dương Ngọc Thủy

Trần Thị Kiều Thanh Huỳnh Ngọc Anh Thư

 Giới thiệu chung
Nhóm trưởng_Trần Danh Vinh 22521681 25%
Hoàng Dương Ngọc Thủy 22521455 25%
Team Nhóm 14
Huỳnh Ngọc Anh Thư 22521438 25%
Trần Thị Kiều Thanh 22521366 25%

Course ID IS216.O23 Course name Programming with Java

Assignment The JavaFX framework creates a user interface (GUI) in Java

Explore the power of JavaFX, a robust framework that empowers developers to craft intuitive and
Short visually appealing user interfaces (GUI) using the Java programming language. This presentation delves
Description into the key features and functionalities of JavaFX, illustrating how it seamlessly integrates with Java to
streamline UI development and enhance user experiences across various platforms

Tools Visual Code, Screen Builder

 Nội dung chính
01 – Giới thiệu JavaFX JavaFX là gì và nguồn gốc của
JavafX

02 – Các tính năng Các tính năng chính và một số thư

viện của JavaFX

Cách thiết lập môi trường JavaFX

trên Visual code cùng với các ứng
03 – Demo code giao diện
dụng liên quan và cách thực thi
chương trình giao diện người dùng
Khái niệm
JavaFX
JavaFX là thư viện dùng để
phát triển và phân phối các
ứng dụng trong ngôn ngữ lập
trình Java. Các ứng dụng mà
thư viện này phân phối được
chạy trên máy tính hoặc nhiều
thiết bị khác nhau (phổ biến là
ứng dụng Rich Internet
Applications – RIA).
Khái niệm JavaFX

- Hiểu một cách cụ thể, JavaFX là một

framework bao gồm các gói đồ họa, công cụ hỗ
trợ cho người lập trình có thể tạo, kiểm tra, gỡ
lỗi và triển khai ứng dụng trên nhiều loại thiết bị
như: Điện thoại di động, máy tính để bàn, TV,…
 JavaFX ra đời nhằm thay thế Swing
cho các ứng dụng phát triển bằng
ngôn ngữ Java như một khung giao

Khái niệm
JavaFX
diện đồ họa người dùng (GUI). Bởi
vậy, JavaFX cung cấp nhiều tính năng
mới cho người dùng nên nổi trội hẳn
so với Swing như: dung lượng nhẹ
hơn, tốc độ phần cứng được gia tăng
và hỗ trợ nhiều hệ điều hành:
Windows, Linux, MacOS.
 NetBeans
Scene
IntelliJ
Maven
Gluon
Eclipse
riêng
giao
tích
thuộc
cải
phát
diện
hợp
tiến
Java
Builder

và
IDEA
và
Scene
là
triển
người
JavaFX
một
chongười
diện
là là
Gradle
(IDE)
và xây
của
cũng
toàn
tốt.
một
dựng
dùng
Nó
làmột
Builder
IDE
Java và
có
mạnh
Scene
diện
IDE
một
là
phổ
cung
dùng
dự
hỗ
môi
cáclà
đồ
mẽ
trợ
cho
JavaFX
cung cấp
mãtrường
công
công
một
biến
cấp
nguồn
họa
cụcụ
cho
án, được
Builder,tốt
một
các
GUI
phiên
và
mộtđểmạnh
Java
cho
JavaFX.
cách
tính
mở
môi
dựa
phát
quản
thiết
phép
bản
và
bạn
tối
JavaFX.
Nó
dành
lý
mẽ
kế
hỗ
ưu
cung
trực
năng
trên
triển
phụ
được
trường cho
giao
trợ
quản
hóa
Nó
cấp
quan.
như
Các công cụ hỗ trợ lập trình
cholý phát
các thư viện
triển ứngvàdụng
phiêndibản độngcủaJavaFX.
JavaFXNó
cung
Nó trình
cho
gợi
trong
cung
cú
người
giao
diện
cấp
ý
diện
pháp
giúp
nhiều
tự
mã,các
biên
phép
quá các
cấp
pháp, gợi
dùng
và
người
các sựtính
gỡ tính
dịch,
bạn
trình
ý
hỗ kéo
người
động
kiện
JavaFX
lỗi,
tính
trợmã
hóa
dùng
triển
năng
năng
gỡ
kéo
và thả
dùng,
tạo
ứng
tương
một
cho
lỗi,
và

dụng
kháctác
cách
như
xây
giao
việc ứng
thiết
thả
refactoring,
phátnăng
và
triển
quảnđặcứng
giúp
một
lý
dựng
càidiện
đặt
gỡ
dụng
kế
các

JavaFX..
thuậnphát
cách
lỗi,
kiểm
biệt
dự
dụng.
án
(drag-and-drop),
kiểm
giaotra
thành
để để
layout
người
và
tạo
diện
quảndùng
Android
triển
dễ dàng.
tiện.
tra
phần
cú
Chúng
giao
phát
lý
ứng
và
vàcác
tạo
và JavaFX
phụ thuộc của
iOS. JavaFX.
dụng JavaFX dễ dàng.
Maven và Gradle
Netbeans Eclipse

Scene Builder intelliJ IDEAGluon Scene Builder

 Nguồn gốc
- Chris Oliver là ngườ i phá t triển dự á n JavaFX, vố n đượ c đặ t tên là F3
(Forrm Follows Functions) từ ban đầ u vớ i mụ c tiêu bổ sung cá c tính
nă ng mớ i cho việc phá t triển giao diện ngườ i dù ng.

- JavaFX đượ c Sun Microsystems cô ng bố lầ n đầ u tiên tạ i hộ i nghị

JavaOne Worldwide Java Developer và o thá ng 5 nă m 2007.

- Ngày 4 thá ng 12 nă m 2008, Sun phá t hà nh JavaFX 1.0.2.

- JavaFX 1.2 (Marina) đượ c ra mắ t tạ i hộ i nghị JavaOne và o ngày 2

thá ng 6 nă m 2009.

- JavaFX 1.3 (Soma) ra mắ t và o ngày 22 thá ng 4 nă m 2010.

 Nguồn gốc
10/10/2021 14/8/2012
Phiên bản JavaFX 2.0 Oracle phát hành phiên
(Presidio) ra mắt bản 2.2 của JavaFX

2.0 2.2

1.3.1 2.1

21/8/2010 27/4/2012 2020

JavaFX 1.3.1 được Oracle phát hành Oracle đã thông báo
tung ra. phiên bản 2.1 của rằng họ sẽ chuyển giao
JavaFX quản lý JavaFX cho một
tổ chức mã nguồn mở
là Gluon.
Các thành phần của kiến
trúc JavaFx:
01 - BRANDING

02 - WEBSITE

03 - SOCIAL MEDIA
 Scene Graph
Ứ ng dụ ng JavaFX đượ c viết bằ ng cá ch sử
dụ ng mộ t Sơ đồ Cả nh quan (Scene
Graph); đó là mộ t điểm khở i đầ u cho việc
xây dự ng ứ ng dụ ng JavaFX. Sơ đồ cả nh
quan là mộ t cây phân cấp của các nút
(nodes) đạ i diện cho tấ t cả cá c thà nh
phầ n giao diện ngườ i dù ng và có khả
nă ng xử lý sự kiện. Mỗ i nú t có mộ t id,
kiểu dá ng (style) và kích thướ c riêng. Có
nhiều lớ p (classes) có sẵ n trong gó i
javafx.scene đượ c sử dụ ng để tạ o, sử a đổ i
và á p dụ ng cá c biến đổ i lên cá c nú t.
 Bộ độ ng cơ đồ họ a củ a JavaFX cung cấp hỗ trợ đồ họa cho sơ đồ
Bộ động cơ đồ họa cảnh quan. Nó hỗ trợ đồ họ a 2D và 3D. Nó cung cấp khả năng kết
xuất phần mềm khi phần cứng đồ họa trên hệ thống không thể
(Graphics Engine): hỗ trợ kết xuất tăng tốc. Prism và Quantum Toolkit là hai đườ ng ố ng
đồ họ a tă ng tố c trong JavaFX.

Đây là mộ t đườ ng ố ng đồ họ a tă ng tố c phầ n cứ ng hiệu suấ t cao. Nó có

Prism: thể kết xuất cả đồ họa 2D và 3D. Nó cũ ng có khả nă ng kết xuất đồ
họa trên các nền tảng khác nhau.

Nó đượ c sử dụ ng để và liên kết Prism và Glass Windowing Toolkit

Quantum Toolkit: (GWT) lại với nhau là m cho chú ng có sẵ n cho cá c lớ p trong ngă n xếp
(stack).

Nó là mộ t phầ n củ a mứ c độ thấ p nhấ t trong ngă n xếp đồ họ a JavaFX

Glass Windowing và hoạ t độ ng phụ thuộ c và o nền tả ng, là m nhiệm vụ giao tiếp giữa
JavaFX và hệ điều hành nguyên bản. Ngoà i ra, nó cò n có trá ch
Toolkit: nhiệm cung cấp các dịch vụ hệ điều hành như quả n lý cử a sổ , bộ
đếm thờ i gian, hà ng đợ i sự kiện và bề mặ t.
 Nó đượ c sử dụng để nhúng nội dung HTML vào sơ đồ cảnh quan
JavaFX. WebView sử dụ ng WebKit là mộ t trình duyệt mã nguồ n mở
nộ i bộ và đượ c sử dụ ng để kết xuấ t HTML, Document Object Model
WebView: (DOM), Cascading Style Sheets (CSS) và JavaScript. Nó kết xuấ t nộ i
dung HTML từ ứ ng dụ ng JavaFX và á p dụ ng cá c kiểu CSS cho giao diện
ngườ i dù ng.

Bộ động cơ đa Ứng dụng JavaFX có thể hỗ trợ âm thanh và video bằng cách sử
phương tiện dụng Bộ động cơ đa phương tiện. Nó phụ thuộ c và o mộ t bộ độ ng
cơ mã nguồ n mở gọ i là GStreamer. Gó i javafx.scene.media chứ a tấ t cả
(Media Engine): cá c lớ p và giao diện hỗ trợ chứ c nă ng đa phương tiện cho ứ ng dụ ng
JavaFX.
 Cấu trúc ứng dụng của
JavaFx
Ứng dụng JavaFx chủ yếu có ba thành phần chính

STAGE SCENE NODES

01 02 03
 Cử a sổ chính đượ c tạ
Là cửa sổ chứa tất cả các đốio bở i nền
tả tượng
ng (platform) chính
của một ứng dụng mình và
sau đó , đố i tượ ng cử
JavaFX và được đại diện bởi a sổ đượ c
tạ o sẽlớp
đượStage
c truyền là
trong góim đố i số
cho phương thứ c start()
javafx.stage. củ a lớ p
Application.

Cử a sổ có hai tham số xá c định

vị trí củ a nó , đó là Chiều rộ ng
(Width) và Chiều cao (Height).
Đượ c chia thà nh 2 khu vự c: Khu
vự c Nộ i dung (Content Area) và

”STAGE”
Khu vự c Trang trí
(Decorations).
 Có tổng cộng năm loại cửa sổ có sẵn như sau:
+24K

Cửa sổ không có
Cửa sổ có trang Cửa sổ trong suốt
1 2 trang trí 3
trí (Decorated) (Transparent)
(Undecorated)

Cửa sổ thống nhất Cửa sổ tiện ích

4 5
(Unified) (Utility)
“SCENE” (bối cảnh)

Một bối cảnh tượng

trưng cho nội dung vật
lý của một ứng dụng
JavaFX. Nó chứa tất cả
nội dung của một biểu
đồ cảnh.
 “SCENE Graph”
và Nodes
Một nút có thể bao gồm:
Một đồ thị cảnh là một cây
1. Các đối tượng hình học(Đồ họa)(2D và
giống
3D) nhưnhư cấu tròn,
– Hình trúc dữ liệu
hình chữ nhật, Đa
thứ bậc thể hiện nội dung
giác,...
2. của
Điềumột cảnh.
khiển Ngược
giao diệnlại,
người dùng như –
một
Nút, Hộp là một
nútkiểm, Hộpđốilựa
tượng
chọn, Vùng văn
trực quan/đồ họa của biểu
bản,...
3. Các vùng đồchứa(Ngăn
cảnh bố cục) chẳn hạng
như Bỏder Pane, Grid Pane, Flow Pane,...
4. Các phần tử media như đối tượng âm
 Một số ứng dụng của JavaFx
01 - Ứng dụng desktop 02 - Ứng dụng web

03 - Ứng dụng di động

04 - Ứng dụng nhúng 05 - Ứng dụng TV thông minh

06 - Ứng dụng đám mây

07 - Các sản phẩm kỹ thuật số

 CÁC CHỨC
NĂNG CHÍNH
FXML và Scene
Builder Là một ngôn ngữ đánh dấu khai báo
dựa trên XML nhằm cấu tạo nên giao
diện ứng dụng JavaFX. Người dùng
có thể code bằng FXML hoặc sử
dụng JavaFX Scene Builder để tương
tác và thiết kế giao diện đồ họa người
dùng. Scene Builder tạo ra các đánh
dấu (markup), các đánh dấu này sau
đó có thể chuyển vào IDE các
business logic.

Tà i liệu tham khả o, video tham khả o

 Một thành tố của web sử dụng công
nghệ WebKitHTML giúp nhúng 1

WebView trang web trong 1 ứng dụng JavaFX.

JavaScript chạy trong WebView có
thể gọi đến các Java API và ngược
JavaFX Webview, Class Webview, lại.
Cá ch tạ o trình duyệt bằ ng Webview trong
JavaFX
 Các ứng dụng được tạo bằng Swing

Swing tương tác có thể được cập nhật thêm các tính
năng của JavaFX.
Hệ thống đồ
họa
Hệ thống đồ họa JavaFX là một chi
tiết thực hiện bên dưới lớp đồ thị
cảnh JavaFX. Nó hỗ trợ đồ thị cảnh
2D và 3D. nó cung cấp phần mềm
rendering khi phần cứng đồ họa trên
một hệ thống không đủ để hỗ trợ tăng
tốc phần cứng.

2D Shapes, 3D Shapes, Vẽ hình chữ nhậ t, Vẽ hình elip,

Vẽ đườ ng cong khố i, Thuộ c tính nố i đườ ng nét
CÁC CHỨC NĂNG CHÍNH
Công cụ truyền thông hiệu suất cao
Hỗ trợ Multitouch Hỗ trợ xem các nội dung đa phương tiện trên web. Nó
Hỗ trợ cảm cung cấp 1 framework truyền thông ổn định, độ trễ
ứng đa điểm thấp dựa trên GStreamer Multimedia Framework.

Canvas API Hỗ trợ Hi-DPI Mô hình triển khai ứng

JavaFX hỗ trợ hiển
thị với độ phân
giải cao
dụng độc lập
Các gói ứng dụng độc lập chứa
tất cả các tài nguyên của ứng
dụng và bản sao runtimes
riêng của Java và JavaFX.
 Java APIs
Các API được thiết kế
Cho phép sử dụng các tính để trở thành một thay
năng mạnh mẽ của Java, thế thân thiện hơn cho
chẳng hạn như generics, các ngôn ngữ của máy
chú thích, đa luồng và ảo Java (Java VM) như
Lamda Expressions Jruby và Scala
JavaFx cung cấp một bộ API phong phú để phát
triển các ứng dụng GUI. Dưới đây là một số API
phổ biến trong Java:
javafx.scene API
Node Lớp cơ sở cho tất cả các phần tử trong cấu trúc cây giao diện.

Scene Đại diện cho một cảnh chứa tất cả các phần tử đồ họa của một
ứng dụng.

Stage Đại diện cho một cửa sổ ứng dụng.

HBox, VBox, StackPane, BorderPane, v.v. để tổ chức và sắp

Layouts
xếp các nút và phần tử khác.
 javafx.scene.control API
TextField MenuBar, Menu,
ComboBox
Ô nhập liệu văn bản MenuItem
Hộp liên kết cho phép
cho người dùng Để tạo menu và các
người dùng chọn từ một
nhập dữ liệu. mục menu.
danh sách các mục.
Cung cấp các phần tử giao diện người dùng như
nút,Hỗ
hộp
trợvăn
xử bản,
lý sựdanh
kiện sách,
và tùybảng,
chỉnhmenu, v.v., để
giao diện
người dùngthông
tươngquatácCSS.
với ứng dụng.

Button Label ListView, TableView

Nút để thực hiện Nhãn để hiển thị
một hành động văn bản không Hiển thị danh sách hoặc bảng
khi được nhấp thay đổi hoặc nội dữ liệu.
dung ngắn.
 javafx.scene.layout API
AnchorPane
Bố cục cho phép các nút được GridPane
gắn vào các cạnh của cửa sổ Bố cục dựa trên lưới, các phần
hoặc phần tử khác. tử được đặt trong hàng và cột.
Cung cấp các bố cục để tổ chức và sắp xếp các
phần tử giao diện người dùng trong một cảnh.

Pane BorderPane StackPane

Lớp cơ sở cho tất Bố cục với phần tử Bố cục để xếp chồng các phần
cả các bố cục. được đặt ở các vị tử lên nhau.
trí: trên, dưới,
trái, phải và giữa.

javafx.scene.image API
Đại diện cho các hình ảnh và
cung cấp các phương thức để
tải, hiển thị và xử lý hình ảnh
trong ứng dụng.
Image: Đạ i diện cho mộ t
hình ả nh.
ImageView: Để hiển thị
hình ả nh trong giao diện
ngườ i dù ng.
 Color: Đạ i diện cho mà u
sắ c.
javafx.scene.paint API

Đại diện cho màu sắc và các Paint: Lớ p cơ sở cho mà u

phương thức để tạo và tùy sắ c, có thể là mộ t mà u
chỉnh màu sắc trong giao diện
hoặ c mộ t hình ả nh.
người dùng
 KeyEvent, MouseEvent:
Để xử lý sự kiện phím và
javafx.scene.input API sự kiện chuộ t.

Hỗ trợ xử lý sự kiện từ bàn

phím và chuột, cho phép Clipboard: Để thự c hiện
người dùng tương tác với ứng cá c thao tá c vớ i bả ng ghi.
dụng thông qua các sự kiện
này.

javafx.animation API
Cung cấp các lớp và phương
thức để tạo và điều khiển các
hiệu ứng và hoạt ảnh trong
ứng dụng, giúp tạo ra các giao
diện người dùng mềm mại và
hấp dẫn.
Timeline: Để tạ o và điều
khiển cá c hoạ t ả nh và
hiệu ứ ng thờ i gian.
Transition: Lớ p cơ sở cho
cá c hiệu ứ ng chuyển độ ng
như TranslateTransition,
FadeTransition, v.v.
javafx.scene.chart API
LineChart, BarChart,
PieChart: Cá c biểu đồ để
Cung cấp các phần tử để hiển hiển thị dữ liệu dướ i
thị dữ liệu dưới dạng biểu đồ
dạ ng đồ thị, cộ t, hoặ c
và đồ thị, giúp trực quan hóa
và hiển thị thông tin dữ liệu
hình trò n.
một cách dễ hiểu.
javafx.scene.media API
MediaPlayer: Để phá t
Hỗ trợ phát các tệp đa phương cá c tệp đa phương tiện
tiện như âm thanh và video như â m thanh và video.
trong ứng dụng, giúp tích hợp
và phát lại nội dung đa
phương tiện một cách dễ
dàng.
 Built-in UI
controls và CSS JavaFX cung cấp tất cả các UI controls
thông dụng nhất giúp người dùng tạo nên
một ứng dụng hoàn chỉnh. Các thành
phần có thể thay đổi hình thức hiển thị
thông qua CSS. Còn CSS là một ngôn
ngữ được sử dụng để mô tả cách mà các
phần tử HTML hoặc XML được hiển thị
trên trình duyệt web. JavaFX hỗ trợ một
phạm vi rộng lớn các thuộc tính CSS, cho
phép bạn tạo ra giao diện người dùng cá
nhân hóa và hấp dẫn.
Tạ o biểu đồ , Thêm vă n bả n, Hình ả nh,
Mà u sắ c, Hiệu ứ ng, Xử lí sự kiện, CSS
 javafx.scene.control
Label (nhãn) Button (nút) CheckBox
Hiển thị nộ i dung vă n bả n, Lớ p này tạ o ra mộ t nú t có Cho phép ngườ i dù ng chọ n
hình ả nh, kí tự và khô ng cho nhã n. hoặ c bỏ chọ n mộ t tù y chọ n.
phép ngườ i dù ng chỉnh sử a
trự c tiếp nộ i dung.

RadioButton ListView ContextMenu

Cho phép ngườ i dù ng chọ n Hiển thị mộ t danh sá ch cá c Menu ngữ cả nh xuấ t hiện khi
mộ t trong cá c tù y chọ n đượ c mụ c có thể chọ n. ngườ i dù ng nhấ p chuộ t phả i
cung cấ p. và o mộ t phầ n tử .

ColorPicker TextField PasswordField

Cung cấ p mộ t ngă n điều khiển Ô nhậ p liệu vă n bả n cho Là mộ t thà nh phầ n vă n bả n
đượ c thiết kế để cho phép phép ngườ i dù ng có thể chỉnh chuyên dụ ng để nhậ p mậ t
ngườ i dù ng thao tá c và chọ n sử a vă n bả n. khẩ u.
mà u.
 javafx.scene.control
Label (nhãn)
Hiển thị nộ i dung vă n bả n, hình ả nh, kí tự và khô ng cho
phép ngườ i dù ng chỉnh sử a trự c tiếp nộ i dung.
 javafx.scene.control
Label (nhãn)
Hiển thị nộ i dung vă n bả n, hình ả nh, kí tự và khô ng cho
phép ngườ i dù ng chỉnh sử a trự c tiếp nộ i dung.
 javafx.scene.control

RadioButton
Muố n nhó m nhiều RadioButton
lạ i vớ i nhau chú ng ta cầ n sử dụ ng
ToggleGroup.
 javafx.scene.control
TextField
Ô nhậ p liệu vă n bả n cho phép ngườ i
dù ng có thể chỉnh sử a vă n bả n.

RadioButton
 Một số thư viện phổ biến
có thể sử dụng để mở rộng
chức năng của ứng dụng
 FontAwesomeFX

FontAwesomeFX là một
thư viện JavaFX cho phép
sử dụng biểu tượng từ thư
viện biểu tượng phổ biến
Font Awesome trong các
ứng dụng của bạn.
 TilesFX

TilesFX là một thư viện

JavaFX giúp tạo ra các giao
diện người dùng dạng lưới
(tiles) với các biểu đồ, biểu
tượng, và nhiều hơn nữa.
 CalendarFX

CalendarFX là một thư viện

JavaFX cho phép tích hợp
lịch vào ứng dụng của bạn
với các tính năng như xem
lịch, tạo sự kiện, và tùy
chỉnh giao diện.
 Medusa

Medusa là một thư viện

JavaFX cho phép tạo các
biểu đồ dạng đồng hồ, các
cảm biến và hiển thị dữ liệu
trực quan.
 GraphStreamFX

GraphStreamFX là một thư

viện JavaFX cho phép hiển
thị và tương tác với các đồ
thị và mạng phức tạp.
 Thanks
For Listening!!!