Uncaught Error: Property imageWidth of an instance of XXX is not (yet) ready

Question

I have a custom class that extends qx.ui.basic.Image, and here is the code :

/*
#asset(path/to/*)
*/
qx.Class.define("myApp.myImage",
{
  extend : qx.ui.basic.Image,
  construct: function() {
    this.base(arguments);
    var imgPath = "path/to/test.png";
    this.setSource(imgPath);
    this.imageWidth = qx.util.ResourceManager.getInstance().getImageWidth(imgPath);
  },
  properties : {
    imageWidth : { check : 'Integer' }
  }
});

When I try to use :

var img = new myApp.myImage();
console.log(img.getImageWidth());

It said,

Uncaught Error: Property imageWidth of an instance of myApp.myImage is not (yet) ready

I just want to get the image width of the Image. I also tried to use :

var img = new myApp.myImage();
console.log(img.getBounds().width);

The error appeared is:

Cannot get width of undefined

What did I miss?

Answer 1

Lets take a look at the property description. It does not have a init value nor is it nullable. This means, as you create it, it is in some kind of unknown state holding no value. Querying that property like you did in your sample results in the error because the property system does not know what value to return as you did not specify one. So it all comes down to the last line in the constructor where you set a member variable named 'imageWidth' to the right width of the image. But that is not the property, it's a plain member. So either you access the member variable in the sample like img.imageWidth or you use the setter for the property in the constructor: this.setImageWidth(...).