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.
 |
| Hình 28 - Cửa sổ thông báo 2 |
Mình sẽ làm chức năng thoát chương trình cho nút Exit. Các bạn làm tương tự.
 |
| Hình 29 - Code cho nút Exit |
Đến đây, các bạn sẽ thấy nó chưa Material hoàn toàn, sẽ cần phải cho nó mất thanh tiêu đề đi. Các bạn làm như sau.
Kéo lên phần Constructor của Java Class này, các bạn sẽ thêm như sau:
 |
| Hình 30 - Xoá thanh tiêu đề mặc định |
Chạy lại Project và các bạn sẽ nhận được như sau:
 |
| Hình 31 - Thanh tiêu đề mặc định đã được xoá |
Nhưng các bạn sẽ thấy nó không nằm ngay chính giữa màn hình và không thể kéo cửa sổ đi tới đi lui. Mình sẽ hướng dẫn tiếp.
Vào lại Constructor, các bạn thêm dòng này giúp mình.
 |
| Hình 32 - Di chuyển cửa sổ ra giữa màn hình |
Để có thể kéo tới kéo lui cửa sổ, các bạn sẽ cần phải tải thêm một Java Class có tên là
MotionPanel:
tại đây
Sao chép vào thư mục src của NetBeansProject của bạn,
 |
| Hình 33 - Cửa sổ sau khi copy MotionPanel.java |
Các bạn quay lại phần Design, chọn bất cứ đâu trong Panel hiện tại. Chuột phải và chọn Customize Code.
 |
| Hình 34 - Customize Code cho JPanel |
Các bạn chọn
Custom Creation thay cho Default code và sửa code thành
jPanel1 = new MotionPanel(this); và nhấn OK.
 |
| Hình 35 - Thay đổi nội dung code mặc định |
Trước khi chạy, các bạn sẽ chọn vào
MotionPanel.java để sửa lại tên package của class cho đúng nhé!
 |
| Hình 36 - Sửa tên package |
Mình sẽ sửa thành bangmaple.controllers
Chạy lại Project và bạn có thể di chuyển cửa sổ được rồi được rồi!
 |
| Hình 37 - Xây dựng project hoàn chỉnh. |
Bài viết của mình đến đây là kết thúc. Cảm ơn các bạn đã theo dõi và chúc các bạn học tốt!
