Lập trình Giao diện Đồ họa Java với Swing và NetBeans

Lập trình Giao diện với Swing và NetBeans

Bài thực hành này tập trung vào việc sử dụng Java Swing để xây dựng các giao diện người dùng cơ bản.

Bài tập 1: Thành phần Giao diện và Xử lý Sự kiện

Hãy tạo một hộp thoại đăng nhập đơn giản.

1. Tạo một hộp thoại đăng nhập

Học cách xây dựng giao diện và viết mã lắng nghe sự kiện bằng tay trong IDE.

Cần hoàn thành giao diện như trên. Vui lòng sửa đổi dựa trên đoạn mã sau:

import javax.swing.JFrame;

public class CuaSoDangNhap {

    private static void taoVaHienThiGiaoDien() {
        // Tạo và cấu hình cửa sổ.
        JFrame cuaSo = new JFrame("HeThongDangNhap");
        cuaSo.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        // Mã của bạn ở đây
        
        // Hiển thị cửa sổ.
        cuaSo.pack();
        cuaSo.setVisible(true);
    }

    public static void main(String[] args) {
        javax.swing.SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                taoVaHienThiGiaoDien();
            }
        });
    }
}

2. Các bước phát triển và mã tham khảo

Các bước:

  1. Toàn bộ giao diện cửa sổ được chia thành hai phần, tương ứng với vị trí Centre và South của BorderLayout. Tạo và chỉ định layout cho cửa sổ.
  2. Đặt một JPanel vào vị trí Center, ví dụ panelTrungTam, và đặt layout manager của nó là GridLayout (2 hàng, 2 cột). Sau đó, thêm hai JLabel và JTextField vào.
  3. Đặt một JPanel khác vào vị trí South, ví dụ panelDuoi, và thêm hai nút vào đó: nutDangNhap, nutDangKy. Lưu ý: JPanel mặc định sử dụng FlowLayout, không cần thay đổi.
  4. Đăng ký bộ lắng nghe sự kiện cho nút nutDangNhap để thực hiện chức năng: khi nhấn nút đăng nhập, nếu tên người dùng và mật khẩu khớp, hãy sử dụng hộp thoại thông báo để hiển thị "Chào mừng người dùng XXX vào hệ thống!", nếu không thì hiển thị "Tên người dùng hoặc mật khẩu không chính xác!".

Mã tham khảo cho BorderLayout:

JFrame cuaSo = new JFrame("KiemThuBorderLayout");
cuaSo.setLayout(new BorderLayout());
cuaSo.add(new JButton("Bắc"), BorderLayout.NORTH);
cuaSo.add(new JButton("Nam"), BorderLayout.SOUTH);
cuaSo.add(new JButton("Đông"), BorderLayout.EAST);
cuaSo.add(new JButton("Tây"), BorderLayout.WEST);
cuaSo.add(new JButton("Trung tâm"), BorderLayout.CENTER);
cuaSo.setSize(600, 600);
cuaSo.setVisible(true);

Mã tham khảo cho GridLayout:

JFrame cuaSo = new JFrame("KiemThuGridLayout");
JPanel bangDieuKhien = new JPanel(new GridLayout(2,2));
bangDieuKhien.add(new JButton("btn1"));
bangDieuKhien.add(new JButton("btn2"));
bangDieuKhien.add(new JButton("btn3"));
bangDieuKhien.add(new JButton("btn4"));
cuaSo.add(bangDieuKhien);

Mã tham khảo cho các hộp thoại:

// Hộp thoại thông báo: Hiển thị thông điệp.
JOptionPane.showMessageDialog(null, "Hộp thoại thông báo");

// Hộp thoại nhập liệu: Lấy giá trị từ người dùng.
String x = JOptionPane.showInputDialog("Vui lòng nhập giá trị của x:");
System.out.println("x=" + x);

// Hộp thoại xác nhận: Trả về giá trị khác nhau tùy theo lựa chọn.
int luaChon = JOptionPane.showConfirmDialog(null, "Vui lòng chọn");

/*
luaChon có thể bằng các hằng số được định nghĩa trước.
JOptionPane.YES_OPTION
JOptionPane.NO_OPTION
JOptionPane.CANCEL_OPTION
Thực tế, JOptionPane.YES_OPTION bằng 0. Sử dụng hằng số giúp mã dễ đọc hơn
*/

3. Sử dụng AI để cải thiện chi tiết hộp thoại đăng nhập

Yêu cầu: Hoàn thành ít nhất 2 điểm cải tiến sau:

  • Đặt cửa sổ ở giữa màn hình và không thể thay đổi kích thước;
  • Thay JTextField nhập mật khẩu bằng JPasswordField.
  • Sử dụng BorderFactory để thêm viền cho bảng điều khiển ở giữa.
  • Thiết lập căn chỉnh cho JLabel (new JLabel("Mật khẩu", SwingConstants.RIGHT)).
  • Thiết lập khoảng cách dọc và ngang (vGap, hGap) cho GridLayout và quan sát kết quả.
  • Thay đổi giao diện (look and feel).
  • Nâng cao: Làm thế nào để làm cho giao diện đăng nhập đẹp hơn, ví dụ như chèn hình nền, phông chữ lớn hơn, v.v.

Bài tập 2: Sử dụng AI để viết chương trình GUI Swing

Mục tiêu: Phát triển một ứng dụng GUI nhỏ với nhiều chức năng, bao gồm menu.

Chức năng cốt lõi:

  1. Xem tệp văn bản: Có thể tải tệp văn bản;
  2. Xem dữ liệu sản phẩm: Có thể sử dụng JTable để hiển thị dữ liệu sản phẩm.
  3. Xác thực người dùng: Sử dụng hộp thoại đăng nhập đã viết ở trên để xác thực, sau khi thành công sẽ vào cửa sổ chính.

Nhiệm vụ 1: Viết cửa sổ chính CuaSoChinh

Viết một cửa sổ chính Swing CuaSoChinh. Cửa sổ có 3 menu:

  • Tệp văn bản: Mở, Thoát
  • Dữ liệu sản phẩm: Dữ liệu sản phẩm hiện có, Nhập dữ liệu sản phẩm.
  • Khác: Về chúng tôi, Đăng xuất

Chức năng:

  1. "Mở" function: Chọn tệp văn bản và hiển thị trong bảng điều khiển tệp văn bản.
  2. "Về chúng tôi" function: Hiển thị thông tin phát triển chương trình trong một hộp thoại mới, bao gồm nhà phát triển, ngày phát triển, số phiên bản, v.v.

Yêu cầu khác:

  1. "Tệp văn bản" và "Dữ liệu sản phẩm" được đặt trong các bảng điều khiển khác nhau, có thể chuyển đổi tùy theo lựa chọn của người dùng.
  2. Chức năng "Dữ liệu sản phẩm" tạm thời không được triển khai.

Nhiệm vụ 2: Liên kết CuaSoDangNhap và CuaSoChinh

Mục tiêu học tập: Học cách sử dụng AI để sửa đổi mã hiện có để hoàn thành chức năng tương ứng.

Nhiệm vụ: Sửa đổi chức năng của nút đăng nhập trên CuaSoDangNhap. Thay đổi thành: sau khi xác thực thành công, mở CuaSoChinh và hiển thị tên người dùng vừa nhập trong tiêu đề của CuaSoChinh.

Nhiệm vụ 3: Thêm chức năng xem dữ liệu sản phẩm và đăng xuất cho CuaSoChinh

Sửa đổi mã của CuaSoChinh để thêm các chức năng xem dữ liệu sản phẩm, đăng xuất, v.v.

Chức năng:

  1. "Đăng xuất" function: Đóng cửa sổ chính và quay lại cửa sổ đăng nhập;
  2. "Dữ liệu sản phẩm hiện có" function: Hiển thị một JTable trên cửa sổ chính chứa dữ liệu sản phẩm. Lớp sản phẩm (id, tên, giá, danh mục sản phẩm);
  3. "Nhập dữ liệu sản phẩm" function: Chọn tệp, hiển thị dữ liệu sản phẩm từ tệp trong JTable.

Nhiệm vụ 4: Thêm lớp xác thực người dùng

Mục tiêu: Làm cho chương trình của bạn có cấu trúc module hơn.

Nhiệm vụ: Cải tạo CuaSoDangNhap, sử dụng một lớp xác thực người dùng riêng biệt khi xác thực đăng nhập. Nếu đăng nhập thành công, hãy tạo một đối tượng User chứa thông tin tên người dùng vừa nhập.

Nhiệm vụ 5: Cố gắng hiểu chương trình GUI được tạo

