【JavaFx教程】第四部分：CSS 样式

向右看齐 2022-05-10 11:00 997阅读 0赞

![Screenshot AddressApp Part 4][]

## 第4部分主题 ##

*  **CSS样式表**
 *  添加**应用程序图标**

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

## CSS样式表 ##

在JavaFX中，你能使用层叠样式表修饰你的用户接口。这非常好！自定义Java应用界面从来不是件简单的事情。

在本教程中，我们将创建一个\*DarkTheme\*主题，灵感来自于Windows 8 Metro设计。按钮的CSS来至于Pedro Duque Vieia的博客[Java中JMetro-Windows 8 Metro控件][Java_JMetro-Windows 8 Metro]。

### 熟悉CSS ###

如果你希望修饰你的JavaFX应用，通常你应该对CSS有一个基本的了解。一个好的起点是[CSS教程][CSS].

关于CSS更多JavaFX指定信息:

*  [使用CSS换肤JavaFX应用][CSS_JavaFX] - Oracle教程
 *  [JavaFX CSS参考][JavaFX CSS] - 官方

### 缺省的JavaFX CSS ###

在JavaFX 8中缺省的CSS风格源码是一个称为**`modena.css`**文件。该CSS文件可以在JavaFX jar文件`jfxrt.jar`中找到，它位于Java目录`/jdk1.8.x/jre/lib/ext/jfxrt.jar`。

解压`jfxrt.jar`，你应该能在`com/sun/javafx/scene/control/skin/modena/`目录下找到`modena.css`。

缺省的样式表总是应用到JavaFX应用上。通过添加自定义样式表，你能覆盖`modena.css`中缺省的样式。

**提示**：查看缺省的CSS文件能够让你模板你需要覆盖掉那些样式。

### 添加CSS样式表 ###

添加下面的CSS文件`DarkTheme.css`到`view`包中。

DarkTheme.css

