Failed to load skin : null when applying css to fxml in Scene builder

Question

I am trying to create a knob control for JavaFX with this example as starting point: http://fxexperience.com/2012/01/fun-javafx-2-0-audio-player/

In that example they are applying a skin (KnobSkin.java) to a slider in the css file.

I have created a custom control like this:

Knob.fxml

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<fx:root type="javafx.scene.layout.AnchorPane" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
  <children>
    <AnchorPane id="myTestButton" layoutX="0.0" layoutY="5.0" minHeight="49.0" prefHeight="140.0" prefWidth="14.0">
      <children>
        <Slider id="volume" orientation="VERTICAL" styleClass="knobStyle" />
      </children>
    </AnchorPane>
  </children>
</fx:root>

Knob.java

package application;
public class Knob extends AnchorPane {

    @FXML
    private AnchorPane myTestButton;

    public Knob() {
        FXMLLoader fxmlLoader = new FXMLLoader(

        getClass().getResource("/application/Knob.fxml"));

        fxmlLoader.setRoot(this);
        fxmlLoader.setController(this);

        try {
            fxmlLoader.load();
        } catch (IOException exception) {
            throw new RuntimeException(exception);
        }
    }
}

My main scene looks like this:

test.fxml

<?import application.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<?scenebuilder-classpath-element ../../bin?>

<AnchorPane prefHeight="217.0" prefWidth="221.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
  <Knob layoutX="5.0" layoutY="4.0" />
</AnchorPane>

When I try to open the test.fxml file in Scene Builder and apply this css to it:

.slider.knobStyle {
    -fx-skin: "application.KnobSkin";
}

I get the following error:

Failed to load skin 'StringProperty [bean: Slider[id=volume, styleClass=slider knobStyle], name:skinClassName, value:application.KnobSkin]' for control Slider[id=volume, styleClass=slider knobStyle] :null

If I run the application the knob is displayed perfectly.

Any idea what I have done wrong?

Thanks!

Answer 1

After reading this blog post: http://www.guigarage.com/2012/11/custom-ui-controls-with-javafx-part-1/

I found that if I change my class Knob.java to

package application;
public class Knob extends AnchorPane {

    @FXML
    private AnchorPane myTestButton;

    public Knob() {
        setSkinClassName(KnobSkin.class.getName());
    }
}

And I remove the Knob.fxml the knob will show up in Scene Builder when I select my stylesheet