Skip to main content

Use of Bind to avoid ChangeListener model

3 replies [Last post]
fstephens
Offline
Joined: 2009-01-15
Points: 0

I'm exploring JavaFX and trying to see if I can use Bind in an effort to not use a traditional ChangeListener model. To that end I created a little test application that draws 3 rectangles and grows or shrinks them based on which one is clicked. The idea is that a clicked Rectangle is either large or small if it is repeatedly clicked on, but all other Rectangles are small. The behavior of the following code is not quite correct and I could be just barking up the wrong tree.

Comments and opinions are most welcome. Thanks in advance.

package console1;

import javafx.scene.Scene;
import javafx.stage.Stage;

/**
* @author Fred
*/

var r1 : Wrecktangle = Wrecktangle{myID:1};
var r2 : Wrecktangle = Wrecktangle{myID:2};
var r3 : Wrecktangle = Wrecktangle{myID:3};

r1.translateX = 10;
r1.translateY = 20;
r2.translateX = 120;
r2.translateY = 20;
r3.translateX = 230;
r3.translateY = 20;

Stage {
title: "Application title"
width: 500
height: 500
scene: Scene {
content: [
r1,r2,r3
]
}
}

package console1;

import javafx.scene.CustomNode;
import javafx.scene.effect.DropShadow;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;

public def short : Integer = 100;
public def long : Integer = 300;
public var activeID : Integer = 0;

public class Wrecktangle extends CustomNode {
public-init var myID : Integer = 0;

var height : Integer = short;

bound function shrinkerThinker() : Integer {
height = if (activeID == myID) height else short;
}

public override function create(): Node {
return Group {
content: [
Rectangle {
x: 0,
y: 0
width: 100,
height: bind shrinkerThinker()
arcWidth: 10
arcHeight: 10
fill: Color.rgb(100, 200, 100, 0.7)
stroke: Color.BLACK
strokeWidth: 1
effect:
DropShadow {
offsetX: 2
offsetY: 2 color: Color.BLACK}
onMouseClicked: function( e : MouseEvent ) {
height = if (height == short) long else short;
activeID = myID;
}
}]
};
}
}

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
fstephens
Offline
Joined: 2009-01-15
Points: 0

Thanks for the response. I have tried a variety of variations and it still doesn't behave quite right. The case that this variation misses is to alternately shrink or grow the box that is repeatedly clicked on. The challenge is that the pid is not changed in this case so the bind will not detect the change.

alexsch
Offline
Joined: 2007-07-12
Points: 0

I tried this and it seems that the mouse event is missed when the rectangle is resized. It seems that using javafx effects gives it.

alexsch
Offline
Joined: 2007-07-12
Points: 0

Try this:

[code]
public def short: Integer = 100;
public def long: Integer = 300;
public var activeID: Integer = 0;

public class Wrecktangle extends CustomNode {
public-init var myID: Integer = 0;

var height: Integer = short;

public override function create(): Node {
return Group {
content: [
Rectangle {
width: 100,
height: bind if (activeID == myID) then { if (height == short) long else short } else short; //bind height //shrinkerThinker()
arcWidth: 10
arcHeight: 10
fill: Color.rgb(100, 200, 100, 0.7)
stroke: Color.BLACK
strokeWidth: 1
effect: DropShadow {
offsetX: 2
offsetY: 2
color: Color.BLACK
}
blocksMouse: true
onMouseClicked: function( e : MouseEvent ) {
print("ID: {myID}");
activeID = myID;
}
}]
};
}
}
[/code]