Học tập chủ yếu từ các khía cạnh: bố cục giao diện, bộ lắng nghe sự kiện, sử dụng các thành phần phổ biến, sự khác biệt giữa cửa sổ và hộp thoại, menu, chuyển đổi trang, và chuyển hướng giữa các cửa sổ, v.v.

Nhiệm vụ 6: Phát hành chương trình GUI đã viết

Đóng gói chương trình đã viết thành một tệp .exe hoặc .jar, để người khác có thể mở chương trình của bạn bằng cách nhấp đúp vào tệp.

Làm thế nào để sử dụng AI để tạo mã cần thiết

  1. Xác định chức năng: Xác định rõ ràng các chức năng mà chương trình cần có và mô tả chính xác.
  2. Nắm vững các khái niệm cơ bản: Các gợi ý trong bài thực hành này thực tế là được thiết kế cẩn thận sau khi nắm vững các khái niệm cơ bản về GUI, vì vậy có thể tạo mã cần thiết một cách suôn sẻ.
  3. Lặp lại liên tục: Trong thực tế, thường cần nhiều vòng lặp đối thoại với AI để xác định chức năng, xác định giao diện, v.v.
  4. Sửa đổi cục bộ: Nếu trong các vòng lặp đầu tiên đã xác định được khung chương trình tương đối ổn định, thì các chức năng bổ sung và sửa đổi sau này, hãy học cách để AI sửa đổi dựa trên mã hiện có thay vì để nó tạo lại toàn bộ mỗi lần. Mã như vậy sẽ dễ kiểm soát hơn.

Nhiệm vụ 7: Sử dụng AI để tạo GUI cho các chương trình cũ của bạn

Gợi ý 1: Bạn có thể cài đặt plugin **Tongyi Lingma** trong IDEA, plugin này có thể tạo mã tương ứng dựa trên mã hiện có trong IDE.

Câu hỏi thường gặp

Câu 1: Làm thế nào để truyền tên người dùng đến cửa sổ chính.

Trả lời 1: Cửa sổ chính chứa một thuộc tính User. Khi đăng nhập thành công, tạo đối tượng User và truyền nó cho cửa sổ chính thông qua hàm tạo hoặc các phương thức khác.

Câu 2: Làm thế nào để tìm mã thực hiện tương ứng cho mục menu "Về chúng tôi".

Trả lời 2: Đầu tiên, tìm mục menu "Về chúng tôi" (JMenuItem), giả sử biến của nó là veChungToiJMenuItem, sau đó tìm mã addActionListener của veChungToiJMenuItem.

Học về mô hình MVC

1. Xem tài liệu tham khảo và suy nghĩ: Lớp Student, StudentController, StudentView có chức năng gì? Mối quan hệ giữa chúng là gì? Làm thế nào để sử dụng mô hình này để viết mã trong chương trình GUI.

2. Thử sử dụng mô hình MVC để viết các chương trình như giỏ hàng mua sắm, hệ thống quản lý thông tin sinh viên, máy tính, v.v.

Các vấn đề khác

1. Hệ thống cài đặt JDK 9 trở lên, viết chương trình Swing trong Eclipse, hiển thị lỗi `javax.swing cannot be resolved to a type`

Nguyên nhân: JDK 9 trở lên giới thiệu hệ thống mô-đun, các gói liên quan đến java swing mặc định không được nhập.

Giải quyết: Cần thêm requires java.desktop; vào tệp module-info.java trong dự án Eclipse. Lưu ý: Vui lòng cài đặt phiên bản Eclipse cao hơn.

2. Không thể cài đặt NetBeans, hiển thị lỗi không tìm thấy JRE. Hoặc cài đặt thành công, mở ra không thể tạo dự án mới.

Nguyên nhân: NetBeans 8.2 vẫn chưa hỗ trợ JDK 9 trở lên.

Giải quyết: Cài đặt JDK 8 hoặc cài đặt Netbeans 9.0. Có thể bạn cần sửa đổi tệp netbeans.conf trong thư mục netbeans_install_dir\etc, thay đổi giá trị của netbeans_jdkhome thành đường dẫn của jdk8. Lưu ý: Sau khi cài đặt NetBeans 9.0, có thể không chạy được, bạn cũng có thể xem xét giải quyết bằng cách sửa đổi netbeans_jdkhome để đặt nó thành đường dẫn của jdk9 trở lên.

Thẻ: Java Swing NetBeans MVC JTable

Đăng vào ngày 14 tháng 6 lúc 04:45

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn