Cannot override a setter function like setWidth

Question

I have the following code

qx.Class.define("myproject.EditorArea",
{
  extend : qx.ui.container.Composite,

  events : {
  },

   statics :
   {
   },

  members :
  {
    __htmlArea : null,
    __txtArea : null,

    setWidth : function( value )
    {
      this.__htmlArea.setWidth( value );
      this.__txtArea.setWidth( value );
      return( value );
    },
    setHeight : function( value )
    {
      this.__htmlArea.setHeight( value -19 );
      this.__txtArea.setHeight( value -19 );
      return( value );
    }

},

   /**
    * Constructor
   * @param sHtml {String} the initial html value for this widget.
    */
   construct : function( sHtml )
  {
   this.base(arguments);

    this.setLayout( new qx.ui.layout.VBox(1));

    var container = new qx.ui.container.Composite(new qx.ui.layout.HBox( 1, "right" )).set( {height:18} );
    this.__htmlArea = new qx.ui.embed.Html( sHtml );
    this.add(this.__htmlArea);
    this.__txtArea = new qx.ui.form.TextArea("");
  }
});

When calling the setWidth() from the class EditorArea the framework always calls the super function.

In other words

var editor = new myproject.EditorArea( somehtml );
editor.setWidth( 460 );

calls qx.ui.container.Composite.setWidth() instead of myproject.EditorArea.setWidth().

The overridden function is never reached. How can one override those setter functions?

Answer 1

The getter and setter functions are programatically generated during qx.Class.define(). Typically, you don't want to try to mess with them. If you want your own, you'd be better off creating setMyWidth() and setMyHeight() functions, i.e., functions of some not-automatically-generated name.

If you really, really want the function names to be setWidth/setHeight, you might try creating those functions in the defer section of the class defintion. The defer element of the map passed to qx.Class.define is at the same level as construct, events, statics, members (see the docs), and code in its function is run after the class is fully defined. You may be able to override / completely overwrite the automatically-generated getter and setter by adding your custom function there. You're in uncharted territory here, though, and I don't advise it.

Derrell

Answer 2

As Derrell already said, overriding automatic generated setters and getters for qooxdoo properties is possible with tricks but not recommendable.

But there might be a solution for you, by overriding the property applyer _applyDimension for width and height which is defined in qx.ui.core.LayoutItem.

The applyer is called on every property change. Please read the correspondig documentation at http://demo.qooxdoo.org/current/apiviewer/#qx.core.Property

Your override would be as follows:

_applyDimension : function(newValue, oldValue, propertyName) {
  if(propertyName == "width") {
    this.__htmlArea.setWidth( newValue );
    this.__txtArea.setWidth( newValue );
  }
  if(propertyName == "height") {
    this.__htmlArea.setWidth( newValue-19 );
    this.__txtArea.setWidth( newValue-19 );
  }

  this.base(arguments, newValue, oldValue, propertyName);
}

It is essential to call the super class method by calling this.base(arguments,...) here to not break upstream functionality on the inheritance path, or of course, you want to do so explicitly.

This way is safe and documented.