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 =。=

Let’s kick off our journey with Step 2: Bootstrapof the walkthrough tutorial.

/wp-content/uploads/2015/10/01_820895.png


Let’s take a closer look at the process of loading and initializing SAPUI5 (aka bootstrapping) via debugging to find out how does the function we passed in to attachInit method get executed by the SAPUI5 framework.

Alright, we’ll go straight to the implementation of the attachInit method.

It is defined in sap-ui-core.js which we included in our index.html page, when it’s called, it pushes our function into the array this.aInitListeners.

/wp-content/uploads/2015/10/02_820896.png

And the this._executeInitListeners() method is where our function is actually being called, it loops through all the functions in the this.aInitListeners array, then have them to be called.

/wp-content/uploads/2015/10/03_820897.png

And how’s the this._executeInitListeners method called? Here’s my findings after debugging:

As you can see in the screenshot below, we create a new instance of the Core.

/wp-content/uploads/2015/10/04_820898.png

In the constructor method of the Core, these methods will be called:


that.handleLoad() // called upon document ready



this.init()



this._executeInitListeners() // where our function is actually being called as I mentioned above


And how’s new Core().getInterface() called? That’s where things get really interesting, to answer this question, we’ll be able to take a peek at how SAPUI5 define it’s module, journey continues…

During the sap-ui-core.js loading process, we focus on two methods that will be called:


sap.ui.predefine(sModuleName, aDependencies, vFactory, bExport)
//...
jQuery.sap.require(sModuleName).


We first predefine the ‘sap/ui/core/Core’ module:


sap.ui.predefine('sap/ui/core/Core', aDependencies, vFactory, bExport) // registers core module to the global mModules, and sets module.state to PRELOADED


/wp-content/uploads/2015/10/05_820899.png

Since the factory function is a callback, we’ll come back to it later, let’s move on to jQuery.sap.require(‘sap.ui.core.Core’), that’s where we’ll be diving in (I extracted the essential method / function calls and listed them below companied with screen captures in chronological order to reveal the framework magic from a high-level)


jQuery.sap.require('sap.ui.core.Core') // ensures that the given module is loaded and executed before execution of the current script continues



ui5ToRJS('sap.ui.core.Core') + '.js' // converts 'sap.ui.core.Core ' to requireJS module name syntax 'sap/ui/core/Core.js'



requireModule('sap/ui/core/Core.js') // sets module.state to LOADED



execModule('sap/ui/core/Core.js') // sets module.state to EXECUTING



sap.ui.define.apply(sap.ui, module.data) // calls sap.ui.define with module.data as argument


/wp-content/uploads/2015/10/07_820907.png


sap.ui.define('sap/ui/core/Core’, aDependencies, vFactory, bExport) // defines a Javascript module with its name, its dependencies and a module value or factory.


/wp-content/uploads/2015/10/08_820908.png


requireAll('sap/ui/core/', aDependencies, callback) // resolves dependencies


/wp-content/uploads/2015/10/09_820909.png

/wp-content/uploads/2015/10/10_820913.png

Now, we got finally took back to the factory function with all the dependencies in place, and by the end of it, the core instance will be created, and with its interfaces returned as the Core module content, the end 🙂

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

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply