First, some context: I have a TreeView in my JavaFX application, with a custom implementation of TreeCell. This implementation adds HBox to display the label (using LabeledText) and one (or more) icons / status indicators on the right. Labels and badges also get binding to them. When checking with Scenic View, the result looks something like this:
As you can see in the image above, the cell contains an HBox with a label (LabeledText), an interval area, and in this example a single icon (using a font, therefore, Glyph + LabeledText). Additional icons can be added either with a font, or at some point can be images.
Depending on the status of the presented element, I want to style the label differently (for example, text color, italics, ...). As a result, the TreeView looks like this:
Actual question . I tried several variations of my approach, but the logical solution is not working properly, although it seems to be needed. Am I missing something? Perhaps I found an error in JavaFX CSS processing?
I have a workaround that is currently working (but might stop doing this if I add some features to my TreeView), so I would still like to know why this is not working properly.
Basic approach
Depending on the item being displayed and its status, apply the appropriate CSS classes to the TreeCell. Use CSS selectors to create an internal label. For instance:
.mystatus > HBox > .text { -fx-font-style: italic; } .mystatus > HBox > LabeledText { -fx-font-style: italic; } .mystatus .text { -fx-font-style: italic; }
The problem is that the CSS selection of the TreeCell children does not seem to work reliably when the user starts manipulating the TreeView in the user interface. CSS applies to nodes that do not comply with the specified CSS rules. For example, after expanding / collapsing some label elements that do not match , CSS selectors are still italicized.
So, if you look at the image above and assume that this is the correct display for my items. Collapsing / reopening a 1-node element can cause paragraph 3 to suddenly become italicized, although such CSS has never been added to this node.
I tested the application classes using Scenic View to make sure I installed / cleaned the classes correctly: in CustomTreeCellImpl there are LabeledText nodes without the mystatus class, which are still italicized.
Alternative 1: using pseudo-classes instead of regular classes
Same problem as main approach above
CSS example:
*.tree-cell:mystatus > HBox > .text { -fx-font-style: italic; }
Alternative 2: apply classes or pseudo-classes directly to LabeledText instead of TreeCell
Same problem as main approach above
CSS example:
.text:mystatus { -fx-font-style: italic; }
Alternative 3: directly apply CSS properties to the created label using code
Again, this faces the same problem as before: after manipulating the tree, styles are applied if they shouldn't.
Here is the relevant part of the method that populates / updates TreeCell:
// add label LabeledText text = new LabeledText(this); text.setText("Item 1"); if(someCondition) { text.setStyle("-fx-font-style: italic;"); } hbox.getChildren().add(text);
The LabeledText object never changed its text: a new one is always created. Even then I get the wrong results.
This seems especially strange to me since it no longer has to do with CSS selectors - the style applies directly to the node, but the problem still persists.
Workaround
For those who are interested in how I managed to get around this problem, for now: apply classes or pseudo-classes to the whole TreeCell and add exceptions / overrides for child elements. I do not want the style to restore the default layout.
This basically works, but can become cumbersome if / when I add more elements to the cells. In addition, I assume that this only works because here all the child elements (except the label) have the same style, regardless of the status of the displayed element (for example, all characters are black normal font, etc.).
If / when I want to style these (for example, change the color of Glyph depending on the context, and not just use different Glyph characters), I assume that I may run into this problem again - this time without a hint how to solve this. as my workaround will no longer be applicable.
Update: I put a project on GitHub that demonstrates the problem.
The sample data in the project should be placed in italics in paragraphs 1.1 and 1.3 in italics, while all the rest are displayed in normal mode. When expanding / collapsing element 1, elements that should not be italicized in any case (on Windows).
In addition, when creating this example, I noticed that in OS X none of the elements are highlighted in italics (CSS itself loads properly, another style that I added temporarily for the test was applied). Windows has the problem described above.