Raghu Nair: Java,JavaFX Tips

Here is a simple volume controller for a media player. 

 /**
 * @author Raghu Nair
 */

public class VolumeControl extends CustomNode{

    public-init var mediaPlayer:MediaPlayer;

    var width = Layout.volumeControlWidth;

    var volumeProgress =  bind mediaPlayer.volume with inverse;

    //Background.
    var progressBG : Rectangle = Rectangle {
        width: bind width
        height: bind Layout.iconSize
        fill: Color.LIGHTGRAY
        arcWidth: bind Layout.iconSize
        arcHeight: bind Layout.iconSize
        onMousePressed: function(e:MouseEvent){

            //Control the volume by pressing the mouse.
            println(progress.x);
            println(e.sceneX);
            volumeProgress =  (progress.x - e.sceneX)/width;
        }

    }

    var path = Path {
        elements: [
            MoveTo { x: progressBG.x +5    y: progress.y + Layout.iconSize },
            LineTo { x: progressBG.x + width y: progress.y },
            LineTo { x: progressBG.x + width y: progress.y + Layout.iconSize },
            LineTo { x: progressBG.x + width y: progress.y + Layout.iconSize },
        ]
        fill:Color.DARKBLUE
        clip:Rectangle {
            x: bind progressBG.layoutX
            y: bind progressBG.layoutY
            width: bind width
            height: bind Layout.iconSize
            stroke:Color.TRANSPARENT
            fill: Color.BLACK
            arcWidth: bind Layout.iconSize
            arcHeight: bind Layout.iconSize
        }

    }

    var progress : Rectangle = Rectangle {
        x: bind progressBG.layoutX
        y: bind progressBG.layoutY + 1
        height: bind Layout.iconSize
        width: bind (width * volumeProgress)
        opacity: 0.4
        fill: Color.WHITE
    }

    override public function create():Node {
        Group{
            content: [progressBG,path,progress]
        }
    }
}

 Change the Layout.iconSize to some 45 and width to 120. Your volume controller is ready.