Lập trình Java cơ bản - Chương 6: Lập trình GUI

LẬP TRÌNH JAVA
Chương 6
LẬP TRÌNH GUI 
GV: Võ Hoàng Phương Dung
 Giới thiệu về GUI (Graphical user interface)
 Vật chứa (Container)
 Thành phần (Component)
 Quản lý cách trình bày (Layout manager)
 Xử lý các sự kiện
2/25
Nội dung
 GUI cung cấp chức năng nhập liệu theo cách 
thân thiện với người dùng
 Các bộ thư viện: AWT, SWING, SWT…
 AWT là viết tắt của Abstract Windowing 
Toolkit
 AWT là một bộ các lớp trong Java cho phép 
chúng ta tạo GUI và chấp nhận các nhập liệu 
của người dùng thông qua bàn phím và chuột.
3/25
Giới thiệu về GUI
 AWT cung cấp các thành phần khác nhau để
tạo GUI:
• Vật chứa (Container )
• Thành phần (Component)
• Trình quản lý cách trình bày (Layout manager)
• Đồ họa (Graphic) và các tính năng vẽ (draw)
• Phông chữ (Font)
• Sự kiện (Event)
4/25
Giới thiệu về GUI
 Gói AWT chứa các lớp, giao diện và các gói 
khác.
 Sau đây mô tả một phần nhỏ của hệ thống 
phân cấp lớp AWT
5/25
Giới thiệu về GUI
 Container là vùng mà bạn có thể đặt các thành 
phần giao diện của bạn vào đó
 Gói java.awt chứa một lớp gọi là Container
 Frame và Panel là các vật chứa thường được 
sử dụng
• Frame là cửa sổ độc lập
• Panel là vùng nằm trong cửa sổ khác
6/25
Vật chứa (Container)
 Frame: các constructor để tạo frame
• Frame(): Tạo một frame nhưng không hiển thị
(invisible)
• Frame(String title): Tạo một frame không hiển 
thị, có tiêu đề
7/25
Vật chứa (Container)
 Ví dụ
import java.awt.*;
public class MyFrame extends Frame {
public MyFrame(String title){
super(title);
}
public static void main(String[] args){
MyFrame myframe=new MyFrame("Hello");
myframe.setSize(300, 200);
myframe.setVisible(true);
}
}
8/25
Vật chứa (Container)
 Panel được sử dụng để nhóm một số các thành 
phần lại với nhau
• Hàm khởi tạo: Panel()
 Dialog: là một đối tượng cửa sổ con của một 
cửa sổ chương trình chính. Có 2 dạng
• Modal
• Non-modal
9/25
Vật chứa (Container)
 Ví dụ
public class MyPanel extends Panel {
public static void main(String[] args){
MyPanel p=new MyPanel();
Frame f=new Frame("Test Panel");
f.add(p); 
f.setSize(200,500);
f.setVisible(true);
}
}
10/25
Vật chứa (Container)
 Các lớp thành phần
11/25
Thành phần (Components)
 Nhãn (Label)
• Label()
• Label(String labeltext)
• Label(String labeltext, int alignment)
12/25
Thành phần (Components)
 Ô văn bản (TextField)
• TextField()
• TextField(int columns)
• TextField(String s)
• TextField(String s, int columns)
13/25
Thành phần (Components)
 Vùng văn bản (TextArea)
• TextArea()
• TextArea(int rows, int cols)
14/25
Thành phần (Components)
 Nút ấn (Button)
• Button()
• Button(String text)
15/25
Thành phần (Components)
 Checkbox và RadioButton
