Series Java Swing Bài 12: JButton - Nút bấm cơ bản và các trạng thái

JButton là linh hồn của sự tương tác trong bất kỳ ứng dụng nào. Kế thừa từ lớp cha AbstractButton (giống như JLabel), JButton cũng có khả năng chứa cả văn bản và hình ảnh. Tuy nhiên, sức mạnh thực sự của nó nằm ở việc phản hồi lại các thao tác click chuột của người dùng.

1. Khởi tạo và Tùy chỉnh cơ bản

Khởi tạo một nút bấm rất đơn giản, bạn có thể truyền vào một chuỗi văn bản, một đối tượng ImageIcon, hoặc cả hai.

Java

// Tạo nút chỉ có chữ
JButton btnText = new JButton("Đăng nhập");

// Tạo nút có cả chữ và ảnh (icon)
ImageIcon icon = new ImageIcon("save.png");
JButton btnSave = new JButton("Lưu dữ liệu", icon);

// Loại bỏ khung viền đứt nét (Focus Ring) bao quanh chữ khi click vào nút
btnSave.setFocusPainted(false); 

Mẹo: Giao diện mặc định của Swing thường vẽ một đường viền đứt nét (Focus ring) bao quanh chữ mỗi khi bạn click vào nút. Trông nó khá lỗi thời. Hãy luôn gọi setFocusPainted(false) để nút bấm trông gọn gàng và hiện đại hơn.

2. Quản lý 3 trạng thái sống còn của nút bấm

Một nút bấm chuyên nghiệp không chỉ đứng im, nó phải phản hồi lại trạng thái của hệ thống và thao tác của người dùng.

Trạng thái Vô hiệu hóa (Disabled)

Khi dữ liệu chưa hợp lệ (ví dụ: người dùng chưa nhập mật khẩu), bạn cần khóa nút "Đăng nhập" lại để ngăn họ click.

Java

// Khóa nút bấm (Nút sẽ chuyển sang màu xám mờ và không thể click)
btnSubmit.setEnabled(false);

// Mở khóa nút bấm
btnSubmit.setEnabled(true);

Trạng thái Di chuột (Hover / Rollover)

Giao diện hiện đại luôn có hiệu ứng khi người dùng rê chuột lên nút bấm. Mặc dù để đổi màu nền khi Hover cần đến MouseListener (sẽ học ở phần sự kiện), Swing hỗ trợ sẵn tính năng đổi hình ảnh Icon khi rê chuột cực kỳ tiện lợi:

Java

// 1. Phải bật tính năng Rollover (Mặc định thường đã bật)
btn.setRolloverEnabled(true);

// 2. Icon khi ở trạng thái bình thường
btn.setIcon(new ImageIcon("normal_icon.png"));

// 3. Icon sẽ tự động hiển thị khi rê chuột (Hover) vào nút
btn.setRolloverIcon(new ImageIcon("hover_icon.png"));

Trạng thái Nhấn giữ (Pressed / Clicked)

Tương tự như Hover, bạn có thể thiết lập một Icon riêng xuất hiện đúng vào khoảnh khắc người dùng đè chuột trái xuống nút.

Java

// Icon khi đang nhấn giữ chuột
btn.setPressedIcon(new ImageIcon("pressed_icon.png"));

3. "Phẫu thuật thẩm mỹ": Làm nút bấm phẳng (Flat Button)

Nút bấm mặc định của Swing có hiệu ứng đổ bóng nổi khối (3D) trông khá giống Windows 98. Để tạo ra một nút bấm phẳng (Flat design) như các website hiện đại, bạn cần vô hiệu hóa các thuộc tính vẽ đồ họa mặc định của nó:

Java

JButton btnFlat = new JButton("Nút phẳng");

btnFlat.setBackground(new Color(52, 152, 219)); // Màu nền xanh dương
btnFlat.setForeground(Color.WHITE); // Chữ màu trắng
btnFlat.setFont(new Font("Arial", Font.BOLD, 14));

btnFlat.setFocusPainted(false); // Xóa viền đứt nét khi click
btnFlat.setBorderPainted(false); // Xóa viền 3D bao quanh nút
// btnFlat.setContentAreaFilled(false); // (Tùy chọn) Bật dòng này nếu chỉ muốn hiển thị chữ/ảnh, làm trong suốt nền

4. Bắt sự kiện Click (Preview)

Để làm cho nút bấm có tác dụng, chúng ta phải gắn cho nó một bộ lắng nghe sự kiện (ActionListener). Bất cứ khi nào nút bị click, khối lệnh bên trong sẽ được kích hoạt.

Java

btnFlat.addActionListener(e -> {
    System.out.println("Nút bấm đã được kích hoạt!");
});

5. Source Code Thực Chiến

Đoạn mã sau tạo ra 3 loại nút bấm: một nút tiêu chuẩn, một nút phẳng (Flat) hiện đại, và một nút đang bị khóa (Disabled).

Java

import javax.swing.*;
import java.awt.*;

public class JButtonDemo extends JFrame {

    public JButtonDemo() {
        setTitle("Khám phá JButton");
        setSize(350, 300);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        setLocationRelativeTo(null);
        
        // Sử dụng FlowLayout để các nút xếp hàng nối tiếp nhau
        setLayout(new FlowLayout(FlowLayout.CENTER, 20, 30));

        // ==========================================
        // 1. NÚT TIÊU CHUẨN (Có Hover Icon)
        // ==========================================
        JButton btnStandard = new JButton("Nút tiêu chuẩn");
        btnStandard.setFocusPainted(false); // Tắt focus ring
        
        // ==========================================
        // 2. NÚT GIAO DIỆN PHẲNG (FLAT DESIGN)
        // ==========================================
        JButton btnFlat = new JButton("Đăng nhập");
        btnFlat.setPreferredSize(new Dimension(150, 40));
        btnFlat.setFont(new Font("Arial", Font.BOLD, 14));
        btnFlat.setBackground(new Color(46, 204, 113)); // Xanh lá
        btnFlat.setForeground(Color.WHITE);
        btnFlat.setFocusPainted(false);
        btnFlat.setBorderPainted(false); // Tắt viền nổi
        btnFlat.setCursor(new Cursor(Cursor.HAND_CURSOR)); // Trỏ chuột hình bàn tay
        
        // Sự kiện đổi text khi click
        btnFlat.addActionListener(e -> {
            btnFlat.setText("Đang xử lý...");
            btnFlat.setBackground(new Color(230, 126, 34)); // Đổi sang màu cam
        });

        // ==========================================
        // 3. NÚT BỊ VÔ HIỆU HÓA (DISABLED)
        // ==========================================
        JButton btnDisabled = new JButton("Không thể click");
        btnDisabled.setPreferredSize(new Dimension(150, 40));
        btnDisabled.setEnabled(false); // Khóa nút

        // Thêm vào JFrame
        add(btnStandard);
        add(btnFlat);
        add(btnDisabled);
    }

    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> new JButtonDemo().setVisible(true));
    }
}