Jim has posted 66 posts at DZone. You can read more from them at their website. View Full User Profile

Binding to a Function in Compiled JavaFX Script

02.15.2008
| 5854 views |
  • submit to reddit

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.

Bindtofunctionexample

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

Published at DZone with permission of its author, Jim Weaver.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags:

Comments

James Imber replied on Sat, 2008/02/16 - 4:19pm

I find the JavaFX thing very interesting. Thank you for your post. I don't use it yet because on all official pages (https://openjfx.dev.java.net/ or https://openjfx-compiler.dev.java.net/ or https://scenegraph.dev.java.net/) they tell you clearly that the language and the compiler are in "very early stages" of development.

One other thing that I notice, may be it is just me, it is how difficult it is to read/see the code structure: everything seems to be just packed together in one big chunk of code.

Jim Weaver replied on Sat, 2008/02/16 - 8:01pm in response to: James Imber

James,

Yes, the *very early stages* phrase on the JavaFX site is misleading, and outdated.  I'm going to forward your comments to Sun and suggest that they update the words.

Regarding "how difficult it is to read the code structure", there are probably a couple of issues here.  One is that you may be looking at code that is poorly formatted.  The other is that the declarative syntax is a different (but refreshingly simple and powerful) way of expressing the user interface.

May I suggest that you take a look at the Creating Rich Internet Applications With Compiled JavaFX Script Technology tutorial that I'm writing for Sun.  Also, please take a look at the "Making you a JavaFXpert" weblog, beginning at the Developing Your First Compiled JavaFX Script Program post and working forward in time.

If you have any questions, please post another comment.

Thanks,

Jim Weaver

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.