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.

Regards,
Jim Weaver
JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications
Immediate eBook (PDF) download available at the book's Apress site

Comments

[Sunite]

Get the best out os the best by going to http://w-aw.com , get WareZ for free, just search, or go to one of the topics and get that thing. Its ALL FREE! Scripts like Able Dating 2.4 NULLED! is NOW! available. Also the latest version of vBulletin and mods are now available. WaW Info :- 14000+ FREE SCRIPTS, 3400+ FREE TEMPLATES, 9000+ FREE COMPONENTS, 1000+ FREE MOVIES, 1800+ FREE TOOLS, 7400+ FREE ICONS, 3200+ FREE SONGS, 16000+ FREE APPLICATIONS, 70000 NEWS REPORT, 1900 SEO TOOLS, 8000 GAMES FOR PC, PS2/3, XBOX, XBOX LIVE, MOBILE, PSP AND LOADS MORE. http://w-aw.com

[Jim Weaver]

Marvin,
I've had similar difficulties. I'm going to blog about this soon, but the UI runtime for compiled JavaFX Script so far has been a quick port from interpreted JavaFX Script that has allowed the JavaFX Script compiler project to move forward. There is a project known as Reprise that will be the "real" UI runtime for compiled JavaFX Script, and my suggestion would be to post this question on the dev@openjfx-compiler.dev.java.net mailing list, asking specifically if the Reprise project will address this, and whether a JIRA issue should be filed.

Thanks,
Jim Weaver

[MarvinG]

Jim,

Thanks for your answer. You're right, I didn't note that there were different syntaxes for both compiled and interpreted JavaFX code (I'm only 1 month old since discovered it).

Returning to the slider subject, I've been struggling with both sliders and spinners to make them "move" in decimal (from 0.0 to 1.0) step values, but all I get are increments in integer values. Is it possible to move the values in non-integer steps?

I know you have much more important things to read and more important questions to answer, so any help would be inmensely appreciated.

Thanks.
Marvin Garcia.

[Jim Weaver]

Marvin,

This is a compiled JavaFX Script example, and you are most likely using interpreted (since you're currently using NetBeans for development. Please see the Obtaining the Compiler post http://learnjavafx.typepad.com/weblog/2007/11/compiler-cheat.html to learn how to obtain the compiler, and build and run compiled JavaFX Script programs.
Thanks,
Jim Weaver