Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaFX CSS: Custom Functions

Tags:

java

css

javafx

I'm wondering if there is a way to add custom functions to JavaFX CSS, I'm primarily interested in this for creating a function to get the complementary color.

Currently the only color transformation functions are derive and ladder.

The problem with using derive for this is that it only adjusts brightness, and in one direction.

Thank you for any help in advance

JavaFX Color Reference

like image 907
Caleb Avatar asked Feb 26 '15 18:02

Caleb


People also ask

Can CSS be used with JavaFX?

CSS styles are applied to nodes in the JavaFX scene graph in a way similar to the way CSS styles are applied to elements in the HTML DOM. Styles are first applied to the parent, then to its children. The code is written such that only those branches of the scene graph that might need CSS reapplied are visited.

How do I add CSS files to Scene Builder?

In the SceneBuilder view, click on the AnchorPane that was added first. In the Properties tab, under the 'JavaFX CSS' section, click on the 'Stylesheets' option. Select the CSS file, and that's it.

How can you change the JavaFX theme used in your layout?

You can change the JavaFX theme used in your layout by selecting Preview from the Menu bar and selecting one of the JavaFX themes, as shown in Figure 11-1. From the drop-down list you can select a Modena-based theme specific for your target platform.


2 Answers

You can add a list of colors to your main CSS:

Style.css

 /* Colors
    -------------- */
    *{
        -color-primary:#d8d8d8;
        -color-accent:#F44336;
        -color-secondary:#1E88E5;
        -color-dark-primary:#1d1d1d;
        -color-amber:#ffc400;
        -color-gray:#666666;
    }

And use it anywhere:

@import "../main/Styles.css";

.background {
    -fx-background-color: -color-amber;
}
like image 135
Marckaraujo Avatar answered Oct 23 '22 22:10

Marckaraujo


One way to make JavaFX CSS much more useful is to use LESS with JavaFX.

All you need is a jlessc and a small utility class to help you when you set a stylesheet on a control.

For example:

myControl.getStylesheets().add(
    LessLoader.compile(getClass().getResource("styles.less")).toExternalForm());

This will allow you to use color functions like saturate, lighten, darken and fadein as well as many other benefits LESS brings.

The LessLoader class I'm using here is simply:

public class LessLoader {

  public static URL compile(URL url) {
    try {
      try (InputStream in = url.openStream()) {
        String data = new String(in.readAllBytes(), StandardCharsets.UTF_8);

        String compiledCSS = Less.compile(url, data, false, new ReaderFactory() {
          @Override
          public Reader create(URL url) throws IOException {
            return super.create(url);
          }
        });

        Path tempFile = Files.createTempFile(null, null);
        Files.write(tempFile, compiledCSS.getBytes(StandardCharsets.UTF_8), StandardOpenOption.CREATE);

        tempFile.toFile().deleteOnExit();

        return tempFile.toUri().toURL();
      }
    }
    catch(IOException e) {
      throw new IllegalStateException(e);
    }
  }
}
like image 34
john16384 Avatar answered Oct 23 '22 21:10

john16384