step3.md

Welcome to my SAPUI5 Walkthrough, And Dive In blog series, where I’ll not only walkthrough the tutorial, but dive in, to explore the magic behind SAPUI5. Buckle up and sit tight, it's gonna be a bumpy ride as I’m no expert in any way shape or form, just a humble learner who loves coding and likes to get to the bottom of things =。=

This time, we’ll dive in to find out how a UI5 control (sap.m.Text) is created, let's talk the steps involved from a very high-level:

1. How does lazy require work?
2. How does a control module get requested, loaded and executed?
3. How does a control object get created?
4. How does a control object get turned into HTML?

Break point, checked, alright!

[1]

How does lazy require work?

Before dive into the code, let’s take a quick look at the network tab of the Chrome developer tool, the sap.m.Text module has not yet been loaded, if the module is not there at this moment, how can we create a new instance out of it? (the screenshot number is out of order here, because this section was added after the post published) [23]

Yet let's ask a different question, once we click the ’step into’ button in the Chrome developer tool, we get taken to line 27,166, the dummy constructor inside of the lazyRequire method, which loads the class on demand, at what point this dummy constructor get attached to our sap.m.Text class? And what's the deal with lazy require? [24]

In order to answer that, let’s take a step back, back to the page initial loading time, that’s when the loadLibrary method called, remember the ‘data-sap-ui-libs=“sap.m”’ we put in the index.html bootstrap? This is when the sap.m library get loaded. [25]

Let’s take a look at what’s inside of the sap.m.library.js, we see all the sap.m controls put in a array in a object passed to the initLibrary method. With what we learned in step 6, we know that this method will be called later when the module get executed. [26]

When it's called, it then calls the lazyRequire method.

[27]

Which attaches a dummy constructor for the sap.m.Text class, the dummy constructor method will be called when we try to create a new instance of the class.

[28]

Alright, with that out of the way, let's continue with jQuery.sap.require("sap.m.Text")

How does a control module get requested, loaded and executed?

First, we’ll need to require the sap.m.Text module. We talked about how does modules work in detail in step 6, we'll revisit the process here. I recommend you to read the other post if you ever find the autopsy here is a bit confusing. [2]

jQuery.sap.require leads to requireModule.

[3]

A sync ajax request loads the content of Text-dbg.js, sets it to module.data, and also, sets module.state to LOADED. [4]

If we switch to the network tab of Chrome developer tool, we’ll find Text-dbg.js had been downloaded. [5]

With module loaded, we’ll then execute the module. [6]

We set module state to EXECUTING first, then, have _window.eval to have module data executed. [7]

Once done executing the module, its state will be set to READY, and its data will be set to undefined. [8]

How does a control object get created?

With module ready, we’ll continue creating our Text control, first, to create a shell object oInstance, then, call the constructor method on it. [9]

since Control extends from Element, the constructor method of Element will be called next. [10]

And Element’s upper chain, the constructor of ManagedObject will also be called. [11]

In the ManagedObject constructor method, we’ll register the object in the core. [12]

Which leads to registerElement. [13]

Which is essentially add our element to the global this.mElements map. [14]

After registration, we’ll have settings ({text: “Hello World”} in our case) applied. [15]

Which is essentially to call the setText method on “Hello World”. [16]

With that, the shell object oInstance is now filled with our Text control properties, and returned. That's all good, but the browser knows only how to render HTML not JavaScript object, what the framework gonna do about it? [18]

How does a control object get turned into HTML?

Once the document is ready, renderPendingUIUpdates will be one of the tasks to be finished. [19]

Who knows how to render our Text control? The framework will get the answer from the control metadata. [20]

Then the renderer sap.m.TextRenderer module will be loaded, same old, same old. After that, the render method will be called upon it, with our Text control passed in as its parameter. [21]

Lastly, if you take a look at what happen within the render method, you'll see the familiar HTML elements being added to construct the HTML representation of the Text control, that's what will be rendered by the browser. [22]

The End.