JavaFx Custom Volume Knob Node

Having read Mastering javaFx 8 control book and reading the Medusa library source from hansolo , i decided to put my hands on what i have learned so far and i choose a Volume knob as my first custom node,
I decided to create the node by extending  the Control class this where we define the model of the node like tickMarkColor,Value ,backgroundColor properties.To style this properties i used StyleableProperty<T>.

code sample

ObjectProperty markerColor; 

StyleableObjectProperty markerColor; //styleable by css
To avoid boilerplate code i used the guigarage JavaFX CssHelper library to make the controls styleable . Property css name i gave are:


 Next was extend the SkinBase<T> and here is the visual layout of the node here i haven't taken care of re sizing,but added a listener to the valueProperty to redraw if the value changes
 like so

   getSkinnable().valueProperty().addListener(e -> {
Not much too talk about all is in the code at GitHub

An example of applying styling  by a css file

.knob { 
Knobfx Css
Knob knob=new Knob();
Timeline tl=new Timeline();
KeyValue key_value = new KeyValue(knob.valueProperty(), 50, Interpolator.LINEAR);
KeyFrame key_frame= new KeyFrame(Duration.seconds(90), key_value);


  1. Best Low Interest Credit Cards of 2016-


Post a Comment

Popular Posts