在JavaFX CSS文件中声明变量

Question

我一直在检查Oracle在JavaFX运行时库中分发的"caspian.css",我看到他们已经将一些颜色值声明为变量.例如:

-fx-base: #d0d0d0; // Caspian.css, Line 47

......然后他们将它用作其他一些财产的价值,例如:

-fx-color: -fx-base; // Caspian.css, Line 96

现在,我想要做的是声明一个测量单位(-fx-radius-default: 10px),然后每当我需要设置一个控件的半径时使用它,例如:

-fx-border-radius: -fx-radius-default;
-fx-background-radius: -fx-radius-default;

到目前为止我没有成功.我的问题是:这有可能吗？

---

编辑:添加实验详细信息

细节

这是我在JavaFX Scene Builder 1.1上创建的Experiment.fxml文件:

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
  <children>
    <TextArea layoutX="200.0" layoutY="119.0" prefWidth="200.0" styleClass="track" wrapText="true" />
  </children>
  <stylesheets>
    <URL value="@css/Experiment.css" />
  </stylesheets>
</AnchorPane>

以下是css/Experiment.css我使用的:

* {
    -fx-radius-default: 10px;
}
.track {
    -fx-border-radius: -fx-radius-default;
    -fx-border-color: black;
}

不幸的是,这不起作用,给出如下错误信息:

在样式表文件中从规则'*.track'解析'-fx-border-radius'的查找时无法解析'-fx-radius-default':/ home/absullah/codebase/src /package/css/Exploation.css

如果我使用简单的语法(-fx-border-radius: 10px),那没有问题.

我在这做错了什么？

---

编辑:结论

结论:不可能

看起来我正在寻找的是当前版本的JavaFX是不可能的,因为" JavaFX CSS参考指南 "只提到"查找颜色",而不是"变量"的通用概念.这将是一个很好的功能,但是...只是说......

Answer 1

不幸的是,它似乎只适用于颜色.但您需要确保您的变量在使用它的规则中"可见":

* {
   -fx-base2: #e00;
}
.track {-fx-background-color: -fx-base2;}

Answer 2

我总是分离我的CSS代码。

我创建一个名为 all.css 的导入器文件，代码如下：

@import url("Root.css");
@import url("Base.css");
...

在 Root.css 文件中，我设置了变量：

.root {
    -fx-color1: #FFFF00;
    -fx-color2: rgb(255,255,0);
    -fx-color3: rgba(255,255,0, 0.5);
}

现在，我可以在导入（Root.css）后调用所有导入代码中的变量。以 Base.css 为例。

.bg-yellow1 {
    -fx-background-color: -fx-color1;
}

就是这样！

Answer 3

我知道这是一个相当古老的问题,但我找不到任何类似方法的答案.正如前面的答案已经说过,除了颜色之外,标准css是不可能的.(如果我错了,请纠正我)

尽管如此,如果你使用较少的话,也有可能.我在我的一个JavaFX项目中使用较少,而且效果非常好.您只需配置构建过程即可编译较少的文件并生成实际的css文件.我在我的项目中使用了maven,在下面你可以找到我的构建配置.

<build>
    <!-- exclude less files from output directory -->
    <resources>
        <resource>
            <directory>src/main/resources</directory>
            <excludes>
                <exclude>**/*.less</exclude>
            </excludes>
        </resource>
    </resources>

    <plugins>

        <plugin>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.3</version>
            <configuration>
                <source>1.8</source>
                <target>1.8</target>
            </configuration>
        </plugin>

        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-resources-plugin</artifactId>
            <version>3.0.2</version>
        </plugin>

        <plugin>
            <groupId>com.zenjava</groupId>
            <artifactId>javafx-maven-plugin</artifactId>
            <version>8.7.0</version>
            <configuration>
                <mainClass>com.example.project.Main</mainClass>
            </configuration>
        </plugin>

        <plugin>
            <artifactId>maven-assembly-plugin</artifactId>
            <configuration>
                <archive>
                    <manifest>
                        <mainClass>com.example.project.Main</mainClass>
                    </manifest>
                </archive>
                <descriptorRefs>
                    <descriptorRef>jar-with-dependencies</descriptorRef>
                </descriptorRefs>
                <appendAssemblyId>false</appendAssemblyId>
            </configuration>
        </plugin>

        <!-- maven less plugin which I'm using to compile the less files -->
        <plugin>
            <groupId>biz.gabrys.maven.plugins</groupId>
            <artifactId>lesscss-maven-plugin</artifactId>
            <version>1.2.1</version>
            <executions>
                <execution>
                    <goals>
                        <goal>compile</goal>
                    </goals>
                    <configuration>
                        <sourceDirectory>${project.basedir}/src/main/resources/com/example/project</sourceDirectory>
                        <outputDirectory>${project.build.outputDirectory}/com/example/project</outputDirectory>
                    </configuration>
                </execution>
            </executions>
        </plugin>
    </plugins>
</build>

使用这种配置,我现在能够使用更少,并且定义自定义变量没有问题.我在我的项目中使用了color-catalogue.less文件,其他所有较少的文件都可以通过import属性导入.也许这个解决方案对任何人

编辑:如果有人有兴趣,可以在这里找到一个有效的例子.

Answer 4

只需对您的答案进行一点修正：数字也可以，而不仅仅是颜色。

例如：

*{
    -preferred-scroll-bar-thumb-size: 25;
}

.scroll-bar:vertical .thumb {
    -fx-pref-width: -preferred-scroll-bar-thumb-size;
}

对我有用，JavaFx 将值“25”视为“25px”（如果我写“25px”，则会失败）。它并不完全是使用 less/sass 的变量，但它可以帮助那些不需要更多的人。