SAPUI5 walkthrough step 3 – controls, dive in – how does a control get created?

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 does a control get created, which consists of two parts:

– How the sap.m.Text module is requested, loaded and executed.

– How a simple sap.m.Text control is created.

Break point, checked, alright, let’s dive in!

First, we’ll need to require the sap.m.Text module.

jQuery.sap.require leads to requireModule.

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

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

With module loaded, we’ll then execute the module.

We set module state to EXECUTING first, then, call the _window.eval to have module data executed.

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

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

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

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

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

Which leads to registerElement.

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

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

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

With that, the shell object oInstance is now filled with our Text control properties, and returned, the end 🙂

If you want to dive even deeper on UI5 controls, then you dont wanna miss Mr. Jerry Wang’s A Tutorial how I do self-study on a given Fiori control and UI5 framework code behind series, enjoy, happy coding 😀