JavaFX入门（五）：使用CSS样式美化你的UI控件

朴灿烈づ我的快乐病毒、 2022-08-18 02:19 703阅读 0赞

CSS（层叠样式表，Cascading Style Sheets）原来是被用来在网页开发中表现HTML元素样式的一种文本标记语言。HTML用来展现内容，CSS被用来设计内容的样式，这样做的好处就是内容和样式相分离。CSS先后被用到Adobe的RIA开发技术Flex，C++的GUI框架Qt以及JavaFX技术上。如果对CSS不是很熟悉，没关系，十分钟入门CSS的一个教程：[W3CSchool CSS教程][W3CSchool CSS]。

JavaFX的CSS样式基于W3C CSS的2.1版本，是CSS 2.1的一个子集，不包含CSS 2.1的所有特性。同时JavaFX对该版本的CSS有所扩展。参考文档：[JavaFX CSS Reference Guide][]。  
JavaFX CSS有三种选择器：  
**1. type selector**  
每个JavaFX控件类都对应这一个CSS Type，我们可以使用类型选择器，控制该类型控件的外观。其对应的命名为：将JavaFX的类名成首字母小写，如果是由多个单词拼接的类名，将每个单词原来大写的首字母小写然后用连字符将多个单词连接。比如：

<table> 
 <thead> 
  <tr> 
   <th align="left">JavaFX Class</th> 
   <th align="left">CSS type class</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Button</td> 
   <td align="left">button</td> 
  </tr> 
  <tr> 
   <td align="left">Label</td> 
   <td align="left">label</td> 
  </tr> 
  <tr> 
   <td align="left">CheckBox</td> 
   <td align="left">check-box</td> 
  </tr> 
  <tr> 
   <td align="left">TextField</td> 
   <td align="left">text-field</td> 
  </tr> 
  <tr> 
   <td align="left">…</td> 
   <td align="left">…</td> 
  </tr> 
 </tbody> 
</table>

类型选择器的用法如下：

.button { -fx-background-color: blue; }

这样我们就设置了所有Button的背景色为蓝色。其实类型选择器我们可以看做一种特殊的类选择器。  
CSS中属性的命名规则是：以-fx开头，然后连接该类的属性，属性名称的单词首字母小写，然后用连字符连接拼接的属性单词。比如上面的-fx-background-color对应着Button的backgroundColor属性。具体的CSS属性我们可以参考[JavaFX CSS Reference Guide][]文档。  
**2. class selector**  
类选择器和W3C的CSS中类选择器是一样的。比如下面的用法：

.font-large { -fx-font-size: 16pt; }

我们定义了一个font–large的类选择器。对于Node的任意子类都有一个getStyleClass()的方法，我们可以通过getStyleClass().add(“font-large”);将给类样式添加到指定的控件上。一个类选择器样式可以应用到多个控件上。  
**3. id selector**  
一个典型的ID选择器如下：

#lbl-title { -fx-font-color: red; -fx-font-size: 20px; -fx-font-weight: bolder; }

ID选择器由\#开始进行定义。一般情况下一个ID选择器对应这唯一的一个控件。比如我们有一个ID为libTitle的Label，那么通过该CSS这个Label的字体会进行相应的改变。

Label lblTitle = new Label("欢迎来到中国");
    lalTitle.setId("lbl-title");

最后说的是**伪类选择器**：  
伪类的语法为：selector : pseudo-class \{property: value\}  
比如我们设置当鼠标移动到Button上去时背景色变为绿色：

.button:hover { -fx-background-color: green; }

JavaFX中Node类定义的伪类有：

<table> 
 <thead> 
  <tr> 
   <th align="left">CSS Pseudo-class</th> 
   <th align="left">Comments</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">disabled</td> 
   <td align="left">applies when the disabled variable is true</td> 
  </tr> 
  <tr> 
   <td align="left">focused</td> 
   <td align="left">applies when the focused variable is true</td> 
  </tr> 
  <tr> 
   <td align="left">hover</td> 
   <td align="left">applies when the hover variable is true</td> 
  </tr> 
  <tr> 
   <td align="left">pressed</td> 
   <td align="left">applies when the pressed variable is true</td> 
  </tr> 
  <tr> 
   <td align="left">show-mnemonic</td> 
   <td align="left">apples when the mnemonic affordance (typically an underscore) should be shown.</td> 
  </tr> 
 </tbody> 
</table>

对于JavaFX中伪类元素我们可以查阅Oracle 的在线文档进行浏览和查询。

--------------------

下面我们使用CSS美化一下我们在《[JavaFX入门（三）：使用Eclipse开发JavaFX程序 ][JavaFX_Eclipse_JavaFX_]》一节中使用SceneBuilder拖拽出来的界面。

Eclipse中新建Java工程如下：  
![Eclipse Project][]  
MainApplication.java文件是我们的主类文件，MainWindow.fxml是我们的FXML界面布局文件，MainStyle.css是我们的CSS样式文档。  
我们的主界面使用GridPane，一个4×3的格网。第一行第一列是ImageVeiw用于显示Logo图标，第二列是Label用于显示标题；第二行第一列是一个Label（用户名），第二行第二列和第三列是一个TextFiled用于输入用户名；第三行第一列是一个Label（密码），第三行第二列和第三列是一个PasswordFiled用于输入密码。第四行第二列和第三列是一个AnchorPane，AnchorPane中是两个Button，一个锚定到左边，一个锚定到右边。在SceneBuilder中的设计图如下：  
![JavaFX Login][]  
MainWindow.fxml代码如下：

