Xây dựng ứng dụng Java Desktop với giao diện Material UI

Chào các bạn.

Phải chăng các bạn đã khá là nhàm chán với giao diện Nimbus mặc định của Java Swing đem lại rồi phải không? Mục tiêu của bài viết này mình muốn giới thiệu cho các bạn theme hoàn toàn độc lạ nhưng rất hiện đại có tên là Material UI.

* Mục tiêu yêu cầu trước khi bắt đầu:
- Vững khái niệm về Java OOP (Lập trình hướng đối tượng với Java).
- Có kiến thức tổng quan về Java nói chung (Exception,...)
- Đang học bộ môn Java Desktop (PRJ311) là một lợi thế.
- Biết cách sử dụng NetBeans IDE cơ bản.

Đầu tiên, chúng ta cần phải biết Java Look and Feel API là gì?
- Nó cung cấp cho chúng ta hỗ trợ lập trình giao diện người dùng (Graphics User Interface) dành cho ứng dụng Java. Java Swing còn cung cấp cho chúng ta các tuỳ chọn về thay đổi giao diện một cách nhanh chóng cho phép chúng không cần phụ thuộc vào giao diện của hệ điều hành mặc định. Trước đó, Java Look and Feel API đã cung cấp một số giao diện mặc định nhưng khá là nhàm chán.
Vì vậy, bài viết này sẽ đề cập với giao diện khác, cụ thể là Material UI.

Các bạn đầu tiên cần phải tải gói thư viện đồ hoạ: tại đây

Sau khi tải, các bạn hãy mở NetBeans IDE lên và chúng ta cùng bắt đầu làm, tạo một Project Java Application mới.

Hình 1 - Tạo một Java Application with Ant

Tại đây mình sẽ đặt tên cho ứng dụng là Demo_Material_UI_Swing và bỏ chọn Create Main Class.

Hình 2 - Đặt tên cho project và bỏ chọn Create Main Class

Sau khi tạo hoàn tất, các bạn click chuột phải vào Project, chọn New > Other.. giúp mình

Hình 3 - Chọn New > Other...

Các bạn chọn giúp mình Swing GUI Form và sau đó chọn JFrame Form rồi nhấn Next.

Hình 4 - Chọn JFrame Form

Mình sẽ đặt tên là MaterialFrame trong packages được đặt tên là bangmaple.controllers

Hình 5 - Đặt tên cho JFrame Form

Các bạn sẽ nhận được một cửa sổ thiết kế giao diện đồ hoạ như thế này. Ô hình vuông có viền trắng sẽ là JFrame Form lúc nãy bạn tạo.

Hình 6 - Cửa sổ thiết kế giao diện đồ hoạ

Bây giờ mình sẽ thử tạo một cửa sổ đăng nhập, các bạn hãy kéo thả một component Panel ở bên phải của Swing Containers và kéo vào khung cửa sổ hình vuông.

Hình 7 - Kéo thả JPanel vào JFrame Form

Kéo JPanel ra khít màn hình là được.

Hình 8 - Kéo JPanel ra khít màn hình

Sau đó mình sẽ kéo thả các loại components khác như: Label, Text Field, Button, Separator,... các bạn có thể dễ dàng tìm thấy trong cửa sổ Swing Controls

Giao diện sơ bộ nhìn như thế này, các bạn có thể làm khác một chút cũng không sao.

Hình 9 - Giao diện sơ bộ sau khi kéo thả

Để có thể xoá những vết chữ mặc định, ta làm như sau: Click phải vào ô có chứa chữ đó rồi chọn Edit Text và xoá trống.

Hình 10 - Edit Text

Làm tương tự và cuối cùng bạn sẽ được như thế này:

Hình 11 - Giao diện hoàn chỉnh

Hãy khởi chạy chương trình.

Hình 12 - Chọn OK

Các bạn sẽ nhận được một cửa sổ có giao diện mặc định như thế này của Java Swing.

Hình 13 - Giao diện mặc định của Java Swing.

Trông chán chứ nhỉ? Mình sẽ cùng bắt đầu tích hợp thư viện Material UI vào ứng dụng nhé!

Điểm hay ở đây là các bạn không cần phải "đập đi xây lại" các components của ứng dụng.

Các bạn chuột phải vào thư mục Libraries của Project, sau đó chuột phải chọn Add JAR/Folder... để chọn bộ thư viện Material UI các bạn đã tải xuống.

Hình 14 - Thêm gói thư viện vào

Tìm đến đường dẫn chứa tập tin thư viện có đuôi .jar rồi nhấn Open.

Hình 15 - Chọn thư viện và nhấn Open, lưu ý thư viện sẽ có đuôi .jar

Hình 16 - Cửa sổ Project sau khi thêm thư viện.

Sau đó hãy cùng tích hợp thư viện vào Project nhé. Quay trở lại với cửa sổ có viền vuông, nhìn lên trên các bạn sẽ thấy Source, Design, History. Ở đây hãy chọn giúp mình Source để vào Java Code nhé!

Hình 17 - Chọn Source

Kéo xuống tầm dòng số 112 thì các bạn sẽ thấy như sau. Các bạn hãy chọn nút + ở ngay dòng Look and Feel setting code để thay đổi giao diện nhé!

Hình 18 - Thả Look and feel setting code

Hình 19 - Cửa sổ code bây giờ sẽ trông như thế này

Các bạn xoá từ phần try đến catch và gõ theo mình nhé!

Hình 20 - Tích hợp Material vào Java Swing

Bây giờ hãy thử chạy Project lần nữa nhé!

Hình 21 - Tích hợp thành công Material UI vào ứng dụng

Đến đây là gần như thành công rồi. Các bạn sẽ tự hỏi là có White Mode (Chế độ ban ngày) thì cũng phải có chế độ ban đêm (Dark Mode) chứ nhỉ. Mình sẽ hướng dẫn tiếp.

Các bạn vào lại phần Source Code, ở Constructor của phần new MaterialLookAndFeel() các bạn gõ Ctrl+Space và sẽ thấy những giao diện con bên trong.

Hình 22- Chọn giao diện con.

Các bạn sẽ cần chọn JMarsDarkTheme để kích hoạt giao diện ban đêm. Các bạn cũng có thể thử giao diện MaterialOceanicTheme lúc sau nhé!

Hình 23 - Chạy lại chương trình và các bạn sẽ nhận được cửa sổ như sau.

Phần giao diện đến đây là xong.

Bây giờ mình sẽ code đơn giản tính năng đăng nhập cho nó nhé!

Quay lại phần Design, các bạn sẽ phải chỉnh sửa lại tên biến cho phù hợp để dễ thuận tiện cho việc code và bảo trì.

Hình 24 - Chỉnh sửa tên biến cho components

Làm tương tự với Button nhé! Mình sẽ đặt lần lượt là: txtUsername, txtPassword, btnLogin, btnExit.

Sau đó bạn click đôi vào nút Login để sinh code cho các bạn thực thi hành động nhé!

Hình 25 - Sinh code cho Login Button

Hình 26 - Cửa sổ code để thông báo tài khoản và mật khẩu

Chạy lại project và nhập tài khoản mật khẩu, bạn sẽ nhận được thông báo.

Hình 27 - Cửa sổ thông báo

Nhưng các bạn sẽ thấy mật khẩu sẽ không được ẩn và nó hiện luôn plain text. Các bạn có thể khắc phục bằng cách quay lại Design, kéo phần JPasswordField vào lại và xoá JTextField cũ và đổi biến như cũ đi là xong.