Skip to Content

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!

/wp-content/uploads/2015/11/01_823824.png

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

/wp-content/uploads/2015/11/02_823825.png

jQuery.sap.require leads to requireModule.

/wp-content/uploads/2015/11/03_823829.png

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

/wp-content/uploads/2015/11/04_823830.png

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

/wp-content/uploads/2015/11/05_823831.png

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

/wp-content/uploads/2015/11/06_823832.png

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

/wp-content/uploads/2015/11/07_823833.png

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

/wp-content/uploads/2015/11/08_823834.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.

/wp-content/uploads/2015/11/09_823835.png

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

/wp-content/uploads/2015/11/10_823836.png

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

/wp-content/uploads/2015/11/11_823837.png

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

/wp-content/uploads/2015/11/12_823838.png

Which leads to registerElement.

/wp-content/uploads/2015/11/13_823839.png

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

/wp-content/uploads/2015/11/14_823840.png

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

/wp-content/uploads/2015/11/15_823841.png

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

/wp-content/uploads/2015/11/16_823842.png

/wp-content/uploads/2015/11/17_823843.png

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

/wp-content/uploads/2015/11/18_823847.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 😀

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. sudarshan rajamdavid

    hi Ji Wu,

    /wp-content/uploads/2016/01/code_877699.gif

    In this step where does I write the code. please elaborate this part, if possible.

    otherwise please suggest me. what i have to do get the clarity on this walkthrough concept.

    please reply.

    thanks,

    sudarshan

    (0) 
    1. Ji Wu Post author

      Hello Sudarshan,

      “how does the framework know to require the ‘sap.m.Text’ module at line 27168?”, is that what you’re asking? Hmm, good question, I’ll update the post later to explain it 🙂

      (0) 

Leave a Reply