Question about CSS styling
Hello, I have a question about how the CSS styling work, when a node skin use sub nodes. For example, the Button control uses a LabeledText, but it is not necessary to setup the style of the LabeledText inside the button to set the font of the button text (it is done in the button style itself). But a MenuBar use children menus in its substructure, which have to be styled independently. How is it possible (or is it possible) to detect programmatically when iterating through the children of a Styleable node which children are automatically styled according to the patent mode style, and which are styled separately ? Hervé Sent from my iPhone
Re: Question about CSS styling
On 2/19/14, 5:07 AM, Hervé Girod wrote:
Hello,
I have a question about how the CSS styling work, when a node skin use sub
nodes.
For example, the Button control uses a LabeledText, but it is not necessary to
setup the style of the LabeledText inside the button to set the font of the
button text (it is done in the button style itself).
The way this generally works is that the control has some JavaFX CSS
property, like -fx-font. The skin listens to the property and handles
the state change in whatever manner is appropriate to the skin. So, for
example, if the Button's graphicProperty changes, the Button's skin will
be notified and can handle the change. In the most simple case, this
might be done with bind.
LabeledText is somewhat of a different beast in that it wants map
properties from Labeled onto properites in Text and vice-versa.
LabeledText allows for styles like .labeled { -fx-text-fill: red; } to
affect the Text's fillProperty while still allowing .labeled .text {
-fx-fill: yellow; }
But a MenuBar use children menus in its substructure, which have to be styled
independently.
How is it possible (or is it possible) to detect programmatically when
iterating through the children of a Styleable node which children are
automatically styled according to the patent mode style, and which are styled
separately ?
It may seem that that the child menus are styled independently, but they
are not - at least in 8.0. The Styleable interface allows the CSS engine
to traverse a scene-graph in a way that doesn't depend on a Node's
parent. In a sense, Styleable provides a mechanism for a css-graph that
is (somewhat) independent of the scene-graph.
In the case of something like a Menu, the Styleable API
getStyleableParent() will return the parentMenu or the parentPopup which
brings it back to the MenuBar.
Hervé
Sent from my iPhone
Re: Question about CSS styling
Thanks for your explanation, it's clear now!
Hervé
Sent from my iPhone
On 19 févr. 2014, at 14:25, David Grieve david.gri...@oracle.com wrote:
On 2/19/14, 5:07 AM, Hervé Girod wrote:
Hello,
I have a question about how the CSS styling work, when a node skin use sub
nodes.
For example, the Button control uses a LabeledText, but it is not necessary
to setup the style of the LabeledText inside the button to set the font of
the button text (it is done in the button style itself).
The way this generally works is that the control has some JavaFX CSS
property, like -fx-font. The skin listens to the property and handles the
state change in whatever manner is appropriate to the skin. So, for example,
if the Button's graphicProperty changes, the Button's skin will be notified
and can handle the change. In the most simple case, this might be done with
bind.
LabeledText is somewhat of a different beast in that it wants map properties
from Labeled onto properites in Text and vice-versa. LabeledText allows for
styles like .labeled { -fx-text-fill: red; } to affect the Text's
fillProperty while still allowing .labeled .text { -fx-fill: yellow; }
But a MenuBar use children menus in its substructure, which have to be
styled independently.
How is it possible (or is it possible) to detect programmatically when
iterating through the children of a Styleable node which children are
automatically styled according to the patent mode style, and which are
styled separately ?
It may seem that that the child menus are styled independently, but they are
not - at least in 8.0. The Styleable interface allows the CSS engine to
traverse a scene-graph in a way that doesn't depend on a Node's parent. In a
sense, Styleable provides a mechanism for a css-graph that is (somewhat)
independent of the scene-graph.
In the case of something like a Menu, the Styleable API getStyleableParent()
will return the parentMenu or the parentPopup which brings it back to the
MenuBar.
Hervé
Sent from my iPhone