.background {
        -fx-background-color: #1d1d1d;
    }
    
    .label {
        -fx-font-size: 11pt;
        -fx-font-family: "Segoe UI Semibold";
        -fx-text-fill: white;
        -fx-opacity: 0.6;
    }
    
    .label-bright {
        -fx-font-size: 11pt;
        -fx-font-family: "Segoe UI Semibold";
        -fx-text-fill: white;
        -fx-opacity: 1;
    }
    
    .label-header {
        -fx-font-size: 32pt;
        -fx-font-family: "Segoe UI Light";
        -fx-text-fill: white;
        -fx-opacity: 1;
    }
    
    .table-view {
        -fx-base: #1d1d1d;
        -fx-control-inner-background: #1d1d1d;
        -fx-background-color: #1d1d1d;
        -fx-table-cell-border-color: transparent;
        -fx-table-header-border-color: transparent;
        -fx-padding: 5;
    }
    
    .table-view .column-header-background {
        -fx-background-color: transparent;
    }
    
    .table-view .column-header, .table-view .filler {
        -fx-size: 35;
        -fx-border-width: 0 0 1 0;
        -fx-background-color: transparent;
        -fx-border-color: 
            transparent
            transparent
            derive(-fx-base, 80%) 
            transparent;
        -fx-border-insets: 0 10 1 0;
    }
    
    .table-view .column-header .label {
        -fx-font-size: 20pt;
        -fx-font-family: "Segoe UI Light";
        -fx-text-fill: white;
        -fx-alignment: center-left;
        -fx-opacity: 1;
    }
    
    .table-view:focused .table-row-cell:filled:focused:selected {
        -fx-background-color: -fx-focus-color;
    }
    
    .split-pane:horizontal > .split-pane-divider {
        -fx-border-color: transparent #1d1d1d transparent #1d1d1d;
        -fx-background-color: transparent, derive(#1d1d1d,20%);
    }
    
    .split-pane {
        -fx-padding: 1 0 0 0;
    }
    
    .menu-bar {
        -fx-background-color: derive(#1d1d1d,20%);
    }
    
    .context-menu {
        -fx-background-color: derive(#1d1d1d,50%);
    }
    
    .menu-bar .label {
        -fx-font-size: 14pt;
        -fx-font-family: "Segoe UI Light";
        -fx-text-fill: white;
        -fx-opacity: 0.9;
    }
    
    .menu .left-container {
        -fx-background-color: black;
    }
    
    .text-field {
        -fx-font-size: 12pt;
        -fx-font-family: "Segoe UI Semibold";
    }
    
    /* 
     * Metro style Push Button
     * Author: Pedro Duque Vieira
     * http://pixelduke.wordpress.com/2012/10/23/jmetro-windows-8-controls-on-java/
     */
    .button {
        -fx-padding: 5 22 5 22;   
        -fx-border-color: #e2e2e2;
        -fx-border-width: 2;
        -fx-background-radius: 0;
        -fx-background-color: #1d1d1d;
        -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
        -fx-font-size: 11pt;
        -fx-text-fill: #d8d8d8;
        -fx-background-insets: 0 0 0 0, 0, 1, 2;
    }
    
    .button:hover {
        -fx-background-color: #3a3a3a;
    }
    
    .button:pressed, .button:default:hover:pressed {
      -fx-background-color: white;
      -fx-text-fill: #1d1d1d;
    }
    
    .button:focused {
        -fx-border-color: white, white;
        -fx-border-width: 1, 1;
        -fx-border-style: solid, segments(1, 1);
        -fx-border-radius: 0, 0;
        -fx-border-insets: 1 1 1 1, 0;
    }
    
    .button:disabled, .button:default:disabled {
        -fx-opacity: 0.4;
        -fx-background-color: #1d1d1d;
        -fx-text-fill: white;
    }
    
    .button:default {
        -fx-background-color: -fx-focus-color;
        -fx-text-fill: #ffffff;
    }
    
    .button:default:hover {
        -fx-background-color: derive(-fx-focus-color,30%);
    }

现在我们需要把CSS添加到我们的场景中。我们能在Java代码中编程完成，但是我们将使用SceneBuilder来添加它到fxml文件中。

添加CSS到RootLayout.fxml

1.  在Scene Builder中打开`RootLayout.fxml`
2.  在\*Hierarchy\*视图中选择根节点`BorderPane`。在\*Properties\*组中添加`DarkTheme.css`作为样式表。

![DarkTheme for RootLayout][]

添加CSS到PersonEditDialog.fxml

1.  在Scene Builder中打开`PersonEditDialog.fxml`。选择根节点`AnchorPane`，并且在\*Properties\*组中选择`DarkTheme.css`作为样式表。
2.  背景仍然是白色的，因此添加样式类`background`到根节点`AnchorPane`。

![Add Style Class][]

1.  选择OK按钮，在\*Properties\*视图中选择\*Default Button\*单选框。这将修改它的颜色，当用户\*输入\*关键词时，使用它作为缺省的按钮。

添加CSS到PersonOverview.fxml

1.  在Scene Builder中打开文件`PersonOverview.fxml`。在\*Hierarchy\*组中选择根节点`AnchorPane`。在\*Properties\*下面添加`DarkTheme.css`文件作为样式表。
2.  你现在应该已经看到一些修改，表和按钮是黑色的。来自`modena.css`中所有类样式`.table-view`和`.button`应用到表和按钮。因为我们已经在自定义CSS中重定义（因此覆盖掉）一些样式。新的样式自动应用。
3.  你可能需要调整按钮的大小，以便显示所有的文本。
4.  选择`SplitPane`中右边的`AnchorPane`。 ![Background Style Select][]
5.  进入到\*Properties\*组，并且选择`background`作为样式表。背景现在应该变为黑色。 ![Background Style][]

使用不同样式的标签

现在，在左边的所有的标签都有相同的大小。这里已经有一些样式定义在CSS文件中，称为`.label-header`和`.label-bright`。我们将使用更多样式的标签Label。

1.  选择\*Person Detail\*标签，添加`label-header`作为样式类。 ![Label Header Style][]
2.  给右边一列的每个Label（显示人员详情的那列）添加CSS样式类`label-bright`。 ![Label Bright Style][]

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

## 添加应用图标 ##

现在，在标题栏和任务栏中，我们的应用只有一个缺省图标:

![Default Icon][]

使用自定义图标看起来更好了。

![Custom Icon][]

### 图标文件 ###

获取图标的一个可能地方是[Icon Finder][]。我下载了一个[地址本的图标][Link 1].

通常在你的AddressApp项目中创建一个目录称为**resources**，在它中子目录称为**images**。把你选择的图标放入到images目录中。现在，你的目录结构应该看上去如下所示：

![Custom Icon File][]

### 设置图标到场景 ###

为了给你场景设置图标，添加下面一行到`MainApp.jar`的`start(…)`方法中。

MainApp.java

this.primaryStage.getIcons().add(new Image("file:resources/images/address_book_32.png"));

现在，整个`start(…)`方法看上去应该是这样的。:

public void start(Stage primaryStage) {
        this.primaryStage = primaryStage;
        this.primaryStage.setTitle("AddressApp");
    
        // Set the application icon.
        this.primaryStage.getIcons().add(new Image("file:resources/images/address_book_32.png"));
    
        initRootLayout();
    
        showPersonOverview();
    }

当然，你也应该添加图标到人员编辑对话框的Stage中。

### 下一步 ###

在本教程的[第5部分][5]将为我们数据添加XML存储。

## 欢迎关注公众号： ##

# ![70][] #

[Screenshot AddressApp Part 4]: /images/20220510/7c0b8fe9d12b4dc9abb69bcda599a1ea.png
[Java_JMetro-Windows 8 Metro]: http://pixelduke.wordpress.com/2012/10/23/jmetro-windows-8-controls-on-java/
[CSS]: http://www.csstutorial.net/
[CSS_JavaFX]: http://docs.oracle.com/javase/8/javafx/user-interface-tutorial/css_tutorial.htm
[JavaFX CSS]: http://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html
[DarkTheme for RootLayout]: /images/20220510/3ee5b3fa74264ff1ad8c4b567f7e468a.png
[Add Style Class]: /images/20220510/b8d1f52d9c7340d7815d13784c589631.png
[Background Style Select]: /images/20220510/32c92d1c07d947ff9c964c68ec0b3356.png
[Background Style]: /images/20220510/b95d91f82de64dce98a5f3949127b00d.png
[Label Header Style]: /images/20220510/d84065a13afa4b9a89d937ed59780c56.png
[Label Bright Style]: /images/20220510/d93de8c4375341acb3e3ce151f50d917.png
[Default Icon]: /images/20220510/9cf424ad49e2480fb1b932a1b538805b.png
[Custom Icon]: /images/20220510/85f482bc33874b2bba733281e2aa229a.png
[Icon Finder]: http://www.iconfinder.com/
[Link 1]: http://www.iconfinder.com/icondetails/86957/32/
[Custom Icon File]: /images/20220510/b4935ecde1af4dc69b65be9d3d796bba.png
[5]: https://code.makery.ch/zh-cn/library/javafx-tutorial/part5/
[70]: /images/20220510/f2b729acda4b416f99af9eeb7fd8abd4.png