1. Khởi tạo giao diện màn hình chính

Bước 1: Tạo một JFrame trong gói view

Đặt tên là MainJFrame.java

Tại MainJFrame.java nếu như đang ở mục Source thì bạn chuyển qua mục Design để tiến hành thiết kế bố cục cho giao diện chương trình. Bên góc phải tại mục Palette chứa các Swing Containers, Swing Controls… dùng để thiết kế giao diện như nút nhấn, khung nhập dữ liệu. Mục Properties dùng để thay đổi các thuộc tính của đối tượng như chỉnh màu sắc, kiểu chữ, kích thước…

Bạn chỉ cần chọn Swing  Containers, Swing Controls… phù hợp sau đó kéo thả vào mục Design.

2. Tạo danh mục quản lý

Bây giờ chúng ta sẽ thiết kế giao diện cho phần menu bên trái màn hình, khi người dùng nhấn vào menu nào sẽ hiển thị dữ liệu ở nội dung tương ứng bên phải màn hình.

Như hình trên chúng ta cần tạo 2 Panel, Panel số 1 sẽ hiển thị danh mục và Panel số 2 sẽ hiển thị dữ liệu. Phần dấu mũi tên sẽ giúp bạn canh chỉnh kích thước tự co dãn có thể ngang hay dọc theo kích thước màn hình.

Với mỗi danh mục bạn cần tạo một Panel trong đó sẽ chứa một Label. Label chúng ta sẽ thiết lập các thuộc tính như là màu sắc, kích thước chữ, hình ảnh.

3. Xử lý sự kiện

Bạn cần tạo một số Panel như TrangChuPanel

, HocVienPanel, LopHocPanel, ThongKePanel trong gói view bằng cách chuột phải chọn mục New > JPanel Form…

Trong gói bean bạn tạo lớp DanhMucBean.java gồm một số trường sau để nhằm hỗ trợ xử lý bắt sự kiện khi nhấn vào mỗi Label.

Lớp DanhMucBean.java

package com.teamvietdev.qlhv.bean;

import javax.swing.JLabel;
import javax.swing.JPanel;

public class DanhMucBean {

    private String kind;
    private JPanel jpn;
    private JLabel jlb;

    public DanhMucBean() {
    }

    public DanhMucBean(String kind, JPanel jpn, JLabel jlb) {
        this.kind = kind;
        this.jpn = jpn;
        this.jlb = jlb;
    }

    public String getKind() {
        return kind;
    }

    public void setKind(String kind) {
        this.kind = kind;
    }

    public JPanel getJpn() {
        return jpn;
    }

    public void setJpn(JPanel jpn) {
        this.jpn = jpn;
    }

    public JLabel getJlb() {
        return jlb;
    }

    public void setJlb(JLabel jlb) {
        this.jlb = jlb;
    }

}

Tiếp theo bạn cần tạo mới lớp ChuyenManHinhController.java trong gói controller để xử lý chuyển qua lại các màn hình với nhau.

Khi vào ứng dụng thì sẽ hiển thị mặc định TrangChinhPanel

public void setDashboard(JPanel jpnItem, JLabel jlbItem) {
       kindSelected = "TrangChinh";
       jpnItem.setBackground(new Color(96, 100, 191));
       jlbItem.setBackground(new Color(96, 100, 191));
       JPanel node = new TrangChinhJPanel();
       jpbView.removeAll();
       jpbView.setLayout(new BorderLayout());
       jpbView.add(node);
       jpbView.validate();
       jpbView.repaint();
}

Hàm xử lý sự kiện khi nhấn vào Label bao gồm sự kiện nhấn chuột, di chuyển chuột vào và ra khỏi Label sẽ thay đổi màu nền của Panel.

public void setEvent(List<DanhMucBean> listDanhMuc) {
     this.listDanhMuc = listDanhMuc;
     for (DanhMucBean item : listDanhMuc) {
           item.getJlb().addMouseListener(new LabelEvent(item.getKind(), item.getJpn(), item.getJlb()));
     }
}

class LabelEvent implements MouseListener {

      private JPanel node;
      private String kind;

      private JPanel jpnItem;
      private JLabel jlbItem;

      public LabelEvent(String kind, JPanel jpnItem, JLabel jlbItem) {
           this.kind = kind;
           this.jpnItem = jpnItem;
           this.jlbItem = jlbItem;
      }

      @Override
      public void mouseClicked(MouseEvent e) {
            switch (kind) {
                case "TrangChinh":
                    node = new TrangChinhJPanel();
                    break;
                case "HocVien":
                    node = new HocVienJPanel();
                    break;
                // more
                default:
                    break;
           }
           jpbView.removeAll();
           jpbView.setLayout(new BorderLayout());
           jpbView.add(node);
           jpbView.validate();
           jpbView.repaint();
           setChangeBackground(kind);
      }

      @Override
      public void mousePressed(MouseEvent e) {
           kindSelected = kind;
           jpnItem.setBackground(new Color(96, 100, 191));
           jlbItem.setBackground(new Color(96, 100, 191));
      }

      @Override
      public void mouseReleased(MouseEvent e) {

      }

      @Override
      public void mouseEntered(MouseEvent e) {
          jpnItem.setBackground(new Color(96, 100, 191));
          jlbItem.setBackground(new Color(96, 100, 191));
      }

      @Override
      public void mouseExited(MouseEvent e) {
          if (!kindSelected.equalsIgnoreCase(kind)) {
                jpnItem.setBackground(new Color(76, 175, 80));
                jlbItem.setBackground(new Color(76, 175, 80));
          }
      }

}

Trong MainJFrame.java bạn thêm đoạn mã gọi đến ChuyenManHinhController.java xử lý:

package com.teamvietdev.qlhv.view;

import com.teamvietdev.qlhv.bean.DanhMucBean;
import com.teamvietdev.qlhv.controller.ChuyenManHinhController;
import java.util.ArrayList;
import java.util.List;

public class MainJFrame extends javax.swing.JFrame {

    public MainJFrame() {
        initComponents();
        setTitle("QUẢN LÝ HỌC VIÊN");

        List<DanhMucBean> listDanhMuc = new ArrayList<>();
        listDanhMuc.add(new DanhMucBean("TrangChinh", jpnTrangChu, jlbTrangChu));
        listDanhMuc.add(new DanhMucBean("HocVien", jpnHocVien, jlbHocVien));

        ChuyenManHinhController controller = new ChuyenManHinhController(jpnView);
        controller.setDashboard(jpnTrangChu, jlbTrangChu);
        controller.setEvent(listDanhMuc);
    }

    public static void main(String args[]) {
        java.awt.EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                new MainJFrame().setVisible(true);
            }
        });
    }
                 
}

Như vậy sau khi hoàn thành các bước trên ta được phần tạo danh mục như sau: