Styling HBox/VBox/GridPane child properties (hgrow, margin, columnIndex, etc)

[Dirk Lemmermann]

I would love to be able to do this.

Dirk


> Am 11.02.2025 um 23:47 schrieb John Hendrikx <john.hendrikx at gmail.com>:
> 
> Hi list,
> 
> I've done a little proof of concept where I've made some minor modifications to CssStyleHelper to allow the CSS engine to offer styleable properties on children, but defined by the container class.
> 
> What this means is that we can make it appear that direct children of a container like GridPane, HBox and VBox have properties like: `vgrow`, `hgrow`, `column-index`, `margin`, `halignment`, `fill-width` etc.  The exact names can be chosen by the container in question.  For example, I could style a child of an HBox like this:
> 
> .text-field {
>     -fx-background-color: yellow;
>     -fx-hbox-hgrow: ALWAYS;
>     -fx-hbox-margin: 5px;
> }
> 
> This will make it possible to do far more visual styling directly in CSS.  As usual, unrecognized properties are ignored, so if you put this text field in a VBox, nothing will happen.
> 
> How does it work?
> 
> - Containers that wish to add additional styleable properties to their direct descendants implement this interface:
> 
> public interface ChildStyleProvider {
>     List<CssMetaData<Styleable, ?>> getChildCssMetaData(Node child);
> }
> - The CssMetaData they provide for these properties looks like this for example:
> 
> 
>             new CssMetaData<>("-fx-hbox-hgrow", StyleConverter.getEnumConverter(Priority.class)) {
>                 @Override
>                 public boolean isSettable(Styleable styleable) {
>                     return true;
>                 }
> 
>                 @Override
>                 public StyleableProperty<Priority> getStyleableProperty(Styleable styleable) {
>                     return ChildStyleProvider.createProp(this, "hbox-hgrow", child);
>                 }
>             }
> - A special StyleableProperty is created as the "receiver" of CSS styling that will store the value in the Node#getProperties map (where normally these values are already stored when using the static methods like HBox.setHGrow(Node, Priority) type methods).  This property is cached as part of the same getProperties map, so it is only created once.
> 
> - The CssStyleHelper will see if the parent of the Node being styled implements ChildStyleProvider, and if so will also process these additional CssMetaData properties when any are present; this seems to be fairly safe to do, as changing a Node's parent will reset all its styling already. Some more tests are needed here, if moving this forward.
> 
> That is basically the change in a nutshell.  Not only does setting a property like `-fx-hbox-hgrow` on a child now act as if you called `HBox.setHGrow`, changing the style of the child can also change these settings and HBox will instantly respond to the change.  When the style is completely removed, it will also null the hgrow value which is translated as removing that key from the Node#getProperties map.
> 
> If people think this proposal has some merit, I can flesh it out further and make it into a PR.
> 
> --John
> 
> 
> 
> 
> 
> 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://mail.openjdk.org/pipermail/openjfx-dev/attachments/20250212/0a1e5fff/attachment.htm>