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.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *