Quantcast
Channel: SAPUI5 Developer Center
Viewing all articles
Browse latest Browse all 789

SAPUI5 Walkthrough, And Dive In - Step 3: Controls

$
0
0

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 the control is 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!

01.png

 

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

02.png

 

jQuery.sap.require leads to requireModule.

03.png

 

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

04.png

 

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

05.png

 

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

06.png

 

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

07.png

 

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

08.png

 

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

09.png

 

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

10.png

 

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

11.png

 

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

12.png

 

Which leads to registerElement.

13.png

 

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

14.png

 

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

15.png

 

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

16.png

17.png

 

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

18.png

 

 

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


Viewing all articles
Browse latest Browse all 789

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>