• Checkbox()
• Checkbox(String text)
• Tạo RadioButton
CheckboxGroup cg=new CheckboxGroup();
Checkbox male=new Checkbox(“small", cg, true);
Checkbox female=new Checkbox(“medium", cg, false);
16/25
Thành phần (Components)
 Danh sách chọn lựa (Choice List)
Choice colors=new Choice();
colors.addItem("Red");
colors.addItem("Green");
17/25
Thành phần (Components)
 Các kiểu trình bày (Layout manager)
• Null layout
• Flow layout
• Border layout
• Grid layout
• GridBag Layout
 Layout manager được thiết lập bằng phương 
thức ‘setLayout()’
18/25
Quản lý cách trình bày
 Null layout: khi không sử dụng layout 
manager 
• setLayout(null)
• Sử dụng các hàm thiết lập vị trí
 public void setLocation(Point p)
 public void setSize(Dimension p)
 public void setBounds(Rectangle r)
19/25
Quản lý cách trình bày
 FlowLayout manager
• ‘FlowLayout’ là layout manager mặc định cho 
Applet và Panel
• Các thành phần được xắp xếp từ góc trái trên đến 
góc phải dưới của màn hình
• Hàm thiết lập
 setLayout(new FlowLayout())
 setLayout(new FlowLayout(
FlowLayout.RIGHT))
20/25
Quản lý cách trình bày
 BorderLayout Manager
• ‘BorderLayout’ là layout manager mặc định cho 
‘Window’, ‘Frame’ và ‘Dialog’.
• Layout này xắp xếp tối đa 5 thành phần trong một 
container
• Hàm thiết lập
 setLayout(new BorderLayout())
• Thêm thành phần vào layout
 add(b1,BorderLayout.NORTH);
21/25
Quản lý cách trình bày
 GridLayout Manager
• ‘GridLayout’ trợ giúp việc chia container vào 
trong ô lưới
• Hàm tạo
 setLayout(new GridLayout(số hàng, số cột))
22/25
Quản lý cách trình bày
 GridBagLayout Manager
• Các thành phần được sắp xếp trong lưới theo dòng 
và cột như GridLayout
• Cho phép chỉ định kích thước của thành phần theo 
số hàng và cột
23/25
Quản lý cách trình bày
 GUI là mô hình hướng sự kiện (event-driven)
• Phát sinh các sự kiện khi người dùng tương tác GUI
• Thông tin về sự kiện được chứa trong các đối tượng 
thừa kế từ lớp java.awt.event hoặc or 
javax.swing.event
 Event (sự kiện): là tương tác của người dùng
• Ví dụ: di chuyển chuột, nhấn phím, nhả phím v.v...
24/25
Xử lý sự kiện
 Event source (nguồn sự kiện): Đối tượng sản sinh 
sự kiện
 Bộ lắng nghe (listener): nhận và xử lý sự kiện
 Nhiều bộ nghe có thể được đăng ký cho 1 đối 
tượng
 Một bộ nghe có thể đăng ký cho nhiều đối tượng
25/25
Xử lý sự kiện
 Ví dụ: Xử lý sự kiện khi 1 nút được nhấn
26/25
Xử lý sự kiện
 Cài đặt giao diện listener thích hợp
VD: class MyListener implements ActionListener
 Thi hành các phương thức của listener.
class MyListener implements 
ActionListener{
public void actionPerformed(ActionEvent e) { 
//code...
}
}
27/25
Xử lý sự kiện
 Xác định tất cả các thành phần tạo ra sự kiện. 
Đăng ký bộ nghe sự kiện (event listener) đến 1 
thành phần
obj.addXX(h)
obj: thành phần tạo ra sự kiện
h: là bộ nghe sự kiện loại XX
VD: button1.addActionListener(new 
myListener())
28/25
Xử lý sự kiện
 Code 1
class MyListener implements ActionListener{
public void actionPerformed(ActionEvent e) 
{
System.out.print(“Clicked !!!”);
}
}
29/25
Xử lý sự kiện
public class ButtonEvent extends Frame {
private Button btn=new Button("Click Here");
public ButtonEvent(){
super(); 
this.add(btn);
btn.addActionListener(new myListener());
}
public static void main(String[] arg){
ButtonEvent myclass=new ButtonEvent();
myclass.setSize(100,200);
myclass.pack();
myclass.setVisible(true);
}
}
30/25
Xử lý sự kiện
 Code 2
public class ButtonEvent2 extends Frame 
implements ActionListener{
private Button btn=new Button("Click Here");
public void actionPerformed(ActionEvent e) {
System.out.print("DDD");
}
public ButtonEvent2(){
super(); 
this.add(btn);
btn.addActionListener(this);
}
31/25
Xử lý sự kiện
public static void main(String[] arg){
ButtonEvent myclass=new ButtonEvent();
myclass.setSize(100,200);
myclass.pack();
myclass.setVisible(true);
}
}
32/25
Xử lý sự kiện
 Bảng sau đây chỉ ra các sự kiện khác nhau và
mô tả về chúng
33/25
Xử lý sự kiện
 Các interface của các listener
34/25
Xử lý sự kiện
ComponentListener
 Danh sách các listener cho các thành phần
35/25
Xử lý sự kiện
 Lấy thông tin event: 
• Object getSource(): trả lại đối tượng đã gây ra 
event
• Ví dụ
public void actionPerformed(ActionEvent e) 
{
if(e.getSource()==btn) 
System.out.print("DDD");
}
36/25
Xử lý sự kiện
 Các lớp thích nghi (Event Adapters)
• Nhiều listener interface có nhiều hơn 1 phương thức
• Ví dụ: MouseListener có 5 phương thức 
 mousePressed
 mouseReleased
 mouseEntered
 mouseExited
 mouseClicked
• Sử dụng chi 1 phương thức của interface, ta phải 
thực thi tất cả các phương thức => không cần thiết
37/25
Xử lý sự kiện
 Các lớp thích nghi (Event Adapters)
• Sử dụng Adapter, ta chỉ cần định nghĩa phương 
thức cần sử dụng
• Ví dụ
public class MyClass extends MouseAdapter { 
someObject.addMouseListener(this); 
public void mouseClicked(MouseEvent e) { 
//code
} 
}
38/25
Xử lý sự kiện
 Các lớp lồng (Inner Classes)
public class MyClass extends Frame{
public MyClass(){
this.addWindowListener(new MyAdapter());
}
class MyAdapter extends WindowAdapter{
public void windowClosing (WindowEvent 
event)
{ 
System.exit(0); 
}
}
39/25
Xử lý sự kiện
 Các lớp lồng vô danh (Anonymous Inner 
Classes)
public class MyClass extends Frame{
public MyClass(){
this.addWindowListener(new WindowAdapter(){
public void windowClosing (WindowEvent 
event){
System.exit(0);
}});
}
}
40/25
Xử lý sự kiện