Tiếp theo Part 1, bài này giới thiệu Part2, thiết kế Giao diện ứng dụng – Tầng ứng dụng trong mô hình 3 tầng.
Bài này trình bày những điểm chính để thiết kế 2 màn hình Login và Mainwindows
Các nội dung chính
I. THIẾT KẾ FORM ĐĂNG NHẬP

1. Hiện form chính giữa màn hình
setLocationRelativeTo(null);
2. Ẩn thanh tiêu đề
setUndecorated(true);
3. Trình bày Ảnh, ta sử dụng phương pháp set Icon cho JLabel
JLabel lblAnhLogo = new JLabel(""); ImageIcon anhLogo = new ImageIcon(getClass().getResource("/Tinhoc123EduLogo.png")); lblAnhLogo.setIcon(anhLogo);
Chú ý: các file ảnh ta để ở một thư mục ngang cấp với thư mục src của dự án (có thể tạo thư mục này bằng cách Phải chuột lên dự án –> new –> Source folder )
3. Tạo nút bấm (theo phong cách Flat UI)
- Sử dụng Một JPanel + JLabel thay thế cho JButton
- đặt màu nền cho JPanel làm màu cho nút bấm
- đặt kiểu con trỏ (cursor) khi chuột ở trên JPanel : HAND-CURSOR
- đặt màu chữ cho JLabel làm màu chữ cho nút bấm
- đặt icon cho Label để thêm Icon cho nút bấm (xem ở trên)
- Cài đặt các bộ lắng nghe sự kiện: Chuột đi vào/ra JPane để tạo hiệu ứng Thay đổi nền, và Click để thực hiện hành động xử lý mong muốn (ví dụ dưới đây là cho Nút THOÁT)
JLabel lblNewLabel_2 = new JLabel("THOÁT"); lblNewLabel_2.addMouseListener(new MouseAdapter() { @Override public void mouseEntered(MouseEvent e) { // Đổi nền sang màu mới panelNutThoat.setBackground(new Color(0,200,0)); } @Override public void mouseExited(MouseEvent e) { // Trở về màu cũ panelNutThoat.setBackground(new Color(189,183,107)); } @Override public void mouseClicked(MouseEvent e) { //đóng Form dispose(); } });
THIẾT KẾ MÀN HÌNH ỨNG DỤNG CHÍNH
Tổ chức giao diện
- Ần thanh tiêu đề (xem ở trên) và thiết lập thuộc tính extendedState thành MAXIMIZED_BOTH
- contentPane: sử dụng BorderLayout, đặt panelTop vào phần NORTH, đặt tabbedPaneContent vào CENTER
- panelTop là một JPane, sử dụng MigLayout đề trình bày nội dung
- tabbedPaneContent: là một JTabbedPane, được thiết kế như là một menu chức năng, mỗi tab là một màn hình chức năng. Hiện tại trên thiết kế ta có 2 tab: Quản trị và Quản lý bàn
- Tab QUẢN TRỊ
- sử dụng Border Layout,
- đặt thanh công cụ Toolbar quản trị vào TOP
- đặt desktopPane vào CENTER
- Sử dụng các InternalFrame để làm các mà hình con của desktopPane
- Tab Quản lý bàn
- sử dụng Border Layout,
- pane bên trái (WEST): sử dụng MigLayout đề trình bày nội dung
Mã nguồn phần 1 và Phần 2 tải tại đây