Bài giảng Kỹ thuật phần mềm - Chương 5: Giao diện đồ họa người dùng - Phạm Duy Trung (Phần 1)

Java GUI #1
PHẠM DUY TRUNG
Bộ môn Kỹ thuật Phần mềm
GIAO DIỆN ĐỒ HỌA 
NGƯỜI DÙNG
Từ khóa
• AWT – Abstract Windows Toolkit
• SWING
• JFC – Java Foundation Classes
• Java FX
duytrung.tcu@gmail.com
Giao diện người - máy
Là cách phần mềm máy tính tương tác với con người
 Giao diện dòng lệnh – Command Line Interface
 Giao diện đồ họa – Graphical User Interface
 Giao diện cảm ứng – Touch User Interface
 Đa phương tiện (âm thanh, hoạt họa) – Multimedia
 Trí tuệ máy tính (nhận dạng cử chỉ, nhận dạng tiếng nói, trợ lý ảo)
duytrung.tcu@gmail.com
GUI trong ngôn ngữ lập trình
• Không phải ngôn ngữ lập trình nào cũng hỗ trợ tạo GUI
• Widget/control/component ám chỉ đến các phần tử tương tác
trong GUI, như cửa sổ, nút bấm, thanh cuộn, danh sách
• Component như những viên gạch xây nên ứng dụng
• GUI toolkit/library là một tập hợp chuyên biệt các component
để xây dựng nên GUI, thường tích hợp với một rendering engine
cụ thể
 Các toolkit tích hợp: Cocoa, Carbon trong MacOS; Windows API trong
Windows
 Các toolkit bậc cao: Qt, MFC, WPF, AWT, Swing, JavaFX
