In previous posts I've demonstrated binding to an attribute, and binding to a sequence. Now I'd like to show you how to bind to a function. This is a very powerful feature because whenever the value of the function changes, the bound variable is updated. Here's a screenshot of today's example program, in which the user selects the diameter of a circle from a slider widget. The program calculates and displays the area of the circle, as well as drawing a circle with the selected diameter in pixels.

Here's the JavaFX Script code for this example:

/*
 *  BindToFunctionExample.fx - A compiled JavaFX program that demonstrates
 *                             binding to a function.
 *
 *  Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
 *  to serve as a JavaFX Script example.
 */

import javafx.ui.*;
import javafx.ui.canvas.*;
import java.lang.Math;
import java.lang.System;

class CircleModel {
  attribute diameter:Number;
  
  function getArea():Number {
    Math.PI * Math.pow(diameter / 2, 2);
  }
}

Frame {
  var cModel = CircleModel {}
  width: 480
  height: 560
  title: "Bind to Function Example"
  background: Color.WHITE
  content: 
    BorderPanel {
      center:
        Canvas {
          content: [
            Circle {
              cx: 240
              cy: 250
              radius: bind cModel.diameter * 2
              stroke: Color.PURPLE
              strokeWidth: 1
              fill: Color.CYAN
            },
            Text {
              font: 
                Font {
                  face: FontFace.SANSSERIF
                  style: FontStyle.BOLD
                  size: 24
                }
              x: 20
              y: 10
              stroke: Color.RED
              fill: Color.RED
              content: bind "Diameter: {cModel.diameter}"
            },
            Text {
              font: 
                Font {
                  face: FontFace.SANSSERIF
                  style: FontStyle.BOLD
                  size: 24
                }
              x: 240
              y: 10
              stroke: Color.RED
              fill: Color.RED
              content: bind "Area: {%3.2f cModel.getArea()}"
            }
          ]
        }
      bottom:
        Slider {
          min: 0
          max: 100
          border: 
            TitledBorder {
              title: "Diameter:"
            }
          value: bind cModel.diameter 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
  onClose:
    function():Void {
      System.exit(0);
    }
}

Binding to a Function

As shown above, the slider is bi-directionally bound to the diameter attribute of the CircleModel instance. This attribute affects the value of the getArea() function, so as the value of the diameter attribute changes, the content attribute bound to the getArea() function will reflect its value.

Formatting Output

Another thing that you'll notice in this example is that the value of the getArea() function is formatted to two decimal places when displayed in the Text graphical node. This is due to the formatting capabilities of JavaFX Script that I began discussing in the Happy New Year post.

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