Xây dựng ứng dụng QL quán Coffee với Java – part2 – GUI

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

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