LẬP TRÌNH JAVA

Bài 11: Đồ họa và xử lý sự kiện

Nội dung

 11.1 Sơ đồ phân cấp lớp GUI

 11.2 Frames

 11.3 Layout Managers

 11.4 Drawing

 11.5 Event-Driven Programming

11.1 Sơ đồ phân cấp lớp GUI

 Các thành phần GUI

 Các đối tượng GUI: button, label, text field, check box, radio button, combo box, ...

 Mỗi loại đối tượng được xác định trong 1 lớp: JButton, JLabel, JTextField, JCheckBox, JRadioButton, JComboBox, ...

 Mỗi lớp thành phần GUI có một số constructor để tạo các đối tượng thành phần GUI.

11.1 Sơ đồ phân cấp lớp GUI

 Swing vs. AWT

 AWT: Abstract Windows Toolkit:

 Java 1

 Được gắn với platform xác định

 Thích hợp với việc phát triển các ứng dụng GUI đơn giản.

 Swing components:

 Java 2

 Không gắn với platform cố định

 Mạnh, đa năng, linh hoạt

11.1 Sơ đồ phân cấp lớp GUI

 Sơ đồ phần cấp lớp GUI (Swing)

11.1 Sơ đồ phân cấp lớp GUI

 JComponent

11.1 Sơ đồ phân cấp lớp GUI

 Các lớp GUI: nhóm container

 Đư ợc dùng đ ể ch ứa các thành ph ần khác.

 Các l ớp container (Swing):

 Container

 JFrame

 JDialog

 JApplet

 JPanel

11.1 Sơ đồ phân cấp lớp GUI

 Các lớp GUI: nhóm component

 Gồm các subclass của lớp JComponent.

 Các lớp GUI component (Swing):

 JButton

 JLabel

 JTextField

 JTextArea

 JComboBox

 JList

 JRadioButton

 JMenu

 ...

11.1 Sơ đồ phân cấp lớp GUI

 Các lớp GUI: nhóm helper

 Đư ợc các component và container dùng đ ể v ẽ và đ ặt các đ ối tư ợng.

 Các l ớp helper (Swing):

 Graphics

 Color

 Font

 FontMetrics

 Dimension

 LayoutManager

11.1 Sơ đồ phân cấp lớp GUI

 Các thành phần giao diện người sử dụng

Nội dung

 11.1 Sơ đồ phân cấp lớp GUI

 11.2 Frames

 11.3 Layout Managers

 11.4 Drawing

 11.5 Event-Driven Programming

11.2 Frames

 Frame là một cửa sổ không chứa trong cửa sổ khác.

 Frame là nền tảng để chứa các thành phần GUI khác trong các ứng dụng Java GUI.

 Trong các chương trình Swing GUI, sử dụng lớp JFrame để tạo các cửa sổ.

11.2 Frames

import javax.swing.*;

public class MyFrame {

public static void main(String[] args) {

JFrame frame = new JFrame("Test Frame");

frame.setSize(400, 300);

frame.setVisible(true);

frame.setDefaultCloseOperation(

JFrame.EXIT_ON_CLOSE);

}

}

11.2 Frames

 Canh giữa Frame

 Mặc định, frame được hiển thị ở góc trên bên trái của màn hình.

 Để hiển thị frame ở một vị trí xác định, sử dụng phương thức setLocation(x, y) trong lớp JFrame.

 Phương thức này đặt góc trái trên của frame tại vị trí có tọa độ (x, y).

11.2 Frames

 Canh giữa Frame

11.2 Frames

 Đưa các thành phần vào trong Frame

// Dua nut bam vao trong frame

frame.getContentPane().add(new JButton("OK"));

 Content pane là một lớp con của Container. Câu lệnh ở trên tương đương với 2 câu lệnh sau:

Container container = frame.getContentPane();

container.add(new JButton("OK"));

 Content pane được sinh ra khi một đối tượng JFrame được tạo. Đối tượng JFrame sử dụng content pane để chứa các thành phần trong frame

Nội dung

 11.1 Sơ đồ phân cấp lớp GUI

 11.2 Frames

 11.3 Layout Managers

 11.4 Drawing

 11.5 Event-Driven Programming

11.3 Layout Managers

 Thiết lập Layout Manager

 Các layout manager của Java cung cấp cơ chế để tự động ánh xạ các thành phần GUI của bạn trên tất cả các hệ thống cửa sổ.

 Các thành phần GUI được đặt trong các container. Mỗi container có một layout manager để sắp xếp các thành phần đó..

11.3 Layout Managers

 Thiết lập Layout Manager

LayoutManager layMan = new XLayout();

container.setLayout(layMan);

 XLayout:

 FlowLayout

 GridLayout

 BorderLayout

 CardLayout

 GridBagLayout.

11.3 Layout Managers

 FlowLayout Manager

 Các thành ph ần đư ợc s ắp x ếp trong container t ừ trái sang ph ải, t ừ trên xu ống dư ới theo th ứ t ự chúng đư ợc đưa vào

