BangMaple's Blog. Nơi sẻ chia kiến thức!

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

Không có nhận xét nào

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!

Không có nhận xét nào :

Đăng nhận xét