duytrung.tcu@gmail.com
Abstract Window Toolkit
• Là thư viện API tạo GUI đầu tiên của Java
• Why abstract? Trong bộ công cụ này, Java chỉ xây dựng các lớp
trừu tượng hoặc implements các interface mô tả các đối tượng
• Khi thực thi, các đối tượng (cửa sổ, nút bấm, thanh cuộn) thực
chất do hệ điều hành thực hiện
• Cơ chế tương tự như các lớp con kế thừa lớp cha trừu tượng sẽ
cung cấp hành vi cho nó
→ Platform–dependent : phụ thuộc vào hệ điều hành
duytrung.tcu@gmail.com
Abstract Window Toolkit
duytrung.tcu@gmail.com
Abstract Window Toolkit
• Package java.awt
• Các component trong AWT là
heavyweight
duytrung.tcu@gmail.com
Peer class
Component Class
Thuật ngữ cơ bản trong AWT
THUẬT NGỮ MÔ TẢ
Component Chỉ đến tất cả các đối tượng có biểu diễn đồ họa để hiển thị được trên màn hình và tương tác với
người dùng. Ví dụ như các nút bấm (button), hộp thoại tick (checkbox), thanh cuộn (scrollbar)
Lớp Component là lớp cha của đa số component, trừ các menu, trong AWT
Container Là một loại component có thể chứa các component khác. Component được thêm vào trong
container sẽ được theo dõi bởi 1 danh sách. Thứ tự trong danh sách này sẽ quy định thứ tự xếp
chồng trên dưới trong container. Nếu không xác định chỉ số thứ tự cho component khi thêm vào, mặc
định sẽ được thêm vào cuối danh sách
Panel Panel là một container đơn giản, cung cấp không gian để gắn vào bất kỳ component nào, kể cả các
panel khác
Window Window là một container hình chữ nhật hiển thị trên màn hình mà cho phép chạy các chương trình
khác nhau. Window giúp tạo nên môi trường đa nhiệm như ta đang sử dụng trên máy tính. Một
window phải được sở hữu bởi 1 frame, dialog hoặc một window khác khi khởi tạo
Frame Frame là một window mức đỉnh, có tiêu đề (title) và viền (border). Kích cỡ của frame đã bao hàm cả
viền trong đó. Frame bao lấy window. Frame có thanh tiêu đề, thanh menu, các viền và các góc cho
phép thay đổi kích thước
Canvas Canvas là một khu vực chữ nhật trên màn hình cho phép ứng dụng Java có thể vẽ lên đó.
duytrung.tcu@gmail.com
Các component trong AWT
duytrung.tcu@gmail.com
9
Label Button
Button
Checkbox
Choice
List
Scrollbar
TextField
TextArea
CheckboxGroupCheckbox
Chương trình đầu tiên
duytrung.tcu@gmail.com
Layout
• Layout là bố cục sắp xếp của các component trong một
container
• Việc sắp xếp component phù hợp với loại Layout được thực
hiện tự động nhờ trình quản lý bố cục LayoutManager
• Một container khi khởi tạo thường được gắn với một bố cục sắp
xếp cụ thể
• LayoutManager sẽ tự động điều chỉnh kích thước và vị trị của
component trong container
duytrung.tcu@gmail.com
Layout manager
STT Tên và mô tả
1
BorderLayout – Mặc định của Frame
Sắp xếp các đối tượng vào 5 khu vực: trung tâm, đông, tây, nam, bắc
2
CardLayout
Xem mỗi component như một quân bài, tại một thời điểm thì một quân được hiển thị
3
FlowLayout – Mặc định của Panel
Sắp xếp component theo luồng: lần lượt bố trí từ trái sáng phải, từ trên xuống dưới
4
GridLayout
Bố trí component vào như các mắt lưới của một lưới chữ nhật
5
GridBagLayout
Là layout manager linh hoạt nhất trong AWT. GridBagLayout cũng có dạng lưới, cho phép tùy
chỉnh kích thước, giãn cách ngang dọc, trọng số kích thước của component
duytrung.tcu@gmail.com
Demo LayoutManager
duytrung.tcu@gmail.com
Demo LayoutManager
duytrung.tcu@gmail.com
Demo LayoutManager
• Khi sử dụng GridBagLayout, phải đặc tả vị trí cho component 
thông qua một đối tượng kiểu GridBagConstraints
duytrung.tcu@gmail.com
Demo LayoutManager
• Khi sử dụng CardLayout, cần sử dụng các phương thức next(), 
previous(), first(), last(), show() để “lật quân bài” component 
mong muốn trong container
duytrung.tcu@gmail.com
Sự kiện trên GUI
• Làm trung gian kết nối giữa người dùng với máy tính, giao diện
cần có hành động đáp ứng lại những tác động của người dùng
lên nó
• Cơ chế đáp ứng này thông qua các sự thay đổi thuộc tính của
component
• Bất kỳ sự thay đổi nào trên giao diện đều có thể phát sinh/kích
hoạt một sự kiện
Ví dụ: Button được ấn kích hoạt sự kiện “Ấn nút bấm”, văn bản
trong TextField thay đổi kích hoạt sự kiện “Văn bản thay đổi”
duytrung.tcu@gmail.com
Xử lý sự kiện
• Xử lý sự kiện thực hiện ấn định một hành động cho một sự kiện
xảy ra trên giao diện
• Lớp EventObject là lớp gốc của tất cả các đối tượng lưu trữ
trạng thái sự kiện. Với các sự kiện trên GUI ta quan tâm đến lớp
AWTEvent , sử dụng package java.awt.event
• 3 yếu tố tham gia vào quá trình xử lý sự kiện:
 Nguồn sự kiện (Event Source): component sinh sự kiện
 Sự kiện (Event): thể hiện bởi một EventObject, chứa tất cả các thông tin cần
thiết về sự kiện: loại sự kiện, nguồn sự kiện
 Bộ “lắng nghe”/xử lý sự kiện (Event Listener/Handler): nhận và xử lý sự kiện
