SAP UI5框架自学教程

As an application developer using SAP UI5, when I deal with some issues reported by end users, it turns out that I cannot find out the root cause without debugging UI5 framework code.

Why an UI5 application developer needs to study framework code

Normally an UI5 application consists of various controls provided by UI5 library. If you just want to use a certain control and make it work in your application, it is enough for you to just go through the control API document, play it around in UI5 demokit. But if you meet with issues with the control, or you would like to know how the control is manipulated by UI5 framework to write a more robust and more efficient application, it is then inevitable that you need to dive into the UI5 framework source code.

During my struggle against customer issues during this year, I gained some experience how to debug UI5 framework code. I would like to share them with you here. Thus I write this tutorial, using the more simple button control for example, to illustrate how to thoroughly understand this control, together with theinvolved framework code in an step-by-step way.

Another benefit of studying UI5 framework code is, since the code are written by JavaScript veterans, by being familiar with those code everyday, you can learn how to program JavaScript in a more robust, elegant, generic, and efficient way, to upgrade your JavaScript skills.

Since all of the knowledge introduced here is gained through the debugging on my own, so if you find anything wrong within this tutorial, please do point it out and I will correct it.

The content of this tutorial

Part 1 UI5 module lazy load mechanism

You run UI5 application in Chrome and you observe lots of JavaScript files loaded in the network tab of Chrome development tool. And you wonder who triggers their download. For example, as long as you have used UI5 button control, you will see Button.js downloaded. Why? See answer here.

Part 2 Control renderer

You have used UI5 button control, and you find in Chrome development tool that it is drawn as “button” tag in generated html page. However you never declared any native html tag in your application, where does it come from?

You assume it is Framework which does this trick, and you want to know more: when and where this button tag is generated by who? See answer here.

Part 3 Native html event VS UI5 semantic event

If you have some basic html knowledge, you will probably know the “click” event of button tag. However, after you go through the UI5 button API document, you find that its available event it exposes for your application to register is not “click”, but “press”. Would like to know why? See answer here.

Or if you would also like to know something about event handling design of other popular framework like Angular, you can read this blog: Compare Event handling mechanism: SAPUI5 and Angular.

Part 4 control metadata

You have one variable which points to a button control instance, for example “oButton”. You type “oButton.” in Chrome console, and you will see lots of functions in auto-complete list. You want to know by which rules are these functions chosen to display here, and where do they come from? See answer here.

Part 5 control instance data

Take button control’s text property for example, you use getText and setText to read and change it. Take another property, width, for example, can you imagine whether the getWidth and setWidth are implemented in a similar way? See answer here.

Part 6 control data binding

Data binding is an important concept in MVC world. It should never be the first time you touched this concept. You know for example after you bind the text property of control to a field of a JSON model, in the runtime the control will display the value in that JSON model field accordingly. However have you even thought about how UI5 framework implements this for you under the hood? See answer here.

Part 7 Implementations for different binding mode: OneWay, TwoWay, OneTime

You probably see these different mode in SAP help document and you learn their different use scenarios through the documentation, and perhaps you never explicitly specify the binding mode in your application, that is, you use the default one.

So, what is the default binding mode? How does UI5 framework treat each binding mode differently?

See answer here.

Part 8 Control ID

You create a button control in the sample application and use Chrome development tool “inspect element” function to get the id of generated button tag and you get its id “__button0”. You would like to know where does this prefix “__button” and the zero come from? See answer here.

Part 9 Control internationalization support

If you use Chrome development tool to observe a standard SAP Fiori application running under debug mode, you probably could observe there are several files like i18n_en.properties downloaded. What are usage of these files? See answer here.

Part 10 Button control in XML view

In all previous nine blogs so far, you directly create button control via JavaScript code – you are the god who determines the born of button control. How about the control defined in xml view? Since you never use JavaScript code any more to explicitly create it, it makes sense that UI5 framework will act as God this time. You want to know in which code the button control is created by framework? See answer here.

Part 11 Button control and its underlying DOM node

You want to change the text color and the background color of button control, however there is no functions such as setText or setBackgroundColor available. Would like to know how to achieve? See answer here.