11.3 Layout Managers

 GridLayout Manager

 GridLayout manager s ắp x ếp các thành ph ần trong m ột lư ới (ma tr ận) v ới s ố hàng và s ố c ột đư ợc xác đ ịnh b ởi constructor. Các thành ph ần đư ợc đ ặt trong lư ới t ừ trên xu ống dư ới, t ừ trái sang ph ải

11.3 Layout Managers

 BorderLayout Manager

 BorderLayout manager chia container thành 5 khu v ực: East, South, West, North, và Center

11.3 Layout Managers

 BorderLayout Manager

 Các thành phần được đưa vào BorderLayout bằng phương thức add:

add(Component, constraint)

 constraint:

 BorderLayout.EAST,

 BorderLayout.SOUTH,

 BorderLayout.WEST,

 BorderLayout.NORTH,

 BorderLayout.CENTER

11.3 Layout Managers

 Sử dụng Panel làm Container

 Các panel đóng vai trò như các container nhỏ để nhóm các thành phần GUI.

 Bạn nên đặt các thành phần GUI trong các panel và đặt các panel trong một frame, hoặc cũng có thể đặt panel trong panel.

JPanel p = new JPanel();

p.add(new JButton("OK");

frame.getContentPanel().add(p);

11.3 Layout Managers

 Sử dụng Panel làm Container

 Chương trình tạo một giao diện cho lò vi sóng, sử dụng các panel để tổ chức các thành phần.

Nội dung

 11.1 Sơ đồ phân cấp lớp GUI

 11.2 Frames

 11.3 Layout Managers

 11.4 Drawing

 11.5 Event-Driven Programming

11.4 Drawing

 JPanel còn có thể được sử dụng để vẽ đồ họa, văn bản và cho phép tương tác với người sử dụng.

 Để vẽ trên panel:

 Tạo một lớp subclass của JPanel

 Chồng phương thức paintComponent.

 Sau đó có thể hiển thị các chuỗi ký tự, vẽ các khối hình học và hiển thị ảnh trên panel.

11.4 Drawing

public class DrawMessage extends JPanel {

/** Main method */

public static void main(String[] args) {

JFrame frame = new JFrame("DrawMessage");

frame.getContentPane().add(new DrawMessage());

frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

frame.setSize(300, 200);

frame.setVisible(true);

}

/** Paint the message */

public void paintComponent(Graphics g) {

super.paintComponent(g);

g.drawString("Welcome to Java!", 40, 40);

}

}

11.4 Drawing

 Lớp Graphics là một lớp trừu tượng để hiển thị hình vẽ và ảnh trên màn hình trên các platform khác nhau.

 Lớp Graphics gói gọn các chi tiết platform và cho phép bạn vẽ các thứ theo cách giống nhau không liên quan đến các platform cụ thể.

 Lời gọi super.paintComponent(g) là cần thiết để đảm bảo rằng vùng hiển thị được xóa sạch trước khi hiển thị một bản vẽ.

Nội dung

 11.1 Sơ đồ phân cấp lớp GUI

 11.2 Frames

 11.3 Layout Managers

 11.4 Drawing

 11.5 Event-Driven Programming

11.5 Event-Driven Programming

 Lập trình hướng thủ tục (Procedural programming) chương trình được thực hiện theo thứ tự thủ tục.

 Trong lập trình hướng sự kiện (event-driven programming), mã lệnh được thực hiện vào lúc kích hoạt sự kiện

11.5 Event-Driven Programming

 Sự kiện

 Một sự kiện (event) có thể được định nghĩa là một loại tín hiệu báo cho chương trình có điều gì đó đã xảy ra..

 Sự kiện được sinh ra bởi các hành động của người sử dụng (ví dụ: di chuột, kích phím chuột, ấn phím) hoặc bởi HĐH (vd: timer).

11.5 Event-Driven Programming

 Các lớp Sự kiện

 Các l ớp s ự ki ện trên n ằm trong gói java.awt.event riêng ListSelectionEvent ở trong gói javax.swing.event

11.5 Event-Driven Programming

 Các lớp Sự kiện

11.5 Event-Driven Programming

 Mô hình ủy quyền

Dialogs

 Có thể sử dụng lớp JOptionPane để tạo 4 loại dialog chuẩn:

 Message Dialog hiển thị một message và đợi người sử dụng kích nút OK để đóng hộp thoại.

 Confirmation Dialog hiển thị câu hỏi và đề nghị người sử dụng trả lời, vd: OK hay Cancel

 Input Dialog hiển thị câu hỏi và nhận dữ liệu vào từ 1 text field, combo box hoặc list.

 Option Dialog hiển thị câu hỏi và nhận câu trả lời từ một tập các lựa chọn.

Dialogs

 Tạo các Message Dialog :

Sử dụng phương thức tĩnh trong lớp JOptionPane

showMessageDialog(Component parentComponent,

Object message)

showMessageDialog(Component parentComponent, Object message,String title, int messageType)

showMessageDialog(Component parentComponent, Object message, String title,

int messageType, Icon icon)

Dialogs

 Tạo các Message Dialog :

Sử dụng phương thức tĩnh trong lớp JOptionPane

showMessageDialog(Component parentComponent,

Object message)

showMessageDialog(Component parentComponent, Object message,String title, int messageType)

showMessageDialog(Component parentComponent, Object message, String title,

int messageType, Icon icon)