duytrung.tcu@gmail.com
Lưu đồ xử lý sự kiện
• Một listener sẽ được đăng ký với một
nguồn sự kiện
• Khi đăng ký, listener sẽ chờ sự kiện
• Khi một sự kiện được kích hoạt:
• Nguồn sự kiện tạo ra một đối tượng sự kiện
• Đối tượng sự kiện sẽ được chuyển đến cho
listener
• Khi listener nhận được đối tượng:
• Giải mã đối tượng
• Xử lý đối tượng theo logic đã định
duytrung.tcu@gmail.com
Cây phân cấp AWTEvent
duytrung.tcu@gmail.com
Click lên component
ActionListener
Sự kiện thêm,bớt đối tượng
trên container
ContainerListener Sự kiện nhấn phím, gõ phím,
thả phím
KeyListener
Các sự kiện liên quan đến
chuột
MouseListener
Các sự kiện với window:
đóng, mở, thêm bỏ icon
WindowListener
Các sự kiện khi văn bản của
đối tượng bị thay đổi
TextListener
Thay đổi giá trị của thanh
cuộn chẳng hạn
AdjustmentListener
Ẩn, hiện, di chuyển, thay đổi
kích cỡ component
ComponentListener
Thay đổi lựa chọn phần tử
trong danh sách, tick, bỏ tick
ItemListener
Quan hệ Component – Listener : N-N
Component
ComponentListener
FocusListener
KeyListener
MouseListener
Container ContainerListener
Window WindowListener
Button
List
MenuItem
TextField
ActionListener
Choice
Checkbox
List
ItemListener
Scrollbar AdjustmentListener
TextField
TextArea
TextListener
duytrung.tcu@gmail.com
Các phương thức xử lý trong Listener
duytrung.tcu@gmail.com
ActionListener actionPerformed(ActionEvent e)
TextListener textValueChanged(TextEvent e)
ItemListener ActionListener
MouseListener
mouseClicked(MouseEvent e)
mouseEntered(MouseEvent e)
mouseExited(MouseEvent e)
mousePressed(MouseEvent e)
mouseReleased(MouseEvent e)
MouseMotionListener
mouseDragged(MouseEvent e)
mouseMoved(MouseEvent e)
WindowListener
windowActivated(WindowEvent e)
windowClosed(WindowEvent e)
windowClosing(WindowEvent e)
windowDeactivated(WindowEvent e)
windowDeiconified(WindowEvent e)
windowIconified(WindowEvent e)
windowOpened(WindowEvent e)
Đăng ký Listener cho GUI: 5 cách
1. Tạo một lớp thành viên (inner class) chuyên xử lý sự kiện: Lớp này phải
kế thừa trực tiếp interface hoặc một lớp kế thừa interface của listener
tương ứng. Cách làm này thuận tiện khi nhiều component phát sinh
cùng loại sự kiện có thể sử dụng chung listener
2. Sử dụng lớp nặc danh (anonymous class): khai báo lớp nặc danh không
đòi hỏi phải đặt tên cho lớp.
3. Sử dụng biểu thức lambda (lambda expression)
4. Sử dụng tham chiếu phương thức (method reference)
5. Listener mức đỉnh (top-level listener): Cho chính lớp hiện tại kế thừa
interface của một listener và tham chiếu đến nguồn sự kiện bằng từ
khóa this. Cách này phù hợp khi chỉ có một event source
duytrung.tcu@gmail.com
Đăng ký Listener cho GUI: cách 1
duytrung.tcu@gmail.com
Đăng ký Listener cho GUI: cách 2 và 3
duytrung.tcu@gmail.com
Đăng ký Listener cho GUI: cách 4
duytrung.tcu@gmail.com
Đăng ký Listener cho GUI: cách 5
duytrung.tcu@gmail.com
Không cần thiết
Sử dụng Adapter để xử lý sự kiện
Một lớp adapter đã khởi tạo tất cả các phương thức trong một interface 
listener, ta chỉ cần dùng phương thức ta muốn
duytrung.tcu@gmail.com
Quy trình xây dựng một giao diện Java
• Tạo một container
- Frame, Dialog, Window, Panel, ScrollPane
• Ấn định một LayoutManager cho container
• Tạo các component
• Thêm các component vào container
• Xử lý sự kiện trên giao diện
- Đăng ký listener với các source dựa trên loại sự kiện
- Thực thi phương thức xử lý sự kiện phù hợp trong listener
duytrung.tcu@gmail.com
Demo 1
Xây dựng chương trình có giao diện như (1)
Khi nhấn vào button Red hoặc button Green hoặc button Blue thì nền của cửa sổ chương
trình thay đổi màu tương ứng, đồng thời label bên dưới các button cũng có câu thông báo
màu tương ứng.
duytrung.tcu@gmail.com
1
Demo 1
package test_gui_1;
import java.awt.*;
import java.awt.event.*;
// Tạo frame chính
public class MyFrame extends Frame {
// Khai báo các component sử dụng
Button redButton = new Button("Red");
Button blueButton = new Button("Blue");
Button greenButton = new Button("Green");
Label status;
/* Tiếp đến: Xây dựng hàm khởi tạo frame chính, trong đó thực hiện:
- Khởi tạo các thuộc tính của frame chính, thêm layout
- Khởi tạo các component và thêm vào frame
- Xử lý sự kiện cho frame */
// Xem slide kế tiếp >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
duytrung.tcu@gmail.com
Demo 1
public MyFrame() {
this.setTitle("Test button listener");
this.setLayout(new FlowLayout());
this.add(redButton);
this.add(blueButton);
this.add(greenButton);
status = new Label("Press any button please!");
this.add(status);
redButton.addActionListener(new MyListener(status, this));
greenButton.addActionListener(new MyListener(status, this));
blueButton.addActionListener(new MyListener(status, this));
this.addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent windowEvent) {
System.exit(0);
}
});
}// Xem slide kế tiếp >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
duytrung.tcu@gmail.com
Demo 1
public class MyListener implements ActionListener { // Lớp thành viên làm listener
Label status;
Component mainFrame;
public MyListener(Label status, Component compo) {
this.status = status;
this.mainFrame = compo;
}
@Override
public void actionPerformed(ActionEvent event) {
if (event.getSource() instanceof Button) {
Button eventSource = (Button) event.getSource();
String color = eventSource.getLabel();
status.setText("You have selected " + color);
if (color.equals("Red")) {
mainFrame.setBackground(Color.red);
/* hoặc như này cũng được *///mainFrame.setBackground(new Color(255,0,0)); 
}
}// Xem slide kế tiếp >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
duytrung.tcu@gmail.com
Demo 1
if (color.equals("Green")) {
mainFrame.setBackground(Color.green);
//mainFrame.setBackground(new Color(0,255,0)); 
}
if (color.equals("Blue")) {
mainFrame.setBackground(Color.blue);
//mainFrame.setBackground(new Color(0,0,255)); 
}
}
}
}
public static void main(String[] args) {
MyFrame frame = new MyFrame();
frame.setSize(300, 200);
frame.setVisible(true);
}
} // Đóng class MyFrame
duytrung.tcu@gmail.com
Bài tập
Chỉnh sửa lại giao diện demo 1 để:
1. Thêm listener cho giao diện bằng 2 cách còn lại: lớp nặc danh
và listener mức đỉnh
2. Lấy được màu trực tiếp từ nhãn của button, không cần xét
đến từng trường hợp nhãn của button nữa
Kiểu như: màu = ép_màu_từ_chuỗi(nhãn button)
duytrung.tcu@gmail.com
Java Foundation Classes & Swing
• Năm 1997, Sun Microsystems cùng Netscape quyết định hợp
tác phát triển 1 framework mới chuyên hỗ trợ về xây dựng GUI 
có tên là JFC, sau đó dự án được đổi tên thành Swing
• Đưa thêm các nhiều component mới, các chức năng đồ họa
phong phú và các hoạt động tương tác với ứng dụng Java
Swing GUI components: Lightweight
Pluggable Look-and-Feel support: Thay đổi trải nghiệm nhìn và cảm nhận
Accessibility API: Các công nghệ hỗ trợ như đọc văn bản, chữ Braille
Java 2D API: các chức năng đồ họa 2D, xử lý in ấn
 Internationalization: hỗ trợ đa ngôn ngữ, đa văn hóa cho ứng dụng
