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!