JavaFX CSS

JavaFX教程 - JavaFX CSS

JavaFX 应用程序支持主题通过 CSS 设置。

主题可以转换整个应用程序的外观，而不改变其功能。

在 JavaFX 中，您可以创建，修改或使用现有主题来应用程序。

应用主题

setUserAgentStylesheet(String URL) 方法接受表示 JavaFX CSS 文件的有效URL字符串。

CSS 文件捆绑在jar应用程序内，或者它们可以驻留在本地文件系统或远程 Web 服务器上。

要从类路径加载 CSS 文件，请调用 getClass()。getResource（“path / some_file.css”）。toExternalForm() 方法。它会找到 CSS 文件并产生一个 URL String。

下面的代码加载 sample.css 文件作为当前的外观。

sample.css 文件和 Java 类位于同一目录中，因此文件名前面不需要有路径。

Application.setUserAgentStylesheet(getClass().getResource("sample.css")
.toExternalForm());

完整的源代码。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {
  public static void main(String[] args) {
    Application.launch(args);
    
  }

  @Override
  public void start(Stage primaryStage) {
    Application.setUserAgentStylesheet(getClass().getResource("sample.css")
        .toExternalForm());
    
    
    Group root = new Group();
    Scene scene = new Scene(root, 300, 250);

    primaryStage.setScene(scene);
    primaryStage.show();
  }
}

setUserAgentStylesheet() 方法将样式全局应用于应用程序拥有的所有场景。

预定义皮肤

JavaFX 8 目前包含两个样式表，Caspian 和 Modena，它们用作默认的跨平台外观和感觉皮肤。

因为两个样式表是预定义的，您可以使用 setUserAgentStylesheet（）方法在它们之间轻松切换。

以下代码显示如何在 Caspian 和 Modena 外观样式表之间切换。

// Switch  to JavaFX 2.x"s CASPIAN  Look and  Feel. Application.setUserAgentStylesheet(STYLESHEET_CASPIAN);

// Switch  to JavaFX 8"s Modena Look and  Feel. 
Application.setUserAgentStylesheet(STYLESHEET_MODENA);

我们可以从 jfxrt.jar 文件中提取 CSS 文件 caspian.css 和 modena.css，或者查看位于 http://openjdk.java.net 的 JavaFX 源代码。

当调用 setUserAgentStylesheet(null) 时，默认样式表 (Modena) 将被自动加载并设置为当前外观。

对于JavaFX 2.x，默认样式表将是 Caspian。

场景主题

通过调用 scene.getStylesheets().add() 方法，我们可以为单个场景及其子节点设置样式。

我们将传递一个表示 JavaFX CSS 文件的 URL 字符串。

以下代码调用 setUserAgentStylesheet(null) 加载 Modena 作为外观，然后通过调用 getStylesheets()。add() 方法设置场景的其他样式。

Application.setUserAgentStylesheet(null); // defaults to Modena

// apply   custom  look  and  feel to the   scene. 
scene.getStylesheets()
.add(getClass().getResource("my_cool_skin.css")
.toExternalForm());

CSS样式

类似于 HTML5 使用 CSS 样式表的方式，在场景图上有与 N​​ode 对象相关联的选择器或样式类。

所有 JavaFX 场景图形节点分别有 setId()，getStyleClass()。add() 和 setStyle() 方法来应用可以改变节点的背景颜色，边框，笔画等的样式。

选择器在场景图上定位 JavaFX 节点，然后我们可以使用 CSS 样式定义对它们进行样式化。

两种类型的选择器类型是 id 和 class 。

id 选择器是在场景节点上设置的唯一字符串名称。

类选择器是一个字符串名称，可以作为标记添加到任何 JavaFX 节点。

类选择器与 Java 类的概念无关。类选择器用于对节点进行分组以将它们与一个CSS样式定义一起设置样式。

ID选择器

id 选择器是赋值给节点的唯一字符串名称。当使用 id 选择器时，我们将调用 JavaFX 节点对象上的 setId(String ID) 方法来设置其id。

例如，要定位 id 为 my-button 的 Button 实例，您将调用 setId(“my-button”) 方法。

要为按钮设置 id 为 my-button 的样式，您将创建一个用 id 声明的 CSS 样式定义块 selector＃my-button，如下所示:

#my-button {
    -fx-text-fill: rgba(17, 145,  213);
    -fx-border-color:  rgba(255, 255,  255,  .80);
    -fx-border-radius: 8;
    -fx-padding: 6  6  6  6;
}

此 CSS 样式块将应用于具有 my-button 的唯一标识的按钮。

CSS 选择器名称前面带有＃符号，而 Java 代码中的 id 不使用 ＃ 符号。

类选择器

当使用类类型选择器时，我们将调用 getStyleClass()。add(String styleClass) 方法向节点添加一个选择器。该方法允许我们有多个样式类来对节点进行样式。

getStyleClass()方法返回一个ObservableList，我们可以添加和删除样式类来动态更新它的外观。

以下代码通过getStyleClass().add("num-button")方法定位样式类包含num-button的按钮。

以下是用类选择器声明的 CSS 样式定义块 .num-button :

.num-button  {
    -fx-background-color: white, rgb(189,218,230), white;
    -fx-background-radius: 50%;
    -fx-background-insets: 0, 1, 2;
    -fx-font-family:  "Helvetica";
    -fx-text-fill:  black;
    -fx-font-size:  20px;
}

此 CSS 样式块将应用于具有样式类 num-button 的按钮。

CSS 选择器名称以.号为前缀，而 Java 代码中的选择器不使用。符号。

选择器模式

选择器可以有模式来遍历场景图的节点从根节点到子节点的层次结构。

我们可以对父节点是某种类型的子节点进行样式化。以下代码显示了如何设置所有按钮的样式，其父对象是HBox。

.hbox  > .button {  -fx-text-fill: black;  }

选择器模式 .hbox>.button styles 作为 HBox 的后代的 Button 节点。两个选择器之间的大于符号允许系统知道要对哪些节点进行样式。

JavaFX 节点的选择器都是小写字母，如果控件具有多个字，则它们用连字符分隔。例如，GridPane 的类选择器将是 .grid-pane 。

我们还可以使用公共属性来为两种不同类型的节点设置样式。以下代码显示如何为所有标签和文本节点设置样式。

.label,.text {  -fx-font-size: 20px;  }