Less in FX (was Re: CSS Media Queries)

[Andy Goryachev]

My approach is to create a single stylesheet, see for example

https://github.com/andy-goryachev/MP3Player/blob/main/src/goryachev/mp3player/Styles.java

and this little guy allows to (re-)regenerate and (re-)load the stylesheet dynamically

https://github.com/andy-goryachev/MP3Player/blob/main/src/goryachev/fx/internal/CssLoader.java

since the stylesheet is being generated by a java class, I have all the tools I need - platform preferences, proper color mixing logic, lookups, and so on.  The only downside is that JavaFX does not allow programmatic creation of CSS, so the process ends up with overhead of creating a string, data url encoding, decoding, and parsing.

-andy



From: openjfx-dev <openjfx-dev-retn at openjdk.org> on behalf of John Hendrikx <john.hendrikx at gmail.com>
Date: Tuesday, December 3, 2024 at 03:17
To: openjfx-dev at openjdk.org <openjfx-dev at openjdk.org>
Subject: Less in FX (was Re: CSS Media Queries)

I've been using LESS for ages in combination with FX.   I adapted this project: https://github.com/i-net-software/jlessc

In FX I use it with this helper class:

https://github.com/hjohn/MediaSystem-v2/blob/master/mediasystem-runner/src/main/java/hs/mediasystem/runner/util/LessLoader.java

Then to use a stylesheet with a control, you do something like this:

final String CLOCK_STYLES_URL = LessLoader.compile(RootNodeFactory.class, "clock-pane.less")

Where "RootNodeFactory.class" is just a reference class as my .less files are located in the same package as the controls.

The resulting URL can then simply be set on a control or scene:

clockPane.getStylesheets().add(CLOCK_STYLES_URL);

This allows me to use all kinds of handy features from LESS.  Here is the clock-pane.less file for example:

@import "hs/mediasystem/runner/properties.less";

.clock-pane

{

-fx-alignment: bottom-right;

-fx-padding: 5;

.clock-box

{

-fx-padding: 5 15 5 15;

-fx-alignment: center;

.clock

{

.style-p1-extra-light;

}

.date

{

.style-p3;

}

}

}

As you can see, it uses imports, style nesting and references to groups of other styles (like ".style-p3").  In properties.less we find many custom variables, like:

@tinted-glass: fade(@theme-primary, 60%);

@glass-color: rgba(0, 0, 0, 0.6);

@shape-disc: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z";

@text-primary: lighten(@theme-primary, 5%, relative);

I'm probably only scratching the surface of what you can do with LESS, as I'm hardly a CSS designer :)

The LessLoader class I wrote has one more handy feature; it allows suffixes on your CSS files to allow for

customization per platform. I use this to select appropriate fonts per platform (as their names can

vary apparently!). See here the Windows file. The Linux variant has slightly different font family names

but map to the same LESS variables so I don't need to fix this everywhere.

/*

* The Noto Sans font supports many variations. To get the correct variation

* in JavaFX, select them as follows:

*

* - Black = Noto Sans Blk

* - Bold = Noto Sans + font-weight: bold

* - Semi Bold = Noto Sans SemBd

* - Medium = Noto Sans Med

* - Regular = Noto Sans + font-weight: normal

* - Light = Noto Sans Light

*

* Note that these names are for Windows. Other platforms can use

* slightly different names.

*/

.light {

-fx-font-family: "Noto Sans Light";

-fx-font-weight: normal;

}

.regular {

-fx-font-family: "Noto Sans";

-fx-font-weight: normal;

}

.medium {

-fx-font-family: "Noto Sans Med";

-fx-font-weight: bold;

}

.semi-bold {

-fx-font-family: "Noto Sans SemBd";

-fx-font-weight: bold;

}

.bold {

-fx-font-family: "Noto Sans";

-fx-font-weight: bold;

}

.black {

-fx-font-family: "Noto Sans Blk";

-fx-font-weight: bold;

}

--John


On 03/12/2024 01:08, Michael Strauß wrote:

I wish there was a simpler way to introduce variables - I think the variables might be a better solution from the stylesheet maintainability point of view, and to help with supporting light/dark, compact/roomy variants and simple things like updating the base font size.  Doing a different CSS parser is definitely a much larger project than we can afford, probably.  On the other hand, if it enables programmatic creation of style sheets...



Custom variables would undoubtedly be a great feature. This is

orthogonal to media queries, though: at some point, even when using

custom variables, you have to ask "the medium" about things like the

color scheme or user preferences.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://mail.openjdk.org/pipermail/openjfx-dev/attachments/20241203/f9b24d9a/attachment-0001.htm>