duytrung.tcu@gmail.com
Lightweight vs Heavyweight
• Trong AWT, giao diện người dùng sẽ mang diện mạo của hệ
điều hành cài đặt chương trình, bởi bản chất nó chính là các
component của hệ điều hành đó: cùng một chương trình Java,
chạy trên Windows sẽ có giao diện Windows, chạy trên Mac sẽ
có giao diện của Mac
• Component bằng AWT do phụ thuộc vào OS, nên có diện mạo,
hoặc thậm chí là hành vi thay đổi trên các OS khác nhau
-> Write once, run anywhere
• Look-and-feel của component là cố định và không thể thay đổi
duytrung.tcu@gmail.com
Lightweight vs Heavyweight
duytrung.tcu@gmail.com
• Với Swing, 99% các component là lightweight: chúng không
cần đến peer class, hay native GUI toolkit
• Chỉ có các container mức đỉnh (JFrame, JWindow, Japplet, 
JDialog) là heavyweight, các component lightweight khác sẽ
“tự vẽ” lên container chứa chúng bởi Java runtime
• Một chương trình giao diện Swing sẽ có diện mạo như nhau
trên Mac, Windows hay Solaris (cross-platform look-and-feel)
• Swing component có thể “bắt chước” diện mạo của OS hiện tại, 
song OS không liên quan đến việc tạo ra nó
Look-and-Feel
duytrung.tcu@gmail.com
• Swing component có thể thay đổi
diện mạo thông qua các pluggable
look-and-feel
• Look: diện mạo
• Feel: cách thể hiện hành vi
• Cross-platform L&F Java mặc định:
Metal
• Hướng dẫn thay đổi Look-and-feel
trong Java
Giới thiệu Swing
• Mở rộng các khái niệm và
cơ chế của AWT: vẫn sử
dụng component, 
container, layour manager, 
event, listener
• Thay thế hoàn toàn bộ
component của AWT bằng
một bộ mới
 Package javax.swing
 Tiếp đầu ngữ “J”
 Bổ sung thêm nhiều component
