You are on page 1of 54

1

JAVA SWING VÀ
LẬP TRÌNH HƯỚNG SỰ KIỆN
Ý tưởng và thành phần
Nội dung
2

 Ý tưởng lập trình hướng sự kiện


 Thành phần java swing và cấu trúc
 Quản lý layout
 Nắm bắt các sự kiện xảy ra trong thành phần
 Mẫu MVC (Model View Controller)
 Quan hệ observer/observable
Giao diện chương trình
3

 Hướng thuật toán


 Chương trình đang được kích hoạt
 Chương trình xác định chính xác những thông tin
gì nó cần từ môi trường, và khi nào thì sử dụng
thông tin đó
 Giao diện dạng text được gọi là hướng thuật
toán (algorithm driven)
Giao diện chương trình
4

 Hướng sự kiện
 Chương trình đang trong trạng thái bị động
 Chương trình chờ đợi khi xảy ra một sự kiện
trong môi trường
 Khi sự kiện xảy đến, chương trình kích hoạt sự
kiện đó, và đợi đến sự kiện tiếp theo
 Chương trình với chế độ đồ họa, giao diện
người sử dụng luôn luôn là hướng sự kiện
(event driven)
Chương trình hướng sự kiện
5

 Hệ thống giao diện, quản lý sự hiển thị và xác


định sự kiện
 Chương trình Java tương tác với hệ thống
giao diện thông qua các thành phần AWT
 Chương trình giao tiếp với hệ thống giao diện
thông qua sự hiển thị
Giới thiệu Swing – thành phần
6

 Thành phần cơ bản:


 Hiển thị thông tin tới hoặc lấy thông tin từ người dùng
 Ví dụ như: JButton, JLabel, JTextField, JTextArea, pane,
JComboBox
 Containers:
 Lưu trữ và vị trí các thành phần
 Ví dụ: JFrame, JPanel
 Container mức cao:
 Chứa tất cả các thành phần trực quan của GUI
 Cung cấp màn hình sử dụng của chương trình
 Container trung gian:
 Sử dụng để tổ chức và vị trí của các thành phần GUI
Ví dụ cây containers
7
JComponent
8

 Lớp con của java.awt.Component


 Tính chất thành phần
Thành phần cơ bản
9

 JCheckBox – đánh dấu của một nút hiển thị trạng thái với người sử
dụng
 JRadioButton – đánh dấu sự hiển thị trạng thái của nó tới người sử
dụng
 JComboBox – danh sách thả xuống với trường text có thể thay đổi.
 JList – cho phép người sử dụng lựa chọn 1 hoặc nhiều khoản trong
list
 JMenu – Menu thả thể hiện danh sách lựa chọn cho người sử dụng
 JSlider – cho phép người sử dụng lựa chọn giá trị qua nút bấm
 JTextField – vùng để nhập vào dòng đơn
Thành phần cơ bản
10

 JLabel – chứa xâu text, hình ảnh hoặc cả hai


 JProgressBar – quá trình giao tiếp của một số việc
 JToolTip – miêu tả mục đích của thành phần
 JTree – thể hiện sự kế thừa dữ liệu theo nguyên tắc
chuẩn
 JTable – thành phần người sử dụng sửa đổi và thể hiện
dữ liệu trên một bảng 2 chiều
 JTextArea, JTextPane, JEditorPane – xác định vùng
hiển thị, sửa đổi text trên nhiều dòng
Ví dụ về swing
11

 JTree

 JTable
Container
12

 Thành phần mà chứa các thành phần khác và


chính nó gọi là container
Thành phần trung gian
13

 JPanel – sử dụng để lựa chọn các thành phần


khác
 JScrollPane – cung cấp khung nhìn với thành
cuộn
 JTabbedPane – cho phép người sử dụng lựa
chọn giữa nhóm của các thành phần bằng
cách kích vào nhãn
 JToolBar - sử dụng để thể hiện tập các chức
năng thường dùng
Ví dụ về tổ chức thành phần
14

 Đoạn mã sau sẽ tạo JPanel và thêm 2 nút với


nhãn là “on” và “off”
JPanel p = new JPanel();
p.add(new JButton(“on”));
p.add(new JButton(“off”));
 Khi mà panel trên được sử dụng, sẽ thể hiện 2
nút trong đoạn mã trên
Một số lớp swing
15

JButton
AbstractButto
JCheckB
n
JToggleButt ox
JComboBox on JRadioButto
Component n

