TiiL Tutorials
@TinhocTiiL

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

 

 

Avatar
https://khoacntt.ntu.edu.vn/giang-vien/mai-cuong-tho

một GV Đại học. TiiL đã phụ trách một số môn học như: Lập trình Java, Phát triển web với Java, Lập trình thiết bị di động, Lập trình hệ thống nhúng và IoT.

Comments are closed.