<?xml version="1.0" encoding="UTF-8"?>
    
    <?import javafx.scene.effect.*?>
    <?import javafx.scene.image.*?>
    <?import javafx.geometry.*?>
    <?import javafx.scene.control.*?>
    <?import java.lang.*?>
    <?import javafx.scene.layout.*?>
    <?import javafx.scene.layout.GridPane?>
    
    <GridPane prefHeight="320.0" prefWidth="400.0" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1">
        <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" maxWidth="129.0" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints hgrow="SOMETIMES" maxWidth="225.0" minWidth="10.0" prefWidth="220.0" />
          <ColumnConstraints hgrow="SOMETIMES" maxWidth="99.0" minWidth="10.0" prefWidth="80.0" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
       <children>
          <Label fx:id="lblTitle" text="欢迎使用物联网系统" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="CENTER" />
          <Label text="用户名：" GridPane.halignment="RIGHT" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
          <TextField GridPane.columnIndex="1" GridPane.columnSpan="2" GridPane.rowIndex="1">
             <GridPane.margin>
                <Insets left="20.0" right="50.0" />
             </GridPane.margin>
          </TextField>
          <Label text="密 码：" GridPane.halignment="RIGHT" GridPane.rowIndex="2" GridPane.valignment="CENTER" />
          <PasswordField GridPane.columnIndex="1" GridPane.columnSpan="2" GridPane.rowIndex="2">
             <GridPane.margin>
                <Insets left="20.0" right="50.0" />
             </GridPane.margin>
          </PasswordField>
          <AnchorPane prefHeight="200.0" prefWidth="200.0" GridPane.columnIndex="1" GridPane.columnSpan="2" GridPane.rowIndex="3">
             <children>
                <Button layoutX="14.0" layoutY="17.0" mnemonicParsing="false" text="取消" AnchorPane.leftAnchor="20.0" />
                <Button layoutX="197.0" layoutY="17.0" mnemonicParsing="false" text="登录" AnchorPane.rightAnchor="50.0" />
             </children>
          </AnchorPane>
          <ImageView fitHeight="60.0" fitWidth="60.0" pickOnBounds="true" preserveRatio="true">
             <image>
                <Image url="@images/earth.png" />
             </image>
             <GridPane.margin>
                <Insets left="20.0" />
             </GridPane.margin>
          </ImageView>
       </children>
    </GridPane>

运行图如下：  
![JavaFX UI][]

我们的主函数MainApplication.java代码如下：

package cn.tzy.fx.application;
    
    import javafx.application.Application;
    import javafx.fxml.FXMLLoader;
    import javafx.scene.Scene;
    import javafx.scene.image.Image;
    import javafx.scene.layout.GridPane;
    import javafx.stage.Stage;
    
    public class MainApplication extends Application { 
    
        @Override
        public void start(Stage primaryStage) throws Exception {
            try {
                GridPane root = (GridPane) FXMLLoader.load(getClass().getResource("MainWindow.fxml"));
                Scene scene = new Scene(root, 400, 320);
                primaryStage.setScene(scene);
                primaryStage.setTitle("Hello World");
                primaryStage.setResizable(false);
                primaryStage.getIcons().add(new Image(getClass().getResourceAsStream("images/earth.png")));
                primaryStage.show();
            } catch (Exception e) {
                e.printStackTrace();
            }
    
        }
    
        public static void main(String[] args) {
            launch(args);
        }
    
    
    }

下面我们利用CSS调整界面样式：

/*root类选择器给所有的元素设置样式*/
    .root { -fx-font-family: "微软雅黑"; -fx-font-size: 16px; -fx-background-image: url(images/background.png); -fx-background-size: stretch stretch; -fx-background-position: center center; }
    
    /*button类型选择器设置所有Button的背景色*/
    .button { -fx-background-color: darkturquoise; }
    
    /*hover伪类选择器设置鼠标移过Button时的背景色*/
    .button:hover { -fx-background-color: lightskyblue; }
    
    /*id选择器设置Label标题的样式*/
    #lblTitle { -fx-font-size: 20px; -fx-font-weight: bolder; -fx-text-fill: darkslategray; }

如何将我们的CSS样式文件添加上去呢？  
1. 在主程序的start()方法中添加一句代码：`scene.getStylesheets().add( getClass().getResource("MainStyle.css") .toExternalForm());`  
2. 在我们的FXML文件中给根布局控件GridPane添加属性`stylesheets="@MainStyle.css"`即可，注意是@后面跟我们的CSS文件路径全名称。  
看看最终运行效果吧！  
![JavaFX UI][JavaFX UI 1]

[W3CSchool CSS]: http://www.w3school.com.cn/css/index.asp
[JavaFX CSS Reference Guide]: https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html
[JavaFX_Eclipse_JavaFX_]: http://blog.csdn.net/theonegis/article/details/50020123
[Eclipse Project]: /images/20220731/b2bba8f00ce14e83801aa0a968cde337.png
[JavaFX Login]: /images/20220731/ce30389e69f84c3994833568ff6df129.png
[JavaFX UI]: /images/20220731/9def262b973d416eb4d465d292573b21.png
[JavaFX UI 1]: /images/20220731/b4af01bb96204f73a49cd900a85ed6b9.png