JLabel
JComponen
Container JPanel
t
JRootPane
Windows
JScrollPane

JSlider
Frame
javax.swing.text JTextField
JFrame
JTextComponent
<interface> JTextArea
RootPaneContai
ner
Container mức cao
16

 Không chứa bất cứ container nào


 Cung cấp khung hình nơi mà các thành phần
khác có thể thể hiện chính nó
 JApplet, JDialog, JFrame, JWindows
JFrame
17

 Là cửa sổ giao diện, với tên, khung, menu bar,


và một số thành phần riêng của người dùng
 Có thể thay đổi vị trí, di chuyển
 Không chứa các lớp con của JComponent
 Quản lý các thành phần riêng của người dùng
tới nội dung lưu giữ
 Khi JFrame được đặt là nhìn được, một sự
kiện được khởi tạo
Ví dụ JFrame
18

 Thêm thành phần vào


trong JFrame

JFrame f = new JFrame(“A Frame”);


JButton b = new JButton(“Press”);
Container cp = f.getContentPane();
cp.add();
Thành phần của JFrame
19

Content Pane
JFrame Container

*
Componen
t
Thành phần chính và phụ
20

 Các thành phần chính


 JApplet, JDialog, JFrame, JWindow
 Được tạo bởi các thành phần GUI của hệ thống
giao diện trực thuộc môi trường
 Cách nhìn và cảm nhận phụ thuộc vào thành
phần giao diện
 Các thành phần phụ
 Những thành phần còn lại của swing
Chương trình đơn giản
21

import javax.swing.*;
public class DisplayFrame {
public static void main (String[] args) {
JFrame f = new JFrame("A Frame");
//… components
f.setSize(300,200);
f.setVisible(true);
}
}
(Chương trình trên ko ngừng lại được, vì sao?)
Lập trình liên tiếp và song song
22

 Luồng là cấu trúc liên tiếp được thực thi bởi bộ


nhớ
 Lập trình liên tiếp – chương trình tồn tại bởi
luồng đơn, được thực thi liên tục bởi các hành
động trong phương thức chính
 Lập trình song song – chương trình có thể
chứa một số luồng, mỗi luồng có thể thực thi
một cách độc lập nhau trong một chuỗi các
hành động
Lập trình liên tiếp và song song
23

 Sự kiện trả về bởi luồng – thực thi tất cả mã


mà tham gia vào trong quá trình thể hiện các
thành phần và bắt sự kiện
 Sau khi JFrame được hiển thị, luồng chính sẽ
không thi hành các hành động phụ thuộc vào
trạng thái giao diện người sử dụng
Luồng chính

Sự kiện trả về bởi luồng

JFrame
Quản lý layout (LayoutManager)
24

 Đảm nhiệm về vị trí và độ lớn của các thành


phần giao diện được đưa vào
 Mỗi container liên kết với LayoutManager
 Cài đặt và truy cập containers của
LayoutManager
public LayoutManager getLayout();
public void setLayout (LayoutManager manager);
 LayoutManager phải sử dụng kiểm chứng tới
các trạng thái đúng thông qua validate()
Các lớp LayoutManager
25

 FlowLayout – sắp xếp các thành phần từ trái


sang phải, từ trên xuống dưới
 BorderLayout – sắp xếp tới 5 thành phần gồm:
4 hướng (đông, tây, nam, bắc) và trung tâm
 GridLayout – sắp xếp các thành phần 2 chiều
 CardLayout – thể hiện một thành phần tại một
thời điểm từ các bảng thành phần có sẵn
Các lớp LayoutManager
26

 GridBagLayout – sắp xếp các thành phần theo


chiều thẳng đứng và ngang tuân theo các ràng
buộc
 BoxLayout – sắp xếp các thành phần của một
trong các hàng ngang, hoặc các cột dọc
 OverlayLayout – thành phần được sắp xếp lên
trên các thành phần khác
LayoutManager mặc định
27

 JPanel mặc định là: FlowLayout


 JFrame mặc định là: BorderLayout
Sự kiện và thành phần
28

 Sự kiện là các đối tượng


 Sự kiện: các lớp con của lớp trừu tượng
java.awt.AWTEvent
 Thành phần là tổng hợp các sự kiện
 Mỗi sự kiện cho biết nguồn sự kiện và các
thông tin liên quan tới sự kiện đó
 Hàm để lấy nguồn sự kiện
public Object getSource();
Listener hoặc bắt sự kiên
29

 Listener – khi một đối tượng được chú ý và khi sự kiện


