Less in FX (was Re: CSS Media Queries)

[John Hendrikx]

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:

finalString 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/19be7958/attachment-0001.htm>