Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
JerryWang
Advisor
Advisor
3,384

Tutorial Index - how I do self study on the following topics



In previous part, the following topics are discussed:




  1. The module concept in UI5

  2. When, where and how the button module is loaded by UI5

  3. How a button instance is initialized in the runtime


In this part, I will explain how a button is rendered in Fiori UI.



Content of this blog


How is native html code for Button control generated


Use Chrome Development tool to inspect the displayed button in Fiori UI, you can find the native html source code for it.



In previous part, we identify another js file to look into, ButtonRenderer.js. Set the breakpoint on the render function, and it will be triggered and render the html native code you have found in Chrome development tool.



Below is a simple graph to demonstrate which line of js code in ButtonRenderer.js has generated which html code.




Button control and Button Renderer


Here is another question: How does UI5 framework know the ButtonRenderer.js is responsible to render the html native code of Button.js?


The metadata of Button does the trick here.



getRenderer function returns the responsible renderer name which points to ButtonRenderer.js:



And when is this this._sRendererName filled?


this.getName() returns the value stored in this._sClassName, "sap.ui.common.Button". So the final renderer name is CALCULATED by just appending the postfix "Renderer".



In the next blog, I will study the event handling of Button control: semantic event in Button control.