As a Fiori developer it is essential to not only learn how to use a given Fiori control provided by UI5 control library, but also understand how the control orchestrates with UI5 runtime under the hood, which makes us more calm when we deal with control issues. In the series of the tutorial I just use the button control ( sap.ui.commons.Button ) as example to demonstrate my self-study approach. If you have better one, please kindly share with me.
My favorite study approach is, as always, debugging. The first task is to identify what needs to be debugged. If you choose a complex Fiori application with a tons of control and the button is just one among them, you can easily get lost during the debugging. My preferred style is to create a most simple Fiori application containing exactly the only button control.
Prerequisite for you to perform the exercises this tutorial
You have to switch on UI5 debug mode via combination key “shift+alt+ctrl+p”, in order to expected files downloaded from Chrome network tab:
Part1 – this blog
Part2 – Control renderer
Part3 – Html native event VS UI5 semantic event
Part4 – Control metadata
Part5 – Control instance data – how are function setXXX() and getXXX() implemented
Part6 – Control data binding under the hood
Part7 – Implementations for different binding mode: OneWay, TwoWay, OneTime
Part8 – Control ID
Part9 – Control internationalization support
Part10 – Button control in XML view
Part11 – Button control and its underlying DOM
Content of this blog
Step1 – create a sample application with only one button control
You can find the source code how to create a button and register press event handling from this link.
I just embedded the code into an html page so the final page for debugging is listed below:
Step2 – Find out what needs to look into: Button-dbg.js & ButtonRenderer-dbg.js
Run this simple application in your webserver and you see Button as expected. In development tool, Sources tab, you see lots of js and css files are loaded by framework automatically. To be exact, they are loaded by sap-ui-core-dbg.js if you switched on debugger mode.
– Line 16514: mark module state as LOADING
– Line 16517: determine whether we need to load the normal version of js, or the debug version. The flag for debug mode is stored via the field sap-ui-loaddbg in global object window.
– Line 16520: get url of module converted from module name
– Line 16525 use AJAX to load the module
Step4 – how the button instance is created
Basically speaking the button instance is first created via factory method newObject as a template and then enriched with the user settings passed via arguments object.
