JavaFX 2 and CSS classes

Question

I am doing practice with JavaFX 2.0 by plotting a XYChart with 2 line series and setting color, stroke etc in a CSS file.

Following this link

http://docs.oracle.com/javafx/2.0/charts/css-styles.htm

it says:

All JavaFX charts have common properties that can be set though the .chart, .chart-content, .chart-title, and .chart-legend CSS classes.

My question is: where can I find a list of all these CSS classes? I can't find it anywhere.

The JavaFX CSS reference link

http://docs.oracle.com/javafx/2.0/api/javafx/scene/doc-files/cssref.html

lists all properties but not the CSS classes

Thanks

Answer 1

1. This tutorial http://docs.oracle.com/javafx/2.0/css_tutorial/jfxpub-css_tutorial.htm advises to look into caspian.css file which has default styles for all components. You can get it from sdk:

   jar -xf jfxrt.jar com/sun/javafx/scene/control/skin/caspian/caspian.css
   

2. As you already mentioned another useful source is ccs-ref document in javadoc: http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html

Answer 2

Default styles can be found in caspian css (link for JavaFX 2.2 and link for Java 8).

You can view style classes interactively using the ScenicView tool.

You can recursively print the nodes in the chart to find out at run-time what type they are and what css classes are applied to them. The nodes should be printed after the scene has been attached to a shown stage to give the css layout pass a chance to execute on the nodes and apply the correct style classes to them. Often, I also lookup nodes by css class to dynamically style or manipulate them in code.

Here is a sample that you can adjust for your chart.

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.scene.*;
import javafx.scene.chart.*;
import javafx.stage.Stage;

public class SimpleChart extends Application {
  public static void main(String[] args) { launch(args); }
  @Override public void start(Stage stage) {
    final AreaChart chart = new AreaChart(
      new NumberAxis(), new NumberAxis(),
      FXCollections.observableArrayList(
         new XYChart.Series("April", FXCollections.observableArrayList(
           new XYChart.Data(0, 4), new XYChart.Data(1, 10), new XYChart.Data(2, 18)
         )),
         new XYChart.Series("May", FXCollections.observableArrayList(
           new XYChart.Data(0, 20), new XYChart.Data(1, 15), new XYChart.Data(2, 12)
         ))
      )      
    );
    chart.setTitle("Temperature Monitoring (in Degrees C)");
    stage.setScene(new Scene(chart, 800, 600));
    stage.show();

    printNodes(chart, 0);
  }

  public void printNodes(Node node, int depth) {
    for (int i = 0; i < depth; i++) System.out.print(" ");
    System.out.println(node);
    if (node instanceof Parent) 
      for (Node child : ((Parent) node).getChildrenUnmodifiable()) 
        printNodes(child, depth + 1);
  }
}

And the output is:

AreaChart@fb17e5[styleClass=root chart]
 Label[id=null, styleClass=label chart-title]
  LabelSkin[id=null, styleClass=label chart-title]
   LabeledText@f0548c[styleClass=text]
 Chart$1@f617ce[styleClass=chart-content]
  Region@41d471[styleClass=chart-plot-background]
  XYChart$1@1e26fe1
   Path@ccec5f[styleClass=chart-alternative-column-fill]
   Path@1b289cd[styleClass=chart-alternative-row-fill]
   Path@751a9b[styleClass=chart-vertical-grid-lines]
   Path@25e068[styleClass=chart-horizontal-grid-lines]
   Line@afceff[styleClass=chart-vertical-zero-line]
   Line@3ed81c[styleClass=chart-horizontal-zero-line]
   Group@1de52ea[styleClass=plot-content]
    Group@b66999
     Path@255d[styleClass=chart-series-area-fill series0 default-color0]
     Path@1952ad4[styleClass=chart-series-area-line series0 default-color0]
    StackPane@1cedaf2[styleClass=chart-area-symbol series0 data0 default-color0]
    StackPane@1887d29[styleClass=chart-area-symbol series0 data1 default-color0]
    StackPane@1d13cab[styleClass=chart-area-symbol series0 data2 default-color0]
    Group@15426ec
     Path@1e606a9[styleClass=chart-series-area-fill series1 default-color1]
     Path@bf7baa[styleClass=chart-series-area-line series1 default-color1]
    StackPane@1c758d7[styleClass=chart-area-symbol series1 data0 default-color1]
    StackPane@99a1b5[styleClass=chart-area-symbol series1 data1 default-color1]
    StackPane@4788f3[styleClass=chart-area-symbol series1 data2 default-color1]
  NumberAxis@11f25f3[styleClass=axis]
   Label[id=null, styleClass=label axis-label]
    LabelSkin[id=null, styleClass=label axis-label]
     LabeledText@bb303[styleClass=text]
   Path@ab12f1[styleClass=axis-tick-mark]
   Path@acaa28[styleClass=axis-minor-tick-mark]
   Text@1c2a074[styleClass=text tick-mark]
   Text@8ebcab[styleClass=text tick-mark]
   Text@d600e3[styleClass=text tick-mark]
   Text@10eb552[styleClass=text tick-mark]
   Text@14b5854[styleClass=text tick-mark]
   Text@a51ac9[styleClass=text tick-mark]
   Text@804b08[styleClass=text tick-mark]
   Text@d7a8bb[styleClass=text tick-mark]
   Text@1776b55[styleClass=text tick-mark]
   Text@ee1793[styleClass=text tick-mark]
   Text@102b5a9[styleClass=text tick-mark]
  NumberAxis@1f4899c[styleClass=axis]
   Label[id=null, styleClass=label axis-label]
    LabelSkin[id=null, styleClass=label axis-label]
     LabeledText@12d40de[styleClass=text]
   Path@11d3cb1[styleClass=axis-tick-mark]
   Path@7bc9a9[styleClass=axis-minor-tick-mark]
   Text@25b987[styleClass=text tick-mark]
   Text@c4720[styleClass=text tick-mark]
   Text@2f958[styleClass=text tick-mark]
   Text@1a51ac0[styleClass=text tick-mark]
   Text@26e232[styleClass=text tick-mark]
   Text@8b5b5[styleClass=text tick-mark]
   Text@1843ea1[styleClass=text tick-mark]
   Text@c8d74b[styleClass=text tick-mark]
   Text@12cc880[styleClass=text tick-mark]
   Text@1439c50[styleClass=text tick-mark]
   Text@10c4148[styleClass=text tick-mark]
 Legend@2a46d1[styleClass=chart-legend]
  Label[id=null, styleClass=label chart-legend-item]
   LabelSkin[id=null, styleClass=label chart-legend-item]
    Region@1990ca[styleClass=chart-legend-item-symbol chart-area-symbol series0 area-legend-symbol default-color0]
    LabeledText@70f11d[styleClass=text]
  Label[id=null, styleClass=label chart-legend-item]
   LabelSkin[id=null, styleClass=label chart-legend-item]
    Region@1ec15c7[styleClass=chart-legend-item-symbol chart-area-symbol series1 area-legend-symbol default-color1]
    LabeledText@89c1ee[styleClass=text]