This is Jerry’s sixth article in 2021, and the 277th original article on Wang Zixi’s official account.

Series directory

(0) SAP UI5 application developers understand the meaning of UI5 framework code (1) SAP UI5 Module lazy loading mechanism (2) SAP UI5 control rendering mechanism (3) HTML native event VS SAP UI5 Semantic event (4) SAP (5) SAP UI5 control instance data modification and reading logic (this article) (6) SAP UI5 control data binding principle (7) SAP UI5 control data binding three modes: One Way, Two Way realization principle and OneTime comparison (8) the generation of SAP ID UI5 control logic (9) SAP UI5 controls multiple languages (Internationalization, the Internationalization, i18n) support the implementation of the principle (10) in the XML view of a button control (11) Button control and the DOM element behind it

In this article, we will learn SAP UI5 control instance data modification and reading logic by studying button control setText and getText method implementation.

Here is a simple SAP UI5 code: every time a button is clicked, it will attach a character “1” to the end of the button’s text property value in the response function of the Press event.

After clicking the button three times, the rendered HTML code looks like the following figure, with three more “1s” following the text property of the button:

Step through into the setText method, found in the implementation of this method is ManagedObject. The setProperty:

We can do this through the call stack on the right of the figure above, to review two things we learned in previous articles in this series:

(1) article in-depth study of SAP UI5 framework code series one: LAZY loading mechanism of UI5 Module mentioned in SAP UI5 control prototype inheritance chain:

Button->Control->Element->ManagedObject->EventProvider->BaseObject

(2) the mapping logic from HTML native click event to SAP UI5 Press Semantic event mentioned in the article HTML native event VS SAP UI5 Semantic event.

An overview of the setProperty implementation logic

The comments are nice, but the execution logic of the setProperty code itself is clear.

Line 1295 this.mProperties is the instance data store structure for the SAP UI5 control. In the upper right corner of the Watch panel, the text property needs to be changed to the new value of “Button1” when the setProperty method is called.

Line 1295 first fetches the value of the text property from this.mProperties and stores it in the variable oOldValue.

Line 1298 calls the this.validateProperty method to check that the input parameter to the setProperty passed in, oValue, is valid.

1300 Lines Check whether the value oOldValue is the same as the input value oValue to be changed. If the same, the current setProperty call does not need to continue and returns directly.

Inside validateProperty, the SAP UI5 framework takes a closer look at the SAP UI5 framework code series 4 from the previous article in this series: The metadata of SAP UI5 control realizes the described logic, and the metadata of the control text property is extracted. It is known that the property type is string and the access permission is public:

For each different type of SAP UI5 control property, a corresponding type descriptor can be obtained based on the type field of its metadata, as shown in line oType in figure 1409.

The descriptor contains a set of methods in which the normalize function is responsible for normalizing input values as new attribute values are written.

When the setProperty call is made, the last optional input parameter, bSuppressInvalidate, defaults to undefined, so the invalidate method on line 1316 is executed, triggering the RERendering of the UI.

Above, line 1313 simply writes the new property value to the SAP UI5 control’s instance data store structure. After this line of code is executed, the text of the BUTTON label on the UI does not change.

Only after the UI is redrawn will the user see the latest value of the Button TAB in the browser.

The invalidate method in line 1316 triggers an asynchronous UI redraw. Asynchronous operations are scheduled using the JavaScript native function setTimeout, which adds the renderPendingUIUpdates task to the end of the JavaScript engine task queue so that the main thread is idle (because setTimeout second parameter, RenderPendingUIUpdates are executed to redraw the controls in the UI area that need to be redrawn, that is, the property values have changed.

The redrawing of Button control is finally realized through its corresponding renderer, ButtonRenderer. The specific rendering method render is called, as shown in the call stack frame marked with the number 4 in the right part of the figure above.

For information on renderers for SAP UI5 controls, please check out Jerry’s previous article to learn more about SAP UI5 framework code series 2: Renderers for UI5 controls.

Back to ManagedObject. The setProperty method body.

1320 lines of enclosing updateModelProperty, involves the SAP UI5 control corresponding model updates, in 1319 lines of code comments mentioned, if the control using the same model binding two-way binding way, when the UI controls property changes, the corresponding model field should also be updated. The model field is updated in the updateModelProperty function on line 1320. Jerry’s next article on UI5 control data binding will cover the implementation principles.

ManagedObject. At the end of the setProperty and invokes the implementation on the prototype chain node EventProvider fireEvent method, throw a _change events, contains the control the incident id, change the attribute name, attribute value change before and after change.

Although the underscore before the event name _change indicates that the event is handled internally by the SAP UI5 framework, this is a weak constraint and we can still listen for this event in our own applications using the attachEvent method of the Button control in the highlighted area below.

The debugger Watch panel on the right shows the payload of the _change event, indicating a control whose ID is __button0 and whose text property value has changed from Jerry to Jerry1.

Button control setText->setProperty execution logic overview, understand SAP UI5 control data modification principle, understand getText is much easier.

In setProperty, the asynchronous UI redraw occurs in renderPendingUIUpdates, where the Render method of the Button control’s render function is called. The renderer calls the button’s getText method to retrieve the value of the button tag to be rendered.

GetText, like setText, instead calls ManagedObject’s getProperty method:

The core logic of getProperty is much simpler than that of setProperty. It directly fetches the value of the property to be read from the control instance data store structure mProperties.

By the way, Angular has a similar asynchronous UI redraw operation as SAP UI5.

Whenever Angular maintains an empty microtask queue, (onMicrotaskEmpty) triggers the tick operation:

The tick operation calls the detectChanges function (equivalent to SAP UI5 renderPendingUIUpdates). DetectChanges recursively calls refreshView to refresh Angular controls that have property changes.

The next article in this series will cover the implementation principles of SAP UI5 control data binding. Thank you for reading.

Series directory

(0) SAP UI5 application developers understand the meaning of UI5 framework code (1) SAP UI5 Module lazy loading mechanism (2) SAP UI5 control rendering mechanism (3) HTML native event VS SAP UI5 Semantic event (4) SAP (5) SAP UI5 control instance data modification and reading logic (this article) (6) SAP UI5 control data binding principle (7) SAP UI5 control data binding three modes: One Way, Two Way realization principle and OneTime comparison (8) the generation of SAP ID UI5 control logic (9) SAP UI5 controls multiple languages (Internationalization, the Internationalization, i18n) support the implementation of the principle (10) in the XML view of a button control (11) Button control and the DOM element behind it

More of Jerry’s original articles can be found in “Wang Zixi” :