0

Today I downloaded the JFXtras, but I can't find any information about css stylings for the jfxtras elements. E.g. I would like to know how to style a ListSpinner. I just found this for the value text of the spinner: 

.ListSpinner .value {
        -fx-font-weight: bold;
}

How can I style the rest? Or does a list with possible css "commands" exist somewhere?

greetings

leyren
  • 524
  • 6
  • 20

1 Answers1

1

Yes, the documentation is lacking on that topic. I am sorry; it's always the same issue with spending time on new things, bug fixes or documentation. Documentation very often loses.

ListSpinner uses standard nodes, so you can use the standard JavaFX styling, here you can find how the nodes are setup per default. https://github.com/JFXtras/jfxtras/blob/8.0/jfxtras-controls/src/main/resources/jfxtras/internal/scene/control/ListSpinner.css

Answering Tony; -fx- are special JavaFX selectors, to not conflict with the official CSS selectors. JFXtras uses -fxx- for its custom things, for example -fxx-arrow-direction, -fxx-arrow-position and -fxx-value-alignment (https://github.com/JFXtras/jfxtras/blob/8.0/jfxtras-controls/src/main/java/jfxtras/internal/scene/control/skin/ListSpinnerSkin.java)

I promise to improve the documentation of listspinner soon.

tbeernot
  • 2,473
  • 4
  • 24
  • 31
  • I forgot to mention that the samples allow you to easily test the effect of the fxx CSS settings. (http://jfxtras.org/) – tbeernot Jun 20 '15 at 13:54
  • I've improved the documentation, but it is something of a dilemma; truly styling a control requires knowledge of which nodes are present and what can be done to style them, this is not something that is deeply documented in a control's description. Especially since a control can have multiple skins. As a intermediate approach I've included some basic information on styleable properties and things that one normally may expect an API call for. But in the end, just like jquery plugins for HTML, one really needs to inspect the nodes and classes that are generated. – tbeernot Jun 20 '15 at 14:50
  • Thank you for your help, that was awesome! Is there a way to see which nodes a certain element (like the ListSpinner) consists of? That would make it much easier to figure out how to style it. By the way, do you plan on doing something like this https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html for jfxtras? – leyren Jun 20 '15 at 16:40
  • Not in that way, it is an enormous effort to maintain. If I were paid for it, like the JavaFX developers are, probably. But as an open source project... The annoying thing is that for HTML you can activate the developer toolbar in a browser and inspect how the divs are created and how classes are assigned. For JavaFX it is not that easy; there was a tool that visualizes the nodes similar to this (https://developer.mozilla.org/en-US/docs/Tools/3D_View), but I cannot seem to find it . – tbeernot Jun 20 '15 at 17:13
  • You could try and use the TreeView thingy that is now part of ScenicView, to inspect the nodes. (https://arnaudnouard.wordpress.com/2014/11/06/threedom-is-dead-long-live-to-threedom-in-scenicview/) – tbeernot Jun 20 '15 at 20:48