mới duytrung.tcu@gmail.com
Swing component
• Atomic Components
JLabel, JButton, JCheckBox, JRadioButton, JToggleButton, JScrollBar, JSlider, JProgressBar, JSeparator
• Complex Components
JTable, JTree, JComboBox, JSpinner, JList, JFileChooser, JColorChooser, JOptionPane
• Text Editing Components
JTextField, JFormattedTextField, JPasswordField, JTextArea, JEditorPane, JTextPane
• Menus
JMenuBar, JMenu, JPopupMenu, JMenuItem, JCheckboxMenuItem, JRadioButtonMenuItem
• Intermediate Containers
JPanel, JScrollPane, JSplitPane, JTabbedPane, JDesktopPane, JToolBar
• High-Level Containers
JFrame, JDialog, JWindow, JInternalFrame, JApplet
duytrung.tcu@gmail.com
LayoutManager trong Swing
• BorderLayout
• CardLayout
• FlowLayout
• GridBagLayout
• GridLayout
duytrung.tcu@gmail.com
• GroupLayout
• SpringLayout
• BoxLayout
https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html
• TabbedPanelLayout
• SplitPanelLayout
Sử dụng kết hợp cả Swing và AWT
• Khuyến cáo: không nên sử dụng lẫn lộn component của 2 thư
viện này
 Các component heavyweight luôn được vẽ đè lên component 
lightweight
 Button ≠ Jbutton !
 Có thể gây ra những lỗi không bình thường
• Trước đây, một kinh nghiệm là sử dụng AWT cho các ứng dụng
Applet, còn Swing cho ứng dụng desktop
• Swing có thể được sử dụng cho cả hai mảng trên
duytrung.tcu@gmail.com
Câu hỏi nghiên cứu
• Swing thực sự thay thế AWT hay không?
• So sánh Swing và AWT
duytrung.tcu@gmail.com
Bài tập
• Viết lại chương trình demo 1 sử dụng Swing
duytrung.tcu@gmail.com