xảy ra trong thành phần
 Đối tượng listener liên kết với thành phần để chú ý đến
các sự kiện xảy ra
 Listener phải thực thi các sự kiện listener
 Lập trình bắt sự kiện tại thời điểm thực thi của kiểu sự
kiện đó
ListenerInterfa notified EvenSource
ce (component)
registered
Listener
Ví dụ chương trình GUI
30

 Chương trình thể hiện các nút. Khi ấn nút,


hình cảnh và nền được trao đổi cho nhau
 Thiết kế: mở rộng lớp JFrame với
OnOffSwitch, và xây dựng constructor chứa
các nút ấn.
Mã ví dụ thực thi
31
import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
class OnOffSwitch extends JFrame {
public OnOffSwitch () {
super("On/Off Switch"); // frame title
JButton button = new JButton("On/Off");
button.setForeground(Color.black);
button.setBackground(Color.white);
this.getContentPane().add(button, BorderLayout.CENTER);
}
} // end of OnOffSwitch
public class OnOffTest {
public static void main (String[] args) {
OnOffSwitch frame = new OnOffSwitch();
frame.setSize(300,200);
frame.setVisible(true);
}
}
Chương trình chưa hoàn thiện
32

 Khi ấn nút không có gì xảy ra


 Khi nút được ấn sinh ra ActionEvent
 Xác định lớp Switcher thực thi ActionListener
 Liên kết Switcher với JButton
Định nghĩa Switcher
33

class Switcher implements ActionListener {


public void actionPerformed (ActionEvent e) {
Component source = (Component)e.getSource();
Color oldForeground = source.getForeground();
source.setForeground(source.getBackground());
source.setBackground(oldForeground);
}
}
Bổ sung Listener
34

public OnOffSwitch () {
super("On/Off Switch"); // frame title
// create button and set its colors
JButton button = new JButton("On/Off");
button.setForeground(Color.black);
button.setBackground(Color.white);
// create and register button’s listener:
button.addActionListener(new Switcher());
// add button to JFrame’s content pane:
this.getContentPane().add(
button, BorderLayout.CENTER);
}
Đóng chương trình JFrame
35

 Kết thúc chương trình cần lập trình để listener


của cửa sổ đóng các cửa sổ đó
 Quá trình đóng thông qua giao diện
WindowListener:
void windowClosed (WindowEvent e)
void windowClosing (WindowEvent e)
Các lớp Adapter: WindowAdapter
36

 Java cung cấp bộ sự kiện trừu tượng Adapter


 Lớp adapter thực thi giao diện listener với
phương thức rỗng
Giao diện và Adapter
37
Lớp Terminator
38

//implements window events to close a window


class Terminator extends WindowAdapter {
public void windowClosing(WindowEvent e) {
Window w = e.getWindow();
w.dispose();
}
public void windowClosed(WindowEvent e) {
System.exit(0);
}
}
Chương trình GUI cơ bản
39

 Sử dụng JFrame
 Bổ sung các thành phần trong giao diện
 Lớp Terminator cho phép đóng cửa sổ

 Với mọi thành phần GUI, các sự kiện cần


hướng tới:
 Xác định lớp thực thi giao diện Listener
 Liên kết lớp listener với các thành phần thông
qua các sự kiện
Xây dựng GUI
40

 Sử dụng JPanel như công cụ phân tích các giao diện


phức tạp
 Kỹ thuật chuẩn
 Cung cấp tính linh hoạt
 JPanel có thể được bổ sung tới các cấu trúc khác
 Xây dựng chương trình trong khung JPanel, và bổ sung
nội dung JFrame
 Có thể sử dụng JComponent để tạo khung nhìn
public void setBorder (Border border)
 Thư viện chuẩn: javax.swing.BorderFactory
MenuBar và Menu
41

 JFrame luôn có thanh menu, chứa các lựa chọn


 Thanh menu có thể được bổ sung thông qua phương
thức setJMenuBar
JFrame window = new JFrame("Some Application");
JMenuBar menuBar = new JMenuBar();
window.setJMenuBar(menuBar);
 Menu lựa chọn bổ sung thông qua JMenuItem
JMenuItem swing = new JMenuItem("Swing");
JMenuItem take = new JMenuItem("Take");
JMenuItem bunt = new JMenuItem("Bunt");
batter.add(swing);
batter.add(take);
batter.add(bunt);
Dialog
42

 Cửa sổ để nhập dữ liệu vào từ người dùng


 Các thành phần chính
 JOptionPane, JFileChooser, JColorChooser
 Dialog được lựa chọn và hiển thị, và sẽ được
