cssjavafx-2

Declaring Variable In JavaFX CSS File


I've been inspecting the "caspian.css" distributed by Oracle in the JavaFX runtime library, and I see they have declared some color values as variables. Eg:

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

...and then they used it as value of some other property, like:

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

Now, what I want to do is to declare a measurement unit (-fx-radius-default: 10px) and then use it everytime I need to set radius of a control, for instance:

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

I have been unsuccessful so far. My question is: Is this possible, at all?

Details

Here is my Experiment.fxml file that I created on JavaFX Scene Builder 1.1:

<?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>

And below is the css/Experiment.css that I have used:

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

Unfortunately this doesn't work, giving an error message like this:

Could not resolve '-fx-radius-default' while resolving lookups for '-fx-border-radius' from rule '*.track' in stylesheet file: /home/abdullah/codebase/src/package/css/Experiment.css

If I use plain syntax (-fx-border-radius: 10px), there is no problem with that.

What am I doing wrong here?


Solution

  • Unfortunately it seems to work only for colors. But you need to ensure that your variable is "visible" from rule which uses it:

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