Bài giảng Lập trình hướng đối tượng (dùng Java) Chương 5 Trần Minh Thái (2017)

Chương 5
Lập trình giao diện với
Java
TRẦN MINH THÁI
Email:
Website: www.minhthai.edu.vn
Cập nhật: 02 tháng 07 năm 2016


Nội dung
#2

1. Giới thiệu về lập trình giao diện
2. Nguyên lý xử lý sự kiện trong Java
3. Các thành phần giao diện cơ bản trong AWT
4. Tổ chức giao diện với Layout Manager
5. Lập trình Applet
6. Lập trình ứng dụng với SWING


Giới thiệu về lập trình giao diện
#3

Tập hợp các lớp java cung cấp hỗ trợ thiết kế, xây dựng
GUI (Graphic User Interface) bao gồm 2 thư viện:
•

awt (java.awt.*): lớp cơ bản lập trình GUI, được phát
triển bởi IBM

• swing (javax.swing.*): dễ dàng và mềm dẻo hơn trong

lập trình GUI


Giới thiệu AWT
#4

• AWT viết tắt của Abstract Windowing Toolkit
• AWT là tập hợp các lớp Java cho phép chúng ta tạo
một GUI.
• Cung cấp các mục khác nhau để tạo hoạt động và
hiệu ứng GUI
– import java.awt.*;
– import java.awt.event.*;


Giới thiệu AWT
#5

• java.awt gồm các lớp GUI cơ bản
• Các lớp Container – lớp chứa (Frame, Panel, Dialog,
ScollPanel)
• Các lớp Component (như Button, TextComponent,
Label)
• Các lớp quản lý layout(FlowLayout, BorderLayout,
GridLayout)
• Các lớp đồ họa tùy biến(Graphics, Color, Font)


Giới thiệu AWT
#6

• java.awt.event gồm các lớp xử lý sự kiện trên giao
diện
• Các lớp sự kiện (ActionEvent,
KeyEvent và WindowEvent)
• Các giao diện
KeyListener...)

nghe

sự

MouseEvent,

kiện(MouseListener,

• Các lớp Adapter (MouseAdapter, KeyAdapter)


AWTEvent

#7

Font
FontMetrics

Object

Color
Graphics

Component

Container

Panel

Applet

Button

Window

Frame

Label

TextField

Dialog

TextComponent

List

TextArea

Choice
CheckBox

LayoutManager

CheckBoxGroup
Canvas
MenuComponent

Scrollbar

MenuItem
MenuBar

Menu

FileDialog


Nguyên tắc xây dựng GUI
#8

1. Lựa chọn một container: Frame, Window, Dialog,
Applet, …
2. Tạo các control: (buttons, text areas, list, choice,
checkbox,...)
3. Đưa các control vào vùng chứa
4. Sắp xếp các control trong vùng chứa (Layout)
5. Thêm các xử lý sự kiện (Listeners)


Container và Component
#9

• Container: chứa các component, có thể vẽ và tô màu
• Bản thân container cũng là một component
• Một container có thể chứa các container khác
• Phương thức add(Component): thêm một component
vào container
• Component: là đối tượng cơ bản tạo nên giao diện
• Cho phép người dùng tương tác với chương trình


Ví dụ
#10


Toạ độ
#11

screen

y
x

screen height

MyWindow

width
screen width

height

Top-level Container
#12

• Frame
• Dialog
• Applet


Top-level Container
#13

• Frame: cửa sổ chính của giao diện chương trình
• Xây dựng cửa sổ chương trình bằng cách kế thừa lớp
Frame hoặc kết tập 1 đối tượng Frame
• Kế thừa để sử dụng ngay các thành viên của Frame
• Dialog: cửa sổ pop-up được sử dụng để tạo ra các
tương tác nằm ngoài cửa sổ chính
• Applet: sử dụng trên xây dựng chương trình chạy trên
trình duyệt Web


Secondary Containers
#14

• Panel: khung chữ nhật nằm trong một top-level
container, được sử dụng để tạo layout cho chương trình
• ScrollPane: tạo ra hiệu ứng cuộn chuột (ngang/dọc)
cho một component

Xử lý sự kiện
#15

• Người dùng tương tác với chương trình qua giao diện
• Chương trình phải nghe được các sự kiện trên giao
diện để thực hiện hành động tương ứng
• Ví dụ: nhập liệu, nhấn phím Enter, nhấp chuột, đóng
cửa sổ, ...


Xử lý sự kiện
#16

• Tham gia sự kiện: nguồn (source) sinh sự kiện, bộ
nghe sự kiện (listener), và sự kiện (event)
• Nguồn (source): component
kiện(button, textfield...)

phát

sinh

sự

• Mỗi nguồn sẽ đăng ký các bộ nghe sự kiện khác nhau
• Khi có sự kiện nào đó xảy ra từ nguồn, phương thức
xử lý sự kiện (event handler) trên bộ nghe sự kiện sẽ
được gọi để xử lý

Xử lý sự kiện
#17


WindowListener
#18

public interface WindowListener{
public void windowClosing(WindowEvent evt);
public void windowOpened(WindowEvent evt);
public void windowClosed(WindowEvent evt);
public void windowActivated(WindowEvent evt);
public void windowDeactivated(WindowEvent evt);
public void windowIconified(WindowEvent evt);
public void windowDeiconified(WindowEvent evt);
}


MouseListener
#19

public interface MouseListener {
public void mousePressed(MouseEvent evt);
public void mouseReleased(MouseEvent evt);
public void mouseClicked(MouseEvent evt);
public void mouseEntered(MouseEvent evt);
public void mouseExited(MouseEvent evt);
}

KeyListener
#20

public interface KeyListener {
public void keyPressed(KeyEvent evt);
public void keyReleased(KeyEvent evt);
public void keyTyped(MouseEvent evt);
}


Xử lý sự kiện
#21

• Phương thức xử lý sự kiện
public void actionPerformed(Lớp sự kiện) {
}
• Xác định nguồn phát sinh sự kiện
Kiểu component tên đối tượng.getSource()


java.awt.Frame
#22

• Frame được dùng để xây dựng các ứng dụng GUI chạy
độc lập
• Frame là một cửa sổ có thanh tiêu đề và các đường
biên. Bố cục mặc định của Frame là BorderLayout

java.awt.Frame
#23

• Frame kế thừa từ Window, nó có thể nghe các sự kiện
xảy ra trên cửa sổ khi cài đặt giao tiếp
WindowListener
• Các ứng dụng độc lập thường tạo ra cửa sổ kế thừa từ
lớp Frame


import
import
import
#24
public

java.awt.Frame;
java.awt.event.WindowEvent;
java.awt.event.WindowListener;
class ViDuVeFrame extends Frame
implements WindowListener{
public ViDuVeFrame(){
super("Vi du ve Frame");
this.setSize(300, 200);
this.addWindowListener(this);
}
@Override
public void windowClosing(WindowEvent e) {
System.exit(0);
}

public static void main(String []args)
{
ViDuVeFrame vd = new ViDuVeFrame();
vd.setVisible(true);
}

}


java.awt.Panel
#25

• Được dùng để tạo ra các giao diện theo ý muốn (nhóm
các component lại với nhau)
• Một giao diện có thể có nhiều panel sắp xếp theo một
layout nhất định, mỗi panel lại có các component sắp
xếp theo một layout riêng
• Panel có bố cục mặc định là FlowLayout