In the previous blog, I have studied the metadata of Button control. In this blog, I will study the instance data of Button control.

I will use the public method we find in the Button control metadata, setText, as example to study how the instance data is stored and retrieved in the runtime.

I just add a new code to change the text of Button:

How does it work?

How does setXXX work

Set a breakpoint on line 19. In the previous blog, we have learned that all public methods which are not implemented by the control itself, but inherited from its ancestor in the prototype chain, are implemented in a generic way, as demonstrated in the example below - simply delegated to setProperty function.

Property change validation

In order to set a new property, the following two validations must be done:

1. get old property value from central property repository, this.mProperties. DON NOT mix this repository with the one in the metadata we discuss in the previous blog, as the two "this" points to different object, one to control instance itself and the other one to metadata instance. In line 29693, if the old value and new value to be set are equal, just return this to support chain operation.

2. there is a validation done in line 29691, to ensure the new value is a valid property for Text.

From metadata definition we know the data type for property "text" is "string".

A validator is returned based on the property type and its function normalize is called for validation.

Then in line 29705, the new value "Jerry" will overwrite the old value stored in central property repository, this is the whole process how a property is changed so far.

The line 29711 contains the step of model property change which will be discussed in next blog.

In line 29715, a change event "_change" is also raised.

If you would like to catch this "private" marked starting with "_" in your application, you can add pieces of code as below:

oButton1.attachEvent("_change",  function(oEvent) {   var oChangeDetail = oEvent.getParameters();   debugger;  });
oButton1.setText("Jerry");

Thus whenever there is property change, your event listener will be called with change detail.

How does getXXX work

Still remember the ButtonRender.js we learned in the second part of these series of blogs?

Search the keyword "getText" and set breakpoint. It is triggered in the runtime since the Renderer needs to know the text of Button so that it can render it in Fiori UI.

Again the getXXX is implemented generically just the same as setXXX.