This is Jerry’s 79th article of 2020, and the 261st original article of Wang Zixi’s official account.

Series directory

(0) SAP UI5 application developers understand the meaning of UI5 framework code

(1) LAZY loading mechanism of UI5 Module

(2) UI5 control rendering mechanism (this paper)

(3) HTML native event VS SAP UI5 Semantic event

(4) IMPLEMENTATION details of UI5 control metadata

(5) Implementation details of INSTANCE data of UI5 control

(6) The implementation principle of UI5 control data binding

(7) Comparison of the implementation principles of three data binding modes of UI5 control: One Way, Two Way and OneTime

(8) UI5 control ID generation logic

(9) UI5 controls multiple languages (Internationalization, the Internationalization, i18n) support the implementation of the principle

(10) Button control in XML view

(11) Button control and the DOM element behind it

Create an SAP UI5 application that contains only one button control. Use the Elements toolbar in Chrome Developer Tools to view the native HTML code for the button control:

In Jerry’s previous article, learn more about SAP UI5 framework code in one of the series: The lazy loading mechanism of UI5 Module. We have already seen that one of UI5 Button modules, ButtonRenderer, is responsible for rendering the sap.ui.mons.button instance data into native HTML code.

Set a breakpoint in the ButtonRenderer.render function, then F5 refreshes the page, the breakpoint fires, and you can see from the call stack how the RenderManager calls the ButtonRenderer to perform the rendering.

The following is a bit of a mess. The intention is to show which line of code implements each attribute of the button tag in the final HTML rendering source code.

When Jerry first started SAP UI5 development, he learned about the Renderer mechanism and had a question in his mind. How did SAP UI5 know that the button control Renderer was button Renderer? In other words, how is the one-to-one correspondence between SAP UI5 controls and their renderers maintained?

In THE SAP UI5 framework, each type of control maintains its own Metadata, including a getRenderer method that returns the corresponding renderer name for the control.

SAP UI5 control metadata will be covered in a future article in this series.

From the debugger can observe a button control in the metadata, variable _sRendererName maintained the button renderer name: sap.ui.com mons. ButtonRenderer. However, when is this variable assigned?

As you can see from line 42971 below, the control’s Renderer meets the naming convention: < control name >+ “Renderer”, a simple string concatenation operation.

At what point does RenderManager start redrawing controls?

Let’s make a slight change to the button click event handler in the scaffolding application: Each time a button is clicked, call setText to change the button’s text property:

Click on the button and see that buttonRenderer.Render is triggered again.

. The reason is that oButton1 setText will eventually call button on the prototype chain ManagedObject. The setProperty method, this method have an explicit invalidate calls.

If you forgot the prototype chain design of SAP UI5 controls, check out Jerry’s previous article: Learn more about lazy loading of UI5 Modules in SAP.

Control.invalidate is calculated internally to determine which areas of the current page need to be redrawn, and RenderManager is called to redraw.

Let’s take a quick look at control drawing in Angular. Take the Product Carousel display control of SAP Spartacus as an example: there are 12 best-selling products in total, which are displayed on multiple screens in the turntable control, with several products on each screen. You can switch between screens by using the left and right arrows provided by the control. The small red dot at the bottom of the turntable indicates the number of screens the current turntable displays.



SAP UI5 also implements a similar composite Control, officially called Custom Control.

The HTML code for the Spartacus product carousel control is represented as the tag CX-product-Carousel, internally reusing another custom tag cX-Carousel:

The product information currently displayed on the screen is displayed by the three divs in the CX-Carousel tag whose class is Item Active.

This custom Product rotation control is implemented through the Angular Product Carousel Component in Spartacus.

The layout implementation of the Product Carousel Component takes the Component properties items, t, T, L, e, title and title as input. Pass in another Component, CX-Carousel, with the title attribute as the tag rendering of the turntable, and the data source of the turntable as the title rendering of the turntable, and the data source of the turntable, The title of the turntable is rendered from the items property passed in, and the data source of the turntable is from the items property passed in.

Because CX-Carousel is a reusable control, in addition to displaying product carousel, it can also be used to display carousel displays for other similar entities, such as discount carousel, promotional carousel, and so on. So, in addition to passing items and titles and title and title to cX-Carousel, you also need to tell cX-Carousel what layout logic is used to display each element of the carousel inside the carousel.

Therefore, line 9 below defines a template with id #carouselItem through the tag, passing this ID along with cX-Carousel. This way, when the turntable control runs, each product data stored in the turntable data source Items $is drawn according to the layout defined by this template.



When Jerry learned the design of Spartacus, he felt very friendly, because its design idea was consistent with SAP UI5 List Binding(Aggregation Binding).

The SAP UI5 official website explains a List Binding example:

There is a companies JSON array:

Pass the companies path to the List control, complete the specification of the data source, and inform the List to draw the data in the Companies array. What data is being rendered? List does not know, we need to define the items child control, such as the title property of the child control, display JSON array name field, description property, display JSON array city field. List dynamically creates a number of items child controls based on the number of company nodes in the JSON array.

The SAP UI5 Items child controls play the same role as the template with the id #carouselItem defined on the Spartacus Product carouselItem control page described earlier in this article.

Thanks for reading. The next article in this series: HTML native events VS SAP UI5 Semantic events.

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