Skip to Content
Author's profile photo Jerry Wang

How I do self-study on a given Fiori control – part 2

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.

/wp-content/uploads/2015/10/clipboard1_816458.png

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.

/wp-content/uploads/2015/10/clipboard2_816461.png

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

/wp-content/uploads/2015/10/clipboard3_816462.png

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.

/wp-content/uploads/2015/10/clipboard4_816463.png

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

/wp-content/uploads/2015/10/clipboard5_816464.png

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”.

/wp-content/uploads/2015/10/clipboard6_816465.png

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

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.