In previous part, the following topics are discussed:
In this part, I will explain how a button is rendered in Fiori UI.
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.
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
11 | |
10 | |
10 | |
9 | |
8 | |
7 | |
7 | |
7 | |
7 | |
6 |