Image width binding in JavaFX

Question

I have a very basic app that I believe should change the width of an image, but it does nothing... can anyone tell me why, when I click on the image, nothing happens to the image?

(note, the image itself doesnt really matter, Im just trying to figure out how to shrink and grow and image in JavaFX)

import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.input.MouseEvent;

var w:Number = 250;

Frame {
    title: "Image View Sample"
    width: 500
    height: 500
    closeAction: function() { 
        java.lang.System.exit( 0 ); 
    }
    visible: true

    stage: Stage {
        content: [
            ImageView {
                x: 200;
                y: 200;
                image: Image {
                    url: "{__DIR__}/c1.png"
                    width: bind w;
                }

                onMouseClicked: function( e: MouseEvent ):Void {
                    w = 100;
                }
            }
        ]
    }
}

Thanks heaps!

Answer 1

Try to bind scale attributes:

import java.lang.System;
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.input.MouseEvent;

var w:Number = 1;

Frame {
    title: "Image View Sample"
    width: 500
    height: 500
    closeAction: function() { 
        java.lang.System.exit( 0 ); 
    }
    visible: true

    stage: Stage {
        content: [
            ImageView {
                x: 200
                y: 200
                anchorX:200 
                anchorY:200
                scaleX:bind w
                scaleY:bind w
                image: Image {
                    url: "{__DIR__}/time.png"                    
                }

                onMouseClicked: function( e: MouseEvent ):Void {
                    w += 0.1;                    
                }
            }
        ]
    }
}

Answer 2

Thanks for the reply, sorry for the delay getting back to you, but it turns out that all you need to do is to bind the image itself:

image: bind Image {
    url: "{__DIR__}/time.png"
    width: w;
}

And that seems to do the trick, which personally I find a bit missleading, but hey, it works