Bài 13: Sử dụng JavaFX CSS trong JavaFx

Trong JavaFX cho phép bạn sử dụng các đoạn mã CSS để chèn vào thành phần giao diện, giống như là bạn sử dụng CSS để thiết kế các trang web. Vậy muốn biết làm thế nào tích hợp CSS trong JavaFX thì đừng bỏ lỡ bài viết hướng dẫn sử dụng JavaFX CSS ngay dưới đây.

1. CSS trong JavaFX

– Trong JavaFX cho phép bạn có thể nhúng các đoạn mã CSS để nhằm tăng cường giao diện hiển thị của ứng dụng trở nên đẹp mắt và phong cách hơn.

– Gói javafx.css được sử dụng để tích hợp CSS vào trong các ứng dụng JavaFX.

Sử dụng JavaFX CSS trong JavaFx

– Để tích hợp CSS vào trong JavaFX bạn cần tuôn theo cấu trúc selector { property: value }

STTThể loạiMô tả
1Selector– Loại thẻ được áp dụng CSS.

– Ví dụ: thẻ <h1> hay thẻ <table>

2Property– Thuộc tính trong CSS.

– Ví dụ: thuộc tính border, thuộc tính color

3Value– Giá trị được gán cho thuộc tính.

– Ví dụ: thiết lập màu sắc #F1F1F1

2. Tích hợp CSS vào trong JavaFX

Để tích hợp CSS vào trong JavaFX bạn có thể thực hiện bằng 2 cách là chèn mã CSS trực tiếp vào UI Control hoặc CSS được khai báo ở một tập tin riêng.

– Chèn CSS trực tiếp:

– Chèn CSS thông qua khai báo tập tin riêng thì bạn tạo một tập tin chẳng hạn style.css sau đó tải tập tin này vào trong ứng dụng:

Nội dung tập tin style.css

Nội dung tập tin Main.java

3. Ví dụ sử dụng JavaFX CSS trong JavaFx

Sau đây mình sẽ làm một ví dụ nho nhỏ hướng dẫn các bạn cách sử dụng JavaFX CSS trong JavaFx.

Ví dụ đầu tiên mình sẽ thiết kế giao diện gồm 2 nút nhấn (Button) trong đó một nút sử dụng CSS còn một nút mình để mặc định, và bạn xem thử sự khác nhau của một bên có sử dụng CSS và một bên không sử dụng CSS là như thế nào.

Kết quả sau khi chạy đoạn mã chương trình trên như sau:

Sử dụng JavaFX CSS trong JavaFx

Ví dụ thứ hai mình cũng thực hiện như ví dụ trên nhưng thay vì mã CSS chèn trực tiếp thì mình sẽ tạo tập tin style.css trong thư mục css và mình khuyên các bạn nên sử dụng cách này tốt hơn, sau này có chỉnh sửa thì chỉ cần vào tập tin này chỉnh thay vì đi tìm tốn thời gian hơn.

Kết quả sau khi chạy đoạn mã chương trình trên như sau:

Sử dụng JavaFX CSS trong JavaFx

Xem thêm:

Sử dụng FlowPane trong JavaFX

Sử dụng VBOX trong JavaFx

Sử dụng HBOX trong JavaFx

Hoặc nếu bạn làm nhưng gặp rắc rối vì chưa chạy được thì có thể tải toàn bộ mã nguồn đầy đủ cho phần hướng dẫn sử dụng hiệu ứng JavaFX CSS ở đường dẫn bên dưới.

Sử dụng JavaFX CSS trong JavaFx

Lời kết: Như vậy toàn bộ nội dung bài viết này hướng dẫn các bạn sử dụng JavaFX CSS trong JavaFx. Ngoài ra, bạn có thể xem thêm nội dung các bài viết khác tại chuyên mục JavaFx để bổ sung thêm kiến thức về ngôn ngữ này.

(Tác giả: Tùng Dương)

Bình luận

Loading...