Skip to Content
Author's profile photo Former Member

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!

/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 😀

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo sudarshan rajamdavid
      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

      Author's profile photo Former Member
      Former Member
      Blog 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 🙂

      Author's profile photo sudarshan rajamdavid
      sudarshan rajamdavid

      Hi Ji wu,

      Its the exact question? please elaborate.

      Thanks in advance,

      sudarshan

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Sorry Sudarshan for the delay response, it's kinda busy around here recently, I finally get the chance to sit down and add the answer to your question in my github version of this post, check it out 🙂

      https://github.com/j1wu/openui5-source-code-study/blob/master/walkthrough-dive-in/step3.md#how-does-lazy-require-work

      Author's profile photo sudarshan rajamdavid
      sudarshan rajamdavid

      Hi ji wu,

      Thanks for ur marvelous job.

      Thanks a lot brother.

      Sudarshan