Falha ao carregar skin: null ao aplicar o css ao fxml no Scene builder - javafx, builder, fxml, skin, scene

Eu estou tentando criar um controle de botão para o JavaFX com este exemplo como ponto de partida: http://fxexperience.com/2012/01/fun-javafx-2-0-audio-player/

Nesse exemplo, eles estão aplicando um skin (KnobSkin.java) a um slider no arquivo css.

Eu criei um controle personalizado como este:

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);
}
}
}

Minha cena principal é assim:

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>

Quando tento abrir o arquivo test.fxml no Scene Builder e aplico este css a ele:

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

Estou tendo o erro a seguir:

Falha ao carregar a skin "StringProperty [bean: Slider [id = volume, styleClass = controle deslizante knobStyle], nome: skinClassName, valor: application.KnobSkin] "para controle Slider [id = volume, styleClass = controle deslizante knobStyle]: null

Se eu executar o aplicativo, o botão será exibido perfeitamente.

Alguma ideia do que eu fiz de errado?

Obrigado!

Respostas:

2 para resposta № 1

Depois de ler esta postagem do blog: http://www.guigarage.com/2012/11/custom-ui-controls-with-javafx-part-1/

Eu achei que se eu mudasse minha classe Knob.java para

package application;
public class Knob extends AnchorPane {

@FXML
private AnchorPane myTestButton;

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

E eu removo o Knob.fxml, o botão irá aparecer no Scene Builder quando eu selecionar minha folha de estilo

---