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

The source code world is waiting. Ready? Go!

Questions answered in the following section:

– Where does the framework pick up our custom defined controller name?

– How does the framework load in our controller code and execute it?

In order to explain how does a controller get created, we’ll need to get back the the initViewSettings process (please refer to my last post for detail information on how we get to this point), the XML view root nodes will be parsed, that’s what the screenshot below is doing, and also, that’s also where the framework picks up our controller name, this is the starting point of this post.

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

After that, it moves on to init controller with the fnInitController function, where createAndConnectController will be called with the view object, and the view configuration object (settings) as its arguments.

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

It calls the factory function.

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

Within the factory function, it first requires the controller by its name.

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

It loads in our code (for module loading and executing, please see my first and second post for more detail information).

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

Then it executes it.

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

By calling window.eval.

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

Questions answered in the following section:

– How does sap.ui.define work?

– How does extend method work?

– What does the prototypical inheritance really look like between sap.ui.core.mvc.Controller (parent) and sap.ui.demo.wt.controller.App (child)?

With the module executed, it takes us back to App.controller.js

/wp-content/uploads/2015/11/08_835517.png

Next, we dive into the sap.ui.define implementation, sap.ui.define defines a Javascript module with its name, its dependencies and a module factory function.

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

It first shifts parameters, then converts resource path (sap/ui/demo/wt/controller/App.controller.js) to module name, then declares the module and assigns it to variable oModule.

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

Then it calls requireAll to resolve the dependencies, we only have one here, the sap.ui.core.mvc.Controller

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

Its invokes the callback function on aModules, which is a array that holds one item, the constructor of sap.ui.core.mvc.Controller

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

This is what happen at the end of the callback.

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

The vFactory is our controller factory


  
function (Controller) {

   “use strict”;

   return Controller.extend(“sap.ui.demo.wt.controller.App”, {

      onShowHello : function () {

         // show a native JavaScript alert

         alert(“Hello World”);

      }

   });


}

vFactory.apply(window, aModules) is essentially:


ControllersConstructor.extend(“sap.ui.demo.wt.controller.App”, { ... });


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

The extend creates a new subclass of class sap.ui.core.mvc.Controller with name sap.ui.demo.wt.controller.App and enriches it with the information contained in oSCClassInfo, which calls Metadata.createClass method, which returns the fnClass in the end.

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

Let’s take a look at the prototypical inheritance between the parent “class” sap.ui.core.mvc.Controller and the child “class” sap.ui.demo.wt.controller.App, ( apologise for my bad drawing : )

/wp-content/uploads/2015/11/16_835525.jpg

To verify it in the console, looks like that’s what we expect.

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

That concludes the sap.ui.define method, our module is now successfully defined. (module state will be set to 3 – READY)

/wp-content/uploads/2015/11/18_835527.png

Questions answered in the following section:

– How does the factory function sap.ui.controller work?

– How does view connect to controller and controller connect to view?

Now we have our controller “class”, we’ll need the controller instance, and here’s how the framework does it. It calls the sap.ui.controller, the factory function, which creates an instance of an already defined controller class.

/wp-content/uploads/2015/11/19_835528.png

With oController, the controller instance created, it then bounce back to createAndConnectController (the 3rd screenshot as you may recall) where the view is connected to the controller, and controller is connected to the view.

/wp-content/uploads/2015/11/20_835529.png

Once connected, it returns the view and place it on the page. (you can find more detail information from my last post about what exactly happen between createAndConnectController and view is returned).

/wp-content/uploads/2015/11/21_835530.png

/wp-content/uploads/2015/11/22_835531.png

The end 🙂

To report this post you need to login first.

3 Comments

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

Leave a Reply