JavaFX - CSS

Cascading Style Sheets, còn được gọi là CSS, là một ngôn ngữ thiết kế đơn giản nhằm mục đích đơn giản hóa quá trình làm cho các trang web trở nên hiển thị.

CSS xử lý một phần giao diện của trang web. Sử dụng CSS, bạn có thể kiểm soát màu sắc của văn bản, kiểu phông chữ, khoảng cách giữa các đoạn văn, kích thước của các cột và bố cục. Ngoài những điều này, bạn cũng có thể kiểm soát hình ảnh nền hoặc màu sắc được sử dụng, thiết kế bố cục, các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau cũng như nhiều hiệu ứng khác.

CSS trong JavaFX

JavaFX cung cấp cho bạn cơ sở sử dụng CSS để nâng cao giao diện của ứng dụng. Góijavafx.css chứa các lớp được sử dụng để áp dụng CSS cho các ứng dụng JavaFX.

CSS bao gồm các quy tắc kiểu được trình duyệt diễn giải và sau đó được áp dụng cho các phần tử tương ứng trong tài liệu của bạn.

Quy tắc kiểu bao gồm ba phần, đó là:

Selector- Bộ chọn là một thẻ HTML tại đó một kiểu sẽ được áp dụng. Đây có thể là bất kỳ thẻ nào như<h1> hoặc là <table>, Vân vân.
Property- Thuộc tính là một loại thuộc tính của thẻ HTML. Nói một cách đơn giản hơn, tất cả các thuộc tính HTML đều được chuyển đổi thành các thuộc tính CSS. Chúng có thể là màu,border, Vân vân.
Value- Giá trị được gán cho thuộc tính. Ví dụ, một thuộc tính màu có thể có giá trịred hoặc là #F1F1F1, Vân vân.

Bạn có thể đặt Cú pháp quy tắc kiểu CSS như sau:

selector { property: value }

Biểu định kiểu mặc định được JavaFX sử dụng là modena.css. Nó được tìm thấy trong jar thời gian chạy JavaFX.

Thêm Style Sheet của riêng bạn

Bạn có thể thêm biểu định kiểu của riêng mình vào một cảnh trong JavaFX như sau:

Scene scene = new Scene(new Group(), 500, 400); 
scene.getStylesheets().add("path/stylesheet.css");

Thêm Trang tính Kiểu Nội tuyến

Bạn cũng có thể thêm các kiểu nội dòng bằng cách sử dụng setStyle()phương pháp. Các kiểu này chỉ bao gồm các cặp khóa-giá trị và chúng có thể áp dụng cho các nút mà chúng được đặt. Sau đây là mã mẫu của việc đặt một biểu định kiểu nội tuyến thành một nút.

.button { 
   -fx-background-color: red; 
   -fx-text-fill: white; 
}

Thí dụ

Giả sử rằng chúng tôi đã phát triển một ứng dụng JavaFX hiển thị một biểu mẫu có Trường Văn bản, Trường Mật khẩu, Hai nút. Theo mặc định, biểu mẫu này trông như được hiển thị trong ảnh chụp màn hình sau:

Chương trình sau đây là một ví dụ minh họa cách thêm kiểu vào ứng dụng trên trong JavaFX.

Lưu mã này trong một tệp có tên CssExample.java

import javafx.application.Application; 
import static javafx.application.Application.launch; 
import javafx.geometry.Insets; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.control.PasswordField; 
import javafx.scene.layout.GridPane; 
import javafx.scene.text.Text; 
import javafx.scene.control.TextField; 
import javafx.stage.Stage;  

public class CssExample extends Application { 
   @Override 
   public void start(Stage stage) {      
      //creating label email 
      Text text1 = new Text("Email");       
      
      //creating label password 
      Text text2 = new Text("Password"); 
       
      //Creating Text Filed for email        
      TextField textField1 = new TextField();       
      
      //Creating Text Filed for password        
      PasswordField textField2 = new PasswordField();  
       
      //Creating Buttons 
      Button button1 = new Button("Submit"); 
      Button button2 = new Button("Clear");  
      
      //Creating a Grid Pane 
      GridPane gridPane = new GridPane();    
      
      //Setting size for the pane 
      gridPane.setMinSize(400, 200);
      
      //Setting the padding  
      gridPane.setPadding(new Insets(10, 10, 10, 10)); 
      
      //Setting the vertical and horizontal gaps between the columns 
      gridPane.setVgap(5); 
      gridPane.setHgap(5);       
      
      //Setting the Grid alignment 
      gridPane.setAlignment(Pos.CENTER); 
       
      //Arranging all the nodes in the grid 
      gridPane.add(text1, 0, 0); 
      gridPane.add(textField1, 1, 0); 
      gridPane.add(text2, 0, 1);       
      gridPane.add(textField2, 1, 1); 
      gridPane.add(button1, 0, 2); 
      gridPane.add(button2, 1, 2); 
       
      //Styling nodes  
      button1.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;"); 
      button2.setStyle("-fx-background-color: darkslateblue; -fx-text-fill: white;"); 
       
      text1.setStyle("-fx-font: normal bold 20px 'serif' "); 
      text2.setStyle("-fx-font: normal bold 20px 'serif' ");  
      gridPane.setStyle("-fx-background-color: BEIGE;"); 
       
      // Creating a scene object 
      Scene scene = new Scene(gridPane); 
       
      // Setting title to the Stage   
      stage.setTitle("CSS Example"); 
         
      // Adding scene to the stage 
      stage.setScene(scene);
      
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

Biên dịch và thực thi tệp java đã lưu từ dấu nhắc lệnh bằng các lệnh sau.

javac CssExample.java 
java CssExample

Khi thực thi, chương trình trên tạo một cửa sổ JavaFX như hình dưới đây.