Creating Sliders in Compiled JavaFX Script

Beginning with the Romain Guy's Magic InfiniteProgressPanel post, I'm in the process of showcasing some JavaFX Script UI components. I want you to get a feel for what components are available and how to use them in your code. Today's feature is the Slider widget, and here's a screenshot of an example program that uses it:

As you move the slider, the Text graphic shown above changes. Note that I chose a font that attempts to anthropomorphize the numbers. :-)

Here's this example program's code:

/*
*  CompiledSpinner.fx - A compiled JavaFX program that demonstrates
*                       the Slider widget.
*
*/

import javafx.ui.*;
import javafx.ui.canvas.*;

Frame {
  var displayNum:Number = 0.0
  height: 300
  width: 380
  title: "Slider Example"
  background: Color.WHITE
  content:
    BorderPanel {
      center:
        Canvas {
          content:
            Text {
              font:
                Font {
                  face: FontFace.BITSTREAM_VERA_SANS_MONO
                  style: FontStyle.BOLD
                  size: 96
                }
              x: 20
              y: 40
              stroke: Color.RED
              fill: Color.RED
              content: bind "{displayNum}"
            }
        }
      bottom:
        Slider {
          min: 0
          max: 100
          border:
            TitledBorder {
              title: "Speed:"
            }
          value: bind displayNum with inverse
          minorTickSpacing: 5
          majorTickSpacing: 10
          paintTicks: true
          paintLabels: true
          labels: [
            SliderLabel {
              value: 0
              label:
                SimpleLabel {
                  text: "0"
                }
            },
            SliderLabel {
              value: 50
              label:
                SimpleLabel {
                  text: "50"
                }
            },
            SliderLabel {
              value: 100
              label:
                SimpleLabel {
                  text: "100"
                }
            }
          ]
        }
    }
  visible: true
}

Noteworthy Concepts

This weblog has covered most of the concepts in this example, but I do want to point out a couple of things:

• Up to this point I've used the faceName attribute of the Font class, but lately I've been using the face attribute. The difference is that faceName is a String, and face is of type FontFace. You can see the available constants for various font faces in FontFace.fx located in the javafx.ui package.
• When binding a UI component that the user can modify (like this Slider) to a variable, the bind is bi-directional. Bi-directional binding is expressed by adding with inverse at the end, as seen in the following statement from the code example:

        value: bind displayNum with inverse

Have fun with this example, and please post a comment if you have any questions, or if there are particular UI components that you'd like to see featured soon.