hủy bỏ bởi người dùng
 Có 2 loại dialog:
 Dialog cách thức (modal) – người dùng nhập tới
tất cả các cửa sổ bị khóa khi dialog được hiển thị
 Dialog không cách điệu – sử dụng JDialog
showInputDialog
43

String response = JOptionPane.showInputDialog(frame, “Message Type”);


int value = convertToInt(response);
showConfirmDialog
44

int response = JOptionPane.showConfirmDialog(frame, “Take over


the world?”, “The Brain”, JOptionPane.YES_NO_OPTION);
if (response == YES_OPTION) …
JFileChooser dialog
45

JFileChooser directory = new JFileChooser();


directory.setCurrentDirectory(new File(“.”));
directory.showOpenDialog(this); //open dialog
File file = directory.getSelectedFile();
Đồ họa
46

 Tất cả các thành phần đều chứa đồ họa. Đối


tượng Graphics có phương thức vẽ text, hình
ảnh, và các hình hình học
 drawLine, drawImage, drawRect, drawString,
fillRect
 JPanel sử dụng như bức vẽ, sử dụng phương
thức paintComponent
Mẫu MVC (Model View Controller)
47

 Thành phần mẫu (model) – đối tượng mẫu và giải quyết các vấn đề
 Thành phần khung nhìn (view) – thể hiện mẫu
 Thành phần điều khiển (controller) – nắm các sự kiện nhập vào từ
người dùng

View
View
view1
view3
Controller
control1
Model
View
view2

Controller
control2
Ví dụ MVC
48

 Model: tam giác vuông


 Cạnh huyền và chiều cao có thể thay đổi
 View: 3 cách nhìn khác nhau với tam giác
 Thể hiện độ dài của cạnh
 Thể hiện bằng hình

 Ghi nhớ sự thay đổi trạng thái qua log file

 Controller: dành cho cách nhin thứ nhất, thay


đổi tam giác
Lớp RightTriangle
49

public class RightTriangle { public int hypotenuse () {


private int base; return this.hypotenuse;
private int height; }
private int hypotenuse; public void setBase (int newBase) {
public RightTriangle (int base, int this.base = newBase;
height) { setHypotenuse();
this.base = base; }
this.height = height; public void setHeight (int newHeight) {
setHypotenuse(); this.height = newHeight;
} setHypotenuse();
public int base () { }
return this.base; private void setHypotenuse () {
} this.hypotenuse = (int) Math.round(
public int height () { Math.sqrt(base*base + height*height));
return this.height; }
} } // end RightTriangle
Quan hệ Observer/Observable
50

 java.util cung cấp lớp Observable, giao diện Observer


<<interface>> notifies
Observable
Observer

registers
Client

 java.util.Observable cung cấp một số phương thức sau


public void addObserver (Observer o);
protected void setChanged ();
public void notifyObservers ();
public void notifyObservers (Object arg);
Thực thi Observable
51

public void setBase (int newBase) {


this.base = newBase;
setHypotenuse();
setChanged();
notifyObservers();
}
public void setHeight (int newHeight) {
this.height = newHeight;
setHypotenuse();
setChanged();
notifyObservers();
}
View
52

class TextView extends JPanel implements Observer {


private final static int FIELD_SIZE = 16;
private JTextField base;
private JTextField height;
private JTextField hypotenuse;
public TextView (RightTriangle model) {
super();

base = new JTextField(FIELD_SIZE);
base.setActionCommand("Base");

height = new JTextField(FIELD_SIZE);
height.setActionCommand("Height");

hypotenuse = new JTextField(FIELD_SIZE);
hypotenuse.setEditable(false);

}
Cấu trúc Controller
53

observes
TextView has
3

JTextField RightTriangle

2
listenes to
TVController modifies
Kết luận
54

 GUI cấu trúc từ các thành phần, theo phân cấp


containers
 Sau khi thể hiện hình ảnh đồ họa, chương trình sẽ thực
thi sự kiện này và đợi cho đến sự kiện tiếp
 Sự kiện listeners là đối tượng để bắt các sự kiện
 JFrame là mức cao nhất của container
 Bắt sự kiện và hiển thị giao diện đồ họa trong nhưng
luồng riêng rẽ là luồng sự kiện gửi đi
 Mẫu MVC được sử dụng trong cấu trúc GUI hướng sự
kiện

You might also like